摘要：“扁平化”的設(shè)計卻是在短短的時間內(nèi)迅速崛起，從本質(zhì)上看，這不僅僅是一種視覺風(fēng)格的改變，而是一種設(shè)計語言和思維方式的演化。它預(yù)示著界面設(shè)計開始回歸到如何理解功能內(nèi)容和應(yīng)用本身。

關(guān)鍵詞：扁平化擬物化ios 交互設(shè)計UI

三年前，當(dāng)windows phone開始扁平化時，面對的是世人嘲笑的眼光。兩年前，當(dāng)安卓4.0開始扁平化時，世人只當(dāng)是與蘋果區(qū)別的掙扎。一年前，扁平化通過iso7.0逆襲成功，成為如今交互設(shè)計主流?！氨馄交蓖ㄟ^三年時間在我們生活中扎根，我們可以看到質(zhì)感厚重，圖層樣式繁多的網(wǎng)站越來越少，反之各種輕質(zhì)感、布局大膽、創(chuàng)意新穎的網(wǎng)站越來越多地進(jìn)入了人們的視野。那么將這一趨勢帶來的扁平化到底意味著什么，扁平化的設(shè)計理念又將會帶領(lǐng)交互設(shè)計帶往何方？

在交互設(shè)計中什么是扁平化設(shè)計

首先說說什么是扁平化設(shè)計?！氨馄交O(shè)計”一詞所指的是拋棄多年來流行的漸變、陰影、高光等擬真視覺效果，從而打造出一種看上去更“平”的界面。扁平化設(shè)計正是通過這種放棄任何附加效果的方式，創(chuàng)建了一個完全不帶3D屬性的設(shè)計方案。在這里，沒有陰影效果、斜角、浮雕、漸變等其他方法來幫助元素產(chǎn)生相對于屏幕的凹凸效果。完全沒有任何效果的圖標(biāo)和UI元素通過色塊的搭配也都是看起來非常鮮明。

交互工具的界面設(shè)計為什么會選擇扁平化設(shè)計？我們先來看看web UI的發(fā)展史，在互聯(lián)網(wǎng)制作的初期，由于技術(shù)的局限，網(wǎng)頁只是作為呈現(xiàn)信息的一個平臺而已，毫無設(shè)計可言，隨著科技的發(fā)展，CSS的廣泛運用、才開始有了網(wǎng)頁設(shè)計的概念，在這個階段已經(jīng)有大量個人網(wǎng)站出現(xiàn)了'許多網(wǎng)頁使用Ps切圖制作個性的UI效果，擬物化設(shè)計登上UI設(shè)計舞臺。在javascript網(wǎng)頁特效以及Flash流行起來后，靜態(tài)的高光立體擬物效果已經(jīng)滿足不了大家的視覺需求了，于是開始使用簡單的靜態(tài)交互（javascript或flash本地交互）來產(chǎn)生更仿真的效果，設(shè)計師想讓webUl更像是一件實物，可以帶來一種更為生動的感覺。希望能消除科技產(chǎn)品與生活的距離感，在無論是網(wǎng)頁，或是各種獲取資訊的軟件所提供的信息量相對較少的情況下，網(wǎng)頁更傾向于UI帶來的視覺沖擊，軟件的UI設(shè)計也更為大膽。

2005年后，web2.0的出現(xiàn)使得設(shè)計師更專注于內(nèi)容呈現(xiàn)和交互，同時開始去掉了各種不必要的視覺效果。web2.0概念伴隨著幾何次方增長的信息而生，帶來了更大的信息量和更復(fù)雜的交互，使webUI回歸了它應(yīng)該做的，就是以更好的體驗呈現(xiàn)更大量的信息，讓內(nèi)容展現(xiàn)自己的生命力，而不是靠UI設(shè)計喧賓奪主。

