基于移動(dòng)互聯(lián)網(wǎng)的界面圖標(biāo)藝術(shù)設(shè)計(jì)原則

文/敖蕾

首先需強(qiáng)調(diào)，圖標(biāo)有別于標(biāo)志和圖示。標(biāo)志不受地理、人文與歷史的限制，允許通過打破傳統(tǒng)的時(shí)間與空間限制而采用的多種藝術(shù)表現(xiàn)形式，重在傳達(dá)出企業(yè)的理念與愿景；圖示則是通過較為直觀的展現(xiàn)形式，實(shí)現(xiàn)快速被用戶認(rèn)知的提示作用的圖形。圖標(biāo)是基于圖像與隱喻的集合，在用戶腦海中建立連接后，用戶才會(huì)點(diǎn)擊相應(yīng)的圖標(biāo)，通常運(yùn)用在某個(gè)應(yīng)用程序、界面窗口、導(dǎo)航選項(xiàng)、計(jì)算機(jī)命令等互聯(lián)網(wǎng)平臺(tái)。

識(shí)別性不佳的圖標(biāo)，往往會(huì)給用戶在操作時(shí)帶來(lái)誤解和障礙，尤其是過度復(fù)雜或者過度簡(jiǎn)練、抽象概念的圖標(biāo)，都會(huì)給用戶帶來(lái)很多困擾。識(shí)別性好的圖標(biāo)，不僅可以為用戶操作提供方便而且還能在使用過程中帶給用戶愉悅感。因此，圖標(biāo)不是隨意的設(shè)計(jì)與表達(dá)，它需要根據(jù)產(chǎn)品的設(shè)計(jì)邏輯，遵循以下幾個(gè)藝術(shù)設(shè)計(jì)原則：

一、隱喻的精準(zhǔn)性

在藝術(shù)設(shè)計(jì)中，設(shè)計(jì)語(yǔ)言很多時(shí)候是聯(lián)想的、隱喻的。如果我們能充分了解思維隱喻的“工作”方式，就能更深層次的把握設(shè)計(jì)的創(chuàng)造性語(yǔ)言，創(chuàng)造出更多情感化、人性化的設(shè)計(jì)。

(一)通用的圖形符號(hào)

1981年推出的XEROX 8010是第一款圖形用戶的系統(tǒng)(圖1)，被認(rèn)為是用戶圖形界面設(shè)計(jì)的鼻祖，其界面展示一系列具有隱喻的圖標(biāo)設(shè)計(jì)：文件、文件夾和信箱等。我們現(xiàn)在很多設(shè)備的界面設(shè)計(jì)都是基于此款系統(tǒng)界面設(shè)計(jì)的視覺使用習(xí)慣來(lái)制定。

設(shè)計(jì)師Jon Hicks認(rèn)為，“圖標(biāo)設(shè)計(jì)是一個(gè)小小的奇跡，它們可以超越語(yǔ)言的障礙，簡(jiǎn)明的指引警告和方向，傳遞我們的情感，并且指明用戶應(yīng)該點(diǎn)擊哪一個(gè)按鈕。”[1]圖標(biāo)的根本意義就是通過大家共同認(rèn)知的語(yǔ)言，讓用戶理解、操作并快速的獲取信息。選擇目標(biāo)用戶都可以用認(rèn)可的圖標(biāo)來(lái)進(jìn)行表現(xiàn)，這樣可以幫助我們?cè)O(shè)計(jì)更加行之有效。

圖1 Xerox 8010 Information System界面

(二)跨文化

國(guó)際化圖標(biāo)設(shè)計(jì)，更需在充分調(diào)研后謹(jǐn)慎的使用視覺隱喻，注意其形象和色彩在跨文化上產(chǎn)生的差異：

1.形象

用戶界面中，只有圖標(biāo)在被準(zhǔn)確識(shí)別的情況下才是有效的，才會(huì)通過按鈕將會(huì)實(shí)現(xiàn)的目的快速而緊密聯(lián)系在一起。設(shè)計(jì)師們會(huì)通過調(diào)研盡力回避做出模棱兩可的圖標(biāo)設(shè)計(jì)。

在界面設(shè)計(jì)中運(yùn)用國(guó)旗、地圖、手勢(shì)和動(dòng)物都是非常敏感的符號(hào)，同樣需要謹(jǐn)慎使用。國(guó)旗普遍具有豐富而鮮艷的色彩，可以添加到沉悶的界面中，增加界面的活力與藝術(shù)美感，但是旗幟代表了更多政治的色彩。

2.色彩

色彩可以是一個(gè)主題，在抽象的界面背景或者按鈕中使用色彩是沒有什么顧慮的。但是當(dāng)色彩用在一個(gè)特定的語(yǔ)境中，不同的國(guó)家就會(huì)有不同的意義。在圖標(biāo)藝術(shù)設(shè)計(jì)中不僅僅要考慮到用戶，同時(shí)也要考慮到在什么場(chǎng)景下，用戶會(huì)使用該產(chǎn)品，以及目標(biāo)用戶真正的需求體驗(yàn)。這與互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)邏輯是緊密相連的，怎樣將用戶需求與藝術(shù)表現(xiàn)形式相結(jié)合是現(xiàn)代互聯(lián)網(wǎng)下圖標(biāo)設(shè)計(jì)的藝術(shù)挑戰(zhàn)。因此，在制作圖標(biāo)設(shè)計(jì)之前利用網(wǎng)絡(luò)進(jìn)行充分的調(diào)研必不可少。

