界面圖標(biāo)設(shè)計的規(guī)則與案例分析

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

圖標(biāo)設(shè)計的常見規(guī)則

  1. 表意清晰

圖標(biāo)能夠清晰地傳達(dá)信息,幫助用戶理解這是什么功能/信息是圖標(biāo)設(shè)計的第一要點。在設(shè)計圖標(biāo)時,不僅要針對單個圖標(biāo)思考,更要把圖標(biāo)作為界面中的一部分,結(jié)合當(dāng)前場景進(jìn)行考慮,在當(dāng)前場景/界面中,圖標(biāo)是否滿足清晰表義的要求。
  1. 圖形簡潔清晰

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

  1. 一致性強(qiáng)

界面中的圖標(biāo)一般是成系列的設(shè)計,除了視覺風(fēng)格和特征保持一致以外,在同一產(chǎn)品內(nèi),同樣的功能和信息圖標(biāo)應(yīng)也保持一致的形態(tài),避免用戶產(chǎn)生疑惑。

adobe軟件系列圖標(biāo)
  1. 恰當(dāng)?shù)囊曈X強(qiáng)度

功能圖標(biāo)依據(jù)使用頻次區(qū)分重要性,不同重要性會導(dǎo)致尺寸或視覺強(qiáng)度設(shè)計的區(qū)別。
王者榮耀游戲界面,攻擊圖標(biāo)最大,技能次之,其他都很小
  1. 體現(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ù)荷。

  1. 接近性

物體之間的相對距離會影響我們感知它們是否是組織在一起的。相互接近的物體會被看成一組,距離較遠(yuǎn)的則不會。

設(shè)計啟示

可以通過拉近某些圖標(biāo)之間的距離,使它們形成一組。


ipadOS設(shè)置界面
  1. 相似性

相似的物體看起來會歸于一組。

設(shè)計啟示

同一設(shè)置功能下的不同圖標(biāo),采用了比較相似的設(shè)計,可以很清晰的表明它們屬于一組。


無線局域網(wǎng)、藍(lán)牙、VPN都屬于外部信息鏈接,統(tǒng)一用藍(lán)色
  1. 封閉性

視覺系統(tǒng)自動將朝向向內(nèi)的元素組合成完整的物體,而不是分散的碎片。

設(shè)計啟示

僅展示一個完整的對象和背后疊起的對象一角,即可表示對象(e.g.文檔、消息)的集合。


procreate的圖片堆
  1. 對稱性

對稱性可以簡少認(rèn)知消耗。

設(shè)計啟示

規(guī)整的對稱性界面設(shè)計使用戶的視覺更舒適。


Notability上方的圖標(biāo)成對稱排列
  1. 規(guī)則性

信息按照一定規(guī)律布局的時候,可以清晰的識別出其中的層級結(jié)構(gòu),以及關(guān)鍵信息。

設(shè)計啟示

A.將信息分段,把大塊整段的信息分割為各個小段;
B.顯著標(biāo)記每個信息段和子段;
C.以一個層次結(jié)構(gòu)來展示各段及其子段,使上層的段能夠比下層看起來更重要。


包圖網(wǎng)下拉菜單
  1. 圖底關(guān)系

大腦將視覺區(qū)域分為主體和背景,我們可能首先會注意集中在主體上,背景的信息可能會忽略,或者作為次要信息。

設(shè)計啟示

彈出消息框出現(xiàn),舊信息界面變暗或變模糊。


ios控制界面下拉后背景模糊
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容