這使我們想到在說到扁平化的同時，我們必不可少的會說到另一種設(shè)計分格——擬物化（skeuomorphism），擬物化作為與扁平化設(shè)計極度相反的設(shè)計風(fēng)格，從web UI誕生起就一直占領(lǐng)UI設(shè)計的主流。擬物化設(shè)計的特點是界面模擬真實物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等；人機(jī)交互也擬物化，模擬現(xiàn)實中的交互方式。擬物設(shè)計會讓任何人都知道這個圖標(biāo)是用來干什么的，同時這也是擬物化最大的好處，它能讓上至八十歲的老人，下至幾歲的孩童都能看懂IOS里面幾乎所有自帶應(yīng)有的圖標(biāo)。在ISO系統(tǒng)中各種按鈕的視覺質(zhì)感和點開之后的交互效果，有力的與現(xiàn)實所結(jié)合，養(yǎng)成用戶對這類應(yīng)用有統(tǒng)一認(rèn)知和使用習(xí)慣。讓用戶在使用此類應(yīng)有的同時感受到來自應(yīng)有本身的人性化體貼。但是擬物化本身同時也是個約束，它限制功能本身的設(shè)計。在電子設(shè)計領(lǐng)域使用擬物原理直接導(dǎo)致了在蘋果控制面板中的模擬時鐘比電子時鐘更難讀，點擊計算器的按鍵要比用鍵盤輸入花費更多的時間。堅持使用擬物設(shè)計產(chǎn)生了不少的問題：由于一直使用與電子形式無關(guān)的設(shè)計標(biāo)準(zhǔn)，擬物化設(shè)計限制了創(chuàng)造力和功能性。將擬物化元素與少維的元素相融合時，擬物元素看起來有些不一致，而且這些模仿并沒多少邏輯。比如，蘋果的找朋友應(yīng)用就有一個看起來像縫合皮革的背景。但該元素與現(xiàn)實世界沒有任何關(guān)聯(lián)。擬物化元素以無功能的裝飾占用了寶貴的屏幕空間和載入時間，當(dāng)與其他無擬物效果的元素組合時，擬物元素看起來有問題，這樣就限制了整體設(shè)計和其他的元素的效果。我們可以看到現(xiàn)在的UI設(shè)計，也開始像當(dāng)初webUI一樣，回歸內(nèi)容的本質(zhì)，開始走上由繁至簡的道路。

扁平化設(shè)計成為交互設(shè)計主流風(fēng)格的幾大原因

扁平化對于互聯(lián)網(wǎng)巨頭直接意味這兩個詞：快速，突出。

快速高效是扁平化設(shè)計的一個很重要的基因，時間就是金錢，如何在信息更新如此之快的互聯(lián)網(wǎng)即時的跟上它的腳步呢-那就是快速， 快速同時也意味著更低成本的運作，采用扁平化設(shè)計，可以再最短的時間內(nèi)更新所需的頁面，只需要給制作提供相應(yīng)的色值就行，大大的節(jié)省了項目時間，也方便下次再更新。這也是很多互聯(lián)網(wǎng)巨頭們?yōu)槭裁催x擇扁平化設(shè)計的原因之一。

信息突出，是在信息大爆炸時代，網(wǎng)站取勝的關(guān)鍵，扁平化設(shè)計通過顏色的對比，大小不同的字號，讓重要的信息放在首要位置，不重要的元素弱化，除了幾個主要的動作按鈕當(dāng)中使用了輕微的斜面效果以外，其他界面元素全部采用扁平風(fēng)格，這樣的設(shè)計讓訪問者可以很容易的將注意力聚焦在品和信息上，而不會被網(wǎng)站界面上的視覺元素所干擾。從而突出核心信息和操作。這些都增強(qiáng)了網(wǎng)站的易讀性和可讀性。

對于用戶，扁平化則是簡潔明了的，簡潔的東西總是讓人喜愛的，在一個設(shè)計簡潔邏輯清晰的網(wǎng)站你能很快找到自己所要的東西，從而提高用戶體驗。

目前大多數(shù)對于界面風(fēng)格扁平化的討論，主要在于界面與圖標(biāo)中材質(zhì)、陰影、立體感的消失等等。實際上對于界面設(shè)計來說，正如人們對于視覺感官的新鮮需求和疲勞度是與生俱來的，各種視覺風(fēng)格的流行和更迭—直在持續(xù)進(jìn)行著。然而過去的很長一段時間內(nèi)，界面設(shè)計的風(fēng)格都處在循序漸進(jìn)的改變，“扁平化”的設(shè)計卻是在短短十幾個月的時間內(nèi)迅速流行起來。從本質(zhì)上看，這不僅僅是一種視覺風(fēng)格的改變，而是一種設(shè)計語言和思維方式的演化。

對于打造交互設(shè)計中扁平化設(shè)計風(fēng)格的幾點建議

形式遵循功能，少點再少點

一些偉大的設(shè)計中所運用的“形式跟隨功能（form followfunction）”和“少即是多（1ess is more）”的理念依然是我們今天還在談?wù)摵蛯W(xué)習(xí)的。簡單的說，在用戶界面設(shè)計，常常去掉真正將界面帶入生活的那些東西。在扁平化設(shè)計的世界中設(shè)計師必須專注于產(chǎn)品的本質(zhì)，它是用來干嘛的，而不是它們要看起來像什么。

細(xì)節(jié)永遠(yuǎn)是追求的方向

