文案在界面設(shè)計中的重要性不言而喻， 但如此重要的部分卻仍然沒有專屬的職位不得不說有一些遺憾。今天特別結(jié)合自己這段時間的工作總結(jié)和之前編譯過的一篇文章來談一談“文案”（Copy-writing)的重要性。
Facebook的“喜歡”和Google的“+1”間的區(qū)別咋看起來微不足道， 最終卻足以影響到用戶的行為和選擇。使用合適的文字來定義控件是界面設(shè)計中最重要的一環(huán)。 杰森.佛萊德（Jason Fried）早在“現(xiàn)實點”(Getting Real) 一書中就闡述了文案的重要性， 但在5年之后文案仍然是界面設(shè)計中常見的“阿喀琉斯之踵”。

明確第一， 巧妙第二

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

丹麥的設(shè)計師Peter Steen H?genhaug仔細研究了一些知名的網(wǎng)站和應用中表示“加入鏈接”動作的圖標， 你可能會認為它們的設(shè)計都有規(guī)可循， 但結(jié)果卻并非如此。

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

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

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

“為什么不用WWW呢？ 地球人都知道的！”

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

明確第一， 巧妙第二

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

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

從用戶角度出發(fā)， 真正以用戶為中心

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

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

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

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

不僅僅是文字

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

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

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

來源：騰訊CDC