編者按：新人學(xué)習(xí)圖標(biāo)設(shè)計(jì)，好看固然要緊，但更關(guān)鍵的是圖標(biāo)的識(shí)別性和可用性，今天這篇好文總結(jié)了6個(gè)提高圖標(biāo)識(shí)別性和可用性的技巧，來(lái)收。

　　在早期的計(jì)算機(jī)圖形學(xué)領(lǐng)域內(nèi)，圖標(biāo)只能在有限的范圍內(nèi)被使用。從人機(jī)交互的角度來(lái)說(shuō)，使用圖標(biāo)比使用文本更具有優(yōu)勢(shì)，原因如下：

　　簡(jiǎn)單、醒目、而且友好，可以取代一段冗長(zhǎng)枯燥的描述;

　　隨著屏幕尺寸變的越來(lái)越小，使用圖標(biāo)可以節(jié)省空間，這點(diǎn)是很受歡迎的;

　　使用圖標(biāo)看起來(lái)很舒服，并能增加設(shè)計(jì)的藝術(shù)感染力;

　　最后(但同樣重要的是)，在大多數(shù)應(yīng)用中使用圖標(biāo)，是一種為用戶熟知的設(shè)計(jì)模式。

　　盡管圖標(biāo)有這些潛在的優(yōu)點(diǎn)，但如果設(shè)計(jì)時(shí)不考慮其潛在的負(fù)面影響，也會(huì)常常導(dǎo)致可用性問(wèn)題這篇文章致力于總結(jié)UI中與圖標(biāo)相關(guān)的一系列主要問(wèn)題，并提出一套對(duì)這些問(wèn)題的解決方法。您可以在圖標(biāo)設(shè)計(jì)中使用這些技巧作為起步，來(lái)更好地完成工作。

　　1. 圖標(biāo)應(yīng)傳達(dá)含義

　　設(shè)計(jì)師們有時(shí)會(huì)過(guò)于注重形式，忽略了本身的功能，導(dǎo)致圖標(biāo)難以識(shí)別，這打破了它最重要的圖形意象屬性-圖標(biāo)的傳達(dá)含義功能必須放在首位。按照定義，圖標(biāo)是一個(gè)對(duì)象或動(dòng)作的視覺(jué)體現(xiàn)。如果對(duì)于用戶而言，這個(gè)對(duì)象或行動(dòng)不明確，該圖標(biāo)就立刻失去它的實(shí)用價(jià)值，并成為一個(gè)視覺(jué)干擾。

　　以下是一些在用戶心中享有普遍共識(shí)的圖標(biāo)。(首頁(yè)、打印機(jī)、用于搜索的放大鏡都是屬于這種類型)。

△ 容易辨識(shí)的圖標(biāo)

　　但除了這些例子，對(duì)用戶而言大部分圖標(biāo)的意思仍舊模棱兩可，以為它們還具有不同的含義。例如游戲中心圖標(biāo)，是一組色彩鮮艷玻璃感的圓圈。這代表了什么含義?它與游戲有什么關(guān)系?

△ 游戲中心圖標(biāo)無(wú)法傳達(dá)游戲的概念

　　看看另一個(gè)例子︰ 當(dāng)谷歌決定簡(jiǎn)化 Gmail 用戶界面，把所有功能隱藏在一個(gè)抽象的圖標(biāo)之下，他們得到的是一大堆用戶的幫助請(qǐng)求，比如“我的谷歌日歷在哪里?”

△ 桌面端的GMAIL界面

　　無(wú)論你能理解多少這個(gè)圖標(biāo)的含義和代表的功能，對(duì)初次看到這個(gè)圖標(biāo)的用戶來(lái)說(shuō)體驗(yàn)仍舊可能完全不同。假定用戶都熟悉這些抽象的圖形是一個(gè)普遍的錯(cuò)誤。

　　圖標(biāo)的首要任務(wù)是引導(dǎo)用戶去他們需要去的地方，所以請(qǐng)確保他們能夠?qū)崿F(xiàn)這個(gè)目標(biāo)︰

　　使用 5 秒鐘規(guī)則︰ 如果花了你超過(guò)5 秒考慮一個(gè)合適的圖標(biāo)。這個(gè)圖標(biāo)不太可能有效地傳達(dá)含義。

　　選擇熟悉的圖標(biāo)：用戶對(duì)圖標(biāo)的理解往往基于以前的經(jīng)驗(yàn)。讓自己熟悉競(jìng)品所使用的圖標(biāo)和常用的目標(biāo)平臺(tái)上的圖標(biāo)(現(xiàn)有系統(tǒng)圖標(biāo))，那些是用戶最容易辨認(rèn)的。

　　2. 保持圖標(biāo)的簡(jiǎn)單和示意

