產(chǎn)品用戶界面中圖標(biāo)元素設(shè)計(jì)研究

袁天昊 劉永翔

摘要：本文通過(guò)梳理產(chǎn)品用戶界面中圖標(biāo)元素設(shè)計(jì)中擬物、扁平和符號(hào)化三種表現(xiàn)形式，分析現(xiàn)在的用戶界面的設(shè)計(jì)特點(diǎn)和現(xiàn)狀，以此探討歸納未來(lái)的設(shè)計(jì)發(fā)展趨勢(shì)和方向。

關(guān)鍵詞：用戶界面 國(guó)標(biāo)元素 擬物化設(shè)計(jì) 扁平化設(shè)計(jì) 符號(hào)化設(shè)計(jì) 用戶體驗(yàn)

中圖分類號(hào)：TB472

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2015）12-0034-02

引言

產(chǎn)品用戶界面中的圖標(biāo)元素設(shè)計(jì)自2000年傳入中國(guó)，在互聯(lián)網(wǎng)與移動(dòng)互聯(lián)網(wǎng)蓬勃發(fā)展下得到快速的發(fā)展，在這期間出現(xiàn)了大量的產(chǎn)品用戶界面設(shè)計(jì)師，即UI設(shè)計(jì)師。

用戶界面設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的用戶界面圖標(biāo)設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。通過(guò)界面給用戶一種情感傳遞，是設(shè)計(jì)的真正藝術(shù)魅力所在。用戶在接觸作品時(shí)的感受，使人產(chǎn)生感情共鳴，利用情感表達(dá)，切實(shí)地反映出作品與用戶之間的情感關(guān)系。

一 產(chǎn)品用戶界面中圖標(biāo)元素設(shè)計(jì)的三種風(fēng)格

1.1 擬物化設(shè)計(jì)

擬物化設(shè)計(jì)是一種產(chǎn)品圖標(biāo)設(shè)計(jì)的元素或風(fēng)格，指原有物件中某些必需的形式在新的設(shè)計(jì)中已不再必要，但新設(shè)計(jì)仍模仿舊有形式，以使新的外觀讓人感覺(jué)熟悉和親切。這可以看作是技術(shù)領(lǐng)域中的路徑依賴。擬物化設(shè)計(jì)的代表作品：iOS7.0以下，Android、以及iOS7.0以下時(shí)代的大部分APP。擬物化設(shè)計(jì)的特點(diǎn)（如圖1所示）：界面模擬真實(shí)物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等；人機(jī)交互也擬物化，模擬現(xiàn)實(shí)中的交互方式。

擬物化設(shè)計(jì)的好處是學(xué)習(xí)成本低，一學(xué)就會(huì)，而且傳達(dá)了豐富的人性化的感情，所以家居類物品適合擬物化設(shè)計(jì)。擬物化設(shè)計(jì)壞處是擬物化本身就是個(gè)約束，會(huì)限制功能本身的設(shè)計(jì)。

擬物設(shè)計(jì)并不僅僅局限于計(jì)算機(jī)圖形用戶界面中，在生活中我們會(huì)發(fā)現(xiàn)許多擬物設(shè)計(jì)的影子，比如你的相機(jī)在拍照時(shí)，相機(jī)會(huì)發(fā)出”咔”的一聲，你家塑料地板的樣式也很可能是木紋的，這樣的例子很多很多，如果你仔細(xì)觀察一定會(huì)發(fā)現(xiàn)不少。這些隱藏在生活中的擬物設(shè)計(jì)會(huì)讓人感覺(jué)自然，你甚至?xí)X(jué)得它是某些產(chǎn)品中必不可少的元素。

1.2 扁平化設(shè)計(jì)

扁平化的概念最核心的地方就是放棄一切裝飾效果、諸如透視、紋理、漸變等能做出3D效果的元素。所有的元素的邊界都干凈利落，沒(méi)有任何羽化，漸變。尤其在手機(jī)上，更少按鈕和選項(xiàng)使得界面干凈整齊，使用起來(lái)格外簡(jiǎn)潔?？梢愿雍?jiǎn)單直接地將信息和事物的工作方式展示出來(lái)。

