UI設(shè)計(jì)中圖標(biāo)設(shè)計(jì)的應(yīng)用

龔曉敏

【摘 要】圖標(biāo)設(shè)計(jì)在UI中要展現(xiàn)其良好的視覺(jué)美感和人性化的用戶體驗(yàn)。本文主要通過(guò)對(duì)UI圖標(biāo)設(shè)計(jì)的表現(xiàn)形式類別，圖標(biāo)設(shè)計(jì)的規(guī)范要求，圖標(biāo)的圖形視覺(jué)形式，圖標(biāo)的色彩要素四個(gè)方面來(lái)論述UI圖標(biāo)設(shè)計(jì)的應(yīng)用。

【關(guān)鍵詞】UI設(shè)計(jì) ;圖標(biāo)設(shè)計(jì);應(yīng)用

中圖分類號(hào)：J524 文獻(xiàn)標(biāo)志碼：A? ? ? ? ? ? ? 文章編號(hào)：1007-0125（2019）34-0134-01

圖標(biāo)設(shè)計(jì)在UI 界面設(shè)計(jì)中要具備個(gè)性化、獨(dú)特化。在 UI 圖標(biāo)設(shè)計(jì)中最直接的作用就是便于用戶識(shí)別和記憶。圖標(biāo)設(shè)計(jì)中需要考慮的有元素，有圖標(biāo)的形狀、大小、色彩、表現(xiàn)形式等。在 UI 設(shè)計(jì)中，圖標(biāo)設(shè)計(jì)往往不是單獨(dú)在界面中呈現(xiàn)，而是多個(gè)圖標(biāo)并列存在，一般以同色系、同輪廓、同表現(xiàn)形式等形成系列風(fēng)格。出色的圖標(biāo)設(shè)計(jì)既可以全面地體現(xiàn)軟件的功能，也能保證與界面整體的和諧性，圖標(biāo)設(shè)計(jì)中美觀性與功能性是同等重要的，只有這樣的設(shè)計(jì)才是符合市場(chǎng)標(biāo)準(zhǔn)以及用戶需要的。

一、圖標(biāo)的表現(xiàn)形式類別

近年來(lái)圖標(biāo)設(shè)計(jì)風(fēng)格的主要有擬物化風(fēng)格、線性風(fēng)格、文字風(fēng)格、扁平化風(fēng)格等。現(xiàn)在APP的圖標(biāo)設(shè)計(jì)流行的是以擬物化風(fēng)格和扁平化風(fēng)格為主，無(wú)論是針對(duì)哪種風(fēng)格的圖標(biāo)設(shè)計(jì)，都需要根據(jù)UI設(shè)計(jì)的設(shè)計(jì)原則、配色原則，加以恰當(dāng)運(yùn)用才可以切合如今對(duì)UI界面的需要。

本文主要以分析擬物化風(fēng)格和扁平化風(fēng)格為例。擬物化追求的是與物品本身的相似度，讓人通過(guò)造型、質(zhì)感、陰影等效果的運(yùn)用一眼認(rèn)出是什么事物，有的可以體現(xiàn)得很完美，有的會(huì)給人感覺(jué)過(guò)于細(xì)節(jié)化，以及裝飾感太強(qiáng)。擬物化的設(shè)計(jì)也會(huì)有過(guò)分注重形式和缺乏功能性展現(xiàn)的缺點(diǎn)。

扁平化設(shè)計(jì)是指通過(guò)抽象、簡(jiǎn)化、符號(hào)化的設(shè)計(jì)元素舍棄高光、陰影和透視感的效果。整體界面給人感受是極簡(jiǎn)的。交互的核心就是對(duì)功能本身的使用，所以省去了繁雜的界面設(shè)計(jì)。扁平化的視覺(jué)語(yǔ)言是偏向于整體造型的形式美感，圖標(biāo)主要以簡(jiǎn)潔的線條、形狀、漸變配色和適當(dāng)?shù)脑貋?lái)展現(xiàn)。如圖所示

二、圖標(biāo)設(shè)計(jì)的規(guī)范要求

圖標(biāo)設(shè)計(jì)原則要符合設(shè)計(jì)規(guī)范，必須要考慮到不同系統(tǒng)的界面要求也不同，例如手機(jī)屏幕的尺寸和分辨率都有所區(qū)別。市場(chǎng)上所常見(jiàn)的圖標(biāo)通常是以圓形或者方形為主，這樣的形狀能夠很好地與界面相融合，也能保證排列時(shí)圖標(biāo)顯得很規(guī)整。圖標(biāo)設(shè)計(jì)中也會(huì)存在某些特異的圖形，比如擬物化的輪廓形。

