在設(shè)計(jì)UI頁(yè)面時(shí)，我們通常需要決定是使用實(shí)心圖標(biāo)還是線性圖標(biāo)。它們兩種到底哪種風(fēng)格更符合用戶體驗(yàn)?zāi)兀?br />

　　很多人認(rèn)為它們之間的差異僅僅是一個(gè)偏好問(wèn)題，但實(shí)際上研究表明，它們真的有所區(qū)別。

　　了解何時(shí)使用實(shí)心或線性圖標(biāo)可讓你的用戶輕松瀏覽你的產(chǎn)品。他們將能夠更快地識(shí)別你設(shè)計(jì)的圖標(biāo)并選擇正確的選項(xiàng)。

　　從多年UI教學(xué)中發(fā)現(xiàn)，圖標(biāo)樣式的確會(huì)影響任務(wù)性能。研究中主要通過(guò)識(shí)別圖標(biāo)到選擇圖標(biāo)的速度以及準(zhǔn)確性來(lái)測(cè)量任務(wù)性能。

　　實(shí)心圖標(biāo)通常情況下比線性圖標(biāo)更快識(shí)別，但不是絕對(duì)的。有的線性圖標(biāo)更容易識(shí)別，還有部分圖標(biāo)不論實(shí)心樣式還是線性樣式，用戶的反應(yīng)時(shí)間并沒(méi)有太大的差異。那具體是怎么樣的呢？

　　標(biāo)志特征

　　圖標(biāo)通常由基本特征和它的標(biāo)志性特征（即顯著特征）組成。標(biāo)志特征是用戶用來(lái)識(shí)別圖標(biāo)的內(nèi)容，如果缺少這個(gè)特征，或者設(shè)計(jì)得很不明顯，那么圖標(biāo)將變得無(wú)法識(shí)別。

　　例如：評(píng)論氣泡圖標(biāo)的尾部是其特有的標(biāo)志，沒(méi)有這個(gè)尾巴，它只是一個(gè)橢圓。鎖圖標(biāo)上的鑰匙孔也是它特有的標(biāo)志，沒(méi)有鑰匙孔，很容易將圖標(biāo)誤認(rèn)為是一個(gè)手提包。同樣齒輪圖標(biāo)上的鋸齒也是其特有的標(biāo)志，沒(méi)有它，它會(huì)看起來(lái)像一個(gè)甜甜圈。

　　研究顯示：沒(méi)有鑰匙孔的“鎖定“圖標(biāo)是最難識(shí)別出來(lái)的圖標(biāo)，錯(cuò)誤率高達(dá)25%。鑰匙孔是一個(gè)重要的標(biāo)志性特征，沒(méi)有它，圖標(biāo)看起來(lái)會(huì)像一個(gè)手提包、錢包、甚至像是一口鍋。這些標(biāo)志性特征都是用戶識(shí)別圖標(biāo)的重要信息。繪制圖標(biāo)時(shí)，要確保它包含用戶識(shí)別圖標(biāo)所需的標(biāo)志性特征。如果圖標(biāo)看起來(lái)像是其他的東西，必須考慮為其添加額外的特征標(biāo)志。

　　線性圖標(biāo)更易識(shí)別

　　繪制圖標(biāo)除了標(biāo)志性特征必須突出或更容易被注意外，有時(shí)某些圖標(biāo)上的標(biāo)志性特征在線性樣式中比實(shí)心樣式更突出、明顯。

　　評(píng)論泡沫尾巴在實(shí)心填充的情況下很容易被忽略，但在描邊空心的線性狀態(tài)下就很明顯。垃圾桶蓋子也一樣，在實(shí)心的樣式下很難被注意到，但描邊卻更容易看到。同樣，鑰匙上牙花（鋸齒）的細(xì)節(jié)是微妙的，但鋸齒狀的邊緣在描邊的樣式上可以顯示得更加明顯。

　　例如，如果把評(píng)論、鑰匙和刪除圖標(biāo)放在手機(jī)底部標(biāo)簽欄中進(jìn)行比較，你會(huì)發(fā)現(xiàn)線性圖標(biāo)比實(shí)心圖標(biāo)明顯多了。它們的一些標(biāo)志性特征也被表現(xiàn)得更突出。

　　因此我們得出結(jié)論：當(dāng)圖標(biāo)標(biāo)志性特征很微妙并出現(xiàn)在形狀的邊緣時(shí)，請(qǐng)使用線性圖標(biāo)樣式。這使得其特征更加突出，從而可以更快被用戶識(shí)別。

　　實(shí)心圖標(biāo)更易識(shí)別