目前扁平化設(shè)計(jì)主要應(yīng)用在Windows Phone手機(jī)和Window 8操作系統(tǒng)上（如圖2所示）。扁平化合計(jì)拒絕特效。顧名思義，扁平化設(shè)計(jì)僅僅采用二維元素。所有元素都不加修飾——陰影、斜面、突起、漸變，這樣會(huì)帶來(lái)深度變化的設(shè)計(jì)都是不應(yīng)該的。從圖片框到按鈕，再到導(dǎo)航欄都干脆有力，需要極力避免羽化、陰影這樣的特效。現(xiàn)實(shí)主義、3D、擬物化更是扁平化設(shè)計(jì)的大敵。扁平化設(shè)計(jì)中的層次和其他的——對(duì)應(yīng)，但各個(gè)位面間沒(méi)有交叉，不會(huì)明確區(qū)分背景圖片、前景圖片、按鈕、文本、導(dǎo)航等。

最近，越來(lái)越多的設(shè)計(jì)師開(kāi)始贊同扁平化的設(shè)計(jì)。在大部分扁平化設(shè)計(jì)中，基調(diào)仍然是扁平風(fēng)格的，但會(huì)在設(shè)計(jì)方案中添加一種，且僅添加一種特效，無(wú)論是陰影也好、梯度也好，這種設(shè)計(jì)風(fēng)格相比嚴(yán)肅的、純粹的扁平化更加靈活。設(shè)計(jì)師們喜歡它，因?yàn)榭梢蕴砑由疃群图y理：用戶喜歡它，因?yàn)樗苡兄谥庇^的交互。

1.3 符號(hào)化設(shè)計(jì)

目前符號(hào)化設(shè)計(jì)可以分出以下三種不同的類型：指示符號(hào)設(shè)計(jì)、象征符號(hào)設(shè)計(jì)和圖像符號(hào)設(shè)計(jì)。其中指示符號(hào)設(shè)計(jì)，如路標(biāo)就是道路的指示符號(hào)。象征符號(hào)設(shè)計(jì)，如紅色代表著革命，桃子在中國(guó)人的眼中是長(zhǎng)壽的象征。圖像符號(hào)設(shè)計(jì)，中比如肖像，就是某人的圖像符號(hào)。人們通過(guò)形象的相似就可以辨認(rèn)出來(lái)。圖形符號(hào)還是人們最初記錄和傳遞的重要工具，圖形符號(hào)仍有語(yǔ)言、文字、圖形無(wú)法取代的獨(dú)立意義，所以在界面設(shè)計(jì)中，符號(hào)與圖形會(huì)有著必然的聯(lián)系。符號(hào)化的造型語(yǔ)言在界面設(shè)計(jì)中是完全可以得到充分發(fā)揮的。符號(hào)化設(shè)計(jì)在界面設(shè)計(jì)中的特征是將界面設(shè)計(jì)為可視的形象，易于用戶理解，產(chǎn)生共鳴。因此，界面設(shè)計(jì)中的圖形元素從現(xiàn)實(shí)到非現(xiàn)實(shí)會(huì)有巨大的跨度與多樣的變化。

符號(hào)作為人們工作生活中不可缺少的一部分（如圖3所示），在日新月異的現(xiàn)代社會(huì)中發(fā)揮著越來(lái)越重要的作用。無(wú)論是用戶還是符號(hào)設(shè)計(jì)人員，都會(huì)有一種共同的感受：每個(gè)人每天都生活在充滿符號(hào)味道的氛圍中?？梢哉f(shuō)，只要有人活動(dòng)的地方，就有符號(hào)的存在。而標(biāo)識(shí)，也隨著人類文明進(jìn)程的加快而迅速得到完善。

