李宜勇

摘要：隨著科技的發(fā)展，電腦、手機等硬件和功能方面都趨于同質(zhì)化，使得UI設(shè)計成為用戶選擇的一個重要條件。UI設(shè)計不僅僅是軟件的操作入口，也成為平面設(shè)計師針對某一類客戶人群重要的設(shè)計內(nèi)容。文章從視覺特征的角度對擬物化和扁平化兩種風(fēng)格進行了對比，闡述UI圖標(biāo)設(shè)計需要結(jié)合體驗者情感需求、功能需求，使其在擬物化和扁平化間找到最適合的平衡點。

關(guān)鍵詞：擬物化；扁平化；視覺特征

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2016）24-0064-02

隨著科技的飛速發(fā)展，計算機硬件越來越豐富。企業(yè)發(fā)現(xiàn)僅僅靠硬件性能已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足消費者的需求，更不能在市場上立足，占有一席之地。許多企業(yè)已經(jīng)意識到通過深度發(fā)掘用戶需求，撰寫內(nèi)容、設(shè)計界面交互方式，重新設(shè)計UI圖標(biāo)能給產(chǎn)品帶來了巨大的賣點和利潤，使產(chǎn)品不僅能用、易用，更能好用，使自己在商業(yè)競爭中脫穎而出。而UI圖標(biāo)從之初的擬物化，到與之相對應(yīng)的扁平化，二者之間如何平衡取舍，使UI圖標(biāo)視覺表現(xiàn)形式更好地服務(wù)于功能是設(shè)計師最應(yīng)該解決的問題。

1 UI圖標(biāo)設(shè)計的擬物化以及特點

所謂擬物化原本是希臘詞匯，是指對象僅僅保留了之前的裝飾性元素，而這些元素對于當(dāng)前的功能已不再必要的。其設(shè)計核心就是利用一切裝飾效果，諸如陰影，透視，紋理，漸變等手段再現(xiàn)原有物體效果，表現(xiàn)出真實世界的物體形態(tài)。擬物化設(shè)計的特點，就是讓體驗者能較快的了解產(chǎn)品，同時使體驗者與產(chǎn)品的交互方式也是在模擬現(xiàn)實生活的使用過程，而所有的元素都取自于現(xiàn)實，都是運用現(xiàn)實生活中的物體或者是能通過關(guān)聯(lián)到的物體來體現(xiàn)。

界面設(shè)計領(lǐng)域，擬物化的設(shè)計風(fēng)格是指利用設(shè)計元素來模仿現(xiàn)實中的實物，創(chuàng)造出虛擬的三維效果，并產(chǎn)生針對實物性質(zhì)本身的聯(lián)想，從而使體驗者較容易地做出選擇判斷。如圖標(biāo)設(shè)計中，話機代表電話、聊天代表信息、播放符代表視頻等。喬布斯在早期的人機界面中也指出：“當(dāng)應(yīng)用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作進行模仿，用戶就能快速領(lǐng)會如何使用它?！币虼?，擬物化風(fēng)格的優(yōu)勢便是將原本包含較多現(xiàn)實元素的抽象內(nèi)容具象化，使其更直觀地傳遞給用戶，降低學(xué)習(xí)成本，使用戶易于接受，提高產(chǎn)品的認(rèn)知度。

2 UI圖標(biāo)設(shè)計的扁平化以及特點

然而隨著時代發(fā)展和擬物化風(fēng)格的普及，用戶或多或少也對其有了一定的審美疲勞，這時體驗者更在意的是產(chǎn)品能否高效完成任務(wù)，而非過多的裝飾效果，為滿足體驗者的這種訴求扁平化風(fēng)格應(yīng)運而生。

扁平化是一種二維形態(tài)，這種設(shè)計的核心理念就是化繁為簡，把一個事物盡可能用最簡潔的方式表現(xiàn)出來，但簡潔不等于簡單。如果擬物化是西方的油畫，注重寫實，那扁平化就更像是中國風(fēng)的水墨畫，注重的是寫意。尤其在移動設(shè)備上，能盡量多的在較小的屏幕空間顯示內(nèi)容而不顯得臃腫，使人有干凈整潔的感覺。

首先，扁平化的界面通常使用鮮艷、明亮的色塊進行設(shè)計。形態(tài)方面，以圓、矩形等簡單幾何形態(tài)為主，界面按鈕和選項也更少。扁平化風(fēng)格中設(shè)計元素的減少，使色彩的使用更加規(guī)范，字體標(biāo)準(zhǔn)更加統(tǒng)一，使其形態(tài)與整體更加相適應(yīng)，因此更加容易形成完整一致的模式，也整個界面簡潔大方、充滿現(xiàn)代感，呈現(xiàn)極簡主義的設(shè)計理念。

其次，扁平化的界面提升系統(tǒng)效率，降低設(shè)計成本。擬物化風(fēng)格在細(xì)節(jié)處理上占用大量數(shù)據(jù)，數(shù)據(jù)量的增加勢必提升系統(tǒng)占用空間，降低運算速度。而扁平化風(fēng)格由于設(shè)計元素、色彩的減少，摒棄了過多的裝飾，使人機交互過程中效率得到提升，系統(tǒng)功耗減少，提高運算速度，延長待機時間。

