淺議UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)風(fēng)格及發(fā)展趨勢(shì)

何冬

摘 要：UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)是用戶與APP產(chǎn)品最直接的一種互動(dòng)，曾經(jīng)的圖標(biāo)設(shè)計(jì)以蘋果手機(jī)的界面及圖標(biāo)為潮流導(dǎo)向，甚至很多UI設(shè)計(jì)風(fēng)格和蘋果界面及其相似，但現(xiàn)在卻處于百花爭(zhēng)鳴的狀態(tài)，設(shè)計(jì)風(fēng)格也越漸豐富，如扁平化風(fēng)格、簡(jiǎn)約風(fēng)格、歐美風(fēng)、中國(guó)風(fēng)等，使用戶的選擇也越來越多，但對(duì)于設(shè)計(jì)師而言挑戰(zhàn)的難度也在逐漸加大，不斷進(jìn)行設(shè)計(jì)上的突破，形成獨(dú)具特色的UI界面、圖標(biāo)設(shè)計(jì)風(fēng)格是我們作為設(shè)計(jì)師必須要走的路。

關(guān)鍵詞：UI設(shè)計(jì)；圖標(biāo)；設(shè)計(jì)風(fēng)格；發(fā)展趨勢(shì)

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

UI界面中的圖標(biāo)設(shè)計(jì)是界面與用戶的互動(dòng)之一，也是用戶進(jìn)行點(diǎn)擊選擇的直接方式，圖標(biāo)設(shè)計(jì)的重要性不言而喻，最基本的識(shí)別性和引導(dǎo)性是圖標(biāo)設(shè)計(jì)最重要的功能，識(shí)別性越高、引導(dǎo)性越強(qiáng)，就越能受到用戶的喜愛，在圖標(biāo)設(shè)計(jì)上應(yīng)規(guī)避設(shè)計(jì)復(fù)雜、會(huì)出現(xiàn)視覺錯(cuò)誤、理解錯(cuò)誤的作品出現(xiàn)。作為圖標(biāo)設(shè)計(jì)除了啟動(dòng)按鈕圖標(biāo)以外大多都以系列的方式存在，及多個(gè)圖標(biāo)共存，因此在進(jìn)行設(shè)計(jì)前要仔細(xì)的將系列圖標(biāo)進(jìn)行系統(tǒng)性規(guī)劃，確定設(shè)計(jì)風(fēng)格、要運(yùn)用的設(shè)計(jì)元素、圖標(biāo)的圖形、圖標(biāo)的色彩等，要運(yùn)用較為相同視覺處理方式，并和界面圖形相匹配，達(dá)到在視覺上的相互協(xié)調(diào)的關(guān)系，但在圖標(biāo)的內(nèi)部圖形設(shè)計(jì)上，一定要根據(jù)圖標(biāo)的功能性設(shè)計(jì)出圖形的差異感，不能出現(xiàn)不好區(qū)分、視覺引導(dǎo)功能類似的情況。為了贏得用戶的喜愛，圖標(biāo)的創(chuàng)意性、個(gè)性化特征必須得以表現(xiàn)，不斷的挖掘圖標(biāo)的創(chuàng)意設(shè)計(jì)，設(shè)計(jì)出不同類型、不同風(fēng)格、不同藝術(shù)表現(xiàn)形式的圖標(biāo)才能脫離市面上的圖標(biāo)的影子，當(dāng)下市面上較為流行的圖標(biāo)風(fēng)格主要有扁平化風(fēng)格圖標(biāo)設(shè)計(jì)和擬物化風(fēng)格圖標(biāo)設(shè)計(jì)，下面就這兩者進(jìn)行分析，并對(duì)UI圖標(biāo)設(shè)計(jì)的發(fā)展趨勢(shì)進(jìn)行探討：

1 圖標(biāo)設(shè)計(jì)風(fēng)格分析

1.1 扁平化風(fēng)格圖標(biāo)設(shè)計(jì)

