童元園 （中國美術(shù)學(xué)院影視與動(dòng)畫藝術(shù)學(xué)院 310002）

數(shù)字媒體時(shí)代背景下圖標(biāo)設(shè)計(jì)的特征與創(chuàng)意要素

童元園 （中國美術(shù)學(xué)院影視與動(dòng)畫藝術(shù)學(xué)院 310002）

數(shù)字媒體與技術(shù)高速發(fā)展的今天，智能產(chǎn)品日異月更，對(duì)用戶界面的設(shè)計(jì)提出新的適配要求。圖標(biāo)作為連接人與物互動(dòng)對(duì)話的一個(gè)基礎(chǔ)環(huán)節(jié)，對(duì)其設(shè)計(jì)要素的思考也隨著數(shù)字平臺(tái)的特征產(chǎn)生新內(nèi)容。文章從圖標(biāo)設(shè)計(jì)特征出發(fā)，立足于數(shù)字平臺(tái)，對(duì)其在設(shè)計(jì)創(chuàng)造過程中的要素進(jìn)行歸納與總結(jié)。

數(shù)字媒體；圖標(biāo)設(shè)計(jì)；設(shè)計(jì)要素

媒體的革新是一股勢(shì)不可擋的洪流，從紙質(zhì)媒體到數(shù)字媒體的轉(zhuǎn)變，改變了一代人的閱讀與生活方式。圖標(biāo)設(shè)計(jì)在數(shù)字媒體平臺(tái)的環(huán)境下依托技術(shù)經(jīng)歷了一段并不算太漫長的發(fā)展之路，但呈加速度發(fā)展趨勢(shì)的技術(shù)更新引發(fā)設(shè)計(jì)者不斷的探索與出新，為我們描繪了一個(gè)精彩紛呈的圖標(biāo)世界。它們各類不同的數(shù)字內(nèi)容與界面中承擔(dān)說明與引導(dǎo)的使命，幫助人們快速定位，做出決定和行為，找到需要的東西，甚至連接整個(gè)世界……圖標(biāo)脫離了靜態(tài)面貌，具有更多元的形態(tài)和用戶體驗(yàn)內(nèi)涵。

一、圖標(biāo)的特征

1.圖標(biāo)是信息載體

圖標(biāo)最初作為計(jì)算機(jī)桌面文件的開啟入口，引導(dǎo)用戶進(jìn)行操作，從一開始就承載著傳遞信息的職能，作為信息的載體。在這類圖標(biāo)視覺呈現(xiàn)的過程中，信息如何以最準(zhǔn)確，凝練，易識(shí)別的方式出現(xiàn)是其核心主旨，亦是圖標(biāo)設(shè)計(jì)優(yōu)劣的首要判斷標(biāo)準(zhǔn)。

2.圖標(biāo)是藝術(shù)形式

無論是精致的擬物圖標(biāo)，還是簡約的扁平圖標(biāo)，或是各種風(fēng)格獨(dú)特的非主流圖標(biāo)設(shè)計(jì)，都包含著圖標(biāo)設(shè)計(jì)師對(duì)信息呈現(xiàn)形態(tài)的潛心推敲。圖標(biāo)既具有功能性，同時(shí)也需兼顧藝術(shù)的表達(dá)，對(duì)于圖標(biāo)形式語言的追求是與數(shù)字產(chǎn)品定位以及界面氣質(zhì)息息相關(guān)的，獨(dú)特的藝術(shù)表達(dá)也是數(shù)字產(chǎn)品脫穎而出的關(guān)鍵因素之一，但設(shè)計(jì)師對(duì)圖標(biāo)風(fēng)格的詮釋，仍是建立在對(duì)產(chǎn)品主題與界面層級(jí)深度理解的基礎(chǔ)之上，并非為了形式而形式。

3.圖標(biāo)是交叉學(xué)科的融合