　　在大多數(shù)情況中，設(shè)計(jì)圖標(biāo)無(wú)需發(fā)揮創(chuàng)意。別誤會(huì)，并不是說(shuō)創(chuàng)新圖標(biāo)是不好的，但基本功能太花哨的圖標(biāo)可能會(huì)對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響。如果你想展示你的設(shè)計(jì)技能，你可以依靠其他設(shè)計(jì)元素傳達(dá)你的產(chǎn)品信息，同時(shí)保持系統(tǒng)圖標(biāo)的設(shè)計(jì)簡(jiǎn)單、現(xiàn)代、友好。

　　圖標(biāo)設(shè)計(jì)理念的本質(zhì)是減到最簡(jiǎn)形態(tài)-簡(jiǎn)化圖標(biāo)是出于降低學(xué)習(xí)曲線的需要。設(shè)計(jì)應(yīng)確保即使圖標(biāo)在小尺寸更具有可讀性和清晰度，所以精心設(shè)計(jì)的圖標(biāo)應(yīng)該能夠快速辨認(rèn)，一目了然。

　　3. 包含清晰可見(jiàn)的文本標(biāo)簽

　　良好的用戶體驗(yàn)可以定義在很多方面，但衡量標(biāo)準(zhǔn)之一是減少了多少用戶思考的成本。清晰是一個(gè) 好界面的最重要特征。圖標(biāo)的設(shè)計(jì)應(yīng)該幫助用戶毫不費(fèi)力知曉他們要做什么。但是，圖標(biāo)的問(wèn)題在于用戶會(huì)基于之前的經(jīng)驗(yàn)對(duì)每個(gè)圖標(biāo)聯(lián)想出不同的含義。假定用戶(特別是手機(jī)用戶)會(huì)為了探索每個(gè)圖標(biāo)的功能而一一試用是另一個(gè)常見(jiàn)的誤解。

△ 蘋(píng)果郵箱的標(biāo)準(zhǔn)化屏幕。你能準(zhǔn)確的定義每個(gè)圖標(biāo)表達(dá)的含義嗎?

　　事實(shí)上，用戶面對(duì)不熟悉的界面常常有不安全感，而且并不會(huì)到他們的舒適區(qū)域之外探索。在一些特殊的上下文環(huán)境里，為避免幾乎所有圖標(biāo)都可能會(huì)產(chǎn)生的歧義，應(yīng)該在圖標(biāo)周?chē)O(shè)計(jì)一個(gè)文本標(biāo)簽用于清晰表達(dá)其含義。為用戶在點(diǎn)擊前設(shè)定清楚的預(yù)期。

△ 同樣的設(shè)計(jì)中加入了文本標(biāo)簽的圖標(biāo)，文本標(biāo)簽解釋了圖標(biāo)的含義，并提高了可用性

　　UserTesting(一家為開(kāi)發(fā)者提供測(cè)試用戶的創(chuàng)業(yè)公司)進(jìn)行了一系列關(guān)于是否是要標(biāo)簽的測(cè)試，結(jié)果發(fā)現(xiàn)：

　　對(duì)于帶有標(biāo)簽的圖標(biāo)，88%的情況下，用戶輕點(diǎn)圖標(biāo)時(shí)可以準(zhǔn)確地預(yù)測(cè)接下來(lái)會(huì)發(fā)生什么。

　　對(duì)于沒(méi)有標(biāo)簽的圖標(biāo)，這個(gè)數(shù)字下降到60%。對(duì)于那些特殊的圖標(biāo)，這個(gè)數(shù)字只有34%。

　　這里有三個(gè)重要的情境需要考慮：

　　對(duì)于更多復(fù)雜且抽象的功能來(lái)說(shuō)，圖形化的表達(dá)具有局限性。所以他們應(yīng)該使用合適的文本標(biāo)簽來(lái)展示。

　　文本標(biāo)簽應(yīng)該始終保持可見(jiàn)，不應(yīng)讓用戶進(jìn)行任何交互才能看見(jiàn)。有的設(shè)計(jì)師發(fā)現(xiàn)文本標(biāo)簽破壞了他們使用圖標(biāo)想達(dá)到的效果并且使界面變的散亂，往往會(huì)在圖標(biāo)旁添加教程、引導(dǎo)遮罩、彈出提示框。但是用戶會(huì)跳過(guò)這些教程并很快忘記他們剛剛學(xué)習(xí)到的。同樣不要想著依賴鼠標(biāo)懸浮現(xiàn)實(shí)文本標(biāo)簽：不僅是因?yàn)檫@樣需要額外操作，在觸屏上也不太適用。

△ SWARM 應(yīng)用為了教育用戶使用了彈出框提示

