在UI設計中,圖標主要分為兩類:一種是APP的啟動圖標,每個APP獨一份(例如:應用商店、時鐘、天氣等);另一種則是系統(tǒng)icon,部分圖標需要搭配文字使用,方便用戶在使用過程中快速的去理解圖標代表的信息和功能,也是本文章重點講解的內(nèi)容
風格
圖標常見的風格:線性、面性、彩色、擬物、立體(3D和2.5D)等,圖標風格的選擇會因為頁面的設計風格,以及圖標所處的位置產(chǎn)生差異,主要的作用還是反饋動作和吸引用戶注意力
l 線性/面性:最基本同時也是最常用的風格,廣泛應用在APP的頁面設計中
l 彩色:通常用于反饋用戶的操作行為,增加用戶注意力
l 擬物/立體:通常用于頁面中某個內(nèi)容需要引起用戶高度注意使用,抓住用戶視線
(從簡單到復雜)
重量
簡單的線性圖標,會讓人感覺重量很輕;但是看起來更簡約,不會給頁面增添太大的視覺負擔。例如頁面中的圖片和內(nèi)容元素已經(jīng)很豐富了,而簡單的圖標,本身筆畫少,所以看起來更輕快、簡約一些,不會給頁面帶來太大的視覺負擔,要選擇更適合的簡約、輕量化的線性(面性)圖標,防止頁面過于雜亂無章
相反,如果頁面中文字占比很大,信息量很少,這種頁面就適合使用重量大的彩色圖標,甚至是使用3D(2.5D)類型的圖標來增加頁面的豐富程度,讓頁面看起來沒有那么呆板,增加設計感,給用戶帶來視覺上的愉悅,簡約而不簡單
(由輕到重)
屬性
構成圖標的元素有:描邊的寬度、端點(節(jié)點)的樣式、圓角的大小、顏色的輕重等,表達式規(guī)則是統(tǒng)一的,以便只給觀看者識別圖標所需的最小更改
l 描邊的寬度:描邊寬度就是指的描邊的像素大小,手機上常用的寬度尺寸。
l 端點(節(jié)點)的樣式:圖標的端點,分為三種:平頭、圓頭、方頭;圖標的節(jié)點,有斜接、圓角、斜角,具體的使用樣式要根據(jù)頁面情況統(tǒng)一進行設置。
l 圓角的大?。?方形的圖標邊角過于尖銳,用戶看起來會感覺很不舒服,圓角的圖標更加圓滑,相對來說跟容易讓用戶接受。雖然基本情況都是使用圓角,但是具體的情況,還是要從頁面的整體情況出發(fā)再做決定
網(wǎng)格
圖標的外形,有圓形、方形、三角形以及不規(guī)則形狀,所以我們很難講不同形狀的圖標尺寸完全統(tǒng)一。
網(wǎng)格在這種情況下就起到了很關鍵的作用,相當于在圖標的外面限定了圖標最大的范圍,然后在網(wǎng)格的范圍內(nèi)根據(jù)圖標的重量和重心靈活調整大小,這樣會讓不同形狀的圖標看起來更統(tǒng)一。
以上就是部分常用卻容易忽略的圖標設計細節(jié),希望通過這些內(nèi)容能幫助你對圖標設計有更深的認識。