數(shù)字媒體產(chǎn)品的設(shè)計(jì)是交叉學(xué)科的產(chǎn)物，涉及認(rèn)知心理學(xué)，符號(hào)學(xué)，形態(tài)學(xué)，計(jì)算機(jī)圖形圖像學(xué)，交互設(shè)計(jì)等知識(shí)范疇。技術(shù)平臺(tái)對(duì)分辨率，色彩呈現(xiàn)，到動(dòng)態(tài)效果的不同支持都在改變著圖標(biāo)最終輸出面貌，設(shè)計(jì)者對(duì)圖標(biāo)形態(tài)的把握和呈現(xiàn)也影響著用戶的體驗(yàn)感知。

二、數(shù)字媒體背景下圖標(biāo)創(chuàng)意要素

數(shù)字媒體與技術(shù)高速發(fā)展的今天，智能產(chǎn)品日異月更，對(duì)用戶界面的設(shè)計(jì)提出新的適配要求。圖標(biāo)作為連接人與物互動(dòng)對(duì)話的一個(gè)基礎(chǔ)環(huán)節(jié)，對(duì)其設(shè)計(jì)要素的思考也隨著不同平臺(tái)的特征而產(chǎn)生新內(nèi)容。

1.圖標(biāo)的形

一枚圖標(biāo)是否優(yōu)秀，形的選擇和把握是決定性要素之一。合理準(zhǔn)確的外形選擇決定了圖標(biāo)信息傳遞的精準(zhǔn)和用戶對(duì)其辨識(shí)度的提升。

對(duì)圖標(biāo)形的解讀可以從以下三方面加以方面理解：

（1）對(duì)象形的選擇

在圖標(biāo)設(shè)計(jì)的最初，必經(jīng)的一個(gè)階段即是對(duì)圖標(biāo)功能和其承載信息的解讀，在信息的解讀過程中，設(shè)計(jì)者會(huì)發(fā)現(xiàn)不同的用戶，不同的文化元素，地域背景都會(huì)對(duì)圖標(biāo)的設(shè)計(jì)產(chǎn)生影響，因此設(shè)計(jì)者需要找尋一個(gè)相對(duì)普適的形象，以保持圖標(biāo)信息傳達(dá)的國際通用性與識(shí)別性。例如（圖1）所示蘋果桌面系統(tǒng)圖標(biāo)“mail”，由于各國郵箱的外形各異，容易造成信息理解上的錯(cuò)誤，因此選擇國際通用的郵票為主型指代郵件概念，加蓋蘋果郵戳強(qiáng)化產(chǎn)品形象，輔以雄鷹比喻通信快速精準(zhǔn)。此外，形的選擇不僅指選擇正確的對(duì)象表達(dá)或隱喻，還包括對(duì)對(duì)象特征視角的鎖定以及組合對(duì)象主次關(guān)系的梳理等內(nèi)容，使圖標(biāo)以最佳視角和形態(tài)呈現(xiàn)。例如（圖2）中“相冊(cè)”圖標(biāo)設(shè)計(jì)，作者在手稿階段不斷嘗試各種視角與元素形態(tài)，最終選定以相對(duì)穩(wěn)定均衡的頂視角度詮釋圖標(biāo)功能，同時(shí)在相片的數(shù)量和造型上也根據(jù)識(shí)別原則進(jìn)行了調(diào)整。

圖1

圖2

（2）元素個(gè)數(shù)與組合

圖標(biāo)設(shè)計(jì)中有些信息可以直接通過具有明確所指概念的事物或符號(hào)呈現(xiàn)，而有些相對(duì)抽象的信息則需要通過具有能指概念的對(duì)象加以表達(dá)，更有些信息本身包含復(fù)合內(nèi)容，則需要通過形與形的組合編排才能更全面的對(duì)圖標(biāo)功能進(jìn)行釋義。（圖3）中右邊的收音機(jī)和購物車元素的組合表達(dá)了一個(gè)“廣播市場”的復(fù)合概念。由于同一枚圖標(biāo)會(huì)因不同的界面標(biāo)準(zhǔn)或使用區(qū)域形成不同尺寸要求，因此判斷圖標(biāo)中元素個(gè)數(shù)是否適度有著十分重要的意義。為了適應(yīng)不同尺寸圖標(biāo)的識(shí)別效果，設(shè)計(jì)者對(duì)圖標(biāo)元素會(huì)進(jìn)行有意識(shí)的增減和縮放，以免圖標(biāo)中信息元素過多過復(fù)雜帶來的內(nèi)容超支和主型削弱等問題，進(jìn)而影響圖標(biāo)識(shí)別。（圖4）的例子表明圖標(biāo)在縮小的過程中對(duì)主要視覺元素的突出處理和圖標(biāo)大小不同狀態(tài)下的局部調(diào)整。時(shí)刻謹(jǐn)記“過猶不及”的道理在圖標(biāo)細(xì)節(jié)的刻畫中同樣適用。

