界面設(shè)計(jì)中的扁平化設(shè)計(jì)與擬物化設(shè)計(jì)之探議

李佳

摘 要：擬物化設(shè)計(jì)曾經(jīng)在界面設(shè)計(jì)的發(fā)展中扮演者引領(lǐng)潮流的角色。“扁平化設(shè)計(jì)”是近年來(lái)嶄露頭角的設(shè)計(jì)風(fēng)格。文章具體闡述和分析了擬物化設(shè)計(jì)盛行和沒(méi)落的發(fā)展歷程、原因及扁平化設(shè)計(jì)的特點(diǎn)；并針對(duì)業(yè)界所爭(zhēng)執(zhí)的孰是孰非的熱議現(xiàn)象表明觀點(diǎn)：好的設(shè)計(jì)是適合的設(shè)計(jì)，設(shè)計(jì)的本質(zhì)不在于外觀形式，而在于強(qiáng)調(diào)信息結(jié)構(gòu)的組織性和優(yōu)良的用戶體驗(yàn)。

關(guān)鍵詞：界面設(shè)計(jì) 扁平化 擬物化

檢 索：www.artdesign.org.cn

Abstract ：Skeuomorphism had led the development trend and played a pivotal role in interface design for decades. The flat design became popular and prevailing recently. This paper not only elaborated the development process of Skeuomorphism， analyzed the reasons for these changes， but described the key features of the flat design simultaneously. The author expressed the view on the arguable “hot spot” in the nature of design， and concluded that “Good design was not just focus on the style， it would serve the object properly， the crucial issue was providing good user experience with organized and logical information.”

Keywords ：Interface Design， Flat Design， Skeuomorphism

Internet ：www.artdesign.org.cn

2013年，“扁平化設(shè)計(jì)”一詞在交互設(shè)計(jì)業(yè)界大概是被提及最多的大熱詞匯。事實(shí)上早在2006年，當(dāng)微軟推出的一款mp3播放器zune的界面時(shí)，扁平化的設(shè)計(jì)風(fēng)格已初見端倪，但由于產(chǎn)品本身的推廣不力，尚未形成熱潮。2012年，當(dāng)微軟公司揭開windows8的神秘面紗那一刻，其鮮明簡(jiǎn)潔的扁平化風(fēng)格界面再次引起業(yè)界及用戶的熱議。一度推崇擬物化風(fēng)格多年的蘋果公司，在公司高層動(dòng)蕩過(guò)后，新任副總裁Johnthan Ive曾表示過(guò)厭惡擬物化風(fēng)格，2013年9月全新推出的ios7也正是以其全新的扁平化展示于大眾，全面轉(zhuǎn)化了多年來(lái)蘋果公司所塑造的視覺(jué)形象。

談及扁平化設(shè)計(jì)，與之伴隨的另一詞匯“擬物化設(shè)計(jì)”因?yàn)榕c之大相徑庭的設(shè)計(jì)原則與表現(xiàn)風(fēng)格，常常被同時(shí)提及并與之比較。曾幾何時(shí)，擬物化設(shè)計(jì)風(fēng)格引領(lǐng)界面設(shè)計(jì)潮流多年，可謂風(fēng)聲水起，千萬(wàn)設(shè)計(jì)師瘋狂追尋樂(lè)此不疲。而如今又為何遭受扁平化設(shè)計(jì)的沖擊，甚至面臨被顛覆的狀況呢？

一、擬物化設(shè)計(jì)

（一）什么是擬物化設(shè)計(jì)

所謂擬物化（Skeuomorphism），原本是希臘詞匯，在wikipedia里是這樣解釋的：“擬物化是指對(duì)象保留了舊時(shí)特質(zhì)的裝飾性元素，這些元素對(duì)于當(dāng)前對(duì)象的功用已不再必要?！睌M物化曾一度在材料應(yīng)用領(lǐng)域廣泛使用，比如人造革，仿木紋的塑料地膠，都屬于擬物化。

