UI設(shè)計(jì)中圖標(biāo)設(shè)計(jì)規(guī)范是什么

　　圖標(biāo)是UI設(shè)計(jì)中的點(diǎn)睛之筆，更是賦予了UI設(shè)計(jì)靈魂。很多小伙伴留言說不會(huì)做圖標(biāo)設(shè)計(jì)，所以今天AAA教育胡老師今天談?wù)?a href="http://m.5wd995.cn/ui/2842.html" target="_blank">圖標(biāo)設(shè)計(jì)。
 

　　圖標(biāo)是 UI 設(shè)計(jì)中必不可少的組成。通常我們理解圖標(biāo)設(shè)計(jì)的含義，是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。在我們的企業(yè)級(jí)應(yīng)用設(shè)計(jì)范圍中，圖標(biāo)在界面設(shè)計(jì)的諸多元素中往往只占了很小的比重，在調(diào)用時(shí)也會(huì)被縮到比設(shè)計(jì)稿小很多倍的尺寸，加上在圖形素材極度豐富并且便于獲取的今天，在產(chǎn)品設(shè)計(jì)體系中實(shí)現(xiàn)一套美觀、一致、易用、便于延展的圖標(biāo)體系往往會(huì)被不小心忽略掉。相信一整套優(yōu)質(zhì)的圖標(biāo)對(duì)于設(shè)計(jì)質(zhì)量的影響是非常巨大的，這考驗(yàn)著設(shè)計(jì)師的協(xié)作能力，以及對(duì)圖形塑造的系統(tǒng)性思維，同時(shí)也能反映一個(gè)團(tuán)隊(duì)對(duì)于細(xì)節(jié)的追求。
 

　　尺寸
 

　　由于圖形化用戶界面的使用環(huán)境不同，導(dǎo)致圖形用戶界面在使用中的顯示環(huán)境不同。因此，圖形化用戶界面的圖標(biāo)尺寸，也出現(xiàn)了不同。同時(shí)，隨著顯示技術(shù)的不斷發(fā)展，圖標(biāo)對(duì)應(yīng) 的顯示尺寸越來越大，分辨率越來越高，這使得圖標(biāo)的細(xì)節(jié)，也不斷地在進(jìn)行改進(jìn)中。并且跨平 臺(tái)軟件的圖標(biāo)大小或像素的數(shù)量，通常按照特定的技術(shù)規(guī)范進(jìn)行設(shè)計(jì) 。一般的圖標(biāo)標(biāo)準(zhǔn)尺寸有3種，分別為24*24 像素、32*32像素和48*48像素。其中48*48較為常見。
 

　　圖標(biāo)設(shè)計(jì)，不同于其他的視覺設(shè)計(jì)。同一圖標(biāo)，由于其尺寸不同，展示效果和制作細(xì)節(jié)也不盡相同。因此，在不同顯示系統(tǒng)下的圖標(biāo)，在圖標(biāo)設(shè)計(jì)時(shí)，都有其對(duì)應(yīng)的圖標(biāo)效果。
 

　　高識(shí)別性原則
 

　　圖標(biāo)設(shè)計(jì)的目的，是通過符號(hào)化的圖形傳達(dá) 信息。因此，圖標(biāo)設(shè)計(jì)中高識(shí)別性原則就顯得尤其重要。圖標(biāo)，是建立在虛擬世界和真實(shí)世界的一種隱喻或映射關(guān)系的橋梁。隱喻旨在“以一種更為明顯，更為熟悉的觀念符號(hào)來表示某種觀念”，觀念之間存在著類似性。
 

　　統(tǒng)一性原則
 

　　一個(gè)軟件或程序的系統(tǒng)中，圖標(biāo)的設(shè)計(jì)風(fēng)格 需要保持統(tǒng)一。因?yàn)榻y(tǒng)一的圖標(biāo)比單一零散的圖標(biāo)更具品質(zhì)，更容易讓用戶理解和接受。(如下圖美團(tuán)APP)
 

