基于交互界面的扁平化設(shè)計(jì)研究

中圖分類號(hào)：TB47 文獻(xiàn)標(biāo)識(shí)碼：A

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

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

將“扁平化”一詞用于數(shù)字終端界面設(shè)計(jì)的時(shí)間并不長(zhǎng)，卻以不可阻擋之勢(shì)迅速蔓延開，從做系統(tǒng)的大公司到做軟件的開發(fā)者，紛紛卷入這股潮流中。但關(guān)于“扁平化設(shè)計(jì)”的激烈爭(zhēng)論不但沒有停止，反而愈演愈烈。在筆者看來(lái)，“扁平化”與“擬物化”本身并不存在本質(zhì)上的沖突，F(xiàn)lat Design的出現(xiàn)及迅猛發(fā)展有其必然性，而且必將會(huì)有更多精彩呈現(xiàn)。視覺上扁平一些更簡(jiǎn)潔，信息層級(jí)扁平一些更便捷，但無(wú)論是視覺效果還是交互體驗(yàn)都不能因此而乏味，只有全面考慮用戶的操作體驗(yàn)才能做出優(yōu)秀的界面設(shè)計(jì)。

在用戶界面設(shè)計(jì)，常常去掉真正將界面帶入生活的那些東西。37signals的團(tuán)隊(duì)因?yàn)閼?yīng)用這個(gè)理念到它們的產(chǎn)品中——比如BaseCamp——而臭名昭著（但也很成功）。在扁平化設(shè)計(jì)的世界中，少，真的是多。為了實(shí)現(xiàn)扁平化設(shè)計(jì)美學(xué)，我們?cè)O(shè)計(jì)師必須專注于產(chǎn)品是干嘛的，而不是它們要看起來(lái)像什么。這是關(guān)鍵，也是線框?qū)υO(shè)計(jì)流程至關(guān)重要的原因。美學(xué)是看法的問題在我關(guān)于這篇文章的研究中，幾乎沒發(fā)現(xiàn)任何科學(xué)研究關(guān)于屏幕上的按鈕看起來(lái)更像按鈕實(shí)際上會(huì)更可點(diǎn)擊。倒是有大量的證據(jù)支持對(duì)比度、色彩、層級(jí)，但是我愿意打賭在一個(gè)適當(dāng)?shù)纳舷挛闹?，一個(gè)橙色的扁平化按鈕會(huì)像一個(gè)立體的橙色按鈕一樣有效。

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

首先，界面擬物化的初衷是降低用戶的學(xué)習(xí)成本、理解難度，使得無(wú)論年齡大小、是否有操作經(jīng)驗(yàn)都可以在拿到設(shè)備后的短時(shí)間內(nèi)輕松快速掌握它的用法。但在數(shù)碼設(shè)備普及度極高的今天，尤其對(duì)于很多年輕用戶而言，擬物化設(shè)計(jì)原本的功能性優(yōu)勢(shì)已經(jīng)無(wú)法凸顯。大家早已熟悉各種數(shù)碼產(chǎn)品的基本特點(diǎn)，適應(yīng)了各類界面的操作方法，當(dāng)一些界面中常用的圖形抽象化、符號(hào)化之后，完全不會(huì)因此而產(chǎn)生識(shí)別上的困難，反而會(huì)因?yàn)槿コ烁鞣N復(fù)雜視覺效果、冗余的裝飾元素而更容易更直接的得到他們想要的信息。

其次，扁平化界面有助于提高用戶體驗(yàn)——效率。其一，是視覺效果方面，例如：Andriod手機(jī)有很多種分辨率，要想使同一個(gè)App在各種分辨率中都能清晰顯示，就需要準(zhǔn)備多套資源以對(duì)應(yīng)，ROM資源里就存在hdpi、ldpi、mdpi等資源以對(duì)應(yīng)各種不同分辨率，這樣一來(lái)，調(diào)用的資源越多，程序運(yùn)行的速度就越慢。扁平化設(shè)計(jì)傾向于矢量風(fēng)格圖形，在一定程度上減弱對(duì)像素精度的依賴，從而創(chuàng)建出適應(yīng)性更高的用戶界面。類似的問題在Win7系統(tǒng)中也很突出，雖說(shuō)Win7視覺效果比起XP而言要炫得多，但同等配置下的Win7運(yùn)行速度卻遠(yuǎn)遠(yuǎn)低于XP系統(tǒng)。扁平化設(shè)計(jì)可以很好的解決此問題，讓系統(tǒng)運(yùn)行更流暢，從而提高用戶操作體驗(yàn)。其二，是信息層級(jí)方面：每點(diǎn)擊一次進(jìn)入下一層級(jí)，層級(jí)越多，操作體驗(yàn)性越差。當(dāng)圖標(biāo)不僅是應(yīng)用程序的入口，同時(shí)又是信息的載體能夠直接展示關(guān)鍵信息時(shí)，效率就提高了。正如Win8系統(tǒng)的磁貼，不用進(jìn)行任何點(diǎn)擊操作便可以看到很多常用應(yīng)用的最新信息狀態(tài)。

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

二、界面設(shè)計(jì)扁平化的局限性

徹底扁平化的界面設(shè)計(jì)在表現(xiàn)力上有很大局限性。例如，完全拋棄所有投影、肌理、浮雕效果，僅僅依賴極簡(jiǎn)風(fēng)格的線條、色塊來(lái)準(zhǔn)確表現(xiàn)越來(lái)越多樣化、新品層出不窮的App，是難以實(shí)現(xiàn)的。