符號(hào)影響和改變著我們的生活。因?yàn)榉?hào)系統(tǒng)的警示及指示功能隨時(shí)都在為人們服務(wù)、引導(dǎo)，不管是正確的，還是錯(cuò)誤的。就如一個(gè)沒(méi)有交通指示符號(hào)的路口，人們可能會(huì)經(jīng)常性地與來(lái)往車輛搶道，路口充滿了安全隱患，設(shè)立了交通指示符號(hào)之后。路口的交通就會(huì)變得安全有序。符號(hào)，無(wú)形之中改變了我們的生活習(xí)慣。正因如此，我們應(yīng)該對(duì)身邊的符號(hào)引起足夠的重視，把用戶界面中的圖標(biāo)元素設(shè)計(jì)提升到符號(hào)化設(shè)計(jì)的高度。

二 產(chǎn)品用戶界面中圖標(biāo)元素設(shè)計(jì)的發(fā)展及未來(lái)趨向

2.1 現(xiàn)階段用戶界面中國(guó)標(biāo)元素的需求趨向

在這個(gè)高速發(fā)展的時(shí)代，人們每天都在潛移默化地接受著新鮮事物，而隨著智能產(chǎn)品例如手機(jī)的出現(xiàn)，其對(duì)用戶界面中的圖標(biāo)元素也有著明顯的沖擊，人們?cè)谥鸩浇邮苤悄墚a(chǎn)品的過(guò)程中，這在年輕人中尤其明顯。對(duì)于界面中的圖標(biāo)設(shè)計(jì)需求也不在向以往那樣，需求在不自覺(jué)中已經(jīng)較過(guò)去發(fā)生了一些改變。

2.1.1 情感化的轉(zhuǎn)移

在智能產(chǎn)品如手機(jī)出現(xiàn)之前，可以說(shuō)產(chǎn)品用戶的界面中圖標(biāo)元素主要是擬物化的設(shè)計(jì)為主。人們由于已經(jīng)習(xí)慣原先手機(jī)的按鍵式的操作模式，所以產(chǎn)品所給予人類情感的方式主要是通過(guò)視覺(jué)傳達(dá)的，即通過(guò)多元的界面（陰影，發(fā)光，擬物化）等方式呈現(xiàn)給用戶的；但是隨著智能產(chǎn)品的問(wèn)世，人們對(duì)產(chǎn)品的操作方式產(chǎn)生了根本性的動(dòng)搖，你會(huì)發(fā)現(xiàn)人們不再是冰冷地按動(dòng)按鈕，而是有著更加多元化的操作體驗(yàn)（點(diǎn)觸、拖動(dòng)，長(zhǎng)時(shí)間按，放大縮小手勢(shì)等），人們不在單一地通過(guò)界面國(guó)標(biāo)即視覺(jué)獲得情感，相反，人們對(duì)于操控手機(jī)的體驗(yàn)得到的情感甚至遠(yuǎn)遠(yuǎn)超過(guò)了原來(lái)多元的界面所帶來(lái)的，人們的情感發(fā)生了轉(zhuǎn)移，也可以說(shuō)人們從單一的視覺(jué)情感體驗(yàn)為主轉(zhuǎn)移到了操作手機(jī)的情感體驗(yàn)為主。

2.1.2 產(chǎn)品界面中的圖標(biāo)設(shè)計(jì)更加服從于功能

由于智能化產(chǎn)品如手機(jī)的問(wèn)世導(dǎo)致按鍵式操作方式逐漸全屏觸摸方式所取代，這也直接導(dǎo)致現(xiàn)在的產(chǎn)品屏幕也比原來(lái)的增大很多，因此其也比原來(lái)包含了更多的內(nèi)容、功能、界面及圖標(biāo)，自然而然復(fù)雜程度也相對(duì)增加了不少。而面對(duì)著這么多的改變，復(fù)雜的增加，現(xiàn)在的界面圖標(biāo)設(shè)計(jì)就會(huì)相對(duì)于以往更加服從于功能，即讓用戶把更多的注意力集中在更加有效的信息上，而不是分散用戶的注意力。