　　要知道，我們之所以繪制圖標(biāo)，是為了映射現(xiàn)實(shí)世界中的物理對(duì)象，而這些物理對(duì)象多是實(shí)心的。比如“刪除”按鈕圖標(biāo)我們習(xí)慣用“垃圾桶”表示。所以其實(shí)線性圖標(biāo)并不是大多數(shù)人習(xí)慣看到的真實(shí)樣子，或者說(shuō)它看起來(lái)不是那么真實(shí)甚至有點(diǎn)抽象。這也是為什么多數(shù)情況下實(shí)心圖標(biāo)可以更快識(shí)別的原因。

　　盡管如此，用戶仍然能夠識(shí)別線性圖標(biāo)。只是可能識(shí)別出來(lái)的時(shí)間花費(fèi)更長(zhǎng)而已。如果產(chǎn)品強(qiáng)調(diào)用戶效率，那么優(yōu)化這些線性圖標(biāo)勢(shì)在必行了。

　　該研究還發(fā)現(xiàn)，電話、剪刀、贊和工具4個(gè)圖標(biāo)在線性的樣式下很難識(shí)別。因?yàn)檫@些圖標(biāo)的輪廓樣式在其標(biāo)志性特征的地方，都具有狹窄的內(nèi)部間距，從而產(chǎn)生視覺(jué)噪音。

　　總而言之，對(duì)于內(nèi)部間距較窄的對(duì)象，最好使用實(shí)心圖標(biāo)。線性圖標(biāo)適合更簡(jiǎn)單的形狀，使得圖標(biāo)會(huì)更容易識(shí)別。

　　平分秋色

　　該研究發(fā)現(xiàn)：部分圖標(biāo)不管是實(shí)心還是線性樣式下，識(shí)別度幾乎一致沒(méi)有差異。例如收藏、購(gòu)物車和旗幟圖標(biāo)不論樣式如何對(duì)用戶選擇圖標(biāo)的速度和準(zhǔn)確性幾乎沒(méi)有差別。

　　這意味著這些圖標(biāo)的線性樣式并不會(huì)降低用戶的識(shí)別度。其原因在于：它們具有較寬的內(nèi)部間距，從而降低了視覺(jué)噪音。內(nèi)部間距越窄，產(chǎn)生的噪聲就越多，對(duì)識(shí)別的干擾就越大。

　　底部圖標(biāo)的樣式選擇

　　對(duì)于App底部標(biāo)簽欄的圖標(biāo)，我們通常的做法是使用實(shí)心圖標(biāo)表示標(biāo)簽欄中按鈕的激活狀態(tài)，而其他未激活按鈕則保持線性樣式。但是這種設(shè)計(jì)實(shí)踐是落后的，應(yīng)該反其道而行之。

　　因?yàn)?，?dāng)用戶激活了某個(gè)按鈕圖標(biāo)，他們更需要關(guān)注的是那些沒(méi)有被激活的按鈕圖標(biāo)，而不是繼續(xù)關(guān)注他們已經(jīng)選擇的圖標(biāo)按鈕。所以對(duì)于未被激活的按鈕圖標(biāo)，用實(shí)心樣式效果會(huì)更好，更容易受到用戶的關(guān)注。

　　而使用線性圖標(biāo)表示已激活的按鈕，對(duì)比未激活的圖標(biāo)即有風(fēng)格和顏色變化，又突出了所選圖標(biāo)，同時(shí)也不會(huì)過(guò)于搶眼，掩蓋未激活按鈕的存在。

　　雖然目前國(guó)內(nèi)App底部圖標(biāo)使用這種表現(xiàn)形式的并不多，大多數(shù)還是采取比較落后的線性圖標(biāo)表示未激活的按鈕。但是相信隨著這項(xiàng)研究結(jié)論的深入人心，今后會(huì)越來(lái)越普遍。

　　最后聽UI設(shè)計(jì)培訓(xùn)老師怎么說(shuō)：如果效率對(duì)用戶來(lái)說(shuō)很重要，那么必須考慮圖標(biāo)的識(shí)別度。抑或是你想要圖標(biāo)更容易識(shí)別，那么實(shí)心樣式的圖標(biāo)會(huì)更好，但是也會(huì)有例外。了解以上這些特殊情況后，你可以在根據(jù)產(chǎn)品的實(shí)際情況選擇線性圖標(biāo)和實(shí)心圖標(biāo)。

　　提示，選擇圖標(biāo)樣式時(shí)應(yīng)記住：

　　1、多數(shù)情況下，實(shí)體圖標(biāo)比線性圖標(biāo)更容易識(shí)別

　　2、圖標(biāo)由基本特征和標(biāo)志性特征組成

　　3、若圖標(biāo)的標(biāo)志性特征很微妙且不夠突出，則選擇線性圖標(biāo)

　　4、當(dāng)圖標(biāo)內(nèi)部間距較寬時(shí)，選擇線性圖標(biāo)更易辨認(rèn)

　　5、當(dāng)圖標(biāo)內(nèi)部間距較窄時(shí)，選擇實(shí)心圖標(biāo)更易辨認(rèn)