　　文本標(biāo)簽和圖形結(jié)合在一起比單獨(dú)使用其中之一效果更好。但是，如果僅能使用其一文本比單使用圖形要好。在表達(dá)清晰度這一點(diǎn)上，文本標(biāo)簽總是更勝一籌。

　　4. 使圖標(biāo)的觸控體驗(yàn)更佳(手機(jī)應(yīng)用)

　　人們使用手指與基于觸控的界面進(jìn)行交互。較小的目標(biāo)和錯(cuò)誤的行為會(huì)使用戶沮喪，所以UI控件要足夠大才能承載手指尖的動(dòng)作。下圖顯示成人手指的平均寬度大約在11mm，嬰兒的是8mm，而一些籃球運(yùn)動(dòng)員竟會(huì)具有超過(guò)19mm的寬度!

△ 人們常常譴責(zé)自己具有“胖手指”。但是即使是嬰兒的手指也會(huì)比多數(shù)點(diǎn)擊目標(biāo)要寬。

　　觸屏對(duì)象的推薦點(diǎn)擊目標(biāo)尺寸大約是7-10mm。以下是蘋(píng)果和谷歌平臺(tái)的規(guī)范(iOS人機(jī)界面規(guī)范和material 設(shè)計(jì))：

　　蘋(píng)果推薦的最小點(diǎn)擊目標(biāo)尺寸為44×44像素。由于物理像素的尺寸會(huì)隨著屏幕分辨率發(fā)生變化，在3.5寸的屏幕上，蘋(píng)果推薦的尺寸是320*480。

　　谷歌則推薦觸控目標(biāo)的尺寸至少為48x48dp。多數(shù)情況下，這些觸控目標(biāo)應(yīng)使用至少8dp的空間分隔來(lái)確保信息密度的平衡性與可用性。無(wú)論屏幕尺寸有多大，一個(gè)48x48dp的觸控目標(biāo)需要9mm的物理尺寸。觸控目標(biāo)包括響應(yīng)用戶輸入的區(qū)域。觸控目標(biāo)的面積往往超過(guò)一個(gè)元素的可視區(qū)域：比如一個(gè)圖標(biāo)形狀是24x24dp，但是加上周?chē)拈g距，共同組成了48x48dp的觸控面積。

△ 圖標(biāo)尺寸：24DP 觸控面積：48DP

　　需要考慮的重要情境：

　　觸控目標(biāo)之間的有效間距。設(shè)置觸控目標(biāo)間的最小距離是為了防止用戶引起錯(cuò)誤的操作。這在兩個(gè)相鄰操作互斥時(shí)尤為重要：比如“保存”和“取消”圖標(biāo)并列存在時(shí)使用至少2mm的間距。

　　5. 不要跨平臺(tái)使用圖標(biāo)

　　當(dāng)你在設(shè)計(jì)Android/iOS應(yīng)用時(shí)，不要使用其他平臺(tái)特定的UI元素。各平臺(tái)為某些常用功能使用一套典型的圖標(biāo)，比如分享、新建和刪除。當(dāng)你轉(zhuǎn)換應(yīng)用到另一個(gè)平臺(tái)時(shí)，你應(yīng)替換掉相對(duì)應(yīng)的圖標(biāo)。

　　Android(上)和iOS(下)的常用功能的圖標(biāo)

　　6. 測(cè)試你的圖標(biāo)

　　圖標(biāo)的使用應(yīng)極盡小心：始終進(jìn)行可用性測(cè)試。一旦你已經(jīng)熟悉一個(gè)界面，很難再使用全新的眼光審視它并使用直觀的感覺(jué)分辨它。所以，觀察一個(gè)新用戶如何與UI交互很重要，因?yàn)樗梢詭椭闩袛鄨D標(biāo)是否足夠清晰。

　　測(cè)試圖標(biāo)的可識(shí)別性。詢問(wèn)用戶期望圖標(biāo)可以代表哪些功能。避免設(shè)計(jì)一些用戶看到后不知道他們?cè)撟鍪裁吹膱D標(biāo)，因?yàn)闆](méi)人會(huì)想玩捉迷藏。

　　測(cè)試圖標(biāo)的可記憶性。難以記憶的圖標(biāo)常常使用低效。告訴一組用戶圖標(biāo)代表的含義，幾個(gè)星期后再詢問(wèn)他們是否還記得。

　　小結(jié)

　　圖標(biāo)圖形學(xué)是UI設(shè)計(jì)的核心：對(duì)于界面的可用性來(lái)說(shuō)，它是一把雙刃劍。如同用戶體驗(yàn)設(shè)計(jì)的方方面面，界面中使用的所有圖標(biāo)都應(yīng)有目的性。當(dāng)你設(shè)計(jì)對(duì)路的時(shí)候，圖標(biāo)能幫助你簡(jiǎn)單而直觀的引導(dǎo)用戶。

最新評(píng)論