扁平化風(fēng)格圖標(biāo)設(shè)計(jì)現(xiàn)在深受設(shè)計(jì)師的喜愛，其一是視覺表現(xiàn)效果較好；其二是在進(jìn)行app應(yīng)用時(shí)，將圖標(biāo)降低像素后在界面中受到的視覺影響也較小，使用方便；其三是和界面整體風(fēng)格容易搭配，視覺效果能較為融洽的進(jìn)行統(tǒng)一。

扁平化風(fēng)格的圖標(biāo)設(shè)計(jì)在設(shè)計(jì)上更多的是考慮色彩的搭配和圖形的拼接，不再進(jìn)行過多的色彩漸變運(yùn)用、高光的應(yīng)用、陰影的應(yīng)用，不再過多的運(yùn)用其他視覺元素的方式，在圖標(biāo)上直接進(jìn)行互補(bǔ)色或同色系變化的色塊運(yùn)用，能讓用戶更為直接的感受到其視覺含義，正是因?yàn)檫@種處理方式，讓用戶的視覺中心更加集中，不再受到其他的視覺元素影響。扁平化風(fēng)格的圖標(biāo)設(shè)計(jì)出現(xiàn)以后讓UI界面的視覺表現(xiàn)更為直接、更加簡(jiǎn)潔、更加高效。

扁平化風(fēng)格在圖標(biāo)的表現(xiàn)上經(jīng)過設(shè)計(jì)師的努力也進(jìn)行了一些改變，具有代表性的有半扁平化圖標(biāo)設(shè)計(jì)、具有剪影效果的扁平化圖標(biāo)設(shè)計(jì)、文字扁平化圖標(biāo)設(shè)計(jì)等，半扁平化的圖標(biāo)設(shè)計(jì)較扁平化風(fēng)格略微復(fù)雜，但還是以色塊的形式進(jìn)行加減，例如可以出現(xiàn)一定的陰影色塊，用以加強(qiáng)立體感、強(qiáng)化圖標(biāo)中線條的作用，對(duì)線條進(jìn)行修飾上的強(qiáng)化等等形式。具有剪影效果的扁平化圖標(biāo)設(shè)計(jì)，圖形的呈現(xiàn)還是以色塊為主，區(qū)別是在于將圖形進(jìn)行了鏤空剪切設(shè)計(jì)，在設(shè)計(jì)上融入了光影的穿透效果，因此在圖標(biāo)的輪廓上和圖形的色彩對(duì)比上更為亮眼，這樣的設(shè)計(jì)業(yè)能強(qiáng)化視覺效果，只是在界面的其他圖形也應(yīng)該和其進(jìn)行呼應(yīng)，也使用剪影的設(shè)計(jì)方式，不然界面的視覺效果將不會(huì)協(xié)調(diào)。文字扁平化圖標(biāo)設(shè)計(jì)就較為簡(jiǎn)單了，視覺的審美效果也略微差一些，只是在引導(dǎo)性上更強(qiáng)了。

1.2 擬物化風(fēng)格圖標(biāo)設(shè)計(jì)

擬物化風(fēng)格圖標(biāo)設(shè)計(jì)其實(shí)是將具象形圖標(biāo)和扁平化設(shè)計(jì)風(fēng)格相結(jié)合的產(chǎn)物，是設(shè)計(jì)師將收集到的符合創(chuàng)意及圖標(biāo)設(shè)計(jì)要求具象性事物進(jìn)行色塊的提煉而成，擬物化設(shè)計(jì)其實(shí)就是設(shè)計(jì)師在既追求事物的原生形態(tài)下進(jìn)行視覺上的藝術(shù)表現(xiàn)，在圖標(biāo)中的圖形設(shè)計(jì)和原有形態(tài)基本保持一致，其目的是為了給予用戶在視覺上的認(rèn)同感，讓用于能在看到圖標(biāo)的第一時(shí)間就能明確了解其含義，例如淘寶APP中的購(gòu)物車形象、錢包形象、貨車送貨的形象等等，都是較為具象的形態(tài)，設(shè)計(jì)師借用原形態(tài)的形狀、材質(zhì)、光澤等諸多細(xì)節(jié)進(jìn)行分解提煉設(shè)計(jì)，以達(dá)到在視覺上的高度還原。

