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

2022-12-26 11:14:23 來源/作者: / 己有:25人學(xué)習(xí)過

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

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

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

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

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)。繪制草圖是一個很重要的步驟,可以用手繪或一些軟件。個人建議用手繪,如下圖所示。

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

4低保真設(shè)計

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

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

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

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

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

一般是png,jpg等