移動(dòng)UI設(shè)計(jì)中的圖標(biāo)應(yīng)用分析

趙鑫

摘要：軟件設(shè)計(jì)主要由UI設(shè)計(jì)與編碼設(shè)計(jì)構(gòu)成。UI設(shè)計(jì)是一種用戶界面設(shè)計(jì)，移動(dòng)UI設(shè)計(jì)主要關(guān)注移動(dòng)終端的用戶界面設(shè)計(jì)，如手機(jī)、平板電腦，以及各類手持終端設(shè)備等。本文選取移動(dòng)UI設(shè)計(jì)中的圖標(biāo)應(yīng)用分析作為研究題目，概述了圖標(biāo)分類。并以此為基礎(chǔ)，分別從圖標(biāo)設(shè)計(jì)原則、步驟、技巧等方面，對(duì)其應(yīng)用進(jìn)行了討論。

關(guān)鍵詞：移動(dòng)UI設(shè)計(jì);圖標(biāo);應(yīng)用分析

在移動(dòng)端的UI設(shè)計(jì)中，根據(jù)圖標(biāo)在應(yīng)用程序中的使用屬性，通常被分類為啟動(dòng)圖標(biāo)、工具欄圖標(biāo)。但是，從設(shè)計(jì)風(fēng)格方面看，對(duì)于圖標(biāo)的應(yīng)用又有擬物化、扁平化設(shè)計(jì)等。由此可見，移動(dòng)UI設(shè)計(jì)中的圖標(biāo)應(yīng)用過程，雖然十分強(qiáng)調(diào)用戶體驗(yàn)，但也應(yīng)借助圖標(biāo)設(shè)計(jì)中的規(guī)范、視覺、色彩、功能等，增強(qiáng)了用戶與應(yīng)用程序界面之間的“交互性”。具體分析如下：

1、圖標(biāo)設(shè)計(jì)原則

在移動(dòng)用戶界面設(shè)計(jì)時(shí)，設(shè)計(jì)師通常會(huì)考慮突出應(yīng)用程序的功能性、強(qiáng)調(diào)圖標(biāo)的影響力。以功能性為例，圖標(biāo)的辨識(shí)度要高、精準(zhǔn)的反應(yīng)應(yīng)用程序的主要特征，使移動(dòng)端用戶一看到圖標(biāo)便會(huì)立即聯(lián)想到其特征顯示的功能及作用。以影響力為例，側(cè)重點(diǎn)放在對(duì)風(fēng)格的統(tǒng)一性把握、視頻形式的處理方面，包括色彩、質(zhì)感、紋理、陰影等效果對(duì)于用戶產(chǎn)生的影響等。因此，在圖標(biāo)設(shè)計(jì)方面，通常會(huì)預(yù)設(shè)規(guī)范化原則、個(gè)性化原則、生活化原則等。

首先，在規(guī)范化原則方面，要求設(shè)計(jì)者根據(jù)移動(dòng)端的設(shè)備構(gòu)成要素，合理的進(jìn)行設(shè)計(jì)規(guī)范限定。例如，在智能手機(jī)領(lǐng)域，現(xiàn)階段普遍使用的蘋果系統(tǒng)（macOS）與安卓系統(tǒng)（Android）中，屏幕、分辨率等均存在差異，因而要求設(shè)計(jì)師能夠遵循相應(yīng)的規(guī)范，合理的確定圖標(biāo)的形態(tài)、樣式、屬性等。

其次，在規(guī)范化原則下，應(yīng)該注重個(gè)性化設(shè)計(jì)原則，預(yù)防因大同小異的設(shè)計(jì)問題，降低應(yīng)用程序圖標(biāo)的功能性與影響力。而且，當(dāng)前圖標(biāo)設(shè)計(jì)中的扁平化設(shè)計(jì)趨勢增強(qiáng)，擬物化設(shè)計(jì)的需求相對(duì)弱化。所以，在扁平化設(shè)計(jì)趨勢下，設(shè)計(jì)師應(yīng)該從圖標(biāo)界面的抽象性、簡潔性、視覺感受等方向強(qiáng)調(diào)圖標(biāo)的個(gè)性化特征。

