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

李真?張春濤

摘 要：現(xiàn)代信息技術(shù)的快速發(fā)展，促使UI設(shè)計(jì)成為了一個(gè)十分熱門(mén)的行業(yè)。對(duì)于UI設(shè)計(jì)來(lái)說(shuō)，圖標(biāo)是重要的組成部分，在UI設(shè)計(jì)工作中是不可或缺的，同時(shí)由于圖標(biāo)設(shè)計(jì)的特殊性，往往圖標(biāo)會(huì)在桌面上排列并存，通過(guò)相同色系或者輪廓的方式形成系列的圖標(biāo)風(fēng)格。在用戶的應(yīng)用過(guò)程中，圖標(biāo)是與用戶產(chǎn)生最直接的交互關(guān)系的部分，因此圖標(biāo)的視覺(jué)表現(xiàn)就十分重要，這就需要圖標(biāo)的設(shè)計(jì)定位、思路以及技巧等十分明確，對(duì)于設(shè)計(jì)師提出了較高的要求。本文針對(duì)UI設(shè)計(jì)工作過(guò)程中的圖標(biāo)設(shè)計(jì)技巧以及運(yùn)用進(jìn)行深入探討。

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

現(xiàn)代化信息技術(shù)的產(chǎn)生于發(fā)展推動(dòng)了現(xiàn)代化設(shè)計(jì)領(lǐng)域的轉(zhuǎn)型發(fā)展，UI逐漸成為了重要的組成部分。隨著智能化電子設(shè)備的推廣與普及，UI設(shè)計(jì)更加受到企業(yè)與市場(chǎng)的重視。就當(dāng)下UI設(shè)計(jì)的流行趨勢(shì)來(lái)看，審美需求逐漸成為了設(shè)計(jì)市場(chǎng)的重要驅(qū)動(dòng)力，因此設(shè)計(jì)師在設(shè)計(jì)過(guò)程中比較注重突出個(gè)人的喜好和藝術(shù)表現(xiàn)形式，但是用戶的體驗(yàn)感逐漸被忽視，特別是在很多UI的設(shè)計(jì)情況會(huì)讓用戶產(chǎn)生千篇一律、使用不簡(jiǎn)便等感覺(jué)。因此在當(dāng)前UI設(shè)計(jì)的過(guò)程中，如何在突出個(gè)人風(fēng)格的基礎(chǔ)上提高用戶的體驗(yàn)感是當(dāng)前設(shè)計(jì)師需要思考的問(wèn)題，這也是設(shè)計(jì)師的使命和責(zé)任。

對(duì)于一款A(yù)PP來(lái)說(shuō)，除了利用本身的功能性獨(dú)特來(lái)占據(jù)市場(chǎng)以外，還需要具有良好的UI設(shè)計(jì)，只有用戶滿意度高的UI設(shè)計(jì)，才是對(duì)于UI設(shè)計(jì)師的肯定，這也是一款A(yù)PP流行的最基本的條件。用戶體驗(yàn)是UI設(shè)計(jì)優(yōu)劣的重要評(píng)判標(biāo)準(zhǔn)。任何不被用戶所接受的UI設(shè)計(jì)都是失敗的。隨著智能手機(jī)的普及，手機(jī)已經(jīng)成為了人們生活中的重要組成部分，很多人隨時(shí)需要應(yīng)用手機(jī)，因此在這樣長(zhǎng)期的接觸之下，一旦設(shè)計(jì)出現(xiàn)了任何小的疏漏，都會(huì)被無(wú)限放大，因此手機(jī)類的產(chǎn)品必須要做到盡善盡美。在UI圖標(biāo)的設(shè)計(jì)領(lǐng)域，優(yōu)秀的圖標(biāo)必須要在完美展現(xiàn)軟件功能的基礎(chǔ)上，能夠與用戶的手機(jī)界面完美融合，這就對(duì)設(shè)計(jì)師的設(shè)計(jì)功底以及審美提出了較高的要求，圖標(biāo)要做到美觀與功能性并重，這樣才能夠做到符合市場(chǎng)與用戶的需求，提高APP的質(zhì)量。

