王月穎

摘 要：圖標(biāo)是UI界面中功能的展示，在UI設(shè)計中功能是多方面的，所以圖標(biāo)一般而言除了啟動圖標(biāo)意外，其他的圖標(biāo)均是以組的形式存在。如何將一組圖標(biāo)設(shè)計成為視覺表現(xiàn)手法、呈現(xiàn)風(fēng)格相統(tǒng)一的一個系列設(shè)計，是明確圖標(biāo)設(shè)計思路的第一步。但很多設(shè)計師在進(jìn)行設(shè)計時大多都以自己主觀的審美進(jìn)行設(shè)計，而忽略用戶群體的審美需求，如何運(yùn)用圖標(biāo)設(shè)計技巧來提高受眾對圖標(biāo)的審美性，如何讓用戶在產(chǎn)品體驗(yàn)時感觀舒適，就是UI設(shè)計師必須解決的問題。

關(guān)鍵詞：UI設(shè)計;圖標(biāo)設(shè)計;用戶體驗(yàn);審美

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

UI設(shè)計的成功取決于用戶的認(rèn)可和市場的流通，也就是APP產(chǎn)品點(diǎn)擊和下載以及留存時間，這也是對設(shè)計師的設(shè)計能力衡量標(biāo)準(zhǔn)，圖標(biāo)設(shè)計在整個UI設(shè)計的過程都占有很大的比重，圖標(biāo)設(shè)計也可以決定一款優(yōu)秀的UI設(shè)計的成敗，不僅體現(xiàn)操作功能的作用，還要承擔(dān)一部分審美的功能。圖標(biāo)設(shè)計的風(fēng)格較多，常用的設(shè)計技巧為扁平化設(shè)計手法、極簡化設(shè)計手法、擬物化設(shè)計手法、手繪技法等，無論是哪種風(fēng)格的圖標(biāo)設(shè)計，無論用什么設(shè)計技巧，都要遵循其設(shè)計原則和設(shè)計規(guī)律，并與界面整體相互協(xié)調(diào)、相互搭配。

不管什么設(shè)計，在設(shè)計之初都需要經(jīng)過緊密的思考，進(jìn)過設(shè)計團(tuán)隊頭腦風(fēng)暴的討論，才能進(jìn)行設(shè)計思路的制定，不能草率的開始，否則后期將會走很多重復(fù)的彎路。在進(jìn)過設(shè)計小組多次研討后才能決定出具體的設(shè)計風(fēng)格，然后再進(jìn)行草圖的繪制，繪制出圖標(biāo)的基本圖形，也就是圖標(biāo)輪廓的確定，當(dāng)下的圖標(biāo)流行趨勢是純圖形的設(shè)計，在圖標(biāo)中摒棄文字的描述，直接用圖形來表述含義，這樣從審美上能更容易受到用戶的喜愛，但脫離了文字的純圖形，在意義的表述上容易出現(xiàn)理解性的偏差，圖標(biāo)最大的作用是功能性的引導(dǎo)，也就是對用戶進(jìn)行提示和引導(dǎo)，這也是圖標(biāo)最重要最基本的功能，有的設(shè)計在離開文字的表述以后，圖標(biāo)的含義不能被受眾理解，出現(xiàn)識別問題，這就需要更加細(xì)致的設(shè)計，避免出現(xiàn)開圖說話的理解性錯誤。

草圖繪制完成后就是色稿的完成，是直接用線稿，還是著色處理都是需要經(jīng)過反復(fù)嘗試的。在著色方面，根據(jù)視覺表現(xiàn)風(fēng)格的不同，色彩填充的方式不也相同，例如色彩的純度、飽和度的選擇、圖標(biāo)是否需要線條等等，也是需要設(shè)計師進(jìn)行反復(fù)的調(diào)試。色稿填充完畢后，再來繼續(xù)觀察同一組的圖標(biāo)風(fēng)格是否同意，圖標(biāo)所表述的含義是否完整、準(zhǔn)確，如沒有問題就可以定稿，然后再進(jìn)行電腦軟件繪制。這些都是屬于圖標(biāo)的制作過程，但無論什么風(fēng)格的表現(xiàn)形式，無論使用什么設(shè)計技巧，都不能脫離圖標(biāo)的設(shè)計原則，圖標(biāo)的設(shè)計要注意以下幾點(diǎn)。

1 圖標(biāo)設(shè)計遵循的設(shè)計規(guī)律

