去年微軟發(fā)表了Windows 8 所搭載的Metro UI 后，就掀起了一陣扁平介面設(shè)計（Flat UI Design）的熱潮，許多網(wǎng)站、App、介面設(shè)計和互動設(shè)計都開始采用了這種風(fēng)格。Google 在前一陣子的設(shè)計革新中也運(yùn)用了許多扁平設(shè)計的元素，就連上星期蘋果WWDC 上發(fā)表的iOS7 都有著那么一點(diǎn)點(diǎn)扁平設(shè)計的影子。但到底什么是扁平設(shè)計呢？采用扁平設(shè)計就真的放棄了所謂的擬物設(shè)計（Skeuomorphism Design, 或稱Realism Design）了嗎？

追本溯源：瑞士風(fēng)格與扁平化設(shè)計

根據(jù)維基百科，Metro UI 的設(shè)計原則是根據(jù)1950 年代在瑞士所被提出的瑞士平面設(shè)計風(fēng)格（Swiss Graphic Style）所發(fā)展出來的設(shè)計。在這種設(shè)計風(fēng)格里面我們常?？吹接蒙竽憽⒉捎酶顸c(diǎn)系統(tǒng)的排版、至左對齊的英文字但右邊稱疵不齊（見下圖）的風(fēng)格，整體的三個設(shè)計重點(diǎn)是「干凈、容易閱讀以及具有客觀性」，讓人很容易的閱讀到內(nèi)容，而不會被多余的裝飾所干擾。

當(dāng)Windows 8 和Windows Phone 采用Metro UI 的時候，我們可以很清楚的看到這種介面是由文字、圖片等內(nèi)容所主導(dǎo)的，然后再用輔助的顏色強(qiáng)調(diào)內(nèi)容的特性或進(jìn)行分類。在Windows Phone Messenger 的介面上我們很容易可以看清楚兩個人對話的區(qū)別，然后將目光放在文字本身，而不是旁邊的陰影上。Metro UI 的核心設(shè)計原則就是「光滑、快、現(xiàn)代」，讓人可以從光滑的手機(jī)螢?zāi)簧峡焖俚淖x取內(nèi)容，并吸收了解。

介面設(shè)計的中心原則

許多人誤解了扁平化設(shè)計的設(shè)計原則，認(rèn)為扁平化設(shè)計就是沒有陰影、沒有凸起效果、沒有材質(zhì)、沒有任何來自真實(shí)世界的線索，但這樣的理解其實(shí)誤解了整個設(shè)計的核心，也就是由瑞士平面設(shè)計風(fēng)格所提出的：干凈、容易閱讀、具有客觀性。一個完全只是色塊的按鈕，在不同的場合其實(shí)會產(chǎn)生不同的效果，如果把它放在一群淺色輸入框的下方，那么他很明顯是個互動元件。但如果你將這個色塊放在以圖片顯示為主的畫面中，那么他可能就會被人們所忽略了。

根據(jù)iOS 使用者介面設(shè)計指南（iOS Human Interface Guideline，你可以注意到蘋果采用的是Human 而不是User，范圍更寬更廣）：盡可能幫你的應(yīng)用程式增加一點(diǎn)真實(shí)感與物理特性。應(yīng)用程式的操作介面和現(xiàn)實(shí)生活中的實(shí)體物品越相似，人們就越容易理解如何操作并更喜歡使用。? Whenever possible, add a rea??listic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.

擬物設(shè)計帶給我們的啟發(fā)是什么？你會發(fā)現(xiàn)我們一開始采用擬物設(shè)計的重點(diǎn)就是要讓人們更容易理解與使用，事實(shí)上，除了有漸層的陰影和材質(zhì)以外，看起來稍微凸起的扁平化設(shè)計按鈕、下拉后會如同彈簧般彈回畫面上方的選單、Google Visual Assets Guidelines 中出現(xiàn)的45 度斜角陰影設(shè)計（見下圖，即使是扁平設(shè)計，Google 還是一樣有考慮光源呢?。鋵?shí)這些東西都還是來自現(xiàn)實(shí)生活的暗示與線索。

立足在互動機(jī)制：線索、暗示與預(yù)測

在「互動設(shè)計的生命周期與法則」這篇文章中，我提到過一個好的互動設(shè)計，必須要讓互動元件本身能被使用者感覺到（感覺他可以被操作或把玩）、接著還要讓使用者能夠預(yù)期他會造成的結(jié)果，人們才有機(jī)會嘗試使用他。根據(jù)Donald Norman所提出的「預(yù)設(shè)用途（Affordance）」原則，陰影和立體感都是很好的提示：一個凸起的按鈕讓人感覺到可以被按下，不管這個凸起按鈕帶有材質(zhì)、像極了來自真實(shí)世界的產(chǎn)物、還是一個簡單的色塊下面加上暗示立體感的線條，都有著刺激人們與其互動的效果。 回頭來看看iOS7 中的書報攤，跟iOS6 的系統(tǒng)比較起來，那充滿木頭質(zhì)感的書柜被一層層的白色漸層所取代了，的確去掉了不少擬物的線索。但iOS7 的系統(tǒng)中依然保留了不同層架間的陰影，看起來從木頭柜變成了玻璃柜，上面一的本本書籍看起來依舊跟真實(shí)世界中的雜志沒有什么兩樣，線索還在，我們還是很容易知道要怎么操作這個介面，至于好不好看，那就見仁見智了。 說穿了，介面是從硬體發(fā)展到軟體，也從硬體延伸進(jìn)軟體的，不管是iPad、Kindle 還是hTC 平板或手機(jī)，在最初的設(shè)計中介面和工業(yè)設(shè)計本身是一體的，人的操作也是在觸碰螢?zāi)缓推渌膶?shí)體按鈕間來來回回。人們一直都是活在現(xiàn)實(shí)生活中的，我們工作的時候會感覺到鍵盤與滑鼠的觸感、沒去過賭場也可以想像舊版iOS Game Center 中那張綠色桌子摸起來大概是什么感覺（就好像走進(jìn)了賭場一樣）即使是那iOS7 Game Center 那幾顆彩色的氣泡，也會讓人聯(lián)想到兒童樂園等真實(shí)世界。 在爭論到底扁平化設(shè)計和擬真設(shè)計究竟誰優(yōu)誰劣的同時，也不要忘記對人們來說真正重要的是：操作介面能不能被快速理解與學(xué)習(xí)。不管你采用的是哪一種設(shè)計風(fēng)格，瑞士平面設(shè)計那種1950年代的「干凈、容易閱讀以及具有客觀性」設(shè)計原則可以和互動線索一起考慮進(jìn)去，讓我們的介面又好看又實(shí)用吧！

參考文獻(xiàn)

• [1] Swiss Graphic Design, WikiPedia, http://en.wikipedia.org/wiki/International_Typographic_Style
• [2] Metro UI, WikiPedia, http://en.wikipedia.org/wiki/Metro_UI
• [3] iOS Human Interface Guideline
• [4] Google Visual Assets Guidelines
• [5] Image via?andreaspopp?, CC License.

via:http://dclick.fourdesire.com/2013/06/19/between-flat-and-skeuomorphism?ref=home-1&type=image