在圖標(biāo)的界面布局設(shè)計(jì)過(guò)程時(shí)，需要把控界面里圖標(biāo)的平衡，視覺(jué)清晰度和圖標(biāo)的標(biāo)準(zhǔn)效果。界面里圖標(biāo)的平衡就是指圖標(biāo)圍繞界面四周的平衡關(guān)系，如視覺(jué)元素的分布是否合理，圖標(biāo)在界面中是否太分散。圖標(biāo)在界面中所占的比例是有限的，所以設(shè)計(jì)師要充分考慮圖標(biāo)的尺寸，過(guò)小的圖標(biāo)會(huì)導(dǎo)致用戶容易識(shí)別錯(cuò)誤信息以及引起視覺(jué)疲勞，而過(guò)大的圖標(biāo)不美觀，顯得畫(huà)面感太過(guò)飽和。

三、圖標(biāo)的圖形視覺(jué)形式

圖標(biāo)的設(shè)計(jì)要符合界面的整體視覺(jué)效果。設(shè)計(jì)師通常運(yùn)用簡(jiǎn)化圖標(biāo)設(shè)計(jì)，讓圖標(biāo)在不破壞整體界面環(huán)境的情況下，顯得簡(jiǎn)單又引人注目。但是簡(jiǎn)潔圖標(biāo)設(shè)計(jì)的表現(xiàn)力會(huì)有所缺失，也會(huì)影響到用戶的記憶，就如同扁平化風(fēng)格的圖標(biāo)設(shè)計(jì)將圖標(biāo)做得更簡(jiǎn)潔化，所以圖標(biāo)的語(yǔ)言性也表現(xiàn)得更為明顯，這也使圖標(biāo)的功能性有了一定的提高。扁平化風(fēng)格設(shè)計(jì)主要表達(dá)突出主題的內(nèi)涵，將具體的事物進(jìn)行抽象化的設(shè)計(jì)處理，并通過(guò)簡(jiǎn)單的圖形、色塊與線條來(lái)完成。抽象的圖形設(shè)計(jì)在造型上沒(méi)有具象圖形設(shè)計(jì)的難度高，可以通過(guò)夸張等方式來(lái)展現(xiàn)畫(huà)面效果，這既可以節(jié)約設(shè)計(jì)師的時(shí)間，又同時(shí)能呈現(xiàn)優(yōu)良的視覺(jué)效果，所以扁平化的設(shè)計(jì)風(fēng)格如今在市場(chǎng)上很流行。

圖標(biāo)設(shè)計(jì)在界面呈現(xiàn)時(shí)的基本要求是必須能夠保證在畫(huà)面當(dāng)中的清晰度，設(shè)計(jì)師在進(jìn)行設(shè)計(jì)的時(shí)候，圖標(biāo)是可以放大來(lái)展現(xiàn)的，但在手機(jī)界面中進(jìn)行查看的時(shí)候，圖標(biāo)的大小是一個(gè)固定的狀態(tài)，并不能任意地進(jìn)行調(diào)整，而且圖標(biāo)在放入界面應(yīng)用之前，會(huì)對(duì)其進(jìn)行像素的適當(dāng)調(diào)整，將界面中所運(yùn)用元素的像素調(diào)小，是為了減輕APP的運(yùn)行負(fù)荷，提升軟件的運(yùn)行速度。因此對(duì)于圖標(biāo)設(shè)計(jì)師，要保證既直觀又明確地呈現(xiàn)圖標(biāo)的功能。

四、圖標(biāo)的色彩要素

色彩在UI圖標(biāo)設(shè)計(jì)時(shí)需要引人注目，色彩的選擇要與設(shè)計(jì)的主題相適應(yīng)，同時(shí)還要與用戶的需求相符，不能用色彩心理的潛在因素去影響用戶的使用選擇，要避免使用視覺(jué)沖擊力較大的顏色。例如黑色太過(guò)暗淡深沉，而紅色會(huì)容易導(dǎo)致用戶心理緊張，這類顏色盡量不要大面積地在圖標(biāo)設(shè)計(jì)中運(yùn)用。

設(shè)計(jì)師要依照色彩心理的原理，在設(shè)計(jì)時(shí)既要符合功能性，也要滿足用戶需要。圖標(biāo)設(shè)計(jì)的色彩選擇上要注意整體界面的和諧搭配，要保持統(tǒng)一性，對(duì)于不同的類型產(chǎn)品和使用人群的色彩搭配上也是不同的。使用者以年輕人居多的界面設(shè)計(jì)，在色彩的選擇上可以更加繽紛亮眼，而對(duì)于中老年人應(yīng)用的APP界面色彩搭配時(shí)要沉穩(wěn)，可以以同色性的顏色為主。

綜上所述，本文主要從圖標(biāo)設(shè)計(jì)的表現(xiàn)形式類別，圖標(biāo)設(shè)計(jì)的規(guī)范要求，圖標(biāo)的圖形視覺(jué)形式，圖標(biāo)的色彩要素四個(gè)方面來(lái)分析論述UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)。

參考文獻(xiàn)：

[1] 張媛 .UI 設(shè)計(jì)中的視覺(jué)表現(xiàn) [J]. 大眾文藝 ，2014.

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