面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

3 評論 14948 瀏覽 57 收藏 10 分鐘

在準(zhǔn)備做一個(gè)App設(shè)計(jì)時(shí),常常會陷入到該用面型圖標(biāo)還是線型圖標(biāo)的糾結(jié)中,那么到底哪種對用戶體驗(yàn)來說更合適呢?

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

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

譯文部分:

當(dāng)我們準(zhǔn)備做一個(gè)App設(shè)計(jì)時(shí),常常會陷入到該用面型圖標(biāo)還是線型圖標(biāo)的糾結(jié)中,到底哪種對用戶體驗(yàn)來說更合適呢?

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

對于設(shè)計(jì)師來說,應(yīng)該要知道如何選擇線型或面型圖標(biāo),才能讓用戶更高效的瀏覽應(yīng)用。如果設(shè)計(jì)良好,用戶就能夠更快的識別,并作出正確的選擇。

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

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

圖標(biāo)的特征線索

特征線索是指用戶如何辨認(rèn)圖標(biāo),如果沒有明顯的特征或很難被注意到,圖標(biāo)就沒法準(zhǔn)確識別。

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

例如:評論氣泡圖標(biāo)的尾巴就是它的特征線索,沒有它,就只是一個(gè)圓;鎖圖標(biāo)上的鑰匙孔是它的特征線索,沒有它,就很容易被誤認(rèn)為是包;齒輪圖標(biāo)上的齒形是它獨(dú)有的線索,沒有它,看起來就像是一個(gè)甜甜圈。

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

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

什么情況下用線型圖標(biāo)更好?

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

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

調(diào)查中發(fā)現(xiàn),線型圖標(biāo)能夠被更快識別的三個(gè)圖標(biāo)有:評論、垃圾桶、鑰匙。這些圖標(biāo)的特征線索都出現(xiàn)在其外輪廓上,正因?yàn)槿绱?,?dāng)圖標(biāo)為線型的時(shí)候,這些特征線索更容易被注意到。

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

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

選擇圖標(biāo)時(shí),最好能保持一致的風(fēng)格,不要把面型和線型混搭。試著選擇一組圖標(biāo),它們具有明顯的特征線索,角度干脆不模糊。

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

什么情況下用面型圖標(biāo)更好?

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

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

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

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

什么時(shí)候線面皆可?

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

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

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

通常使用面型圖標(biāo)作為導(dǎo)航欄中的活動態(tài),而其他按鈕保持線型形式。但其實(shí)這種設(shè)計(jì)方法是落后的,應(yīng)該反過來。

面型圖標(biāo)vs線型圖標(biāo),該如何正確使用?

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

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

打破過時(shí)的圖標(biāo)風(fēng)格規(guī)范

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

總之,在使用圖標(biāo)樣式時(shí),應(yīng)該要記住以下幾點(diǎn):

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

 

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

譯者:彩云Sky,公眾號:彩云譯設(shè)計(jì)

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我覺著還是大環(huán)境的重要,這是國外的研究報(bào)告。和國內(nèi)的畢竟有區(qū)別,我覺著可以使用其中一部分作為準(zhǔn)則。其他的就要看實(shí)際情況了

    來自河北 回復(fù)
    1. !

      來自浙江 回復(fù)
  2. ?? 目前的好多APP都是面型是選中態(tài),線型是未選中態(tài),習(xí)慣了,emmm,至少Q(mào)Q微信都是,可能是群體比較大0- 0?

    來自廣東 回復(fù)