微文案(Microcopy)的魔力:寓愉悅與細節之中

第一次聽說 Microcopy (微文案)這個詞是在一次設計分享會上。可能有人沒聽說過,但其實大家都見過。最簡單的比如你在登錄一個應用輸入了錯誤的密碼,那麼輸入框右邊多半會出現一行紅色的文字提示你「密碼錯誤 」,這樣的短小提示文字就是微文案了。微文案是設計細節的一個重要的部分,文本作者 John Saito (Dropbox 的設計師)從微文案入手,其實是闡釋了設計細節的重要性。

一想到那些我喜歡的產品,我就會發現它們的一個共同特徵:寓愉悅於細節之中。

有個我天天光顧的咖啡店,每次我點了一杯飲品,他們都會在上面拉一層有意思的圖形。可能是一片葉子,也可能是一個天鵝。這不會讓飲品味道更好,但確實會讓我會心一笑。

這種讓人喜歡的小細節可以說明他們為自己做的事裡面注入了很多感情。雖然只是一個細節,一個形狀,卻會影響到我對他們產品的看法。

在設計裡面,一個會被大家忽略的設計細節就是微文案,這種引導性的小段文字。在應用和網站上,微文案包括按鈕上的指示,錯誤提示和提示文字。

如果用對了,微文案可以為設計帶來魔法般的效果。以下是如何讓微文案給設計添彩。

1. 人性化的表達

在我住的地方有一家雜貨超市,裡面有一個自助結賬通道。但可能是我比較守舊吧,我還是喜歡去排哪怕長長的隊去售貨員那裡結賬,因為我喜歡跟真人交談。

文字永遠都不能達到與真人面對面交談的效果。但是好的微文案卻可以表明產品是真人做出來的。如果你的產品聽起來說的是人話,那麼用戶就會更容易信任你的產品。對你的用戶敞開心扉,用戶就會對你敞開心扉。

下面是一些聽起來非常人性化的產品:

PH 文案總體非常溫暖。標題大大的「歡迎來到 Product Hunt 」,謙虛的「寒舍 」以及其他一些聊天語氣詞配上一隻溫暖的貓和笑臉,整體讓人感覺很溫馨和真誠。

Vimeo 的文案顯示出他們是一群真人。注意到文案里用的「我們 」了嗎? 電腦不會說「我們 」,真人才會。

大眾點評的微文案用接地氣的口吻與用戶對話,拉近了用戶距離。

2. 給你的設計加點驚喜(意外)

給人帶去喜悅的一個方法就是製造一點意外。亞里士多德曾經說過「幽默的秘訣就在於意外 」。這個思想同樣也適用於微文案。

「 微文案討人喜歡的秘訣在於意外 」。

------ 某個寫這篇文章的人

有時候,你只需要一個讓人會心一笑的句子就可以了。考慮放在一個產品設計裡面安全的位置,比如:

  • 載入頁面

  • 成功提示
  • 錯誤提示
  • 一個案例
  • 用戶拉新引導
  • 空白狀態

等等。

一個簡單的例子就是知乎。

知乎的數據載入出現問題的時候,你們會看到什麼?

「 伺服器提了一個問題,我們正在緊張地撰寫答案 ...」

一方面讓用戶知道出了什麼問題,另一方面與知乎問答型社區的性質緊密地結合在了一起,而且,還很幽默,有種意外又好玩之感。

在知乎其實隨處可見這種小細節。大家開動腦筋想想就會發現很多。

再看看國外一些好的微文案設計:

在你等待載入的時候,Zeplin正在煮咖啡...

Tumblr 的文案很幽默,同時也非常有幫助。

3. 增強用戶信心

當我們使用大多數應用或網站的時候,我們的內心其實都有一個目標。可能是想搜尋信息,可能是想在網上買東西,也可能是創造什麼。

一旦這個過程受阻,我們就可能失去信心(或耐心),然後一邊罵網路的娘一邊放棄。

這時候微文案就顯示出它的作用了。在一個多任務的過程中,微文案為每一個步驟進行引導是十分必要的。我們其實都很懶,需要有一些小小的鼓勵讓我們繼續走下去。

有些人喜歡在網上匿名,所以 dribble 會友好地鼓勵你加上真實名字。

