界面的語言——圖標(biāo)與文案的二重奏

0 評論 2101 瀏覽 2 收藏 11 分鐘

文案在界面設(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á)用意和動作,一旦暴躁就難以駕馭甚至傷害用戶。一個(gè)放大鏡可以表示放大或搜索; 一個(gè)向下的箭頭可以表示下載, 保存或簡單的“下落”;一個(gè)向后的箭頭并不能明確的告訴用戶修改是否會被保存;X 在一個(gè)用戶看來可能是關(guān)閉,另一個(gè)用戶卻會理解為取消, 甚至在有的用戶眼里表示刪除。所以在創(chuàng)建圖標(biāo)時(shí),設(shè)計(jì)師應(yīng)該盡量遵循擬物的原則——借助真實(shí)生活中對等的動作或物體以最明確的表達(dá)操作。

242

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

1336965973_591

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

351

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

44

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

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

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

 

明確第一, 巧妙第二

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

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

54

 

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

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

64

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

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

74

再來看一下現(xiàn)在QQ瀏覽器所使用的文案, “登陸后看不到本地書簽了? 您可以將本地書簽合并到網(wǎng)絡(luò)?!?這可能仍然不是最好的解決方案, 但是和之前的文案相比, 這么寫在用戶最需要安撫時(shí)給了他們一顆定心丸: 熟悉的書簽不見了? 不用急, 我們了解并且還提供了解決方案, 將本地書簽合并到網(wǎng)絡(luò), 這么一來, 大部分用戶就會選擇“合并”, 合并后在網(wǎng)絡(luò)書簽中也會包含原來的本地書簽文件了。 這也達(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í)常常會問: “這個(gè)作品能否在界面中清楚的表達(dá)動作, 含義或幫助?”

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

mockup

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

來源:騰訊CDC

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!