一、圖標(biāo)的分類

（一）按照屬性劃分

按照屬性，可以將圖標(biāo)劃分為啟動(dòng)圖標(biāo)和工具欄圖標(biāo)。啟動(dòng)圖標(biāo)是用戶接觸時(shí)間最長(zhǎng)的圖標(biāo)類型之一，可以說(shuō)，啟動(dòng)圖標(biāo)就是產(chǎn)品的符號(hào)象征，用戶通過(guò)點(diǎn)擊啟動(dòng)圖標(biāo)達(dá)到運(yùn)行與打開(kāi)相關(guān)產(chǎn)品的目的，啟動(dòng)圖標(biāo)的設(shè)計(jì)要點(diǎn)與標(biāo)志相類似，是產(chǎn)品與企業(yè)的形象象征。但是啟動(dòng)圖標(biāo)杜宇可讀性的要求更高，而標(biāo)志則更注重抽象和企業(yè)形象的象征性，主要突出深度。啟動(dòng)圖標(biāo)的平臺(tái)相對(duì)單一，電子屏幕是主要的出現(xiàn)場(chǎng)所，而標(biāo)志的場(chǎng)所則會(huì)更加廣泛，任何平臺(tái)都可以。

工具欄圖標(biāo)是出現(xiàn)于軟件與產(chǎn)品內(nèi)部的圖標(biāo)類型，主要起到解說(shuō)和裝飾的功能，是對(duì)工具欄文字的圖標(biāo)化設(shè)計(jì)，主要是為了突出界面的設(shè)計(jì)感，增加用戶在使用過(guò)程中的體驗(yàn)感和趣味性。在工具欄圖標(biāo)的設(shè)計(jì)過(guò)程中，簡(jiǎn)約、概括性和傳達(dá)性是主要的設(shè)計(jì)要求，同時(shí)工具欄的設(shè)計(jì)還具有系列化設(shè)計(jì)的特征。

（二）按照表現(xiàn)手法劃分

根據(jù)表現(xiàn)手法的不同，圖標(biāo)的設(shè)計(jì)可以分為擬物化設(shè)計(jì)和扁平化設(shè)計(jì)。擬物化設(shè)計(jì)主要是需要與實(shí)物在最直觀的印象上盡量相像，并且通過(guò)質(zhì)感、紋理、陰影等效果來(lái)對(duì)實(shí)物進(jìn)行展現(xiàn)，讓觀眾能夠在第一時(shí)間了解到圖標(biāo)的具體內(nèi)容和事物種類，但是在這類圖標(biāo)的設(shè)計(jì)過(guò)程中，很容易出現(xiàn)設(shè)計(jì)過(guò)于繁瑣的問(wèn)題，讓人感覺(jué)過(guò)于追求細(xì)節(jié)，甚至是裝飾過(guò)剩。擬物化設(shè)計(jì)還具有一個(gè)比較突出的缺陷，就是形式化過(guò)于嚴(yán)重的問(wèn)題，這會(huì)導(dǎo)致功能性不能夠被完美展示出來(lái)，將大量時(shí)間應(yīng)用于效果呈現(xiàn)上，會(huì)導(dǎo)致形式美被忽視。在UI圖標(biāo)的設(shè)計(jì)過(guò)程中，擬物化的設(shè)計(jì)確實(shí)曾經(jīng)引領(lǐng)過(guò)一段時(shí)間的風(fēng)潮，在當(dāng)下階段，擬物化設(shè)計(jì)已經(jīng)不能夠很好適應(yīng)當(dāng)前的用戶需求。但是不可否認(rèn)，擬物化設(shè)計(jì)給設(shè)計(jì)師們更多的經(jīng)驗(yàn)，也鍛煉了很多設(shè)計(jì)師的技能，是設(shè)計(jì)師在進(jìn)行UI設(shè)計(jì)工作的過(guò)程中必須經(jīng)歷的階段。

