淺議UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)技巧與運(yùn)用

何冬

摘 要：在UI設(shè)計(jì)中，圖標(biāo)設(shè)計(jì)是其重要的構(gòu)成元素，也是不可或缺的重要元素，并且其圖標(biāo)設(shè)計(jì)往往不是單獨(dú)在界面中呈現(xiàn)，而是多個(gè)圖標(biāo)并列存在，一般以同色系、同輪廓、同表現(xiàn)形式等形成系列風(fēng)格。因?yàn)閳D標(biāo)在界面中同用戶產(chǎn)生直接的交互關(guān)系，也是最直接的視覺表現(xiàn)，所以其設(shè)計(jì)定位、設(shè)計(jì)思路、設(shè)計(jì)技巧等一定在設(shè)計(jì)之初就明確，然后通過草圖、討論、修改、電腦制圖等設(shè)計(jì)過程完美的將圖標(biāo)呈現(xiàn)，再根據(jù)界面的整體效果進(jìn)行圖標(biāo)運(yùn)用，這樣才能做出優(yōu)秀的圖標(biāo)設(shè)計(jì)。

關(guān)鍵詞：UI設(shè)計(jì)；圖標(biāo)設(shè)計(jì)；技巧；用戶

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

UI設(shè)計(jì)已是現(xiàn)代設(shè)計(jì)領(lǐng)域的重要組成部分，因?yàn)槭种悄苁謾C(jī)用戶的數(shù)量不斷突破新高，UI設(shè)計(jì)的重要性更加受到企業(yè)、市場、設(shè)計(jì)師的重視。當(dāng)下較為流行的UI設(shè)計(jì)基本是以審美需求占據(jù)主要設(shè)計(jì)市場，所以很多設(shè)計(jì)師會(huì)將個(gè)人的喜好和藝術(shù)表現(xiàn)方式運(yùn)用在圖標(biāo)設(shè)計(jì)上，往往會(huì)忽略用戶的體驗(yàn)感，特別是在諸多UI設(shè)計(jì)中，會(huì)讓用戶產(chǎn)生千篇一律、使用麻煩、識(shí)別錯(cuò)誤等情況。那么如何在圖標(biāo)設(shè)計(jì)中既能具備設(shè)計(jì)師的設(shè)計(jì)風(fēng)格，又能保證UI界面的整體視覺，還能讓用戶產(chǎn)生良好的體驗(yàn)感，以此提升軟件的活性和生命力，這是設(shè)計(jì)師的使命和責(zé)任。

當(dāng)一款A(yù)PP產(chǎn)品出現(xiàn)在用戶手中后，除了其功能的獨(dú)特性來作為占據(jù)市場的因素外，其UI設(shè)計(jì)能被受眾所接受和認(rèn)可，才是對(duì)設(shè)計(jì)師能力進(jìn)行確認(rèn)的標(biāo)準(zhǔn)，也是一款產(chǎn)品在市面上流行的根本。任何脫離受眾的設(shè)計(jì)都是失敗的設(shè)計(jì)，手機(jī)APP亦然如此，甚至更為強(qiáng)烈，手機(jī)作為當(dāng)下受眾隨身放置的產(chǎn)品，受眾隨時(shí)隨地都能進(jìn)行使用，經(jīng)過長期的接觸，其錯(cuò)誤設(shè)計(jì)更是會(huì)被發(fā)現(xiàn)并且缺點(diǎn)被無限放大，所以和手機(jī)相關(guān)的產(chǎn)品必須盡善盡美。優(yōu)秀的圖標(biāo)設(shè)計(jì)不僅能完美的展現(xiàn)軟件功能，還能和界面整體完美的融合，這就需要設(shè)計(jì)師較為深厚的設(shè)計(jì)功底和審美藝術(shù)，圖標(biāo)的美觀性和功能性并重，才能符合市場的需求、用戶的需求、企業(yè)的需求。

1 圖標(biāo)的表現(xiàn)形式類別

圖標(biāo)設(shè)計(jì)風(fēng)格進(jìn)過近幾年的發(fā)展主要分為擬物風(fēng)格、扁平化風(fēng)格、線性風(fēng)格、文字風(fēng)格等，最被市場認(rèn)可APP其圖標(biāo)以擬物風(fēng)格和扁平化風(fēng)格為主，在特定情況下才會(huì)出現(xiàn)文字風(fēng)格，就像在含義復(fù)雜的情況下，用圖形不能完整且準(zhǔn)確的進(jìn)行表述時(shí)，就會(huì)直接使用文字來表達(dá)。但不管何種設(shè)計(jì)風(fēng)格，都必須遵循UI設(shè)計(jì)的設(shè)計(jì)原則、色彩搭配原則，然后再進(jìn)行合理的運(yùn)用才能符合當(dāng)下UI界面的需求。

2 圖標(biāo)的規(guī)范要求

圖標(biāo)的設(shè)計(jì)原則首要的就是要了解設(shè)計(jì)規(guī)范，因?yàn)椴煌南到y(tǒng)都有其不同的規(guī)范，如蘋果和安卓，如手機(jī)屏幕的大小、分辨率等，都不盡相同，所以特別是作為UI設(shè)計(jì)的初學(xué)者，首要的任務(wù)就是學(xué)習(xí)并掌握其規(guī)范，才能進(jìn)行更好更迅速的設(shè)計(jì)。其次是會(huì)圖標(biāo)的圖形設(shè)計(jì)定位，一般而言常用的圖標(biāo)圖形是圓形或者方形，這兩種圖形能和界面的融合更加融洽，多個(gè)圖標(biāo)排列時(shí)也更加規(guī)整，當(dāng)然也有特異圖形存在，例如使用擬物化的剪影，擬物化的輪廓圖形等，但是從視覺習(xí)慣而言，受眾還是喜歡規(guī)整一點(diǎn)的圖形，這也能讓圖標(biāo)更加的清晰，也更加符合受眾的習(xí)慣，因此圓形和方形成為了圖標(biāo)圖形的主流設(shè)計(jì)方式。

