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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章