淺議圖標(biāo)在UI設(shè)計中的界面布局

楊媛

摘 要：在UI設(shè)計中圖標(biāo)設(shè)計是重要的設(shè)計元素，其功能是在于讓用戶能根據(jù)需求進(jìn)行準(zhǔn)確的點(diǎn)擊，因此圖標(biāo)設(shè)計所表述的含義必須準(zhǔn)確。我們必須讓UI中的圖標(biāo)達(dá)到看圖識字的效果，因?yàn)椴煌瑖?、不同語言的情況下，只能通過圖形表意來完成信息的傳遞。作為能和用戶直接互動的圖標(biāo)設(shè)計因其本身的指示功能、識別功能、操作功能都要求我們對圖標(biāo)設(shè)計有足夠的認(rèn)識，因此圖標(biāo)在UI設(shè)計中尤為重要。

關(guān)鍵詞：UI設(shè)計；圖標(biāo)；界面；布局

DOI：10.16640/j.cnki.37-1222/t.2019.15.207

圖標(biāo)設(shè)計在這個UI界面種類繁多的情況下具備個性化、獨(dú)特化是不可或缺的，圖標(biāo)作為一種設(shè)計語言，它是一種具有很強(qiáng)的表現(xiàn)含義、象征意義的圖形符號，在UI設(shè)計中最直接的作用就是便于用戶識別和記憶，圖標(biāo)設(shè)計有別于標(biāo)志設(shè)計，標(biāo)志設(shè)計更傾向于是用隱喻的手法或抽象的手法來表現(xiàn)，不會過于直接的使用具象圖形，但圖標(biāo)設(shè)計卻需要直接明了，讓用戶能一眼看出其含義，能直接識別其功能，因此圖標(biāo)設(shè)計多運(yùn)用較為直觀的視覺表現(xiàn)方式。在進(jìn)行圖標(biāo)設(shè)計時，直接的圖形表現(xiàn)很難做到既保證藝術(shù)審美又非常具象，所以在設(shè)計時需要考慮諸多因素，如圖標(biāo)的形狀、大小、色彩、表現(xiàn)形式等。

但總體來說圖標(biāo)設(shè)計還是屬于視覺設(shè)計，因此設(shè)計的第一要素就是視覺上的界面布局，UI的界面布局是設(shè)計的第一步，是設(shè)計前期的工作，從產(chǎn)品的功能性、用戶的需求關(guān)系、界面的展示效果等均屬于界面布局的一部分，并且因?yàn)楫a(chǎn)品的最終目的是交予用戶使用和選擇，所以應(yīng)該將用戶需求放在第一位。作為受眾而言，產(chǎn)品的功能是第一選擇，也就是這個產(chǎn)品的目的是什么，只有有針對性的產(chǎn)品而沒有包羅萬象的產(chǎn)品，其次是美感，一款產(chǎn)品部具備美感，抓不住用戶的審美需求，也將不會在市面上流通。

1 圖標(biāo)與界面布局的關(guān)系

在圖標(biāo)的界面布局設(shè)計過程中，必須要把握圖標(biāo)在界面中的均衡性、視覺清晰感，以及圖標(biāo)的規(guī)范效果。圖標(biāo)在界面的均衡性是指圖標(biāo)存在于界面中時上下左右的留白關(guān)系是否均衡，如我們常說的畫面平衡，有多繪畫的初學(xué)者經(jīng)常會犯的錯誤就是面畫的重心感的問題，左輕右重、右輕左重、下輕上重等，所以在畫面中圖標(biāo)的布局一定要注意畫面的均衡，左右的間距、圖標(biāo)之間的排列間距，界面的重心問題和繪畫一樣講究的是下重上輕，或者重心平衡，讓視覺元素分布更加合理，不要出現(xiàn)視覺效果過于集中或過于分散的情況。特別是UI界面的，特別是手機(jī)界面的屏幕均有限定，所以圖標(biāo)的尺寸就更加有限，圖標(biāo)在界面布局中的大小也非常關(guān)鍵，過大會讓畫面感還飽和，過小會引起用戶的視覺疲勞，并且會出現(xiàn)信息識別錯誤以及點(diǎn)擊錯誤的情況，所以在均衡性上面一定要進(jìn)行多次調(diào)整。

2 圖標(biāo)的視覺要求

圖標(biāo)在界面中的清晰感一定要得到保證，圖標(biāo)設(shè)計的作用就在于識別性，必須達(dá)到清晰可見，這是圖標(biāo)設(shè)計的基本要求。很多設(shè)計師在進(jìn)行圖標(biāo)設(shè)計時為了給予圖標(biāo)個性化，將諸多設(shè)計要素內(nèi)容放進(jìn)圖標(biāo)當(dāng)中，讓圖標(biāo)顯得非常臃腫，我們在進(jìn)行設(shè)計時，圖標(biāo)可以放大觀看，但在手機(jī)界面當(dāng)中，圖標(biāo)的大小已經(jīng)被固定，不能隨意的調(diào)整，并且圖標(biāo)在放進(jìn)界面之前會進(jìn)行像素的調(diào)整，改變圖標(biāo)的像素大小，將所有界面元素全部像素調(diào)小，用于減輕產(chǎn)品的運(yùn)行負(fù)擔(dān)，提高運(yùn)行速度。所以在進(jìn)行圖標(biāo)設(shè)計時，不要為了追求設(shè)計的個性化而融入太多的設(shè)計要素，直觀的、明確的展示其圖標(biāo)功能即可。