2.2 現(xiàn)在設(shè)計(jì)的趨勢(shì)——極簡(jiǎn)主義

伴隨著win8的上市以及蘋(píng)果ios8的發(fā)布，不難發(fā)現(xiàn)，現(xiàn)在用戶界面中圖標(biāo)元素設(shè)計(jì)正在發(fā)生明顯的改變，更加簡(jiǎn)單以至于簡(jiǎn)單到了極點(diǎn)。擬物化設(shè)計(jì)正在越來(lái)越少被人們談起，而扁平化設(shè)計(jì)和符號(hào)化設(shè)計(jì)有著更加緊密的結(jié)合，形成了一種被大家稱作為極簡(jiǎn)主義的設(shè)計(jì)趨勢(shì)。

2.2.1 極簡(jiǎn)主義的特點(diǎn)

極簡(jiǎn)主義的概念最核心的地方就是：去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來(lái)。并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化。

極簡(jiǎn)主義設(shè)計(jì)的產(chǎn)生源于迎合了用戶需求的變化，即情感的轉(zhuǎn)移和更加讓用戶去留意更加有效的信息，界面服從于功能，這些都是該設(shè)計(jì)的優(yōu)點(diǎn)。然而極簡(jiǎn)主義的缺點(diǎn)也十分明顯，我個(gè)人認(rèn)為其設(shè)計(jì)理念不易理解，即它的美很難被人發(fā)現(xiàn)只有受過(guò)高等教育的人才能所理解。由于現(xiàn)如今界面被設(shè)計(jì)的高度抽象化，簡(jiǎn)單化，造成了對(duì)人們視覺(jué)情感上的忽視，也可以說(shuō)極簡(jiǎn)主義的界面設(shè)計(jì)過(guò)于單一、冰冷，缺少多樣性的感情。

2.2.2 擬物化設(shè)計(jì)不會(huì)消失

隨著極簡(jiǎn)主義即扁平化和符號(hào)化融合的愈發(fā)流行，現(xiàn)在出現(xiàn)了一些類似的聲音即擬物化圖標(biāo)設(shè)計(jì)已經(jīng)過(guò)時(shí)之類的的觀點(diǎn)，我個(gè)人并不贊同。我認(rèn)為他們之間不存在著絕對(duì)的對(duì)立，只是兩種截然不同的風(fēng)格，或者可以說(shuō)二者是站在了不同的用戶角度、需求去進(jìn)行的設(shè)計(jì)。擬物化設(shè)計(jì)強(qiáng)調(diào)視覺(jué)上接近現(xiàn)實(shí)世界，有著很強(qiáng)的認(rèn)知性；而極簡(jiǎn)主義設(shè)計(jì)則是強(qiáng)調(diào)高度簡(jiǎn)潔的設(shè)計(jì)，即盡量地將用戶的注意力放在產(chǎn)品自身的內(nèi)容和功能上，有著很強(qiáng)的抽象性。相較于極簡(jiǎn)主義的界面圖標(biāo)設(shè)計(jì)，擬物化設(shè)計(jì)更加容易被認(rèn)知和理解。

極簡(jiǎn)主義風(fēng)格設(shè)計(jì)出的圖標(biāo)元素過(guò)分強(qiáng)調(diào)簡(jiǎn)潔、高效風(fēng)格，主要針對(duì)的用戶是在上班族和青年人這些每天生活很緊湊的人，然而這種設(shè)計(jì)方式對(duì)于兒童、老年人、及其他一些視覺(jué)和認(rèn)知并不完善的人來(lái)說(shuō)很難讓人理解。例如你很難讓兒童或者老人輕易地能夠看出（如圖4所示）代表的是照相機(jī)，而且兒童的智力正處在發(fā)展階段，過(guò)于單一的用色和平面化的設(shè)計(jì)對(duì)于兒童的智力發(fā)展也是不利的。相反，擬物化在這方面尤其先天的優(yōu)勢(shì)（如圖5所示），由于其高度還原了現(xiàn)實(shí)中產(chǎn)品的形象，所以在認(rèn)知上不會(huì)有較大困難。