擬真效果的界面設(shè)計(jì)之所以大受追捧是因?yàn)樗ㄟ^盡可能多的隱喻降低學(xué)習(xí)成本。雖說(shuō)扁平化界面通過拋棄大量裝飾元素、突出關(guān)鍵信息內(nèi)容來(lái)讓用戶快速找到他們所關(guān)心的信息，但高度抽象化后的簡(jiǎn)潔圖形符號(hào)卻不是每個(gè)人都可以立即看明白的。從事視覺設(shè)計(jì)工作的人員很熟悉這種視覺語(yǔ)言，對(duì)于有豐富數(shù)碼產(chǎn)品操作經(jīng)驗(yàn)的人來(lái)說(shuō)也更容易識(shí)別一些常用的圖形符號(hào)，但對(duì)于沒有多少數(shù)碼產(chǎn)品操作經(jīng)驗(yàn)的用戶以及很多兒童、中老年人、甚至包括一些對(duì)于抽象圖像符號(hào)敏感度不高的用戶來(lái)說(shuō)，這無(wú)疑是提高了認(rèn)知成本，降低了用戶體驗(yàn)。

三、扁平化設(shè)計(jì)的技巧

那么，如果立體、漸變、陰影只是看法的問題，那么如何實(shí)現(xiàn)一個(gè)好的設(shè)計(jì)？無(wú)論你是否要使用扁平化設(shè)計(jì)，用戶界面和規(guī)劃相關(guān)。我相信扁平化設(shè)計(jì)使得識(shí)別一個(gè)偉大的設(shè)計(jì)更加簡(jiǎn)單，因?yàn)樵谠O(shè)計(jì)和它如何工作之間少了很多干擾。這里是一些關(guān)于偉大的界面設(shè)計(jì)的一些技巧：

（1）一致性：通過使用通用的UI元素和樣式，你可以幫助用戶了解什么是可以期待的，然后使得更容易使用你的應(yīng)用。

（2）對(duì)比：可點(diǎn)擊元素和非可點(diǎn)擊元素之間要有適當(dāng)?shù)膶?duì)比。這可以通過顏色、大小、位置以及樣式來(lái)實(shí)現(xiàn)。

（3）布局：使用一個(gè)網(wǎng)格布局，比如960gs，是為你的設(shè)計(jì)建立一些可視的指南的好的方法。視線會(huì)自然的準(zhǔn)從由內(nèi)容創(chuàng)建的線條和比例，所以理解和使用一個(gè)網(wǎng)格是一個(gè)強(qiáng)化視覺平衡的好辦法。

（4）層級(jí)：我更傾向于將此理解為“用戶行為”，我會(huì)寫一篇關(guān)于這個(gè)話題的文章，但是實(shí)現(xiàn)最通用的用戶行為（有時(shí)被稱為用例）容易發(fā)現(xiàn)，而去掉不太通用的行為是簡(jiǎn)化用戶界面從而使它更好用的好方法。作為通用準(zhǔn)則，最重要的要比不太重要的更醒目。我的經(jīng)驗(yàn)是，扁平的或者逼真的沒什么關(guān)系，重要的是，層級(jí)在快速瀏覽以及用戶方便的找到下一個(gè)操作中很重要。

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

扁平化并不是簡(jiǎn)單的去除復(fù)雜的飾效果而已。更何況，用簡(jiǎn)潔的線條和色塊來(lái)準(zhǔn)確表達(dá)信息，并不具備相對(duì)于精雕細(xì)琢的實(shí)物再現(xiàn)效果的天然優(yōu)勢(shì)。簡(jiǎn)潔而精準(zhǔn)的圖形設(shè)計(jì)要求設(shè)計(jì)師具備極強(qiáng)的視覺傳達(dá)設(shè)計(jì)能力，并運(yùn)用縝密的邏輯思維加以抽象和總結(jié)才能表現(xiàn)出來(lái)。

其一，要保證圖形在高度抽象、符號(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)確傳遞給用戶有用的操作信息，即“我可以做什么”。所以說(shuō)，扁平化設(shè)計(jì)若能做好，可以給人簡(jiǎn)約、清新、高效的感覺，但如果處理不到位，不但容易顯得乏味無(wú)趣，甚至?xí)層脩魺o(wú)所適從。扁平化設(shè)計(jì)對(duì)設(shè)計(jì)師抽象構(gòu)思能力、圖形與色彩細(xì)節(jié)處理能力提出了極高的要求。

此外，圖形視覺效果引起的審美感受以及界面操作交互過程中所產(chǎn)生的情感性需求也是設(shè)計(jì)師不應(yīng)忽視的一個(gè)重要方面。信息化時(shí)代數(shù)碼終端碎片化趨勢(shì)下，界面設(shè)計(jì)在視覺效果上盡量減少非功能性的多余裝飾，保證關(guān)鍵信息的突出和清晰，在信息層級(jí)上盡量簡(jiǎn)化，讓交互操作更加簡(jiǎn)易，才能快速適應(yīng)用戶越來(lái)越高的要求。

參考文獻(xiàn)：

[1]夏穎翀：“數(shù)字產(chǎn)品界面中樸素的設(shè)計(jì)和冗余的設(shè)計(jì)”，《裝飾》，2013.05

作者簡(jiǎn)介：寧匯，武漢紡織大學(xué)，視覺傳達(dá)。