3 圖標(biāo)的個(gè)性化要求

要想讓圖標(biāo)成為一個(gè)優(yōu)秀的設(shè)計(jì)，還需要注意圖標(biāo)的個(gè)性化體現(xiàn)，我們?cè)僦T多APP中可以看到很多圖標(biāo)的設(shè)計(jì)大同小異，例如購物就是呈現(xiàn)一個(gè)擬物化的一個(gè)購物車、付款就是一個(gè)擬物化的錢包，這些設(shè)計(jì)都欠缺了個(gè)性化元素，特別是蘋果手機(jī)中的圖標(biāo)設(shè)計(jì)更為明顯。一款能準(zhǔn)確的表述其功能含義，能完美的和界面融合，能和市面上的同類圖標(biāo)變現(xiàn)出差異性的圖標(biāo)設(shè)計(jì)才更能抓住受眾的心，才能吸引受眾的關(guān)注。

4 圖標(biāo)的圖形視覺形式

除此之外，圖標(biāo)設(shè)計(jì)還必須符合界面的整體視覺效果，既能做到在界面中醒目，又能不破壞界面的整體設(shè)計(jì)是非常困難的，一般設(shè)計(jì)師會(huì)使用簡化圖標(biāo)設(shè)計(jì)，用簡潔來奪目，并不破壞其整體性，但是這樣的圖標(biāo)設(shè)計(jì)表現(xiàn)張力就會(huì)有所不足，用戶的記憶也會(huì)因?yàn)槠浜啙嵭远艿接绊懀腿绫馄交L(fēng)格的圖標(biāo)設(shè)計(jì)，扁平化風(fēng)格設(shè)計(jì)摒棄了傳統(tǒng)的設(shè)計(jì)風(fēng)格，圖標(biāo)裝飾元素、花紋、肌理、復(fù)雜的漸變、圖形的多樣性處理等藝術(shù)表現(xiàn)形式都被棄用，讓圖標(biāo)更為簡潔、圖標(biāo)語言更加明顯，圖標(biāo)的功能性得到加強(qiáng)。扁平化風(fēng)格設(shè)計(jì)更多的是強(qiáng)調(diào)主題含義的表達(dá)，用較為簡單的圖形、線條、色塊來完成，并將具象的事物進(jìn)行抽象化的處理，抽象的符合其嚴(yán)謹(jǐn)性沒有具象圖形高，呈現(xiàn)的畫面效果可以進(jìn)行夸張等手法，這樣就減輕了設(shè)計(jì)師的造型難度，既能節(jié)約時(shí)間成本，又能達(dá)到很好的視覺效果，因此才會(huì)在現(xiàn)在被設(shè)計(jì)師廣泛運(yùn)用。

5 圖標(biāo)的色彩要素

為了使界面整體視覺效果優(yōu)秀，圖標(biāo)設(shè)計(jì)醒目，就必須要做到圖標(biāo)設(shè)計(jì)的創(chuàng)新，這就要求圖標(biāo)的圖形設(shè)計(jì)、圖案設(shè)計(jì)、色彩運(yùn)用等都要符合界面內(nèi)容，還要準(zhǔn)確的表述功能內(nèi)容，以及符合大眾審美、色彩訴求等要求，如果整個(gè)界面的圖形較為自由活躍，圖標(biāo)圖形的定位就要活躍，不能死板，圖案的設(shè)計(jì)也要根據(jù)界面整體來確定，界面圖形簡潔，圖標(biāo)圖案就要適當(dāng)?shù)母鼮槌鋵?shí)一點(diǎn)，界面圖案復(fù)雜，圖標(biāo)圖案就要適當(dāng)?shù)暮啙嵰稽c(diǎn)，色彩的運(yùn)用一定要在符合用戶的色彩需求上搭配好界面整體的關(guān)系，不能因?yàn)樯市睦淼臐撛谝蛩赜绊懙接脩舻氖褂们逦?，特別是視覺沖擊力較大的色彩需要謹(jǐn)慎使用，如使人心理緊張的紅色，容易激起用戶的清晰，例如深沉的黑色，也不能在圖標(biāo)中大量的使用，根據(jù)APP的使用群體不同色彩的使用也不相同，例如女性和男性、年老和年少等。

圖標(biāo)設(shè)計(jì)完成后一定不能急于使用，一定要多方面的比較，和同類型產(chǎn)品的圖標(biāo)進(jìn)行比較，和大型企業(yè)的APP界面進(jìn)行比較，或者進(jìn)行一定時(shí)間、一定范圍的試運(yùn)行，并進(jìn)行公司內(nèi)部和使用群體的調(diào)研，嘗試找出界面的視覺問題和交互漏洞，這樣才能對(duì)產(chǎn)品有一個(gè)更好的了解，經(jīng)過調(diào)研查找出問題后進(jìn)行修正，才能在市場上具備競爭力。

參考文獻(xiàn)：

[1]張媛.UI設(shè)計(jì)中的視覺表現(xiàn)[J].大眾文藝，2014.

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

[3]羅仕鑒，龔蓉蓉，朱上上.面向用戶體驗(yàn)的手持移動(dòng)設(shè)計(jì)軟件界面設(shè)計(jì)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形設(shè)計(jì)學(xué)學(xué)報(bào)，2010.