與擬物化設(shè)計(jì)相對(duì)的就是扁平化設(shè)計(jì)，這類設(shè)計(jì)摒棄了高光、陰影、透視等效果對(duì)于圖標(biāo)的作用，將圖標(biāo)內(nèi)容通過(guò)抽象和簡(jiǎn)化的形式展現(xiàn)出來(lái)，將圖標(biāo)界面變得更加抽象和簡(jiǎn)潔，通過(guò)矩形的色塊、大號(hào)的字體，使得圖標(biāo)變得更加光滑、更具現(xiàn)代感，讓用戶去體會(huì)圖標(biāo)所表現(xiàn)的元素。而扁平化的設(shè)計(jì)將交互功能歸納到了使用功能上，去掉了更多冗雜的設(shè)計(jì)。在扁平化的設(shè)計(jì)過(guò)程中，主要是將圖標(biāo)的語(yǔ)言表現(xiàn)變得更加符號(hào)化或者簡(jiǎn)約化，更加注重造型的形式美，摒棄了過(guò)多突出細(xì)節(jié)的設(shè)計(jì)。簡(jiǎn)單來(lái)說(shuō)，扁平化設(shè)計(jì)就是通過(guò)簡(jiǎn)約的線條、形狀以及漸變形式的配色等來(lái)突出主要元素，更加奪人眼球，提高用戶的關(guān)注度。

二、圖標(biāo)設(shè)計(jì)的技巧與運(yùn)用

（一）規(guī)范化

對(duì)于圖標(biāo)的設(shè)計(jì)來(lái)說(shuō)，了解設(shè)計(jì)規(guī)范是最為重要的原則。由于不同的系統(tǒng)具有不同的規(guī)范，比如智能手機(jī)應(yīng)用最為廣泛的兩種系統(tǒng)類型，Android和macOS，兩者在屏幕大小、分辨率等方面均有不同，因此需要采取不同的設(shè)計(jì)方法。對(duì)于UI設(shè)計(jì)的初學(xué)者來(lái)說(shuō)，掌握設(shè)計(jì)規(guī)范是首先要學(xué)習(xí)的內(nèi)容，并必須要在第一時(shí)間掌握相關(guān)規(guī)范，只有這樣，才能夠進(jìn)行更加規(guī)范、更加優(yōu)質(zhì)的設(shè)計(jì)。此外，圖標(biāo)的圖形設(shè)計(jì)定位也是十分重要的，通常來(lái)說(shuō)，UI設(shè)計(jì)當(dāng)中的圖標(biāo)都會(huì)采用圓形或者方形圖標(biāo)，但是不可否認(rèn)異形圖標(biāo)的存在，通過(guò)相同屬性的圖標(biāo)，能夠讓界面變得更加規(guī)整，比如擬物化設(shè)計(jì)過(guò)程中的剪影、輪廓等。就大部分用戶的視覺(jué)體驗(yàn)來(lái)看，采用相對(duì)規(guī)整的圖標(biāo)往往會(huì)更受用戶的歡迎，這不僅會(huì)讓圖標(biāo)變得更加清晰，而且還更加符合用戶的習(xí)慣，因此在UI圖標(biāo)的設(shè)計(jì)過(guò)程中，圓形和方形成為了圖標(biāo)設(shè)計(jì)的主要形式。

（二）個(gè)性化