第三，在生活化原則下，要求設(shè)計(jì)師將重點(diǎn)的元素提煉與篩選，對(duì)接到生活化層面，盡可能擷取熟悉之物的元素，利用格式塔視覺中圖底、聯(lián)想、抽象、變形、象征、重構(gòu)等不同的設(shè)計(jì)路徑，創(chuàng)造出非凡效果等。業(yè)內(nèi)人士通常也將生活化原則下的圖標(biāo)設(shè)計(jì)概括為“畫龍點(diǎn)睛”，由此可見，該原則在圖標(biāo)設(shè)計(jì)中起著十分重要的作用。

2、圖標(biāo)設(shè)計(jì)步驟

現(xiàn)階段移動(dòng)UI設(shè)計(jì)中的圖標(biāo)應(yīng)用十分普遍，對(duì)于圖標(biāo)的設(shè)計(jì)專業(yè)度與成熟相對(duì)較高。因此，已經(jīng)建立了設(shè)計(jì)流程相對(duì)清晰的設(shè)計(jì)步驟。另外，工業(yè)設(shè)計(jì)思想的引入，較好的推動(dòng)了圖標(biāo)產(chǎn)品設(shè)計(jì)的流程化作業(yè)，保障了圖標(biāo)設(shè)計(jì)時(shí)的按部就班操作。分述如下：

第一，列舉圖標(biāo)要素清單，遵循設(shè)計(jì)原則，利用IOS設(shè)計(jì)方向，減少色彩干擾，提高圖標(biāo)辨識(shí)度。同時(shí)，按照?qǐng)D標(biāo)尺寸、線面、圓角，以及相關(guān)的效果參數(shù)調(diào)節(jié)方式，對(duì)各類要素進(jìn)行篩選與組合，完成草圖設(shè)計(jì)。

第二，借鑒移動(dòng)設(shè)備中的上線產(chǎn)品，優(yōu)化圖標(biāo)尺寸，確定金剛區(qū)圖標(biāo)、Tab欄圖標(biāo)、首頁圖標(biāo)的使用尺寸。然后，利用圖標(biāo)庫進(jìn)行辨識(shí)度調(diào)整與樣式設(shè)置等。

第三，圖標(biāo)設(shè)計(jì)完成后，應(yīng)該根據(jù)測試環(huán)節(jié)，對(duì)其進(jìn)行任務(wù)測試，包括細(xì)節(jié)自查、辨識(shí)度檢測、對(duì)比色測試。在測試環(huán)節(jié)應(yīng)該增強(qiáng)隨機(jī)用戶的使用評(píng)估，做好各項(xiàng)評(píng)估結(jié)果統(tǒng)計(jì)，再對(duì)其實(shí)施進(jìn)一步優(yōu)化處理，確保最終的圖標(biāo)設(shè)計(jì)方案，能夠代表應(yīng)用程序的功能、保障用戶的快速精準(zhǔn)識(shí)別，克服各項(xiàng)使用障礙等。

例如，在細(xì)節(jié)自查環(huán)節(jié)，應(yīng)該從業(yè)務(wù)聯(lián)系、色彩情緒、呼吸感、統(tǒng)一度的設(shè)計(jì)方面進(jìn)行逐一分析。而在辨識(shí)度測試環(huán)節(jié)，應(yīng)該通過遮擋法，保證用戶識(shí)別時(shí)的自主性，尤其應(yīng)該從用戶對(duì)圖標(biāo)的初步印象、聯(lián)想、含義理解、功能描述等方面進(jìn)行相對(duì)全面的功能特征剖析。在對(duì)比色測評(píng)環(huán)節(jié)，通常需要確定用戶的反應(yīng)時(shí)間，一般情況以5s作為限定時(shí)間，可以更好的對(duì)色弱用戶、色盲用戶等進(jìn)行使用障礙測試與評(píng)估等。

