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

楊媛

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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