全栈工程师?
嗯.....目前并不是!

面型圖標vs線型圖標,該如何正確使用?

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

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

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

譯文部分:

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

面型圖標vs線型圖標,該如何正確使用?

有些人覺得它們之間的區別只是在於個人喜好的問題,但有研究表明,更深一層的原因是:它們之間存在着不同的識別效率。

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

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

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

圖標的特徵線索

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

面型圖標vs線型圖標,該如何正確使用?

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

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

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

什麼情況下用線型圖標更好?

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

面型圖標vs線型圖標,該如何正確使用?

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

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

面型圖標vs線型圖標,該如何正確使用?

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

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

面型圖標vs線型圖標,該如何正確使用?

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

什麼情況下用面型圖標更好?

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

面型圖標vs線型圖標,該如何正確使用?

儘管如此,用戶仍然能夠識別線型圖標,但如果圖標的內部空間非常狹窄,那麼就需要更長的時間才能識別。

研究發現:點贊、剪刀、電話和工具圖標在面型的時候更容易被識別。這是因為這些圖標的輪廓樣式在其中一些地方內部間距太小,從而產生了視覺噪音。

面型圖標vs線型圖標,該如何正確使用?

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

什麼時候線面皆可?

研究發現,兩種風格的圖標有時候的識別效率是一樣的。例如:星星、購物車和旗幟圖標都有相似的識別時間。

面型圖標vs線型圖標,該如何正確使用?

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

Tab 欄活動態圖標樣式

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

面型圖標vs線型圖標,該如何正確使用?

用戶需要對他們尚未選擇的圖標有更快的識別速度,而不是針對他們已經選擇的選項。已選擇的不需要用面型的圖標,對於沒有選擇的內容來說,面型圖標更為有效。

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

打破過時的圖標風格規範

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

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

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

 

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

譯者:彩雲Sky,公眾號:彩雲譯設計

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《面型圖標vs線型圖標,該如何正確使用?》
文章链接:https://www.pmbear.com/archives/9419
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们