二、圖形表達(dá)的簡(jiǎn)約性

除了顏色、形狀給人的直觀感受外，圖標(biāo)作為人與機(jī)器互相傳遞信息的媒介，其主要職能就是負(fù)責(zé)引導(dǎo)用戶對(duì)于界面的使用和操作。簡(jiǎn)約的圖形表達(dá)可以增加用戶對(duì)于產(chǎn)品使用的友好度，與增加用戶粘性。一種錯(cuò)誤的觀點(diǎn)認(rèn)為圖標(biāo)只是對(duì)界面起到裝飾作用，不會(huì)主導(dǎo)界面的信息操作。事實(shí)上，擁有繁瑣細(xì)節(jié)的圖標(biāo)不僅會(huì)影響其被準(zhǔn)確的識(shí)別，為用戶能夠快速理解圖標(biāo)所傳遞出的信息造成障礙，而且比文字更難理解，造成了操作時(shí)的信息傳遞障礙。有意思或者趣味性很強(qiáng)的圖標(biāo)會(huì)帶給用戶新鮮感，但不是所有用戶上來(lái)就可以輕松操作。利用視覺策略能夠準(zhǔn)確而快速的把信息提供給用戶是至關(guān)重要的事情。

如Starbucks網(wǎng)站的導(dǎo)航設(shè)計(jì)，我們僅在頁(yè)面上端看見一個(gè)代表購(gòu)物車的口袋圖標(biāo)、尋找店面位置的圖標(biāo)以及查找圖標(biāo)。兩個(gè)圖標(biāo)對(duì)該品牌色(綠色)進(jìn)行提亮，并且作為導(dǎo)航合理的進(jìn)行使用，體現(xiàn)圖標(biāo)在導(dǎo)航中的作用，為用戶快速的使用提供了方便。(見圖2)

圖2 Starbucks 官網(wǎng)

可見，圖標(biāo)不僅僅是作為裝飾或者視覺趣味元素被添加在界面中，更重要的是他們可以作為導(dǎo)航的輔助元素，讓用戶快速的獲取最主要的需求，讓一個(gè)圖形快速的促進(jìn)用戶的記憶保留。

三、設(shè)計(jì)風(fēng)格的一致性

在為移動(dòng)互聯(lián)網(wǎng)設(shè)備做整體圖標(biāo)設(shè)計(jì)的時(shí)候，除去要回避過度復(fù)雜的圖標(biāo)設(shè)計(jì)，也要與整個(gè)系統(tǒng)或者網(wǎng)站美學(xué)風(fēng)格一致，要求具有統(tǒng)一的設(shè)計(jì)風(fēng)格。圖標(biāo)通常情況下可以劃分為象形圖、表意圖形、隨意圖形，由于圖標(biāo)不可能單獨(dú)只設(shè)計(jì)單一的圖標(biāo)，所以無(wú)論采用何種形式，必須保證圖標(biāo)的系列感和一致性的風(fēng)格。雖然圖標(biāo)設(shè)計(jì)師在很多方面會(huì)受到技術(shù)的限制，但是創(chuàng)造性永遠(yuǎn)是設(shè)計(jì)的核心思想，風(fēng)格化的產(chǎn)品會(huì)受到人們的青睞。長(zhǎng)久的扁平化圖標(biāo)也會(huì)帶給人乏味感，人們?cè)诰裆蠒?huì)渴望不尋常的設(shè)計(jì)。如果設(shè)計(jì)師產(chǎn)生好的設(shè)計(jì)想法，就要保持風(fēng)格的一致性，將圖標(biāo)做成一套系列化的、獨(dú)一無(wú)二的、易讀懂的圖標(biāo)。

同時(shí)，準(zhǔn)確的運(yùn)用隱喻、簡(jiǎn)潔的圖形表達(dá)與一致性的藝術(shù)風(fēng)格是界面設(shè)計(jì)中重要的設(shè)計(jì)原則，它可以使得界面設(shè)計(jì)化繁為簡(jiǎn)，把復(fù)雜的界面變得簡(jiǎn)單。使得用戶對(duì)于界面的認(rèn)知行為更加迅速和直觀，減輕用戶的辨識(shí)難度，讓用戶在輕松愉悅的狀態(tài)下完成交互過程。

綜上所述，在移動(dòng)互聯(lián)網(wǎng)迅速變化的背景下，新的概念界面會(huì)隨著新設(shè)備的出現(xiàn)，影響和改變?nèi)藗儾僮鞯姆绞健ｋS著顯示器分辨率和尺寸的不斷提高，圖標(biāo)設(shè)計(jì)也擺脫了像素的限制，大圖標(biāo)被廣泛的運(yùn)用在各種設(shè)備中。通常一套全新的圖標(biāo)設(shè)計(jì)難度要大于一套標(biāo)準(zhǔn)的、常見的、習(xí)慣的圖標(biāo)符號(hào)。因此，要想做出好的圖標(biāo)設(shè)計(jì)，除去遵循以上藝術(shù)設(shè)計(jì)原則外，還應(yīng)該跟蹤新的產(chǎn)品、了解界面設(shè)計(jì)的發(fā)展趨勢(shì)、及時(shí)了解客戶的需求，經(jīng)過系統(tǒng)而全面的調(diào)研與思考。

[1]http：//www.hicksdesign.co.uk/journal/