最后減少體驗者使用過程的心理負(fù)擔(dān)。隨著硬件設(shè)備性能的不斷提升，體驗者的操作內(nèi)容和范圍也不斷增加，擬物化界面的點觸樣式更容易造成使用過程中的不便，增加體驗者心理負(fù)擔(dān)造成疲勞。而扁平化設(shè)計的模糊觸控范圍點觸區(qū)域，使體驗者在使用過程更加自如。

3 以視覺為特征的擬物化與扁平化交互融合

擬物化相比扁平化的優(yōu)勢在于擬物化設(shè)計的圖標(biāo)能夠，可以在視覺上更好的表現(xiàn)真實物體形態(tài)，模擬出真實物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等。這樣的設(shè)計如果描繪的是復(fù)古的物品，能使人們產(chǎn)生懷舊的感情；如果描繪的是在日常生活中比較常見的物品，人們會因先入為主的思想更容易對其產(chǎn)生好感。因為擬物化設(shè)計最初的靈感來源于工業(yè)革命，可以說它造就了設(shè)計界的經(jīng)典。但是就像硬幣都是有兩個面一樣，再好的設(shè)計也有它的缺點，首先它會被一個物品的本身而限制它的設(shè)計思路，因為它只能被設(shè)計成現(xiàn)實生活中所擁有或者是大部分人們大腦中所能描繪出來的東西；其次會被功能所限制設(shè)計思路，比如說像網(wǎng)絡(luò)通信運營商，這種產(chǎn)業(yè)在現(xiàn)實生活中根本沒有具象的實物或者人們的大腦中沒有關(guān)聯(lián)的物品來代替它；然后增大設(shè)計成本，并不是所有的物品都是這么復(fù)雜的，而那些物品就要迎合大多數(shù)的設(shè)計來進行復(fù)雜化會被功能所限制設(shè)計思路；最后是沒有新鮮感，因為擬物化本身的特性就是模擬現(xiàn)實生活中的物品，而這必然會使人們比較快的對這個設(shè)計產(chǎn)生厭惡感，從而使商標(biāo)的更換周期變短。

扁平的優(yōu)點顯而易見首先在于它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認(rèn)知障礙的產(chǎn)生。其次隨著網(wǎng)站和應(yīng)用程序在許多平臺涵蓋了越來越多不同的屏幕尺寸，可以一次保證在所有的屏幕尺寸上它會很好看。扁平化設(shè)計更簡約，條理清晰，最重要的一點是，更好的適應(yīng)性。但扁平化設(shè)計也明顯的劣勢，傳達內(nèi)容的感情不豐富，甚至過于冰冷。然而我們有趣的發(fā)現(xiàn)擬物化的優(yōu)點正是扁平化的缺點，相比較擬物化的缺點也正是扁平化的優(yōu)點。

那么作為兩種風(fēng)格涇渭分明、各有優(yōu)劣的設(shè)計手法，設(shè)計者應(yīng)當(dāng)遵循以人為本的設(shè)計原則，取二者之所長，避其短進行合理設(shè)計。擬物化設(shè)計圖形表意的明確性和扁平化設(shè)計信息傳達的便捷性相結(jié)合，與此同時擬物化設(shè)計的嚴(yán)謹(jǐn)邏輯關(guān)系與扁平化設(shè)計的畫面簡潔性相協(xié)調(diào)，以達到產(chǎn)品設(shè)計更人性化的目的。另外設(shè)計風(fēng)格的使用還應(yīng)根據(jù)不同的年層次、階段、媒體廣告形式等作出不同的選擇，以達到最舒適的體驗效果。因此以情景、功能為基礎(chǔ)的擬物化與扁平化設(shè)計相融合，使其相互促進相互發(fā)展，共存才是真正為體驗者打造良好體驗的關(guān)鍵。

4 小結(jié)

擬物化和扁平化之間既是矛盾的，又有一定關(guān)聯(lián)，且有著一定程度的相互影響。沒有任何設(shè)計能直接的拋棄獲對立擬物與扁平化設(shè)計，擬物和扁平更像是太極中的陰和陽，缺一不可。正如道家的理念一樣，任何事物至陰至柔或者至陽至剛都是有悖于天理的。像錘子科技公司這樣自稱最有情懷、最信仰擬物設(shè)計的科技公司也在商標(biāo)上做出扁平化的妥協(xié)，順應(yīng)時代的發(fā)展。因此在科技飛速發(fā)展的今天，只有創(chuàng)新才能生存，才能更好地向前發(fā)展，一個好的設(shè)計師能夠結(jié)合體驗者情感需求、功能需求在擬物化和扁平化間找到最適合的平衡點，并在不斷的平衡中，推動UI的發(fā)展。

參考文獻：

[1] 孟建華.UI設(shè)計與應(yīng)用[J]. 藝術(shù).生活，2009（4）.

[2] 石夢云. 視覺文化角度下的用戶界面設(shè)計研究[J]. 現(xiàn)代裝飾：理論，2012（4）.

[3] 李洪海，石爽，李霞.交互界面設(shè)計[M].北京：化學(xué)工業(yè)出版社，2011

[4] Elam K.美國編排設(shè)計教程[M]. 上海：上海人民美術(shù)出版社，2008.

[5] 約翰遜.認(rèn)知與設(shè)計——理解UI設(shè)計準(zhǔn)則[M].北京：人民郵電出版社，2011.