UI知識，圖標(biāo)的認(rèn)知與設(shè)計步驟(4)

什么是圖標(biāo)？

圖標(biāo)就是電腦，手機或其它設(shè)備中為各種文件，應(yīng)用程序或快捷方式設(shè)置的一種圖形標(biāo)志。

圖標(biāo)的分類

按功能分類圖標(biāo)分為：1啟動類圖標(biāo)，2應(yīng)用類圖標(biāo)，

1啟動類圖標(biāo)

比如像微信，QQ等代表并啟動此應(yīng)用的一類圖標(biāo)（如下圖所示）

2，應(yīng)用類圖標(biāo)

比如像返回，刪除，保存等代表當(dāng)前功能，或操作的一類圖標(biāo)。（如下圖所示）

按設(shè)計形式分類分為扁平化圖標(biāo)和擬物化圖標(biāo)

1扁平化圖標(biāo)，

扁平化設(shè)計特點：簡潔，清新，設(shè)計感強，沒有更多的細節(jié)與特效修飾。直接明了的表達出出圖標(biāo)的本意。缺點是識別性差。

2擬物化圖標(biāo)

特點，精致，細膩，識別性強，比較接近真實物品

圖標(biāo)設(shè)計設(shè)計原則

1可識別性原則

可識別性原則即清晰明了的表達清楚相應(yīng)的功能和和操作。通俗的將就是用戶一眼看過去就知道它是做什么的。比如撥打電話圖標(biāo)，用戶不需要看文字只需要看圖標(biāo)就知道是撥打電話用的

2差異性原則

即每個圖標(biāo)之間要有一定的差異性，這樣比較容易辨別與區(qū)分

如下圖所示如果每個圖標(biāo)彼此之間很相似的化就會很難分辨

3統(tǒng)一性原則

統(tǒng)一性原則表現(xiàn)在形狀，樣式等風(fēng)格層面。如下圖圖標(biāo)都用了線條，并且圖標(biāo)都比較圓滑。

4尺寸大小尺寸與格式。

圖標(biāo)一般有以下幾種尺寸

256x256 256x256 128x128 64x64 32x32 16x16

圖標(biāo)有以下幾種格式

png , jpg ,svg

圖標(biāo)設(shè)計設(shè)計步驟

1 必須明確設(shè)計需求

即從開始到結(jié)束必須牢記并且明確說設(shè)計的圖標(biāo)說代表的功能需求。

比如在設(shè)計電話圖標(biāo)時不能偏離打電話這一需求。這樣設(shè)計出來的圖標(biāo)才會實用，好用，易用

2明確設(shè)計風(fēng)格

即必須定一個設(shè)計風(fēng)格，是擬物化，扁平化，還是卡通圖標(biāo)。在定了風(fēng)格后要嚴(yán)格按所定的風(fēng)格去設(shè)計其它圖標(biāo)。保持統(tǒng)一性。

3草圖設(shè)計

在定了設(shè)計風(fēng)格后，開始草圖設(shè)計，用草圖繪出你要設(shè)計的圖標(biāo)形態(tài)。繪制草圖是一個很重要的步驟，可以用手繪或一些軟件。個人建議用手繪，如下圖所示。

4低保真設(shè)計

根據(jù)草圖用自己所熟悉的設(shè)計軟件設(shè)計出整個圖標(biāo)的形狀，等所有元素。如下圖的梅花圖標(biāo)，先設(shè)計出此圖標(biāo)的所有元素。

5高保真設(shè)計(視覺稿)

在低保真的基礎(chǔ)上添加顏色，高光與陰影等細節(jié)，最終完成視覺稿如右上圖的梅花圖標(biāo)所示。

6輸出圖標(biāo)的格式

一般是png，jpg等