在設計UI頁面時，我們通常需要決定是使用實心圖標還是線性圖標。它們兩種到底哪種風格更符合用戶體驗呢？

　　很多人認為它們之間的差異僅僅是一個偏好問題，但實際上研究表明，它們真的有所區別。

　　了解何時使用實心或線性圖標可讓你的用戶輕松瀏覽你的產品。他們將能夠更快地識別你設計的圖標并選擇正確的選項。

　　從多年UI教學中發現，圖標樣式的確會影響任務性能。研究中主要通過識別圖標到選擇圖標的速度以及準確性來測量任務性能。

　　實心圖標通常情況下比線性圖標更快識別，但不是絕對的。有的線性圖標更容易識別，還有部分圖標不論實心樣式還是線性樣式，用戶的反應時間并沒有太大的差異。那具體是怎么樣的呢？

　　標志特征

　　圖標通常由基本特征和它的標志性特征（即顯著特征）組成。標志特征是用戶用來識別圖標的內容，如果缺少這個特征，或者設計得很不明顯，那么圖標將變得無法識別。

　　例如：評論氣泡圖標的尾部是其特有的標志，沒有這個尾巴，它只是一個橢圓。鎖圖標上的鑰匙孔也是它特有的標志，沒有鑰匙孔，很容易將圖標誤認為是一個手提包。同樣齒輪圖標上的鋸齒也是其特有的標志，沒有它，它會看起來像一個甜甜圈。

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

　　線性圖標更易識別

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

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

　　例如，如果把評論、鑰匙和刪除圖標放在手機底部標簽欄中進行比較，你會發現線性圖標比實心圖標明顯多了。它們的一些標志性特征也被表現得更突出。

　　因此我們得出結論：當圖標標志性特征很微妙并出現在形狀的邊緣時，請使用線性圖標樣式。這使得其特征更加突出，從而可以更快被用戶識別。

　　實心圖標更易識別

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

　　盡管如此，用戶仍然能夠識別線性圖標。只是可能識別出來的時間花費更長而已。如果產品強調用戶效率，那么優化這些線性圖標勢在必行了。

　　該研究還發現，電話、剪刀、贊和工具4個圖標在線性的樣式下很難識別。因為這些圖標的輪廓樣式在其標志性特征的地方，都具有狹窄的內部間距，從而產生視覺噪音。

　　總而言之，對于內部間距較窄的對象，最好使用實心圖標。線性圖標適合更簡單的形狀，使得圖標會更容易識別。

　　平分秋色

　　該研究發現：部分圖標不管是實心還是線性樣式下，識別度幾乎一致沒有差異。例如收藏、購物車和旗幟圖標不論樣式如何對用戶選擇圖標的速度和準確性幾乎沒有差別。

　　這意味著這些圖標的線性樣式并不會降低用戶的識別度。其原因在于：它們具有較寬的內部間距，從而降低了視覺噪音。內部間距越窄，產生的噪聲就越多，對識別的干擾就越大。

　　底部圖標的樣式選擇

　　對于App底部標簽欄的圖標，我們通常的做法是使用實心圖標表示標簽欄中按鈕的激活狀態，而其他未激活按鈕則保持線性樣式。但是這種設計實踐是落后的，應該反其道而行之。

　　因為，當用戶激活了某個按鈕圖標，他們更需要關注的是那些沒有被激活的按鈕圖標，而不是繼續關注他們已經選擇的圖標按鈕。所以對于未被激活的按鈕圖標，用實心樣式效果會更好，更容易受到用戶的關注。

　　而使用線性圖標表示已激活的按鈕，對比未激活的圖標即有風格和顏色變化，又突出了所選圖標，同時也不會過于搶眼，掩蓋未激活按鈕的存在。

　　雖然目前國內App底部圖標使用這種表現形式的并不多，大多數還是采取比較落后的線性圖標表示未激活的按鈕。但是相信隨著這項研究結論的深入人心，今后會越來越普遍。

　　最后聽UI設計培訓老師怎么說：如果效率對用戶來說很重要，那么必須考慮圖標的識別度。抑或是你想要圖標更容易識別，那么實心樣式的圖標會更好，但是也會有例外。了解以上這些特殊情況后，你可以在根據產品的實際情況選擇線性圖標和實心圖標。

　　提示，選擇圖標樣式時應記住：

　　1、多數情況下，實體圖標比線性圖標更容易識別

　　2、圖標由基本特征和標志性特征組成

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

　　4、當圖標內部間距較寬時，選擇線性圖標更易辨認

　　5、當圖標內部間距較窄時，選擇實心圖標更易辨認