圖3

圖4

（3）空間關(guān)系

在選擇了準(zhǔn)確詮釋圖標(biāo)信息的對(duì)象之后，則要選擇一個(gè)合適的空間：二維或是三維以及視角：正視視角，書架視角或是桌面視角。對(duì)于圖標(biāo)空間呈現(xiàn)的思考有助于創(chuàng)造相對(duì)逼真的視覺效果以及與界面風(fēng)格進(jìn)行合理匹配。在系列圖標(biāo)的設(shè)計(jì)中，統(tǒng)一的圖標(biāo)視角設(shè)定更是多個(gè)圖標(biāo)保持整體一致的關(guān)鍵之一。（圖5）

圖5

2.形式與形式感

形式指的是某物的樣子和構(gòu)造，強(qiáng)烈的形式感能夠通過形式因素的知覺讓用戶產(chǎn)生特殊心理感受和情感體驗(yàn)，是圖標(biāo)設(shè)計(jì)的又一重要因素。圖標(biāo)的扁平風(fēng)格在2012年windows8系統(tǒng)發(fā)布之后迅速成為一種流行趨勢(shì)。一時(shí)間，“擬物已死”的言論甚囂塵上，事實(shí)真的如此嗎？圖標(biāo)的應(yīng)用范圍非常廣泛，設(shè)計(jì)中形式的選擇應(yīng)該遵循“內(nèi)容為王”的準(zhǔn)則，例如游戲圖標(biāo)中的獎(jiǎng)勵(lì)性質(zhì)圖標(biāo)設(shè)計(jì)，為了滿足用戶的心理成就感，一枚閃耀著璀璨光芒的圖標(biāo)往往比單形的扁平圖標(biāo)更具感染力。當(dāng)然了在數(shù)字平臺(tái)的語境下，圖標(biāo)形式的選擇還應(yīng)考慮數(shù)字產(chǎn)品跨平臺(tái)的統(tǒng)一，界面數(shù)據(jù)的減負(fù)，硬件設(shè)備本身的技術(shù)條件制約等因素。扁平還是擬物不會(huì)有絕對(duì)的勝出者，對(duì)合適的形式與形式感的追求會(huì)是設(shè)計(jì)者們孜孜以求的目標(biāo)。（圖6）

圖6

3.色彩

不同色相的搭配組合引起用戶或亢奮或冷靜或滿足或愉悅等等的心理印象，合理的明度和純度的掌控亦是設(shè)計(jì)者對(duì)圖標(biāo)與界面之間主次層級(jí)關(guān)系正確解讀的體現(xiàn)，提升用戶操作過程中的交互體驗(yàn)。

4．材質(zhì)表現(xiàn)

物質(zhì)表面的自然或人工特質(zhì)被稱為質(zhì)感，自然質(zhì)感如空氣、水、巖石、竹木等；人工質(zhì)感，如金屬、陶瓷、玻璃、布匹、塑膠等。在圖標(biāo)設(shè)計(jì)的過程中，設(shè)計(jì)者對(duì)材質(zhì)細(xì)節(jié)的刻畫處理往往能給用戶帶來現(xiàn)實(shí)中材質(zhì)所賦予的真實(shí)印象。（圖7）產(chǎn)生柔然，堅(jiān)硬，光滑，粗糙等心理觸覺體驗(yàn)。

圖7

5．情感喚起