3、圖標(biāo)設(shè)計(jì)技巧及應(yīng)用

以應(yīng)用程序首頁金剛區(qū)（主圖標(biāo)區(qū)）的圖標(biāo)設(shè)計(jì)為例，圖標(biāo)定位在頁面上部位置，考慮到公司業(yè)務(wù)活動(dòng)的變更需求，因而，應(yīng)該結(jié)合Banner欄與頁面上部位置的限定，強(qiáng)調(diào)其需求層次。具體設(shè)計(jì)中，可以通過豐富色彩、面性圖標(biāo)等突出其需求特征。

例如，在初步設(shè)計(jì)環(huán)節(jié)，應(yīng)該按照規(guī)范性原則，對(duì)金剛區(qū)的基礎(chǔ)規(guī)范進(jìn)行確認(rèn)與限定，包括布局、尺寸等。按照比較典型的應(yīng)用程序圖標(biāo)設(shè)計(jì)看，該區(qū)域的圖標(biāo)尺寸保持在90px效果相對(duì)較好。另一方面，在圖標(biāo)內(nèi)部的呼吸感的設(shè)計(jì)方面，無論經(jīng)典性的圖標(biāo)設(shè)計(jì)與一般產(chǎn)品的設(shè)計(jì)，均十分強(qiáng)調(diào)黃金分割比。因此，在該方面，應(yīng)該利用黃金分割比，圖標(biāo)、文字、四周距離等進(jìn)行詳細(xì)計(jì)算，確保將此類參數(shù)控制在該定律之內(nèi)。至于圖標(biāo)形狀的設(shè)計(jì)，設(shè)計(jì)師可以借助阿里巴巴Iconfong之類的素材庫，進(jìn)行資源搜索，吸收一些有利于繪制圖標(biāo)形狀的設(shè)計(jì)經(jīng)驗(yàn)，包括造型、風(fēng)格、色彩等。尤其在配色方面，應(yīng)該按照主題色的個(gè)性化設(shè)計(jì)方向，合理的配置對(duì)比色、鄰近色。

4、結(jié)束語

總之，圖標(biāo)是移動(dòng)用戶界面設(shè)計(jì)中最為核心的構(gòu)成要素。除以上所說的金剛區(qū)設(shè)計(jì)之外，對(duì)于Tab欄的圖標(biāo)設(shè)計(jì)，也應(yīng)該結(jié)合設(shè)計(jì)尺寸、用戶群定位、品牌理念、業(yè)務(wù)范圍、產(chǎn)品功能、色彩情感等進(jìn)行全面分析。如金融類應(yīng)用程序應(yīng)該在Tab欄圖標(biāo)設(shè)計(jì)中，強(qiáng)調(diào)安全感、可靠性，盡量采用一些線性圖標(biāo)。而電商類的產(chǎn)品應(yīng)該注重對(duì)年齡層次的分類與風(fēng)格的簡潔化處理等。通過以上初步分析，建議在圖標(biāo)設(shè)計(jì)中，利用當(dāng)前的產(chǎn)品設(shè)計(jì)理念與工業(yè)設(shè)計(jì)思想，增強(qiáng)對(duì)全要素分析方法的使用，并按照產(chǎn)品設(shè)計(jì)各個(gè)構(gòu)成環(huán)節(jié)，按部就班的實(shí)施圖標(biāo)設(shè)計(jì)。

參考文獻(xiàn)

[1]甄珍.基于移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的UI設(shè)計(jì)要素與要點(diǎn)探究[J].數(shù)字通信世界，2021，5（2）：25.

[2]惠曉艷.色彩語意在UI設(shè)計(jì)中的應(yīng)用研究[J].西部皮革，2021，43（4）：1-2.

[3]王樂.淺談基于媒體融合場景的UI界面設(shè)計(jì)[J].環(huán)球首映，2021，13（1）：130-131.