有些人可能對揭露自己的生日很敏感,所以 Airbnb 就用愉悅的微文案來讓用戶放心。

Nordstrom 對用戶把商品放進購物車的行為進行了讚揚

4. 帶點個性

上次我聚會結束之後收到了一張感謝卡。卡片的開頭雖然很普通,但主辦人在中間卻提起了我與他共同度過的高中時光,這就會讓我感覺這張卡片是專門為我而設寫的,而不是一張通用的模板只是改了一個收卡人的名字。這時我的好感大增,因為我知道沒有其他人收到同樣內容的卡片。

同樣的思路也可以用於產品的微文案。如果能為某類用戶傳達個性化信息,就可以讓他們感受到自己是被重視的。

當你在 Okcupid 上輸入你的居住地比如倫敦時,就會出現「啊,倫敦 」的提示語,就像以一個在跟你對話的朋友。

另一個例子還有豆瓣。豆瓣的小組可以允許組長自定義組員的稱呼,而不是「成員 」這樣普通而乏味的名稱。比如下面這個小組的所有組員都叫「粉組花朵 」:

5. 為微文案花點心思

你一定想不到,dropbox 光微文案就有 27,000 個句子! 而哈利波特第一部總共也只有 6600 個句子多一點。其實你產品中的微文案比你想像得多,花點心思就能發現許多地方都可以改進。

當你退出的時候,mailchimp 會在瀏覽器頂端跟你說拜拜。

Basecamp 底部有一句每天變化的微文案。

Design/Content conference 網站的 ALT 標籤里的文案也讓人喜歡,比如其中一張圖的描述是「 Eileen Webb 」戴著溫暖方巾朝你微笑。

6. 為文字配上圖片

正如 Dr. Seuss 說過的,圖片和文字就是陰和陽,他們結合在一起產生的結晶比任何一方單獨的效果都好得多。

讓我們看看這方面的例子:

Flicker 用一張輕鬆的圖片來應對糟糕的情況,從而讓用戶在遇到問題的時候能不要那麼沮喪

Hubspot 的錯誤頁面把一顆破碎的心和安慰的話語配在一起,同時也對應了文案里的「我們正在把破碎的部分拼起來 」。

Slack 的文案和火箭完美結合在一起,讓人印象深刻。

需要注意的點:

雖然適當幽默的微文案可以給產品增添色彩,但太多的幽默反而可能會起反作用,所以一定要了解產品的具體情況和使用場景。尤其是不能讓微文案冗長且表意不清。

以下是我的一些建議:

  • 找到產品的聲音。和風格一樣,產品的語言(文案)設計也應該有一個統一的風格,所以在開始寫微文案之前,請先做好文案指導規範。
  • 不要把非常規的微文案放到展示頻率高的地方。如果你的幽默文案是放在了一個用戶每次使用產品都會看到的地方(比如登錄頁面),這種驚喜的效果就沒有了,而且用戶可能會厭煩。
  • 在可能的地方冒險。如果你們是一家小公司,那使用非常規的微文案就會簡單許多。但公司變大了之後,微文案可能會收到更多負面反饋。但是不要害怕嘗試,在可能的地方嘗試冒險,看看用戶的反應。
  • 考慮隨機的文案。如果有些地方可以用隨機展示一些不同的微文案,讓用戶有新鮮感,那也不錯。這可以讓用戶每次都看到不同的東西,同時還能保持一個連貫性。

總之,小的地方可能會影響用戶對你產品的整體印象。所以,不要忽略了細節。

感謝閱讀!

編譯自:The magic of microcopy

封面圖:Nina Strehl

------------------- 我是分割線,同時我也是一顆 Microcopy --------------------------------

歡迎關註:知乎專欄「極光日報」,每天為 Makers 導讀三篇優質英文文章。

我的個人專欄:盒子以外。科技,產品,設計好文。

推薦閱讀:

移動端適配之我見
「譯」網頁設計中的「Do」&「Don』t」
除了 Helvetica ,UI 設計師還應該知道哪些字體?
【平面設計課程】第一階段——AI操作講解及練習 ⑤

TAG:产品设计 | 文案 | 用户界面设计 |