摘要：本文介紹了擬物化設(shè)計(jì)和扁平化設(shè)計(jì)的區(qū)別與聯(lián)系，通過實(shí)際案例探討如何在GUI設(shè)計(jì)中更好地運(yùn)用扁平化設(shè)計(jì)，并研究了未來的扁平化設(shè)計(jì)風(fēng)格的趨勢。為今后GUl的設(shè)計(jì)工作提供參考。

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

中圖分類號：TN711 文獻(xiàn)標(biāo)示碼：A 文章編號：1003—0069（2014）09—0105—03

扁平化設(shè)計(jì)無疑是當(dāng)前討論最多、最火的設(shè)計(jì)形式。扁平化時(shí)代之前，設(shè)計(jì)師的作品往往非常的寫實(shí)，非常的有立體感。但是現(xiàn)在即便是擬物設(shè)計(jì)的引領(lǐng)者蘋果，也不得不轉(zhuǎn)變設(shè)計(jì)思路，在iOS 7上開始著手扁平化設(shè)計(jì)的探索。

擬物設(shè)計(jì)和扁平化設(shè)計(jì)的優(yōu)劣，更不想說誰更好，在形式服從內(nèi)容的今天，只有哪種設(shè)計(jì)風(fēng)格更適合你的產(chǎn)品。就像水和酒哪個(gè)好喝一樣，沒有辦法回答，只能看此時(shí)你的用戶最需要什么。

首先我們來看看為什么會(huì)出現(xiàn)扁平化設(shè)計(jì)，有人說是對擬物設(shè)計(jì)審美疲勞了，有人說是一群高級設(shè)計(jì)師為尋求突破做出來的設(shè)計(jì)潮流，有人說，是從平面設(shè)計(jì)中演化而來，這些都是對的，扁平化設(shè)計(jì)是設(shè)計(jì)發(fā)展的必然規(guī)律。

什么是“擬物化設(shè)計(jì)”

對于擬物化設(shè)計(jì)的簡單理解就是“模擬現(xiàn)實(shí)對象”。按照蘋果公司的說法，應(yīng)用程序的外觀看起來與現(xiàn)實(shí)生活中的對應(yīng)物越接近，使用起來就越簡單，相應(yīng)的也有利于改善應(yīng)用程序的用戶體驗(yàn)。

人類最早的語言“象形文字”便是擬物化，幾乎所有的人類文字一開始都是象形文字，用擬物的方式來描繪現(xiàn)實(shí)世界中的東西，學(xué)習(xí)成本低、易記。喬布斯對界面設(shè)計(jì)的一個(gè)理想是，任何年齡的人，任何經(jīng)歷的人，都可以在拿到設(shè)備后的幾分鐘內(nèi)輕松地掌握它的用法。于是Apple通過利用人們的日常經(jīng)驗(yàn)，做出擬物化的界面，從而降低用戶的學(xué)習(xí)成本以及理解難度。

想像一下，當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實(shí)世界中的對象與操作仿造，用戶就能快速領(lǐng)會(huì)如何使用它。模擬實(shí)物的視覺設(shè)計(jì)和交互體驗(yàn)，讓用戶完全不用去抽象地理解就可以直觀地認(rèn)知和使用。當(dāng)你到Apple商店里面，你會(huì)發(fā)現(xiàn)很多的小孩、老人在操作iPhone、iPad的時(shí)候，根本不需要?jiǎng)e人去教，自己玩幾分鐘即可以流暢地使用它們。

蘋果之所以形成了如今的界面風(fēng)格，是因?yàn)閱滩妓箤Φ蛯W(xué)習(xí)成本的極大重視，因而才會(huì)在界面中大量使用隱喻和模仿；而如今的扁平化設(shè)計(jì)也沒有從本質(zhì)上脫離這個(gè)根本的軌道。

什么是“扁平化設(shè)計(jì)”

所謂扁平化設(shè)計(jì)，就是在進(jìn)行設(shè)計(jì)的過程中，去除所有具有三維突出效果的風(fēng)格和屬性。也就是說，去除掉下落式陰影、梯度變化、表面質(zhì)地差別，以及所有具有三維效果的設(shè)計(jì)效果。對于設(shè)計(jì)師來說，扁平化設(shè)計(jì)是一種實(shí)打?qū)嵉脑O(shè)計(jì)風(fēng)格，不要花招，不要粉飾。從整體的角度來講，扁平化設(shè)計(jì)是一種極簡主義美學(xué)，附以明亮柔和的色彩，最后配上粗重醒目，而風(fēng)格又復(fù)古的字體。扁平化設(shè)計(jì)簡化了諸如按鈕、圖標(biāo)一類的界面元素。

