基于交互界面的扁平化設計研究

中圖分類號：TB47 文獻標識碼：A

摘要：關于目前引起激烈爭論的扁平化與擬物化界面設計風格，本文從扁平化與擬物化的含義談起，討論扁平化設計流行的必然性以及界面扁平化的局限性，分析扁平化界面風格對設計師提出的新要求。無論何種視覺風格，精準的信息表達，良好的交互體驗才是界面設計的根本。

關鍵詞：扁平化；擬物化；界面設計

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

在用戶界面設計，常常去掉真正將界面帶入生活的那些東西。37signals的團隊因為應用這個理念到它們的產品中——比如BaseCamp——而臭名昭著（但也很成功）。在扁平化設計的世界中，少，真的是多。為了實現扁平化設計美學，我們設計師必須專注于產品是干嘛的，而不是它們要看起來像什么。這是關鍵，也是線框對設計流程至關重要的原因。美學是看法的問題在我關于這篇文章的研究中，幾乎沒發現任何科學研究關于屏幕上的按鈕看起來更像按鈕實際上會更可點擊。倒是有大量的證據支持對比度、色彩、層級，但是我愿意打賭在一個適當的上下文中，一個橙色的扁平化按鈕會像一個立體的橙色按鈕一樣有效。

一、扁平化風格流行的必然性

首先，界面擬物化的初衷是降低用戶的學習成本、理解難度，使得無論年齡大小、是否有操作經驗都可以在拿到設備后的短時間內輕松快速掌握它的用法。但在數碼設備普及度極高的今天，尤其對于很多年輕用戶而言，擬物化設計原本的功能性優勢已經無法凸顯。大家早已熟悉各種數碼產品的基本特點，適應了各類界面的操作方法，當一些界面中常用的圖形抽象化、符號化之后，完全不會因此而產生識別上的困難，反而會因為去除了各種復雜視覺效果、冗余的裝飾元素而更容易更直接的得到他們想要的信息。

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

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

二、界面設計扁平化的局限性

徹底扁平化的界面設計在表現力上有很大局限性。例如，完全拋棄所有投影、肌理、浮雕效果，僅僅依賴極簡風格的線條、色塊來準確表現越來越多樣化、新品層出不窮的App，是難以實現的。

擬真效果的界面設計之所以大受追捧是因為它通過盡可能多的隱喻降低學習成本。雖說扁平化界面通過拋棄大量裝飾元素、突出關鍵信息內容來讓用戶快速找到他們所關心的信息，但高度抽象化后的簡潔圖形符號卻不是每個人都可以立即看明白的。從事視覺設計工作的人員很熟悉這種視覺語言，對于有豐富數碼產品操作經驗的人來說也更容易識別一些常用的圖形符號，但對于沒有多少數碼產品操作經驗的用戶以及很多兒童、中老年人、甚至包括一些對于抽象圖像符號敏感度不高的用戶來說，這無疑是提高了認知成本，降低了用戶體驗。

三、扁平化設計的技巧

那么，如果立體、漸變、陰影只是看法的問題，那么如何實現一個好的設計？無論你是否要使用扁平化設計，用戶界面和規劃相關。我相信扁平化設計使得識別一個偉大的設計更加簡單，因為在設計和它如何工作之間少了很多干擾。這里是一些關于偉大的界面設計的一些技巧：

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

（2）對比：可點擊元素和非可點擊元素之間要有適當的對比。這可以通過顏色、大小、位置以及樣式來實現。

（3）布局：使用一個網格布局，比如960gs，是為你的設計建立一些可視的指南的好的方法。視線會自然的準從由內容創建的線條和比例，所以理解和使用一個網格是一個強化視覺平衡的好辦法。

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

四、扁平化風格對設計師提出了更高要求

扁平化并不是簡單的去除復雜的飾效果而已。更何況，用簡潔的線條和色塊來準確表達信息，并不具備相對于精雕細琢的實物再現效果的天然優勢。簡潔而精準的圖形設計要求設計師具備極強的視覺傳達設計能力，并運用縝密的邏輯思維加以抽象和總結才能表現出來。

其一，要保證圖形在高度抽象、符號化以后仍能被準確識別，用盡可能簡化的線條盡可能準確的表現對象，不是憑借耐心與細心便可以達到的，做減法往往比加法更難。其二，扁平化對設計師運用色彩的能力提出了高要求。在沒有肌理、浮雕等效果的情況下，要準確把握色彩心理特性、熟練運用色彩層次，通過平面色塊營造美觀的界面、合理引導視覺流程的同時，還要準確傳遞給用戶有用的操作信息，即“我可以做什么”。所以說，扁平化設計若能做好，可以給人簡約、清新、高效的感覺，但如果處理不到位，不但容易顯得乏味無趣，甚至會讓用戶無所適從。扁平化設計對設計師抽象構思能力、圖形與色彩細節處理能力提出了極高的要求。

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

參考文獻：

[1]夏穎翀：“數字產品界面中樸素的設計和冗余的設計”，《裝飾》，2013.05

作者簡介：寧匯，武漢紡織大學，視覺傳達。