在數(shù)字界面領(lǐng)域里，擬物化設(shè)計(jì)起源于圖形界面（GUI）的視覺(jué)隱喻（Visual Metaphor）。往往指界面設(shè)計(jì)模仿現(xiàn)實(shí)物質(zhì)世界中的事物，以使其外觀讓人感覺(jué)熟悉和親切。比如桌面、文件、文件夾、回收站這樣的概念都是基于桌面系統(tǒng)的隱喻。繼1984年蘋果公司的Macintosh推出后，這種隱喻也廣泛應(yīng)用于windows、Mac OS X、Linux等桌面操作系統(tǒng)以及移動(dòng)裝置，并逐漸被大眾所熟悉?？梢哉f(shuō)，是擬物化設(shè)計(jì)用直觀易理解的物象將數(shù)字世界抽象的概念表現(xiàn)出來(lái)，大大加快了普通大眾接受數(shù)字信息的步伐。

對(duì)于那些對(duì)數(shù)字世界不甚了解的人群，擬物化設(shè)計(jì)幫助他們將虛擬世界用戶不熟悉的內(nèi)容與現(xiàn)實(shí)世界用戶所熟悉的物象產(chǎn)生聯(lián)系，使其更易理解。蘋果公司的ios系統(tǒng)的人機(jī)界面指南里曾經(jīng)說(shuō)到，“當(dāng)你應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作模仿，用戶就能快速領(lǐng)會(huì)如何使用它?！睘榱俗層脩粲X(jué)得真實(shí)親切，擬物化設(shè)計(jì)注重視覺(jué)元素的精細(xì)、層次、用光等，以期創(chuàng)造出逼真的形象。

（二）擬物化的濫用

當(dāng)擬物化風(fēng)格逐步在界面設(shè)計(jì)領(lǐng)域占據(jù)主導(dǎo)地位后，似乎逐步陷入一種怪圈。眾多設(shè)計(jì)師投入過(guò)多精力到諸如反復(fù)修整皮革背景紋理或反復(fù)調(diào)整投影角度的工作中，反而忽略了交互行為本身。而事實(shí)上光影是否真實(shí)，質(zhì)感是否逼真并不能使用戶更有效率地完成任務(wù)。眾多界面擬物化的濫用及過(guò)度設(shè)計(jì)，產(chǎn)生了很多不易用，給用戶帶來(lái)負(fù)擔(dān)的產(chǎn)品。

擬物化設(shè)計(jì)往往試圖給予用戶共鳴，如果產(chǎn)品的外觀展現(xiàn)得越逼真，用戶使用時(shí)越容易預(yù)先產(chǎn)生一種與原來(lái)對(duì)象特性相同的期待。然而由于產(chǎn)品特性、操作方式和原有參照物存在諸多不同，新產(chǎn)品無(wú)法給予用戶原本期待的物理反饋。這種逼真感反而會(huì)使用戶在進(jìn)行操作時(shí)感到受挫或無(wú)所適從。

以Quicktime4播放器界面的音量調(diào)節(jié)設(shè)計(jì)為例（圖1）。傳統(tǒng)的真實(shí)世界的播放器是用旋鈕來(lái)調(diào)整音量的，用大拇指可以很容易地完成操作?？墒欠胖迷诮缑嬷械男o并不能有真實(shí)的觸感，需要用指針艱難地向上滑動(dòng)，旋鈕暴露的部分很少，可能需要用戶多次拖拽放才能完成操作。雖然設(shè)計(jì)者可能也認(rèn)識(shí)到了這個(gè)問(wèn)題，另外添加了可通過(guò)鼠標(biāo)指針調(diào)整音量的功能，用戶需要在旋鈕附近點(diǎn)擊并拖拽。但是這個(gè)功能常常不被用戶所知，因?yàn)闆](méi)有任何提示顯示可以用這種方式操作。顯然，從用戶體驗(yàn)和人機(jī)工學(xué)的角度，這個(gè)旋鈕的設(shè)計(jì)是失敗的。在其Quicktime5版本中這個(gè)音量調(diào)節(jié)的旋鈕被去掉了。因此，不論其表面看來(lái)多么逼真，質(zhì)感多么接近現(xiàn)實(shí)，只要不能讓用戶覺(jué)得好用就不是個(gè)好的設(shè)計(jì)。endprint