扁平化設(shè)計(jì)風(fēng)格可以讓設(shè)計(jì)更具有現(xiàn)代感，另外可以強(qiáng)有力地突出設(shè)計(jì)中最為重要的內(nèi)容：內(nèi)容和信息，因此扁平化設(shè)計(jì)在如今備受設(shè)計(jì)師們的青睞。其實(shí)那些具有三維效果的屬性，本身都是某段時(shí)間的流行風(fēng)格，所以去除掉了這些信息，就能讓你的設(shè)計(jì)不那么容易過時(shí)。更何況還能突出內(nèi)容本身。因此扁平化設(shè)計(jì)風(fēng)具有很多優(yōu)點(diǎn)。

說到扁平化設(shè)計(jì)就不能不提它的相反面，也就是rich design——豐富設(shè)計(jì)風(fēng)格。所謂rich design就是通過添加各種設(shè)計(jì)裝飾，例如下落陰影、梯度等，讓整體設(shè)計(jì)顯得很豐富。這種設(shè)計(jì)風(fēng)格可以讓用戶在網(wǎng)頁上進(jìn)行導(dǎo)航時(shí)更加自如。另外rich design和擬真設(shè)計(jì)風(fēng)格也不同，后者是通過模擬物理實(shí)物來讓設(shè)計(jì)更加逼真。

“扁平化風(fēng)格”如何應(yīng)用在GUI設(shè)計(jì)中

扁平化設(shè)計(jì)如日中天。去除繁雜裝飾的極簡主義界面設(shè)計(jì)正當(dāng)時(shí)。扁平化設(shè)計(jì)聚焦兩點(diǎn)：視覺的極簡主義，功能的最優(yōu)表達(dá)。用最簡單的用戶界面達(dá)成最詳備的功能。

在革新了由iPhone建立的擬物時(shí)代后，扁平化成為設(shè)計(jì)風(fēng)格的領(lǐng)導(dǎo)者。

對于設(shè)計(jì)需要量體裁衣，我們要考慮扁平化設(shè)計(jì)真的符合自己的項(xiàng)目嗎？

扁平化的好與壞取決于兩點(diǎn)：1 設(shè)計(jì)師個(gè)人設(shè)計(jì)理念與設(shè)計(jì)造詣的高低；2 扁平化是否與設(shè)計(jì)需求相符。那么怎么判斷扁平化是否合適呢？

扁平化設(shè)計(jì)天生簡約。我們需要回歸到事物的本質(zhì)，追尋最重要的特質(zhì)加以體現(xiàn)——這樣，最重要的元素便顯得突出，成為了視覺焦點(diǎn)。

影響扁平化設(shè)計(jì)的幾個(gè)重要元素如下所示：

1 字體

因?yàn)楸馄交O(shè)計(jì)是簡約的，形狀是最基本的。那么扁平化設(shè)計(jì)中，字體將被打造成視覺焦點(diǎn)。扁平化設(shè)計(jì)習(xí)慣加粗字體，提高視覺表現(xiàn)和辨識度。字體應(yīng)該在極簡背景下視覺表現(xiàn)良好，如圖1所示，無襯線字體Helvetica便是典型。

2 按鈕樣式

按鈕務(wù)求形狀簡單，不帶有投影、光效以及漸變，色彩扁平。色彩之間對照感要強(qiáng)，從而提高辨識度。但是，凡事都在發(fā)展，長投影、3D扁平式、多邊形的應(yīng)用為扁平化按鈕設(shè)計(jì)加入了更多的變數(shù)。

3 色彩

扁平化設(shè)計(jì)多姿多彩，用色大膽，因?yàn)榧?xì)節(jié)的缺失必然要用色彩加以彌補(bǔ)。光鮮整潔的色彩將為整體設(shè)計(jì)加分。

4 形狀

一改傳統(tǒng)的蜂巢型，幾何形狀是扁平化設(shè)計(jì)采用的主要形式，優(yōu)雅整齊。

5 圖標(biāo)

圖標(biāo)能起到形象化簡述內(nèi)容的作用。扁平化的圖標(biāo)設(shè)計(jì)務(wù)求簡單。使用圖標(biāo)可以減少文字，提高界面的整齊感。

我們來看看Triggermall這個(gè)網(wǎng)站。

網(wǎng)站的美學(xué)風(fēng)格與內(nèi)容相符。通過扁平化設(shè)計(jì)去除了繁雜元素，提供了更容易上手的導(dǎo)航。將機(jī)構(gòu)的創(chuàng)意體現(xiàn)最大化。再來看看魔獸世界的網(wǎng)站。

這個(gè)網(wǎng)站并不適合扁平化風(fēng)格，導(dǎo)航條和圖像增添了整體的神秘感和中世紀(jì)氛圍。如果采用扁平化設(shè)計(jì)很明顯，設(shè)計(jì)和內(nèi)容無法聯(lián)系到一起。

