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

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

明確第一， 巧妙第二

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

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

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

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

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

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

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

明確第一， 巧妙第二

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

當(dāng)我在設(shè)計(jì)一個(gè)控件按鈕時(shí)就遇到了這樣的情況： 某個(gè)特定界面中按鈕的操作只有用文字才能最好的表達(dá)， 但圖標(biāo)卻可以使界面更美觀和統(tǒng)一。 考慮到這個(gè)項(xiàng)目周期所剩時(shí)間不多， 我們給出了兩個(gè)方案， 先使用最直觀的文字按鈕， 在以后的迭代中如果視覺上能做出美觀和巧妙的圖標(biāo)我們?cè)傺赜玫诙追桨甘褂脠D標(biāo)按鈕。 因?yàn)楹玫膱D標(biāo)不可能一撮而就， 它們不但需要設(shè)計(jì)師靈感的爆發(fā)還需要所謂的那么一點(diǎn)點(diǎn)運(yùn)氣 =P。

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

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

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

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

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

不僅僅是文字

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

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