（三）擬物化設(shè)計(jì)也有其自身的局限性

擬物化設(shè)計(jì)常常用一個(gè)具體的物象喚起人們對(duì)于某種經(jīng)驗(yàn)的聯(lián)想，這一具體的物象由于文化的差異性往往不能在所有地域產(chǎn)生同樣的效果。

隨著科技的發(fā)展，曾經(jīng)在一個(gè)時(shí)間段廣泛普及的參照物本身可能已經(jīng)不再是被頻繁使用，甚至已經(jīng)被歷史淘汰，那么原有的設(shè)計(jì)也不得不相應(yīng)作出調(diào)整。至今仍被廣泛使用的儲(chǔ)存圖標(biāo)，是一個(gè)磁盤的圖形，對(duì)于很多現(xiàn)在的青少年，他們從未經(jīng)歷過(guò)那個(gè)需要用3.5寸盤儲(chǔ)存1.44M文件的年代，對(duì)于他們來(lái)說(shuō)，這個(gè)擬物已經(jīng)失去意義了，他們只是在記住圖形本身而已。

二、扁平化風(fēng)格

（一）時(shí)代背景：數(shù)碼產(chǎn)品神秘感不在，人們更關(guān)注效用

在數(shù)碼產(chǎn)品不是那么普及的年代，擁有一臺(tái)電腦，一部手機(jī)或許是一種奢侈品，而不曾擁有的人如有機(jī)會(huì)把玩也會(huì)對(duì)于各個(gè)按鈕或圖標(biāo)試試新鮮，而后再為其逼真細(xì)膩的視覺(jué)風(fēng)格感嘆一番。而如今隨著科技的發(fā)展，智能手機(jī)、觸屏對(duì)于大眾已不再陌生。在人人都有電腦，人人有手機(jī)的時(shí)代，數(shù)碼產(chǎn)品的普及已經(jīng)使得一切不再新鮮，人們更傾向于數(shù)碼產(chǎn)品是否可以快速地幫助他們達(dá)到目的，是否高效。與之同時(shí)，也已經(jīng)不需要通過(guò)擬物化去降低學(xué)習(xí)成本了，擬物的使命至此已經(jīng)終結(jié)。

（二）扁平化風(fēng)格——界面設(shè)計(jì)的極簡(jiǎn)主義

猶如20世紀(jì)60年代，在建筑設(shè)計(jì)領(lǐng)域極簡(jiǎn)主義風(fēng)格的興起是源于對(duì)當(dāng)時(shí)代過(guò)度裝飾的顛覆一樣，扁平化設(shè)計(jì)也以其簡(jiǎn)潔明了的風(fēng)格一反擬物化強(qiáng)調(diào)效果、裝飾性的特點(diǎn)，成為了2013年應(yīng)用設(shè)計(jì)最顯著的趨勢(shì)。

擬物化風(fēng)格在主宰界面設(shè)計(jì)多年之后，大眾也逐漸對(duì)其從最初的震撼吸引變?yōu)榱?xí)以為常，甚至審美疲勞。風(fēng)格潮流的輪回至此，將扁平化設(shè)計(jì)風(fēng)格推到了風(fēng)口浪尖。

扁平化設(shè)計(jì)的特點(diǎn)：

1.拒絕特效。扁平化設(shè)計(jì)以二維形態(tài)示人，放棄一切裝飾效果。和擬物化設(shè)計(jì)強(qiáng)調(diào)的質(zhì)感光影不同，扁平化設(shè)計(jì)摒棄一切諸如浮雕、投影、高光等特效，僅以鮮明的色塊和突出的文字信息呈現(xiàn)。