2.3 未來(lái)產(chǎn)品用戶界面中國(guó)標(biāo)元素設(shè)計(jì)的趨向

就目前的設(shè)計(jì)趨勢(shì)來(lái)看，當(dāng)前的這種極簡(jiǎn)主義風(fēng)格還會(huì)持續(xù)一陣子，但縱觀設(shè)計(jì)史，沒(méi)有哪個(gè)設(shè)計(jì)理念能夠長(zhǎng)期作為主導(dǎo)，哪怕是現(xiàn)在看來(lái)被奉為經(jīng)典的現(xiàn)代主義，也不過(guò)風(fēng)靡了十幾年。因?yàn)槿祟愂巧谱兊?，長(zhǎng)期接受一個(gè)風(fēng)格之后就會(huì)自然產(chǎn)生厭煩心理，從而產(chǎn)生全新的設(shè)計(jì)理念。未來(lái)的界面設(shè)計(jì)如果發(fā)生改變我認(rèn)為一定會(huì)有基于以下幾點(diǎn)原因：

（1）基于用戶群體、情感發(fā)生改變或者主要參考用戶需求產(chǎn)生轉(zhuǎn)移

比如現(xiàn)在是為大多數(shù)年輕人上班族設(shè)計(jì)的極簡(jiǎn)界面圖標(biāo)，力求高效，加強(qiáng)內(nèi)容和功能，但如果未來(lái)不是基于此類人為主導(dǎo)，或者主要考慮用戶群體的需求對(duì)于極簡(jiǎn)的界面產(chǎn)生厭煩，對(duì)于追求簡(jiǎn)潔高速的情感產(chǎn)生轉(zhuǎn)變，則必然設(shè)計(jì)理念發(fā)生改變。

（2）基于移動(dòng)智能產(chǎn)品操作模式、交互模式發(fā)生改變

如果未來(lái)的產(chǎn)品不再依靠觸摸式方式作為主導(dǎo)交互模式，而是改回按鍵式，或者是很熱門(mén)概念的增強(qiáng)現(xiàn)實(shí)技術(shù)在未來(lái)得以成熟的應(yīng)用在智能移動(dòng)端，則我認(rèn)為設(shè)計(jì)界面中的圖標(biāo)理念必然為迎合這一新興交互模式的改變而發(fā)生改變。

無(wú)論如何，界面中圖標(biāo)元素設(shè)計(jì)也是設(shè)計(jì)史的一部分，從長(zhǎng)遠(yuǎn)的角度看，其必然是符合反復(fù)循環(huán)，并在循環(huán)中產(chǎn)生創(chuàng)新的規(guī)律，用一種新鮮的設(shè)計(jì)理念來(lái)代替人們已經(jīng)厭倦的舊有理念。

三 結(jié)語(yǔ)

產(chǎn)品的界面圖標(biāo)元素是人與移動(dòng)產(chǎn)品進(jìn)行交互的紐帶，重要程度不言而喻。在產(chǎn)品高速發(fā)展的今天，我們作為設(shè)計(jì)者應(yīng)該時(shí)刻關(guān)注用戶需求、情感以及交互手段等的不斷變化。作為一個(gè)產(chǎn)品界面中圖標(biāo)元素設(shè)計(jì)者，我們應(yīng)該有義務(wù)去為大眾設(shè)計(jì)功能良好的圖標(biāo)元素，設(shè)計(jì)出符合用戶心理模型的界面圖標(biāo)，幫助用戶解決實(shí)際生活中的所遇到的各種問(wèn)題，規(guī)劃好、設(shè)計(jì)好標(biāo)識(shí)系統(tǒng)，更好地為大眾服務(wù)，才能為社會(huì)營(yíng)造出一個(gè)和諧有序的生存環(huán)境。