淺談扁平化界面設(shè)計(jì)

摘要：本文從扁平化與擬物化的含義談起，討論扁平化設(shè)計(jì)流行的必然性以及界面扁平化的局限性，分析扁平化界面風(fēng)格對(duì)設(shè)計(jì)師提出的新要求。無論何種視覺風(fēng)格，精準(zhǔn)的信息表達(dá)，良好的交互體驗(yàn)才是界面設(shè)計(jì)的根本。

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

伴隨著蘋果公司的IOS7和微軟Windows Phone8的推出，全新的扁平化手機(jī)操作系統(tǒng)逐漸被大眾所熟知，即便這種操作系統(tǒng)自發(fā)布以來就飽受爭(zhēng)議，但在蘋果和微軟強(qiáng)大的影響力下，各個(gè)手機(jī)廠商在新推出的手機(jī)上都搭載了具有扁平化風(fēng)格的操作系統(tǒng)。但關(guān)于“扁平化設(shè)計(jì)”的激烈爭(zhēng)論不但沒有停止，反而愈演愈烈。事實(shí)上，“扁平化”與“擬物化”本身并不存在本質(zhì)上的沖突，扁平化的出現(xiàn)及迅猛發(fā)展有其必然性，而且必將會(huì)有更多精彩呈現(xiàn)。視覺上扁平一些更簡(jiǎn)潔，信息層級(jí)扁平一些更便捷，但無論是視覺效果還是交互體驗(yàn)都不能因此而乏味，只有全面考慮用戶的操作體驗(yàn)才能做出優(yōu)秀的界面設(shè)計(jì)。

一、準(zhǔn)確理解“扁平化”和“擬物化”

“扁平化”與“擬物化”分別由“flat”“skeuomorphism”翻譯而來，準(zhǔn)確理解詞義是首先應(yīng)當(dāng)解決的問題。很多爭(zhēng)論是建立在認(rèn)同“扁平化設(shè)計(jì)是指拋棄漸變、陰影、高光、紋理等擬真視覺效果，從而打造出一種看上去更“平”的界面，而擬物化恰好相反，極力表現(xiàn)真實(shí)透視仿真效果”這個(gè)基礎(chǔ)上的，因此直接形成了對(duì)立關(guān)系。其實(shí)“扁平化”和“擬物化”分別都有更深層的含義，兩者并非同屬一個(gè)領(lǐng)域范疇。“扁平化設(shè)計(jì)”不僅是視覺效果上的去除了立體、仿真的效果將按鈕、界面拍扁了，還包括信息層級(jí)的簡(jiǎn)化。“擬物化設(shè)計(jì)”也不僅是視覺上的立體，而是指“原有物件中某些必需的形式在新的設(shè)計(jì)中已不再必要，但新設(shè)計(jì)仍模仿舊有形式，以使新的外觀讓人感覺熟悉和親切”。可以說，目前大多數(shù)爭(zhēng)論是對(duì)于界面設(shè)計(jì)的“簡(jiǎn)潔抽象的平面效果”與“仿真寫實(shí)的立體效果”兩者的偏好問題，這就如同各種不同藝術(shù)流派，它們本身并不具有優(yōu)劣之分，只是每位觀者喜好不同罷了。

二、扁平化風(fēng)格流行的必然性

1.扁平化其實(shí)由來已久

之所以叫做扁平化，是這種設(shè)計(jì)形式所使用的式樣和特點(diǎn)決定的。“零3D屬性的設(shè)計(jì)”是它簡(jiǎn)單明確的定義。它是二維空間的一種表現(xiàn)形式，即一個(gè)單純的圖形、形狀，且不加入任何能夠表現(xiàn)景深的元素的平面。這種設(shè)計(jì)形式最核心的宗旨就是丟掉裝飾效果。陰影、透視、斜角、漸層等等一切關(guān)于立體效果的元素一概不可以使用。

扁平化并非橫空出世，其實(shí)它繼承了很多經(jīng)典的設(shè)計(jì)傳統(tǒng)，比如包豪斯現(xiàn)代主義。包豪斯所倡導(dǎo)的樸素實(shí)用風(fēng)格的設(shè)計(jì)取代了當(dāng)時(shí)很多繁雜的綴飾，強(qiáng)調(diào)了設(shè)計(jì)的經(jīng)濟(jì)、簡(jiǎn)約、務(wù)實(shí)并且有意義。扁平化正是在這個(gè)復(fù)古風(fēng)大行其道時(shí)代中，極簡(jiǎn)風(fēng)格的一種繼承和發(fā)展的“復(fù)出”。

2.扁平化設(shè)計(jì)成為一種流行源于它自身的優(yōu)勢(shì)