2.簡(jiǎn)潔的視覺(jué)形態(tài)。扁平化設(shè)計(jì)通常盡量使用最簡(jiǎn)單的幾何形，如圓形或長(zhǎng)方形的形態(tài)特征，使圖形簡(jiǎn)潔突出，方便點(diǎn)擊。

3.強(qiáng)調(diào)色彩鮮明。扁平化設(shè)計(jì)常常用色鮮明，傾向于有更多色彩的搭配，同一界面的配色可能到6-8種顏色。

4.重視排版。排版不僅僅是關(guān)于視覺(jué)美學(xué)，更是一門信息組織的學(xué)問(wèn)。了解用戶的需求，在合適的地方以適當(dāng)?shù)淖煮w字號(hào)呈現(xiàn)，展現(xiàn)清晰的視覺(jué)層次，幫助用戶更有效的達(dá)到預(yù)期目的，會(huì)有助于提高用戶體驗(yàn)。

5.做減法。包豪斯時(shí)期米斯凡德羅所提出了“少即是多”的設(shè)計(jì)原則，扁平化設(shè)計(jì)可以說(shuō)是在界面設(shè)計(jì)中充分地詮釋了這一理念，即強(qiáng)調(diào)對(duì)于一切視覺(jué)元素做減法，避免不必要的元素出現(xiàn)在頁(yè)面中。

德國(guó)著名產(chǎn)品設(shè)計(jì)師 Dieter Rams曾經(jīng)提出關(guān)于“什么是好設(shè)計(jì)”的十條原則，其中一條就是“盡可能簡(jiǎn)潔的設(shè)計(jì)——少，但是更好。因?yàn)榘丫Χ技性谧罹A的部分，設(shè)計(jì)應(yīng)回歸純粹，回歸簡(jiǎn)約?！?/p>

這樣的特點(diǎn)也正好反映了交互設(shè)計(jì)中一貫強(qiáng)調(diào)的可用性原則，用戶需要什么就給他們什么，過(guò)多的不必要元素的放置是在制造視覺(jué)噪聲，給用戶帶來(lái)負(fù)擔(dān)。

通過(guò)比較部分蘋果ios6和ios7的界面，扁平化設(shè)計(jì)的風(fēng)格相對(duì)于之前的擬物化顯得更加開闊和敞亮，同樣的篇幅內(nèi)容如果加入3d光影效果，容易顯得擁擠，信息量受限。后者平面化的效果通過(guò)單純的色彩變化，去除了視覺(jué)噪聲，反而更突出了操作內(nèi)容。（圖2）

（三）扁平化設(shè)計(jì)是否適用于所有設(shè)計(jì)？

好的設(shè)計(jì)是適合的設(shè)計(jì)。扁平化設(shè)計(jì)的視覺(jué)風(fēng)格對(duì)于信息量大，層級(jí)多的網(wǎng)站來(lái)說(shuō)非常適用，使用戶可以快速清晰地找尋所需的信息。但是對(duì)于角色扮演類游戲網(wǎng)站，或者電影宣傳網(wǎng)站就未必是個(gè)好的選擇。這種類型的網(wǎng)站，更側(cè)重于營(yíng)造某種氛圍，使用戶沉浸其中，所以視覺(jué)的震撼是必不可少的部分。

另外，一些界面中的細(xì)節(jié)，淺淺的陰影或輕微的懸浮效果對(duì)于信息分層上還是發(fā)揮了效果，若恪守絕對(duì)扁平化的風(fēng)格，所有的視覺(jué)元素將會(huì)被置于同一平面，用戶在使用時(shí)有可能產(chǎn)生疑慮，到底哪些地方可以點(diǎn)擊。看似簡(jiǎn)單的扁平化設(shè)計(jì)其實(shí)面臨的是更大的挑戰(zhàn)。

