圖標設計不能盲目追求好看

3 評論 3329 瀏覽 12 收藏 12 分鐘

做圖標設計時,為了效果好看而強行附會各種復雜元素后,圖標設計的設計效果或許會背離初衷。

人類大腦對圖像的記憶遠遠勝過于對文字的記憶,因為左腦具有語言、數據、邏輯推理等功能;右腦具有音樂、繪畫、空間幾何、想像、綜合等功能。左腦的記憶回路是低速記憶,而右腦的是高速記憶,右腦處理圖形圖像的速度是左腦處理文字速度的60萬倍,所以對于圖像更能讓人過目不忘,使得圖形成為設計中的標配。比如我們看到齒輪就想到設置、房子寓意首頁的入口、山和太陽組合表意圖像相冊等。這些圖形已經在大腦中形成記憶軌跡,用戶接受起來更快,體驗更好。

圖標設計的優勢

大腦對圖形的處理記憶的優勢,道出了設計圖形可以更好地引導用戶。體驗設計里的圖形更多體現圖標上,圖標設計除了有助于大腦更好記憶,還有什么其它優勢能讓圖標成為我們體驗設計的標配?我們概括了如下5點優勢。

1:快速理解,視覺體驗更好

看到圖標,不用看介紹就能傳遞給用戶具體的含義,有助于快速理解,視覺體驗好過于純文字的表達。比如天氣的圖標,根本不需要有文字注釋,早已經形成視覺記憶。

2:易國際化,不用單獨翻譯各個國家語言

產品左上角的一個左箭頭,輕松理解返回的操作,但如果用文字寫上“返回”,不翻譯過來,國際化也很難擴展。這個體驗我們經常會遇到,體驗國外一些APP的時候,被這些國家的語言阻斷操作的進程。比如下面旅游類的圖標,即使語言不通也大概能明白寓意。

3:易形成統一的品牌形象

圖標有很多種表現手法,每一種設計的獨具匠心都可以自帶流量,對外形成統一的品牌形象,這就是為什么我們總是要制定設計規范,讓整個產品的設計風格統一。Same的統一設計,形成獨特的品牌傳播。

4:優化產品,無需更多注釋

圖標可以表達出含義,就不需要那么多文字的注釋,在設計上就顯得更簡潔,產品的邏輯更清晰,很好地優化了產品體驗。如下圖標不用文字解釋就能清晰地傳遞出寓意。

5:好看,就是最好的理由

體驗設計的核心就是好看、好用,放著圖標可以提升整個設計的格調,那為什么不呢?如下沒有這個動態圖標的設計,比單獨文字的表達豐富了很多。

圖標設計的原則

上面列舉了圖標設計的一些優勢,那怎么設計圖標才能顯現這些優勢呢?才能起到正確引導用戶的作用呢?圖標設計需遵循如下5點設計原則。

1:符號化,越簡單越好

圖標就是一個LOGO,提煉出表意清晰的元素開始符號化,設計的越簡單易懂越好。如下圖標的圖標從寓意元素中提煉出的符號設計,簡單易懂。

2:表意清晰,避免產生歧義

圖標設計是為了更好地傳達,勢必需要準確表達寓意,容易產生歧義的設計會對用戶產生不必要的困擾,就失去圖標設計的意義。如下的圖標設計不是配合文字,特別是次卡的設計,很容易產生歧義。

3:圖標盡量結合文字的組合設計

圖標設計有助于提升產品的體驗,但并不是所有圖標都能精確地表達出所有的功能入口,有數據表明圖標配合文字的點擊率88%,只有圖標不添加文字點擊率將至34%。可見圖標結合文字的設計體驗更好。除非是識別性很強的圖標,設置之類。如下圖same的表情設計沒有文字解釋理解起來可能會有點困難。

4:設計風格統一