3 圖標(biāo)的設(shè)計與運(yùn)用規(guī)范

圖標(biāo)的規(guī)范效果是指圖標(biāo)的設(shè)計規(guī)范，圖標(biāo)的規(guī)范效果一般是指圖標(biāo)的大小規(guī)范和保存格式，一般的圖標(biāo)設(shè)計常用工具為AI或PS，我們在圖標(biāo)設(shè)計好后會進(jìn)行導(dǎo)圖，一般的不涉及到透明背景的顯示效果的標(biāo)志我們保存為JPG格式，JPG格式下的圖標(biāo)壓縮效果較好，圖標(biāo)使用的還原度高，因此多為圖標(biāo)設(shè)計使用；第二種圖標(biāo)的保存形式為PNG格式，在圖標(biāo)涉及到透明背景時，要將圖標(biāo)保存為PNG格式；第三種為GIF格式，這種格式也適用于透明背景的應(yīng)用，但最大效果是動態(tài)效果的制作，該格式是可以進(jìn)行簡單的連續(xù)動畫畫面使用的。

圖標(biāo)的大小規(guī)范是因?yàn)閁I界面的大小是被限定的，界面取決于屏幕密度，屏幕密度分為4個等級低密度（IDPI）、中密度（MDPI）、高密度（HDPI）、特高密度（XHDPI），IPHONE系統(tǒng)和Android系統(tǒng)是移動端的兩大系統(tǒng)。Android系統(tǒng)的圖標(biāo)大小又根據(jù)啟動圖標(biāo)、菜單欄圖標(biāo)、狀態(tài)圖標(biāo)、列表顯示圖標(biāo)等，啟動圖標(biāo)和菜單圖標(biāo)低密度一般為36PX*36PX、中密度為48PX*48PX、高密度為72PX*72PX、特高密度為96PX*96PX、狀態(tài)圖標(biāo)和列表圖標(biāo)低密度一般為24PX*24PX，中密度為32PX*32PX，高密度為48PX*48PX，特高密度為72PX*72PX。IPHONE系統(tǒng)的圖標(biāo)大小一般默認(rèn)為中密度，啟動圖標(biāo)一般為57PX*57PX，設(shè)置圖標(biāo)等其他圖標(biāo)為29PX*29PX。

4 圖標(biāo)設(shè)計的色彩要求

然后是圖標(biāo)的圖形設(shè)計，圖形的確定是圖標(biāo)設(shè)計的重要環(huán)節(jié)，用戶的信息獲取來源均來自圖形，因此圖標(biāo)圖形必須是清晰可見的圖形、簡單易懂的圖形，或者圖形和文字共存，圖標(biāo)中的圖形必須要完整且清晰的表述其功能含義，在相關(guān)聯(lián)圖形的設(shè)計時，風(fēng)格必須協(xié)調(diào)統(tǒng)一，在色彩方面一定要遵循色彩心理的原理，在色彩心理上在滿足功能需求的同時也要滿足用戶的需求，圖標(biāo)的色彩要和整體界面色彩的搭配協(xié)調(diào)、相互統(tǒng)一，不能出現(xiàn)色彩沖擊太大的情況，這樣會影響用戶的視覺體驗(yàn)。針對不同的產(chǎn)品和用戶群體，色彩的搭配也不盡相同，例如年輕人使用較多的APP，色彩搭配應(yīng)該更加的絢麗、豐富多變，而針對中老人的APP色彩搭配應(yīng)該沉穩(wěn)，盡量使用同色系的顏色變化。

以上無論是圖標(biāo)在界面中的均衡性、視覺清晰感、圖標(biāo)的規(guī)范要素、圖形的選擇、色彩的搭配等都屬于UI設(shè)計的視覺要素，人類作為視覺性動物，對藝術(shù)審美的要求不斷拔高，這就要求設(shè)計師無論是功能上還是視覺上都應(yīng)該達(dá)到最佳，所以必須在UI設(shè)計的各方面都下大功夫。

參考文獻(xiàn)：

[1]李倩.基于用于體驗(yàn)的UI界面中圖標(biāo)設(shè)計研究[D].沈陽師范大學(xué)，2018（03）.

[2]榮波.淺圖標(biāo)設(shè)計在移動應(yīng)用界面中的設(shè)計研究[J].現(xiàn)代裝飾（理論），2016（12）.

[3]何冬.移動終端平臺下視覺形象在傳統(tǒng)餐飲業(yè)中的應(yīng)用研究[D].西南交通大學(xué)，2017.