淺議UI設計中的圖標設計技巧與運用

王月穎

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

關鍵詞：UI設計;圖標設計;用戶體驗;審美

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

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

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

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

1 圖標設計遵循的設計規(guī)律

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

2 圖標的個性化展示

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

3 圖標設計和界面整體的視覺呼應

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

4 圖標與界面布局的關系

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

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

參考文獻：

[1]王曉迎，王浩，孔陶茹.APP圖標設計中原型理論的應用[J].新西部（理論版），2017（03）.

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

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