在進(jìn)行設(shè)計(jì)時(shí)，一定要考慮新美學(xué)風(fēng)格與內(nèi)容的聯(lián)系性。新風(fēng)格適合內(nèi)容嗎？新風(fēng)格與產(chǎn)品描述相符嗎？如果不幸地錯(cuò)誤使用扁平化設(shè)計(jì)，會(huì)對網(wǎng)站形象造成損害。要記住好的設(shè)計(jì)是超越潮流的，一定要謀而后定。

那么，什么情況下適合？什么情況下不適合？如何判定扁平化風(fēng)格是否適合你的設(shè)計(jì)呢？

1 采用扁平化：

如果你的用戶能夠認(rèn)可扁平化網(wǎng)站、熟悉扁平式導(dǎo)航，扁平化設(shè)計(jì)后，網(wǎng)站信息依然組織有效。

①內(nèi)容過載，信息量大，需要整潔、有序的設(shè)計(jì)風(fēng)格時(shí)，需要使用扁平化；

②當(dāng)你需要收束—下頁面中過于自由、散漫的設(shè)計(jì)元素時(shí)；

③一些具有進(jìn)步精神的行業(yè)：諸如數(shù)碼界和科技界就適合，而兒童站點(diǎn)不適合。

2 不采用扁平化；

①面向的用戶無法接受扁平化這么新潮的風(fēng)格；

②扁平化對你的設(shè)計(jì)沒什么提高。如果你的頁面本來就高效整潔，就不必多此一舉；

③基于本能層的設(shè)計(jì)，需要對觀眾產(chǎn)生情緒作用；

④網(wǎng)站高度依賴視覺、交互元素，這時(shí)扁平化設(shè)計(jì)會(huì)起到限制作用。

作為設(shè)計(jì)師，我們不要被扁平化設(shè)計(jì)牽制住，扁平化不是全盤肯定，也不是全盤否定。扁平化設(shè)計(jì)提倡一種極簡設(shè)計(jì)理念，消滅華而不實(shí)，將一切變得簡單。記住，是將一切變得簡單輕松，而不是讓一切看起來枯燥呆板。設(shè)計(jì)師不要總是復(fù)制那些優(yōu)秀設(shè)計(jì)作品。微軟是喜歡標(biāo)題和小方塊，但是你沒必要學(xué)微軟，要做自己的設(shè)計(jì)，走自己的風(fēng)格。要重視字體，字體要和網(wǎng)站的色彩和視覺風(fēng)格搭調(diào)。扁平化設(shè)計(jì)的目標(biāo)是通過簡潔讓重要元素更加醒目，因此還要在布局上下功夫。

扁平化世界的支持者會(huì)向你滔滔不絕地講述科技進(jìn)步，全球一體化，全時(shí)段的數(shù)字時(shí)代，更扁平化的信息傳遞模式。某種角度來看，他們的說法沒錯(cuò)。任何一個(gè)人通過手機(jī)，幾秒鐘之內(nèi)就能實(shí)現(xiàn)上網(wǎng)。因此，對設(shè)計(jì)可用性的要求更高了。我們需要更人性化的觸感和更聯(lián)系用戶的設(shè)計(jì)方法，打造更好的用戶瀏覽體驗(yàn)。那么扁平化設(shè)計(jì)是用戶體驗(yàn)的絆腳石，影響了設(shè)計(jì)的兼容性嗎？只要不盲目使用扁平化風(fēng)格，就不會(huì)。

值得一提的是，扁平化設(shè)計(jì)對響應(yīng)式設(shè)計(jì)大有裨益，因?yàn)楸馄交O(shè)計(jì)的核心便是簡約，網(wǎng)頁的“減負(fù)”，自然能讓響應(yīng)式設(shè)計(jì)更高效。

時(shí)至今日，扁平化風(fēng)格已經(jīng)被多家大公司采用，隨后，全世界都在跟風(fēng)。

扁平化設(shè)計(jì)的變種有很多，但是還沒有出現(xiàn)一種統(tǒng)一的標(biāo)準(zhǔn)風(fēng)格。這是好事，這說明還是有一部分人沒有盲從潮流，他們做出了一種反射式的設(shè)計(jì)：根據(jù)趨勢與理念，摻雜—點(diǎn)個(gè)人理解，在趨勢的基礎(chǔ)上進(jìn)行創(chuàng)造。

在使用扁平化風(fēng)格之前，一定要進(jìn)行種種考慮，到底這種風(fēng)格和你的網(wǎng)頁、內(nèi)容是否能夠協(xié)調(diào)。如果能提升功能性，那么自然可以。如果僅僅是為了追趕一時(shí)潮流，將風(fēng)格強(qiáng)加給用戶，且與內(nèi)容不相符，那么這種設(shè)計(jì)模式是不可取的。

“類扁平化”設(shè)計(jì)時(shí)代到來

