在準備做一個App設計時，常常會陷入到該用面型圖標還是線型圖標的糾結中，那么到底哪種對用戶體驗來說更合適呢？

什么時候該用線型圖標，什么時候該用面型圖標，不知道大家平時有沒有去思考過？我自己也曾經(jīng)糾結過，但卻沒有深究，這篇文章給出了一些答案。挺意外，老外會針對線面圖標都做了深入研究，光研究pdf就有66頁??！這就是所謂的專業(yè)深度吧。

今天一起來學習下，也歡迎大家把自己的想法在留言區(qū)一起探討，說下自己的看法和使用習慣。

譯文部分：

當我們準備做一個App設計時，常常會陷入到該用面型圖標還是線型圖標的糾結中，到底哪種對用戶體驗來說更合適呢？

有些人覺得它們之間的區(qū)別只是在于個人喜好的問題，但有研究表明，更深一層的原因是：它們之間存在著不同的識別效率。

對于設計師來說，應該要知道如何選擇線型或面型圖標，才能讓用戶更高效的瀏覽應用。如果設計良好，用戶就能夠更快的識別，并作出正確的選擇。

一項名為《面型圖標vs線型圖標，對于可用性方面的影響》（譯者注：連接中是一份很長的研究報告，全英文Pdf，反正鏈接我放這了，但我估計沒人會看，https://cdr.lib.unc.edu/indexablecontent/uuid:e7ece0ee-c1ea-48c2-bb01-108122686e5c）的調查研究發(fā)現(xiàn)，圖標樣式會影響識別效率。識別效率是通過識別和選擇圖標的速度和準確性來衡量的。

面型圖標一般來說會比線型圖標更快被識別，但也有例外，一些圖標在識別效率上沒有明顯差異，這與圖標的特征線索有關。

圖標的特征線索

特征線索是指用戶如何辨認圖標，如果沒有明顯的特征或很難被注意到，圖標就沒法準確識別。

例如：評論氣泡圖標的尾巴就是它的特征線索，沒有它，就只是一個圓；鎖圖標上的鑰匙孔是它的特征線索，沒有它，就很容易被誤認為是包；齒輪圖標上的齒形是它獨有的線索，沒有它，看起來就像是一個甜甜圈。

調查研究中發(fā)現(xiàn)，鎖圖標中沒有畫鎖孔是被誤會最多的圖標，有超過四分之一的用戶看錯了。如果沒有這個必要的特征線索，圖標看起來可能會像是一個包，錢包甚至是一口鍋。

這些特征線索是用戶識別圖標的關鍵，使用圖標時，請確保它包含了用戶能識別的線索。如果圖標看起來像是其他什么東西，請考慮為其增加額外的特征線索。

什么情況下用線型圖標更好？

除了要包含特征線索外，線型和面型圖標之間也有區(qū)別。有時候，某些圖標上的特征線索在線型圖標上比面型圖標更為突出。

調查中發(fā)現(xiàn)，線型圖標能夠被更快識別的三個圖標有：評論、垃圾桶、鑰匙。這些圖標的特征線索都出現(xiàn)在其外輪廓上，正因為如此，當圖標為線型的時候，這些特征線索更容易被注意到。

評論圖標的尾巴在面型時容易被忽略掉，但是在線型時則更加明顯。垃圾桶蓋子在面型時也一樣，線型時更容易看到。鑰匙的齒形在線型時相較于面型時要更明顯。

當圖標的特征線索比較微妙且出現(xiàn)在形狀的邊緣時，使用線型圖標。這樣能使得圖標的線索更加突出，從而能夠更快的被識別。

選擇圖標時，最好能保持一致的風格，不要把面型和線型混搭。試著選擇一組圖標，它們具有明顯的特征線索，角度干脆不模糊。

例如：如果將評論，垃圾桶和鑰匙圖標放在特征線索更明顯的圖標一起進行比較，就能看出區(qū)別。更明顯的線索凸顯出來后，更容易被注意到。

什么情況下用面型圖標更好？

大多數(shù)圖標是作為現(xiàn)實世界中對象的縮影，把圖標用面型剪影的形式表現(xiàn)更符合人的一般認知。相對而言，線型圖標并不能真實的反映大多數(shù)人的認知習慣。這就是為什么面型圖標能更快識別的原因。

盡管如此，用戶仍然能夠識別線型圖標，但如果圖標的內(nèi)部空間非常狹窄，那么就需要更長的時間才能識別。

研究發(fā)現(xiàn)：點贊、剪刀、電話和工具圖標在面型的時候更容易被識別。這是因為這些圖標的輪廓樣式在其中一些地方內(nèi)部間距太小，從而產(chǎn)生了視覺噪音。

對于內(nèi)部空間擁擠的圖標，最好使用面型圖標，剪影形式提供了一個信息量更小的形狀，使圖標更容易識別。

什么時候線面皆可？

研究發(fā)現(xiàn)，兩種風格的圖標有時候的識別效率是一樣的。例如：星星、購物車和旗幟圖標都有相似的識別時間。

這意味著此時的線型圖標不會降低用戶的識別效率。原因是它們內(nèi)部的空間很寬，減少了視覺噪音。內(nèi)部空間越窄，產(chǎn)生的噪音就越多，干擾識別。

Tab 欄活動態(tài)圖標樣式

通常使用面型圖標作為導航欄中的活動態(tài)，而其他按鈕保持線型形式。但其實這種設計方法是落后的，應該反過來。

用戶需要對他們尚未選擇的圖標有更快的識別速度，而不是針對他們已經(jīng)選擇的選項。已選擇的不需要用面型的圖標，對于沒有選擇的內(nèi)容來說，面型圖標更為有效。

使用線型圖標能夠突出顯示選擇態(tài)的圖標（面型圖標相對會弱一些），它提供了一種更清晰的風格和顏色的變化，能夠強化所選的內(nèi)容。

打破過時的圖標風格規(guī)范

如果使用效率對用戶來說很重要，則必須考慮圖標的識別率。如果想要更快的識別率，面型圖標會更好。但上面提到的一些例外情況，也應該有所了解，以便于準確的做出選擇，不再盲目糾結。

總之，在使用圖標樣式時，應該要記住以下幾點：

• 圖標是由能夠識別的特征線索組成。
• 面型圖標識別速度更快，除非他們的特征線索不夠突出。
• 線型圖標的內(nèi)部間距較寬時，更容易被識別。
• 如果面型圖標的特征線索在其邊緣細微之處，則使用線型圖標更好
• 如果線型圖標內(nèi)部的間距較窄，則使用面型圖標會更好。

原文：https://medium.com/@uxmovement/solid-vs-outline-icons-which-are-faster-to-recognize-9bb0fc24821f

譯者：彩云Sky，公眾號：彩云譯設計

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議