三、被誤讀的擬物化和扁平化

由于眾多強(qiáng)調(diào)細(xì)節(jié)層次的擬物化的涌現(xiàn)，使得很多時(shí)候被大眾將擬物化完全等同于寫實(shí)主義，認(rèn)為擬物化一定是復(fù)雜繁瑣的，立體的，而扁平化就是擬物化的對(duì)立面。事實(shí)上，是二維還是三維只是表現(xiàn)形式的差異，并不能從本質(zhì)涵義上將二者對(duì)立。扁平化的表現(xiàn)形式雖然簡(jiǎn)潔，但從其所包含的涵義來(lái)說(shuō)也未必不能是擬物的。比如在蘋果ios7里的camera，clock圖標(biāo)，就是一個(gè)典型的扁平化的表現(xiàn)形式，但是其根本實(shí)質(zhì)卻還是擬物的。（圖3）

四、設(shè)計(jì)的本質(zhì)是給用戶提供有效的服務(wù)和良好的體驗(yàn)

設(shè)計(jì)，是為了完成任務(wù)，解決問(wèn)題?？捎眯院陀脩趔w驗(yàn)比外觀更重要。如何高效地幫助和指導(dǎo)用戶完成他們想做的事，是設(shè)計(jì)的根本。用戶看重的是完成任務(wù)流程的順暢程度和完成過(guò)程中的感受。

信息的組織性和展示方式很大程度決定了最終接收信息的效果。應(yīng)該確保最重要的信息最先被發(fā)現(xiàn)。相對(duì)擬物化風(fēng)格為追求逼真和細(xì)節(jié)而帶來(lái)諸多視覺(jué)元素之間的復(fù)雜關(guān)系，扁平化設(shè)計(jì)風(fēng)格視覺(jué)元素簡(jiǎn)潔單純，更容易突出重點(diǎn)。

一些界面中的細(xì)節(jié)，淺淺的陰影或輕微的懸浮效果對(duì)于信息分層上還是發(fā)揮了效果，若恪守扁平化的風(fēng)格，所有的視覺(jué)元素將會(huì)被置于同一平面，用戶在使用時(shí)有可能產(chǎn)生疑慮，到底哪些地方可以點(diǎn)擊。解決這樣的問(wèn)題可以通過(guò)大小、空間、距離、色彩的對(duì)比讓需要被最先關(guān)注的對(duì)象更突出。看似簡(jiǎn)單的扁平化設(shè)計(jì)其實(shí)面臨的是更大的挑戰(zhàn)。

結(jié)語(yǔ)

在設(shè)計(jì)的歷史長(zhǎng)河里，潮流終有輪回，一種風(fēng)格盛行到一定程度容易使大眾產(chǎn)生審美疲勞，在此背景下另一種與之迥異的風(fēng)格凸顯出來(lái)是時(shí)代發(fā)展的必然。扁平化設(shè)計(jì)與擬物化設(shè)計(jì)談不上孰是孰非，也談不上絕對(duì)的對(duì)立，討論它們二者誰(shuí)更好就像爭(zhēng)論到底哪種顏色最美一樣沒(méi)有必要。它們只是不同的視覺(jué)風(fēng)格，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，更重要的是研究把什么樣的形式運(yùn)用在合適的對(duì)象上。

參考文獻(xiàn)

1 Alan Cooper， Robert Reimann，David Cronin.About Face 3；交互設(shè)計(jì)精髓[M]，劉松濤等譯，北京：電子工業(yè)出版社，2012.

2 Robert Hoekman， Jr.瞬間之美[M]，向怡寧譯，北京：人民郵電出版社，2009.

3 王受之.世界現(xiàn)代設(shè)計(jì)史[M]，深圳：新世紀(jì)出版社，1996.

4 傅小貞，胡甲超，鄭元攏.移動(dòng)設(shè)計(jì)[M]，北京；電子工業(yè)出版社，2013.endprint