“類扁平化設(shè)計(jì)”并未徹底拋棄擬物化的優(yōu)勢，但是，從另一個(gè)維度，它在“扁平化設(shè)計(jì)”方面進(jìn)行了大膽的嘗試，比如取消了浮雕效果。

在觸摸的時(shí)代，浮雕效果的必要性大大減弱了，它變成了一種偏重裝飾性的多余的設(shè)計(jì)?！邦惐馄交O(shè)計(jì)”成為一種必然的趨勢，并不是單純的因?yàn)閷徝榔趯?dǎo)致的為了變化而變化：

1 “類扁平化設(shè)計(jì)”具備非常好的兼容性，而單純的擬物化設(shè)計(jì)既繁瑣又費(fèi)時(shí)。現(xiàn)在是一個(gè)多屏的時(shí)代，不同尺寸和分辨率的智能終端，PC顯示器、智能電視以及所謂的智能手表等等，你會(huì)發(fā)現(xiàn)，類扁平化設(shè)計(jì)都能很好地適配到不同的終端上。

2 “類扁平化設(shè)計(jì)”具備優(yōu)秀的組織和展現(xiàn)信息的能力?，F(xiàn)在是一個(gè)信息紛雜的時(shí)代，扁平化設(shè)計(jì)可以把紛繁復(fù)雜的內(nèi)容和功能有效地組織起來，以簡單但合理的方式排列，使得最終的用戶界面變得如此的簡單易用。

3 “類扁平化設(shè)計(jì)”更適合屏幕較小的智能終端，它有更少的按鈕和選項(xiàng)，使整個(gè)界面干凈整潔、條理清晰，讓用戶減少認(rèn)知障礙，降低用戶的學(xué)習(xí)成本。

沒有任何公司能夠把所有的生意都做完，也沒有任何的商人能夠把全世界所有的錢都能賺完。同樣，也沒有任何的設(shè)計(jì)風(fēng)格能夠包打天下。但是筆者認(rèn)為，泛濫的數(shù)據(jù)、紛雜交叉的信息流、PC時(shí)代網(wǎng)頁當(dāng)在前多屏?xí)r代就要憑借“類扁平化設(shè)計(jì)”呈現(xiàn)給用戶?！邦惐馄交O(shè)計(jì)”才剛剛開始。

我們的設(shè)計(jì)應(yīng)不應(yīng)該“扁平化”

關(guān)于扁平化設(shè)計(jì)，最錯(cuò)誤的理念便是：扁平化設(shè)計(jì)意味著視覺風(fēng)格的扁平。字體、圖像、圖標(biāo)一律都要扁平嗎強(qiáng)：面扁平化、全面擬物化是不可取的，真要是這樣，設(shè)計(jì)連一點(diǎn)可操作性都沒有，還要設(shè)計(jì)師干嘛？

扁平化設(shè)計(jì)是一種糅合視覺與理念的設(shè)計(jì)風(fēng)格，不能從字面意義上理解這種風(fēng)格。很多網(wǎng)站明白這個(gè)道理，將扁平化提煉至純粹，采用適合他們網(wǎng)站風(fēng)格的扁平化元素。

視覺上可以部分使用扁平化風(fēng)格，但是組織形式和主題表達(dá)上卻不必拘泥形式。如果一味地盲目跟風(fēng)，兼容性、可發(fā)揮的地方必然有限。

例如，如果你的網(wǎng)頁用來販賣產(chǎn)品，那么你的設(shè)計(jì)中必須要包含產(chǎn)品圖像。顯而易見，產(chǎn)品圖像不是扁平化的，會(huì)給頁面增添一種深度感。但是我們可以在其他地方使用扁平化元素。

這就說明了，扁平化設(shè)計(jì)有的地方能夠提高你的視覺表現(xiàn)力，達(dá)成設(shè)計(jì)目標(biāo)。有的地方不能。靈活使用，才能走得更遠(yuǎn)。我們做的是設(shè)計(jì)，而不是扁平化設(shè)計(jì)。

總結(jié)

人沒有能夠預(yù)測未來的水晶球，我們必須謹(jǐn)記一點(diǎn)：一切都是周而復(fù)始的，反之亦然，反復(fù)、循環(huán)、更替的出現(xiàn)，扁平化設(shè)計(jì)必然會(huì)在未來的某一天被取代。扁平化浪潮過后，又會(huì)是誰？設(shè)計(jì)師們會(huì)不斷地計(jì)劃和嘗試，并最終將它進(jìn)化到一個(gè)新的風(fēng)格。

總之，設(shè)計(jì)行業(yè)永遠(yuǎn)處于變化之中。好的設(shè)計(jì)，無論其是否“扁平”，都應(yīng)該注重通過整潔的視覺交互、有效的設(shè)計(jì)和易用的體驗(yàn)為用戶解決問題。