　　簡(jiǎn)潔性與符號(hào)性原則
 

　　視覺圖案的寫實(shí)程度，與受眾對(duì) 視覺圖案的關(guān)注度，是成正比的。即越寫實(shí)的圖案，越容易引起受眾的關(guān)注。因此，設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)時(shí)，其設(shè)計(jì)的圖標(biāo)的視覺表現(xiàn)越是逼真，越是可以引起用戶更多的注意，也可激發(fā)更多用戶的使用興趣。但是，形象寫實(shí)逼真的圖標(biāo)設(shè)計(jì)，卻也從另一個(gè)方面影響了圖標(biāo)信息的快速傳達(dá)。
 

　　象征性的符號(hào)，在圖標(biāo)設(shè)計(jì)中也是常見的。符號(hào)圖標(biāo)能夠更快地被用戶所接受、記憶和識(shí)別。同時(shí)，符號(hào)圖標(biāo)所使用的圖形文件小，便于硬件的支持和運(yùn)算效率的提高。因此，在圖標(biāo)設(shè)計(jì)時(shí)，盡量不要使用過于復(fù)雜的圖案。過多的圖形和裝飾效果，會(huì)降低圖形的認(rèn)知度，特別是在小尺寸圖標(biāo)中，由于圖標(biāo)尺寸偏小，導(dǎo)致視覺上的識(shí)別度降低。
 

　　文字應(yīng)用原則
 

　　在圖標(biāo)設(shè)計(jì)中，除了圖形設(shè)計(jì)之外，還有一 個(gè)重要的組成部分就是文字。簡(jiǎn)潔明快的文字標(biāo)簽和清晰準(zhǔn)確的文字說明，能更好地提高圖形化用戶界面的工作效率 。在設(shè)置圖標(biāo)文字時(shí)，最好使用簡(jiǎn)單通俗的文字作為圖標(biāo)的說明文字。在圖標(biāo)文字的選擇上，需要具備高度的概括性。同時(shí)，圖標(biāo)文字又需要有高度的信息傳達(dá)性，能夠充分體現(xiàn)其是對(duì)圖標(biāo)圖案的一種解釋和說明。
 

　　在圖標(biāo)文字的設(shè)計(jì)中，需要對(duì)文字屬性和文字使用環(huán)境進(jìn)行考慮。而文字的字體、尺寸和色彩等方面，也會(huì)對(duì)圖標(biāo)的整體視覺和運(yùn)行效果產(chǎn)生影響。在文字字體的選擇上，考慮圖標(biāo)字體的形態(tài)不宜復(fù)雜。文字的識(shí)別度差異，在通常情況下，中文字體應(yīng)不小于14px，英文字體應(yīng)不小于 12px。另外，應(yīng)該盡量使用均勻的間距，使文字更為整齊清晰，易于辨體識(shí)。
 

　　圖標(biāo)的設(shè)計(jì)是 UI 設(shè)計(jì)中非常容易被忽略的環(huán)節(jié)，建立優(yōu)秀的圖形體系也不是一、二個(gè)設(shè)計(jì)人員的事，需要整個(gè)團(tuán)隊(duì)在設(shè)計(jì)前、設(shè)計(jì)中以及設(shè)計(jì)后都能夠達(dá)成共識(shí)并且通力合作去完成共建。本次圖標(biāo)的升級(jí)，僅僅是一個(gè)開始。我們會(huì)建議在調(diào)用圖標(biāo)時(shí)，考慮具體業(yè)務(wù)對(duì)于圖形化寄予的期望，以及用戶操作時(shí)的心智模型等因素，結(jié)合實(shí)際情況做調(diào)用和適當(dāng)?shù)亩卧O(shè)計(jì)。如果想學(xué)習(xí)更多的UI設(shè)計(jì)小技巧可以去AAA教育官網(wǎng)查看更多哦~