界面的語言——圖標與文案的二重奏

　　文案在界面設計中的重要性不言而喻， 但如此重要的部分卻仍然沒有專屬的職位不得不說有一些遺憾。今天特別結合自己這段時間的工作總結和之前編譯過的一篇文章來談一談“文案”(Copy-writing)的重要性。

　　Facebook的“喜歡”和Google的“+1”間的區別咋看起來微不足道， 最終卻足以影響到用戶的行為和選擇。使用合適的文字來定義控件是界面設計中最重要的一環。 傑森.佛萊德(Jason Fried)早在“現實點”(Getting Real) 一書中就闡述了文案的重要性， 但在5年之後文案仍然是界面設計中常見的“阿喀琉斯之踵”。

　　明確第一， 巧妙第二

　　合理的用詞可以讓你的設計更明晰。 圖標就像一匹很難被馴服的烈馬：溫順時可以自如的表達用意和動作，一旦暴躁就難以駕馭甚至傷害用戶。一個放大鏡可以表示放大或搜索; 一個向下的箭頭可以表示下載， 保存或簡單的“下落”;一個向後的箭頭並不能明確的告訴用戶修改是否會被保存;X 在一個用戶看來可能是關閉，另一個用戶卻會理解為取消， 甚至在有的用戶眼裡表示刪除。所以在創建圖標時，設計師應該盡量遵循擬物的原則——借助真實生活中對等的動作或物體以最明確的表達操作。

　　丹麥的設計師Peter Steen Høgenhaug仔細研究了一些知名的網站和應用中表示“加入鏈接”動作的圖標， 你可能會認為它們的設計都有規可循， 但結果卻並非如此。

　　就像你看到的一樣， 大多數網站管理(CMS)系統和應用都在圖標中使用了鏈條圖案。 唯一與眾不同的就是Facebook – 使用一個記事貼和大頭針， 而Peter認為這比鏈條還要不靠譜。 在接下來的一項測試中， 他專門安排了一系列不同的任務讓實驗對象完成， 其中的一項就是添加一個鏈接。實驗還包括其它一些常用的圖標：

　　一部分測試對象將鏈條圖標理解成“把東西綁定到一起”或“把不同元素連接起來”。 這麼理解並不算錯， 但問題是他們並不真正了解綁定到一起的“東西”到底是什麼， 所以圖標按鈕並不能像文字按鈕那樣准確的表達意思。 例如， 測試對象針對“鏈接2”地球圖標按鈕的理解就有“你能訪問互聯網”， “搜索”或 “上傳到互聯網”等許多不同的解釋。

　　總的來看， 只有35.29%的實驗對象能正確理解鏈條圖標， 而其中只有25%的對象能理解“鏈接2”。 雖然實驗沒有設定代表可用性的最小值， 但顯然25%在任何情況下都意味著糟糕的用戶體驗。 一位實驗對象在訪談中甚至問道：

　　“為什麼不用WWW呢? 地球人都知道的!”

　　的確， 像他說的那樣可以將“WWW”理解為“訪問互聯網”或類似動作， 在後來的試驗中也證實每個實驗對象都能正確理解“WWW”文字圖標。 可能在許多應用和設計中它不是最佳的解決方案， 但是在實驗裡它是用來表達鏈接的最佳選擇。

　　明確第一， 巧妙第二

　　如同上面的例子一樣， 盡管你可以在視覺設計上嘗試各種信封和箭頭的組合， 但卻沒有什麼能比“發送消息”這四個字更能直觀的表達這個動作的含義。 這並不是說以圖標控件為主的界面就一定不好， 長遠來講， 它們為了界面的美觀而稍稍犧牲了用戶初次使用時的體驗流暢度和一致性。而這正是你作為一個設計師需要根據場景和預算做出的艱難決斷。

　　當我在設計一個控件按鈕時就遇到了這樣的情況： 某個特定界面中按鈕的操作只有用文字才能最好的表達， 但圖標卻可以使界面更美觀和統一。 考慮到這個項目周期所剩時間不多， 我們給出了兩個方案， 先使用最直觀的文字按鈕， 在以後的迭代中如果視覺上能做出美觀和巧妙的圖標我們再沿用第二套方案使用圖標按鈕。 因為好的圖標不可能一撮而就， 它們不但需要設計師靈感的爆發還需要所謂的那麼一點點運氣 =P。

　　從用戶角度出發， 真正以用戶為中心

　　在設計QQ浏覽器for Mac的書簽同步交互時， 因為用戶登錄後書簽欄上的本地書簽會被網絡書簽替代。 對於本地書簽較多或使用過一段時間QQ浏覽器後才去注冊或登錄QQ賬戶的用戶來說， 原來熟悉的書簽欄出現變化必定會給使用體驗帶來不好的影響。 我們希望在此時為用戶提供一個提示讓他們可以將本地書簽文件合並到網絡書簽中。這麼一個簡單的小黃條提示， 其文案卻差點讓我抓破了頭皮：

　　上面只是當時文案備選方案的一部分， 對設計師自己來說有些可能會把問題解釋得很清楚和明確， 但我們在原則上又不想強調本地書簽和網絡書簽的區別從而增加用戶認知負擔。(有的同學可能會問， 像Chrome那樣， 用戶不管是用本地還是網絡書簽都是一樣不好嗎? 很遺憾， 由於各種原因， 目前的QQ浏覽器還不會采取Chrome的同步邏輯)此時明確第一， 巧妙第二的原則還適不適用呢? 我們換一個角度， 從用戶本身出發吧!

　　在這種情況下， 用戶看到的就是原本書簽欄上的收藏消失， 取而代之的是網絡書簽。這時用戶可能會Panic， 我的書簽哪兒去了!? 之前的文案都不能很好的安撫用戶， 或許還會帶來更多的疑問“什麼是網絡/本地書簽?” “我想使用本地書簽， 可以嗎?”等等…

　　再來看一下現在QQ浏覽器所使用的文案， “登陸後看不到本地書簽了? 您可以將本地書簽合並到網絡。” 這可能仍然不是最好的解決方案， 但是和之前的文案相比， 這麼寫在用戶最需要安撫時給了他們一顆定心丸： 熟悉的書簽不見了? 不用急， 我們了解並且還提供了解決方案， 將本地書簽合並到網絡， 這麼一來， 大部分用戶就會選擇“合並”， 合並後在網絡書簽中也會包含原來的本地書簽文件了。 這也達到了之前的設計目標。

　　不僅僅是文字

　　Ogilvy (英國廣告界大亨) 曾經說過“當你寫下標題時， 你已經花掉一美元裡的80美分了”。 這句廣告界中的名言在界面設計中也同樣適用。 相信大部分閱讀這篇分享的設計師都知道Dribbble。我並不是一個圖像設計師， 所以我並不能確切的說出某些作品光源運用的好壞， 那些地方應該調整漸進等等， 但當我看到漂亮的按鈕或下拉菜單， 甚至一些我從來沒有在網上見過的UI元素時。 第一想法往往是這些作品的如果用在某個界面中意義是否明晰。 控件元素例如： 按鈕， 下拉， 導航， 標簽或圖標等都需要能被用戶清晰， 明確的理解。當我浏覽Dribbble尋找圖標靈感時常常會問： “這個作品能否在界面中清楚的表達動作， 含義或幫助?”

　　最後， 如果文案也有專門的DRIBBBLE =]

　　參考文章來自： http://contrast.ie/blog/the-language-of-interfaces/#more-2402

　　(本文出自Tencent CDC Blog，轉載時請注明出處)