著名計(jì)算機(jī)和心理學(xué)教授唐納德?諾曼（DonaldNorman）認(rèn)為：“產(chǎn)品具有好的功能是重要的；產(chǎn)品讓人易學(xué)會(huì)用也是重要的；但更重要的是，這個(gè)產(chǎn)品要能使人感到愉悅。”于是在圖標(biāo)設(shè)計(jì)中也應(yīng)該融入這種情感喚起的功能，不僅是愉悅，在某些情境下一枚有故事的圖標(biāo)能夠勾起人們對(duì)一段歷史，某個(gè)記憶片段的回憶，仿佛身臨其境，正是因?yàn)閷?duì)這些細(xì)節(jié)的刻畫，令用戶印象深刻，愛不釋手。情感的喚起與共鳴需要設(shè)計(jì)者對(duì)主題和細(xì)節(jié)的敏感，以及對(duì)用戶精神層面需求的探索。（圖8）

圖8

6．動(dòng)效設(shè)計(jì)

數(shù)字媒體環(huán)境對(duì)設(shè)計(jì)維度的最大拓展莫過于時(shí)間維度，信息的呈現(xiàn)因被放諸于四維時(shí)間舞臺(tái)而催生出豐富而多變的動(dòng)態(tài)。如果說動(dòng)效設(shè)計(jì)在過去還是趨勢(shì)，那么此時(shí)此刻，她業(yè)已成為了設(shè)計(jì)師在圖標(biāo)創(chuàng)意中的必備技能。對(duì)圖標(biāo)動(dòng)態(tài)效果的設(shè)定與打磨不僅以一種全新的方式呈現(xiàn)出界面與圖標(biāo)的個(gè)性帶來良好的視覺體驗(yàn)，更展現(xiàn)了狀態(tài)與功能信息的轉(zhuǎn)變和過度。這些交互動(dòng)效雖然非常細(xì)微短小，卻提升了等待過程的趣味性，信息在時(shí)間的維度之上得到了更形象的解讀。（圖9）

圖9

三、結(jié)語

圖標(biāo)是具有藝術(shù)特性的信息載體，是包含心理學(xué)，符號(hào)學(xué)，形態(tài)學(xué)，交互設(shè)計(jì)凝聚體，在對(duì)其進(jìn)行設(shè)計(jì)時(shí)不僅要對(duì)其形態(tài)，形式，色彩，質(zhì)感等基礎(chǔ)要素進(jìn)行優(yōu)化組合，更要考慮情感與動(dòng)效因素對(duì)圖標(biāo)細(xì)節(jié)和用戶體驗(yàn)的影響。

人們常說“筆墨當(dāng)隨時(shí)代”，對(duì)于圖標(biāo)設(shè)計(jì)而言，這里的筆墨不僅包含信息內(nèi)容與藝術(shù)手法的常新，更有對(duì)技術(shù)環(huán)境和用戶行為的解讀。很多過去有隱喻意義的事物現(xiàn)在正在漸漸淡出人們的認(rèn)知，很多過去存在的技術(shù)限制現(xiàn)在看來變得寬松，但新的數(shù)字平臺(tái)媒介特征也對(duì)設(shè)計(jì)提出了新的要求，面對(duì)虛擬與現(xiàn)實(shí)日益模糊的邊界，界面這個(gè)概念亦將不僅僅指代我們現(xiàn)在所理解的范疇，圖標(biāo)設(shè)計(jì)如何常新以適應(yīng)未來，這是時(shí)代留給設(shè)計(jì)者的話題，也是設(shè)計(jì)者的使命所在。

[1]iconfans編委會(huì)編著，GUI設(shè)計(jì)大家談[M]，電子工業(yè)出版社，2014年1月.

[2]ArtEyes設(shè)計(jì)工作室編著，創(chuàng)意UI-Photoshop玩轉(zhuǎn)圖標(biāo)設(shè)計(jì)[M]，人民郵電出版社，2014年12月.

[3]（美）唐納德.諾曼付秋芳，程進(jìn)三譯，情感化設(shè)計(jì)[M]，電子工業(yè)出版社出版，2005年1月.

童元園，講師，中國美術(shù)學(xué)院，影視與動(dòng)畫藝術(shù)學(xué)院教師，研究方向：數(shù)字交互設(shè)計(jì)，界面設(shè)計(jì)。