旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習/?A計劃
全國統一咨詢(xún)熱線(xiàn):010-5367 2995
首頁(yè) > 行業(yè)資訊 > UI設計的基礎知識

UI設計的基礎知識

時(shí)間:2021-04-28來(lái)源:www.lb577.com點(diǎn)擊量:作者:馬晨皓
時(shí)間:2021-04-28點(diǎn)擊量:作者:馬晨皓

什么是圖標?

圖標就是電腦,手機或其它設備中為各種文件,應用程序或快捷方式設置的一種圖形標志。

圖標的分類(lèi)

按功能分類(lèi)圖標分為:1啟動(dòng)類(lèi)圖標,2應用類(lèi)圖標,

1啟動(dòng)類(lèi)圖標

比如像微信,QQ等代表并啟動(dòng)此應用的一類(lèi)圖標(如下圖所示)

  

 Image title

Image title

Image title

 

2,應用類(lèi)圖標

比如像返回,刪除,保存等代表當前功能,或操作的一類(lèi)圖標。(如下圖所示)

  Image title

 

按設計形式分類(lèi)分為扁平化圖標和擬物化圖標

1扁平化圖標,

 

Image title

 

扁平化設計特點(diǎn):簡(jiǎn)潔,清新,設計感強,沒(méi)有更多的細節與特效修飾。直接明了的表達出出圖標的本意。缺點(diǎn)是識別性差。

2擬物化圖標

   Image title

特點(diǎn),精致,細膩,識別性強,比較接近真實(shí)物品

圖標設計設計原則

1可識別性原則

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

 

Image title

 

2差異性原則

即每個(gè)圖標之間要有一定的差異性,這樣比較容易辨別與區分

如下圖所示如果每個(gè)圖標彼此之間很相似的化就會(huì )很難分辨

 

Image title

 

3統一性原則

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

 

Image title

 

4尺寸大小尺寸與格式。

圖標一般有以下幾種尺寸

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

圖標有以下幾種格式

png , jpg ,svg

圖標設計設計步驟

1 必須明確設計需求

即從開(kāi)始到結束必須牢記并且明確說(shuō)設計的圖標說(shuō)代表的功能需求。

比如在設計電話(huà)圖標時(shí)不能偏離打電話(huà)這一需求。這樣設計出來(lái)的圖標才會(huì )實(shí)用,好用,易用

Image title

 

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

即必須定一個(gè)設計風(fēng)格,是擬物化,扁平化,還是卡通圖標。在定了風(fēng)格后要嚴格按所定的風(fēng)格去設計其它圖標。保持統一性。

3草圖設計

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

 Image title

4低保真設計

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

 Image title

5高保真設計(視覺(jué)稿)

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

6輸出圖標的格式

一般是png,jpg等

對于UI設計是否還是處于一知半解,沒(méi)有頭緒,處于迷茫的境界呢?


 

預約申請免費試聽(tīng)課

填寫(xiě)下面表單即可預約申請免費試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費! 怕學(xué)不會(huì )?助教全程陪讀,隨時(shí)解惑!擔心就業(yè)?一地學(xué)習,可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ www.lb577.com 北京漫動(dòng)者數字科技有限公司 備案號: 京ICP備12034770號 監督電話(huà):010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