設(shè)計中所謂細(xì)節(jié)決定成敗，有時候一點點行距一點點色值的不相同也會對整體視覺效果照成很大的影響，細(xì)節(jié)的調(diào)整是很有必要的。字體作為扁平化設(shè)計中的重要元素。你可以使用字體幫你創(chuàng)建你期望的風(fēng)格和基調(diào)并且使界面更加簡潔。

色彩一定要酷點再酷點

由于少了些質(zhì)感，所以顏色也變得尤為重要了，運用搭配合理的顏色能起到?jīng)Q定作用。設(shè)計界面的基礎(chǔ)之一是定義調(diào)色板。扁平化界面設(shè)計所采用的色彩的模式與其他調(diào)色板相比傾向于更加醒目和更加明亮。當(dāng)你選擇好調(diào)色板后，確保給主要交互動作指定色彩：比如“提交”、“發(fā)送”、“更多”等按鈕都應(yīng)當(dāng)是同一個色彩。理想情況下鮮明的色彩與背景形成了鮮明的對比。如果你的徽標(biāo)或者商標(biāo)采用主色的話，那么它應(yīng)當(dāng)是主要控制所使用的哪個色彩。不要自始至終過分的使用它，否則你將冒著在用戶眼里這個色彩不太重要的風(fēng)險。

在扁平化設(shè)計里色彩的選擇尤其重要，因為當(dāng)你使用扁平化按鈕的時候，色彩將是幫助用戶識別彼此的主要手段之一。

最關(guān)鍵的是創(chuàng)新

優(yōu)秀的設(shè)計是創(chuàng)新。我個人比較喜歡蘋果首席設(shè)計Jony Ive的方法：先打破以前的框架。比如說設(shè)計一個飯盒，那他先要把“盒”這個概念抹去，不要被這個“盒”所困住思維，只想這個器皿最佳的使用方式和設(shè)計形式。比如時間，不只是想到鐘表，還可以想想有沒有其他更好方式來呈現(xiàn)。

結(jié)論

目前大多數(shù)對于界面風(fēng)格扁平化的討論，主要在于其藝術(shù)表現(xiàn)形式的變化。實際上對于界面設(shè)計來說，人們對于各種視覺風(fēng)格追求—直在持續(xù)進(jìn)行著。然而過去的很長一段時間內(nèi)，界面設(shè)計的風(fēng)格都處在循序漸進(jìn)的改變?！氨馄交钡脑O(shè)計卻是在短短的時間內(nèi)迅速崛起，從本質(zhì)上看，這不僅僅是一種視覺風(fēng)格的改變，而是一種設(shè)計語言和思維方式的演化。扁平化設(shè)計風(fēng)格最大的優(yōu)勢就是它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認(rèn)知障礙的產(chǎn)生，這不僅是設(shè)計視覺風(fēng)格的突破，更是功能性在交互設(shè)計風(fēng)格中的重要體現(xiàn)。

如今各種不同尺寸和配置的產(chǎn)品出現(xiàn)，填補(bǔ)了不同級別間的空缺，同時要求更高的界面適應(yīng)性，這些都要求我們將界面設(shè)計回歸到如何理解功能內(nèi)容和應(yīng)用本身，但是否“扁平”并不應(yīng)當(dāng)成為交互界面的評價標(biāo)準(zhǔn)，良好的交互易用性、理解識別度、情感傳達(dá)、操作反饋、圖形隱喻、視覺舒適度、動態(tài)表現(xiàn)和音效設(shè)計等等方面，才能構(gòu)成一個優(yōu)秀的交互設(shè)計產(chǎn)品。

參考文獻(xiàn)

[1]范圣璽行為與認(rèn)知的設(shè)計設(shè)計的人性化[M].中國電力出版社.2009-3-1

[2][美]維克多·帕帕奈克（VictorPapanek）著，周博譯為真實的世界設(shè)計[M].中信出版社.2013-1-1

[3][英]科制白恩著李松峰，秦緒文譯簡約至上：交互式設(shè)計四策略[M].人民郵電出版社.2011-01-01

[美]加瑞特著范曉燕譯用戶體驗要素：以用戶為中心的產(chǎn)品設(shè)計[M].機(jī)械工業(yè)出版社.2011-07-01

[5][美]Jeff Johnson著 張一寧譯認(rèn)知與設(shè)計：理解UI設(shè)計準(zhǔn)則[M].人民郵電出版社.2011-09-01

[6]楊響亮揚君順，崔延琳.UI設(shè)計在望造產(chǎn)品形象中的應(yīng)用研究[A].第十一屆全國包裝工程學(xué)術(shù)會議論文集（二）[C].2007

[7]李若輝.淺析全球化趨勢的設(shè)計對文化發(fā)展的推動[J].今日科苑2011年20期