圖標的設計風格有很多,線形圖標、面形圖標、線面結合圖標、斷點圖標、插畫圖標、光影圖標等等。設計的風格統一才能更容易形成記憶軌跡。如下圖same的表情設計非常一致,形成統一的設計風格。

5:5秒設計原則

用戶感知體驗時間是0.1秒,2秒是產品比較好的一個體驗原則,是用戶能接受延遲的最佳等待時間。針對用戶的圖形識別5秒是個坎,所以當用戶5秒沒能識別出圖標表達的寓意,可能就要優化圖標的設計。下圖同樣是Same的表情,我反正是看了10秒都沒太懂其中的寓意。

不適合使用圖標的場景

上面總結了圖標設計的優勢和原則,是不是意味著哪都能用圖標來設計,很顯然不是的。如下的4種場景下不適合使用圖標設計。

1:表達的寓意太復雜或者信息很多

圖標設計的目的是為了幫助用戶更好理解,如果寓意太復雜或者信息太多,不太適合使用圖標來表達。圖標畫的太復雜,反倒會影響用戶的理解。比如下圖的圖標設計非常復雜,表達的寓意也完全看不懂,可以地追求統一。

2:圖標太多,反倒會增加學習成本

圖標不宜太多,使用的太多的圖標,反倒會增加用戶的學習成本,效果適得其反。如下的游戲類圖標設計太多,反倒會增加學習成本。

3:容易產生歧義,寓意不直觀的圖標

圖標表達的寓意不夠精確,或者會有多種理解,這樣就會造成很多不必要的干擾信息。比如下圖的設置幾種圖標,但還是第一種用的最多。

4:為了好看而設計圖標

有時候為了設計上好看,刻意加上圖標的設計,這樣的設計反倒增加頁面的視覺負擔。比如下圖世界杯的運營設計,純粹為了好看而設計。

項目案例總結

我們在改版一款汽車應用的APP,優化某一個頁面的時候,產生了很大的分歧,就是關于是否使用圖標的問題,這也是為什么今天特別寫了一篇關于圖標設計的文章,就為了分享這個案例。

汽車的應用里面有一個頁面,關于汽車有多少種配置,汽車的配置大概有100多個,將這些配置分為幾類呈現,為了讓頁面呈現的更美觀,就想著將這些配置都加上圖標來表達,看著效果確實還不錯,可問題來了,100多個配置,這些配置的圖標又特別復雜,不能完全表達出來設計的標簽。如果上提到的不適宜使用圖標的場景原因被這個頁面給占全了。所以就設計了如下兩個頁面進行PK。

PK結果大大出乎我們的意料之外,大家都一致贊成使用圖標的設計,看起來確實比較美觀,可這些圖標沒幾個能把汽車配置的寓意表達出來,而且那么多,顯得太復雜,所以為這個爭論了很久,后來我們將設計規范的理念重新捋了一遍,我們追求的是“輕”,這個設計增加了頁面的視覺負擔,沒能很好地體現出“輕”。每個圖標還有下一個層級,需要引導用戶去點擊,所以我們最終還是確定了簡潔的設計方案,如下圖右側的設計。

寫在最后

圖標的設計能保持簡潔、快速識別、寓意鮮明、容易易記就可以正確地引導用戶高效地體驗。設計的不好會對用戶產生不必要的干擾,還會產生阻斷性的影響。特別在實際應用中,我們分析清楚體驗的場景再決定是否做圖標設計來,最終提升體驗,形成統一的品牌傳播。

 

本文由 @VV體驗 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 下面為工作中的案例,歡迎大神們批評指正

    回復
  2. 剛看到你做汽車這個我就在想 一百個圖標單純從阿里巴巴找都得不少時間,況且也不可能找全,,我也在做汽車類的 確實很多時候寓意都不會明確

    來自山東 回復
    1. 你說的很多,專業做汽車的人很多圖標都不認識,更何況很多小白呢?而且很復雜,表達不出其含義,謝謝!可以關注更新多交流 ??

      來自北京 回復