圖標(biāo)是一種抽象的、跨語言的符號,隨著信息傳播速度和載體的快速增長,圖標(biāo)的使用頻率也在不斷提高,尤其是在終端屏幕尺寸越來越多的情況下,圖標(biāo)代替或輔助文字信息向用戶更一致、高效、具象地理解信息。
圖標(biāo)設(shè)計的常見規(guī)則
-
表意清晰

-
圖形簡潔清晰
在圖標(biāo)設(shè)計中,我們必須保證圖形是簡潔、嚴(yán)謹(jǐn)、清晰、邊緣干凈利落的,這是提升產(chǎn)品界面品質(zhì)感的一個重要而且基礎(chǔ)的部分。
-
一致性強(qiáng)


-
恰當(dāng)?shù)囊曈X強(qiáng)度

-
體現(xiàn)品牌特色
在圖標(biāo)中我們還可以通過融入品牌信息、有趣的細(xì)節(jié)使圖標(biāo)更有吸引力,提升用戶對產(chǎn)品/品牌的好感度。
網(wǎng)易云音樂的logo和圖標(biāo)都使用了網(wǎng)易公司具有代表性的紅色
網(wǎng)易云音樂的logo和圖標(biāo)都使用了網(wǎng)易公司具有代表性的紅色
二、認(rèn)知心理學(xué)對圖標(biāo)設(shè)計的啟示
我們更容易看到結(jié)構(gòu)
人類視覺認(rèn)知是具有整體性的,我們看到的物體不是割裂的點、線、面基本元素,而是元素構(gòu)成的,具有整體性質(zhì)的形狀、圖形和物體。我們的視覺會試圖給對象分組,將物體的缺漏之處進(jìn)行填補(bǔ),分解復(fù)雜的場景來降低復(fù)雜度。最重要的是,由于我們的工作記憶(短時記憶)的容量是很有限的,而結(jié)構(gòu)可以讓人專注于相關(guān)的信息,結(jié)構(gòu)帶來的規(guī)則性可以減少我們的記憶負(fù)荷。
-
接近性
物體之間的相對距離會影響我們感知它們是否是組織在一起的。相互接近的物體會被看成一組,距離較遠(yuǎn)的則不會。
設(shè)計啟示
可以通過拉近某些圖標(biāo)之間的距離,使它們形成一組。
ipadOS設(shè)置界面
-
相似性
相似的物體看起來會歸于一組。
設(shè)計啟示
同一設(shè)置功能下的不同圖標(biāo),采用了比較相似的設(shè)計,可以很清晰的表明它們屬于一組。
無線局域網(wǎng)、藍(lán)牙、VPN都屬于外部信息鏈接,統(tǒng)一用藍(lán)色
-
封閉性
視覺系統(tǒng)自動將朝向向內(nèi)的元素組合成完整的物體,而不是分散的碎片。
設(shè)計啟示
僅展示一個完整的對象和背后疊起的對象一角,即可表示對象(e.g.文檔、消息)的集合。
procreate的圖片堆
-
對稱性
對稱性可以簡少認(rèn)知消耗。
設(shè)計啟示
規(guī)整的對稱性界面設(shè)計使用戶的視覺更舒適。
Notability上方的圖標(biāo)成對稱排列
-
規(guī)則性
信息按照一定規(guī)律布局的時候,可以清晰的識別出其中的層級結(jié)構(gòu),以及關(guān)鍵信息。
設(shè)計啟示
A.將信息分段,把大塊整段的信息分割為各個小段;
B.顯著標(biāo)記每個信息段和子段;
C.以一個層次結(jié)構(gòu)來展示各段及其子段,使上層的段能夠比下層看起來更重要。
包圖網(wǎng)下拉菜單
-
圖底關(guān)系
大腦將視覺區(qū)域分為主體和背景,我們可能首先會注意集中在主體上,背景的信息可能會忽略,或者作為次要信息。
設(shè)計啟示
彈出消息框出現(xiàn),舊信息界面變暗或變模糊。
ios控制界面下拉后背景模糊