對(duì)于UI圖標(biāo)的設(shè)計(jì)來(lái)說(shuō)，個(gè)性化也是圖標(biāo)設(shè)計(jì)的重要因素。從當(dāng)前應(yīng)用眾多APP的圖標(biāo)當(dāng)中可以發(fā)現(xiàn)，當(dāng)前大部分APP的圖標(biāo)設(shè)計(jì)都存在大同小異的問(wèn)題，最突出的特點(diǎn)就是擬物化的問(wèn)題，直接將所表現(xiàn)的內(nèi)容通過(guò)擬物化的方式呈現(xiàn)出來(lái)，這些設(shè)計(jì)普遍都具有缺乏個(gè)性化的問(wèn)題，這一點(diǎn)在蘋(píng)果手機(jī)的圖標(biāo)設(shè)計(jì)當(dāng)中更為明顯。只有能夠在準(zhǔn)確表達(dá)功能的基礎(chǔ)上，與界面完美融合的圖標(biāo)才是真正受市場(chǎng)歡迎、能夠吸引受眾關(guān)注的好圖標(biāo)。

（三）視覺(jué)形式

視覺(jué)形式是除了上述兩個(gè)要素之外在UI圖標(biāo)設(shè)計(jì)過(guò)程中還需要注意的一個(gè)問(wèn)題。良好的視覺(jué)效果是優(yōu)秀圖標(biāo)必須要具備的要素，既能夠在界面中醒目，同時(shí)又不會(huì)破壞界面整體的質(zhì)感，這對(duì)于UI圖標(biāo)設(shè)計(jì)來(lái)說(shuō)是十分重要的，這也就對(duì)圖標(biāo)設(shè)計(jì)時(shí)的表現(xiàn)張力提出了很高的要求。通常來(lái)說(shuō)，大部分設(shè)計(jì)師會(huì)選擇簡(jiǎn)潔化的設(shè)計(jì)方式來(lái)突出圖標(biāo)，但是過(guò)于追求簡(jiǎn)潔化的表現(xiàn)形式會(huì)導(dǎo)致圖標(biāo)的表現(xiàn)張力受到影響，圖標(biāo)過(guò)于簡(jiǎn)潔還會(huì)導(dǎo)致用戶的印象降低。因此這類問(wèn)題通?？梢杂帽馄交脑O(shè)計(jì)方式來(lái)解決，扁平化設(shè)計(jì)方式是將傳統(tǒng)設(shè)計(jì)風(fēng)格進(jìn)行改良，對(duì)于圖標(biāo)裝飾的元素、花紋以及復(fù)雜的漸變形式進(jìn)行改善，使圖標(biāo)更加簡(jiǎn)潔，但是同時(shí)又會(huì)更加突出圖標(biāo)語(yǔ)言，提高圖標(biāo)的功能性。扁平化設(shè)計(jì)風(fēng)格強(qiáng)調(diào)主題含義，雖然嚴(yán)謹(jǐn)性上會(huì)比具象化的圖標(biāo)稍有欠缺，但是畫(huà)面效果卻可以采用更加夸張的方式，因而廣泛應(yīng)用。

三、結(jié)束語(yǔ)

整體來(lái)看，UI圖標(biāo)的設(shè)計(jì)需要設(shè)計(jì)師投入更多的精力，站在用戶的視角上，采用多種方式去進(jìn)行設(shè)計(jì)，提高圖標(biāo)的設(shè)計(jì)感和表現(xiàn)張力，更好的為用戶使用。

參考文獻(xiàn)：

[1]何冬.淺議UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)技巧與運(yùn)用[J].山東工業(yè)技術(shù)，2019（14）：231.

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

[3]梁亮.UI設(shè)計(jì)中圖標(biāo)設(shè)計(jì)探索[J].美與時(shí)代（上），2016（06）：76-77.

[4]張旸谷.淺談圖標(biāo)設(shè)計(jì)在游戲UI中的魅力[D].福建師范大學(xué)，2015.

[5]張亞先.UI設(shè)計(jì)中圖標(biāo)設(shè)計(jì)的釋義方式[J].機(jī)械設(shè)計(jì)，2013，30（06）：107-109.