首先，界面擬物化的初衷是降低用戶的學(xué)習(xí)成本、理解

難度，使得無論年齡大小、是否有操作經(jīng)驗(yàn)都可以在拿到設(shè)備后的短時(shí)間內(nèi)輕松快速掌握它的用法。其次，扁平化界面有助于提高用戶體驗(yàn)——效率。例如：Andriod手機(jī)有很多種分辨率，要想使同一個(gè)App在各種分辨率中都能清晰顯示，就需要準(zhǔn)備多套資源以對(duì)應(yīng)，ROM資源里就存在hdpi、ldpi、mdpi等資源以對(duì)應(yīng)各種不同分辨率，這樣一來，調(diào)用的資源越多，程序運(yùn)行的速度就越慢。扁平化設(shè)計(jì)傾向于矢量風(fēng)格圖形，在一定程度上減弱對(duì)像素精度的依賴，從而創(chuàng)建出適應(yīng)性更高的用戶界面。

此外，雖不是最主要原因，但數(shù)字產(chǎn)品審美趨勢(shì)的變化也是不可忽略的因素。iOS6之前的版本，視覺上每一處的精雕細(xì)琢，幾乎已把擬物化做到了完美，要想有更驚人的突破已經(jīng)很難，也沒有必要。當(dāng)滿眼充斥各種炫酷擬物效果操作界面時(shí)，簡(jiǎn)潔樸素的設(shè)計(jì)反而讓人耳目一新，而這種設(shè)計(jì)可以更直接更清晰的呈現(xiàn)關(guān)鍵信息，自然容易受到青睞。

三、扁平化風(fēng)格對(duì)設(shè)計(jì)師提出了更高要求

扁平化并不是簡(jiǎn)單的去除復(fù)雜的飾效果而已。簡(jiǎn)潔而精準(zhǔn)的圖形設(shè)計(jì)要求設(shè)計(jì)師具備極強(qiáng)的視覺傳達(dá)設(shè)計(jì)能力，并運(yùn)用縝密的邏輯思維加以抽象和總結(jié)才能表現(xiàn)出來。其一，要保證圖形在高度抽象、符號(hào)化以后仍能被準(zhǔn)確識(shí)別，用盡可能簡(jiǎn)化的線條盡可能準(zhǔn)確的表現(xiàn)對(duì)象，不是憑借耐心與細(xì)心便可以達(dá)到的，做減法往往比加法更難。其二，扁平化對(duì)設(shè)計(jì)師運(yùn)用色彩的能力提出了高要求。在沒有肌理、浮雕等效果的情況下，要準(zhǔn)確把握色彩心理特性、熟練運(yùn)用色彩層次，通過平面色塊營(yíng)造美觀的界面、合理引導(dǎo)視覺流程的同時(shí)，還要準(zhǔn)確傳遞給用戶有用的操作信息，即“我可以做什么”。所以說，扁平化設(shè)計(jì)若能做好，可以給人簡(jiǎn)約、清新、高效的感覺，但如果處理不到位，不但容易顯得乏味無趣，甚至?xí)層脩魺o所適從。扁平化設(shè)計(jì)對(duì)設(shè)計(jì)師抽象構(gòu)思能力、圖形與色彩細(xì)節(jié)處理能力提出了極高的要求。

四、良好的交互體驗(yàn)才是根本

無論是去繁從簡(jiǎn)的扁平化還是精心裝飾的擬物化，都只是眾多設(shè)計(jì)風(fēng)格中的一種而已，任何一種事物走向極端都未必是好事。風(fēng)格之爭(zhēng)并無多大意義，平面或是立體、簡(jiǎn)潔或是華麗、淡雅或是濃烈，用戶各有所好，但幾乎所有用戶都會(huì)毫無疑義的要求界面設(shè)計(jì)應(yīng)提供良好的交互操作體驗(yàn)。精準(zhǔn)的信息表達(dá)，良好的交互體驗(yàn)才是界面設(shè)計(jì)的根本。

信息化時(shí)代數(shù)碼終端碎片化趨勢(shì)下，界面設(shè)計(jì)在視覺效果上盡量減少非功能性的多余裝飾，保證關(guān)鍵信息的突出和清晰，在信息層級(jí)上盡量簡(jiǎn)化，讓交互操作更加簡(jiǎn)易，才能快速適應(yīng)用戶越來越高的要求。

參考文獻(xiàn)：

【1】馬娜娜：“簡(jiǎn)潔而不乏味——淺談扁平化界面設(shè)計(jì)”，《大眾文藝》，2013.08

【2】韓曉墨：“繼承與發(fā)展并重——論扁平化設(shè)計(jì)的席卷”，《現(xiàn)代裝飾（理論）》，2013.07