手機(jī)端會根據(jù)手機(jī)的品牌運(yùn)用不同的系統(tǒng)，最出名的兩個系統(tǒng)為IPhone系統(tǒng)和Android系統(tǒng)，不同的設(shè)計平臺和不同的運(yùn)作系統(tǒng)都會有不同的規(guī)范要求，所以在進(jìn)行圖標(biāo)設(shè)計之前，要了解清楚各個系統(tǒng)和平臺之間的差異，如像素大小、屏幕長寬等，而這就是最直接的設(shè)計規(guī)范。除了尺寸、像素等因素外就是圖標(biāo)的圖形設(shè)定，是規(guī)則的圓形、矩形、橢圓，還是不規(guī)則形狀都需要依據(jù)界面的整體風(fēng)格進(jìn)行設(shè)定，使用不同的圖形將會為界面帶來不同的視覺效果，例如最常規(guī)的還是圓形和矩形，這兩個圖形既能很好的進(jìn)行造型，也能很好的和整體風(fēng)格進(jìn)行搭配，橢圓和不規(guī)則圖形較為自由，給用戶以隨性的視覺感官，不會帶來約束感。

2 圖標(biāo)的個性化展示

圖標(biāo)設(shè)計是APP產(chǎn)品界面展示的重要組成部分，它能展現(xiàn)界面的風(fēng)格，也能展現(xiàn)設(shè)計師的設(shè)計理念，因此我們再對圖標(biāo)設(shè)計時不能和市面上的同類產(chǎn)品相似，應(yīng)做到圖標(biāo)設(shè)計的個性化展示，這就要求設(shè)計團(tuán)隊盡可能的對市面上的同類型APP產(chǎn)品進(jìn)行調(diào)研，分析出該類圖標(biāo)的設(shè)計風(fēng)格、制作技巧、展示形態(tài)等，找出和他們不同的創(chuàng)意點(diǎn)，制作出具有個性化特征的獨(dú)特的圖標(biāo)設(shè)計，特別是具象形圖標(biāo)，就很容易產(chǎn)生重復(fù)性，在創(chuàng)新方面也很難有所突破，所以當(dāng)下的圖標(biāo)設(shè)計大多都已抽象形態(tài)出現(xiàn)，例如極簡主義風(fēng)格的圖標(biāo)、扁平化風(fēng)格的圖標(biāo)等等都是為了表現(xiàn)出獨(dú)特的設(shè)計風(fēng)格和設(shè)計形態(tài)。但無論怎么創(chuàng)新、怎么獨(dú)特性的表現(xiàn)，都不能離開圖標(biāo)的基本功能，也就是圖標(biāo)的表達(dá)，準(zhǔn)確的表述出圖標(biāo)的含義，讓用戶能一目了然的接收到圖標(biāo)所表述的信息，并理解其引導(dǎo)的功能性，圖標(biāo)的功能是基礎(chǔ)，美觀是設(shè)計表現(xiàn)，所以在進(jìn)行圖標(biāo)設(shè)計時，這兩者都要有足夠的重視。

3 圖標(biāo)設(shè)計和界面整體的視覺呼應(yīng)

圖標(biāo)既是單獨(dú)的個體，也是界面整體的部分，不能讓圖標(biāo)和界面呈現(xiàn)兩種風(fēng)格，在進(jìn)行圖標(biāo)設(shè)計時一定要以整體界面為設(shè)計原點(diǎn)。要做到這點(diǎn)就及其考驗(yàn)設(shè)計師的設(shè)計功底、設(shè)計技巧以及整體把控能力，在整體設(shè)計上要具備功能性的同時展示審美效果，且要具備一定的新意，不能和其他類型APP產(chǎn)品相似，確定主體風(fēng)格后再進(jìn)行圖標(biāo)的設(shè)計，一定要做到兩者之間能相互呼應(yīng)，例如常規(guī)的設(shè)計方法有將圖標(biāo)的外形界面外形相統(tǒng)一、圖標(biāo)色彩和界面色彩相統(tǒng)一、圖標(biāo)圖形的設(shè)計元素融入界面圖形當(dāng)中進(jìn)行兩者的呼應(yīng)、界面分區(qū)元素和圖標(biāo)相呼應(yīng)等等設(shè)計技巧。

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

圖標(biāo)和界面布局的關(guān)系非常重要，不能出現(xiàn)有失平衡的設(shè)計出現(xiàn)，例如系列圖標(biāo)之間的間距關(guān)系、圖標(biāo)左右兩端和界面邊界的關(guān)系，找到界面的平衡點(diǎn)，在進(jìn)行圖標(biāo)的布局，讓整體和局部的版式相統(tǒng)一。

圖標(biāo)設(shè)計在當(dāng)下這個個性化特征非常明顯的時代，設(shè)計的本身是為了讓用戶群體認(rèn)同，為了響應(yīng)用戶的審美需求、個性化需求，要求將會越來越多，但美觀固然重要，功能性的表現(xiàn)也必須突出，不能為了美觀而薄弱功能顯示，這才是圖標(biāo)設(shè)計最重要的設(shè)計原則與設(shè)計技巧。

參考文獻(xiàn)：

[1]王曉迎，王浩，孔陶茹.APP圖標(biāo)設(shè)計中原型理論的應(yīng)用[J].新西部（理論版），2017（03）.

[2]楊媛.UI設(shè)計中用戶交互體驗(yàn)的視覺思維[J].山東工業(yè)技術(shù)，2018.

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