擬物化風(fēng)格圖標(biāo)設(shè)計(jì)多表現(xiàn)為帶有一定質(zhì)感效果的輕質(zhì)感擬物風(fēng)格圖標(biāo)以及半擬物設(shè)計(jì)風(fēng)格圖標(biāo)，具備一定質(zhì)感的輕質(zhì)感擬物風(fēng)格圖標(biāo)主要是運(yùn)用圖形的漸變、事物的投影、調(diào)節(jié)色塊透明度等方式來表現(xiàn)，在質(zhì)感上相較于一般的擬物化風(fēng)格運(yùn)用的元素更多，造型更細(xì)致。半擬物風(fēng)格圖標(biāo)是指在擬物化風(fēng)格上進(jìn)行升華處理，在畫面的層次上進(jìn)行刪減，完全不運(yùn)用陰影效果，在色彩的處理上也去掉了漸變效果，在素材的紋樣上也去掉了肌理感，可以說更傾向于扁平化風(fēng)格圖標(biāo)。

2 圖標(biāo)設(shè)計(jì)的發(fā)展趨勢(shì)

相對(duì)于傳統(tǒng)的UI圖標(biāo)設(shè)計(jì)已經(jīng)從最初的具象圖標(biāo)到扁平化圖標(biāo)進(jìn)行了演變，其中經(jīng)過了多種設(shè)計(jì)風(fēng)格的進(jìn)化，最終才形成了成熟的扁平化風(fēng)格圖標(biāo)設(shè)計(jì)，相較于傳統(tǒng)的圖標(biāo)設(shè)計(jì)，扁平化風(fēng)格圖標(biāo)有著諸多優(yōu)勢(shì)，并成為圖標(biāo)設(shè)計(jì)的發(fā)展趨勢(shì)。

扁平化圖標(biāo)的發(fā)展不是一絕而就的，也不僅僅是簡(jiǎn)單的因?yàn)橛脩舻囊曈X審美疲勞而出現(xiàn)的，隨著數(shù)媒的高速發(fā)展，在圖標(biāo)設(shè)計(jì)上因?yàn)榫呦髨D形的局限性和功能性都受到了影響，視覺效果越漸變差，另一方面是因?yàn)閭鹘y(tǒng)的具象圖標(biāo)在狹小的界面空間中視覺效果較為模糊，因此傳統(tǒng)的圖標(biāo)設(shè)計(jì)風(fēng)格被扁平化風(fēng)格所取締。

但圖標(biāo)設(shè)計(jì)本來就是多元化的設(shè)計(jì)，根據(jù)產(chǎn)品、企業(yè)、設(shè)計(jì)師的喜好、受眾的群體等都有不同，所以無論是傳統(tǒng)的具象圖標(biāo)還是擬物化圖標(biāo)、扁平化圖標(biāo)都有一定的市場(chǎng)，他們是共存的關(guān)系，風(fēng)格的確定取決于整體，圖標(biāo)的作用是讓用戶的操作更為便捷、易懂，視覺美感、視覺沖擊力更強(qiáng)，界面效果的整體性決定了圖標(biāo)設(shè)計(jì)的風(fēng)格。經(jīng)過多年的設(shè)計(jì)演變，扁平化風(fēng)格也更被受眾所接受，簡(jiǎn)潔的圖標(biāo)已經(jīng)成為受眾的審美需求習(xí)慣，例如錢包、付款、地圖、購(gòu)物車等簡(jiǎn)潔的效果能讓用戶的視覺效果更清晰，定位、交流、發(fā)現(xiàn)等較為抽象的詞匯也更適合扁平化的抽象表現(xiàn)或直接進(jìn)行文字表現(xiàn)。

參考文獻(xiàn)：

[1]王鈞瓏.移動(dòng)終端圖標(biāo)設(shè)計(jì)的發(fā)展及應(yīng)用研究[D].西北大學(xué)，2015（06）.

[2]夏韜.淺析智能手機(jī)圖標(biāo)擬物化與扁平化的發(fā)展趨勢(shì)[J].設(shè)計(jì)，2017（01）.