崔夢琳

（華中科技大學，湖北武漢430000）

交互設計時代下的扁平化風格綜述
——以信息可視化設計為例

崔夢琳

（華中科技大學，湖北武漢430000）

扁平化設計是如今最為流行的一種信息設計風格之一，它摒棄了陰影、漸變、透視等元素，推崇“少即是多”的設計原理，將符號性、簡潔性以及整體性完美呈現(xiàn)出來。本文致力于交互時代這一時代背景，通過闡述扁平化風格的概念、歷史、特征、設計意義以及在信息設計方向的運用等，來系統(tǒng)的闡述扁平化風格對于信息可視化設計的意義以及未來的發(fā)展趨勢。

扁平；界面設計；信息可視化

一、交互設計時代發(fā)展和研究領域

（一）交互設計時代的發(fā)展簡史

交互設計時代源于20世紀80年代，但交互設計思想?yún)s在遙遠的古代中國中運用，例如，以"狼煙”作為信號傳達戰(zhàn)爭信息。交互設計自20世紀30年代以來經(jīng)過了開創(chuàng)時期、奠定時期、發(fā)展時期，到目前已達到繁榮時期。

這是快速時尚的時代，也是眼球時代，人機工程學、人機界面設計、工業(yè)設計已經(jīng)為交互領域奠定了基礎，交互設計已經(jīng)形成了快速選擇、快速發(fā)展、快速淘汰的標準。

（二）交互設計時代的研究領域

交互設計所涉及到的領域眾多，給"交互時代”一個明確的定義和界限是一件相當困難的事情。從技術層面講，交互時代的設計涉及到計算機工程學、語言編程、信息設備、信息架構(gòu)學的運用。從用戶層面講，交互時代的設計涉及了人類的行為、心理；設計層面，交互時代的設計涉及到工業(yè)設計、信息設計和界面設計等。

二、扁平化風格的相關理論概述

原研哉在《白》中曾寫道，空不僅是指形式的簡單，它提供給我們一個自由想象的空間，從來拓展了我們對于世界的感知力和理解力。

扁平化風格是當下最為流行的信息設計方式，它倡導的是極簡的人性化設計，通過抽象化的視覺語言，使交互流程更加專注于功能本身。它之所以流行，起源于Windows和Apple為主的幾大公司在信息設計上一改以往普遍流行的擬物化設計風格，崇尚簡潔和平面化，給信息設計帶來了一股新的風潮。

（一）扁平化的概念及前世今生

1.扁平化的概念

扁平化設計（Flat Design），亦稱為抽象化設計，是與擬物化設計相對而言的設計。扁平化設計所表現(xiàn)出來的設計，一般為不使用或者少量使用高光、紋理、材質(zhì)的簡潔設計，僅僅使用具有隱喻特征的抽象圖形或者色彩，摒棄多余的裝飾元素，是一種刪繁從簡的設計形式。

2.扁平化的前世今生

扁平化設計這一理念最早是由Allan Grinshtein系統(tǒng)提出，旨在用最少的元素表達最佳的含義，即“少即是多”。瑞士風格和的網(wǎng)格性和層次性以及極簡主義的幾何圖形和干凈線條都對扁平化設計的形成和發(fā)展奠定了基礎。

扁平化這一術語“名聲大噪”實在2013年蘋果公司推出IOS7系統(tǒng)之后，這一設計風格并逐步滲透到界面設計、導向系統(tǒng)設計等設計方向中。

（二）扁平化風格的特征

1.符號化圖形

格式塔心理學家認為，人的先天性知覺有“簡化”的傾向。簡化并不是指一般意義上的簡單，而是以一種象征性的符號來傳達物體的含義。符號化圖形包括圖像符號、指示符號和象征符號三種。

圖像符號，是由模擬對象而構(gòu)成的，肖像是最典型的一種表現(xiàn)方式。人們對于模擬肖像有著特殊的直覺。如德國數(shù)字媒體藝術家Michael Bielicky的肖像以其獨特性和識別性，成為了一個新媒體網(wǎng)站的符號。

指示符號，一般是導視系統(tǒng)的外在化。最典型的是路上的指示牌?，F(xiàn)在國外最為流行的是動態(tài)的導視系統(tǒng)。

象征符號，是指所涉及的對象和設計出的符號不一定有內(nèi)在聯(lián)系，而是人們在文化的沉淀下所形成的約定俗稱的結(jié)果。例如，松、竹、梅歲寒三友。

2.鮮活性色彩

由于扁平化風格放棄了傳統(tǒng)繁瑣的裝飾，所以色彩在扁平化設計中顯得尤為重要。相對于傳統(tǒng)的擬物化設計的遵循自然的原理，扁平化設計則不受自然物質(zhì)條件的限制，單純的通過顏色的含義向用戶傳遞信息以及感受，也暗示了功能性。因此，鮮活性色彩對于扁平化而言，沒有過多的視覺元素的干擾，更能明快的表達出設計所傳達的信息。

3.時尚型排版

由于扁平化設計要求元素簡潔，首當其要的便是排版的重要性。字體的大小應該匹配整體設計，字體的使用也要求精簡、干練。在排版過程中，一般使用簡單的無襯線的字體，同過字體大小和比重來區(qū)分元素。相對新奇的字體的使用范圍縮小。

（三）扁平化風格設計意義

1.開發(fā)成本較低

不同的觸摸屏和分辨率的產(chǎn)品所需要的尺寸和設計形式不盡相同，扁平化風格更適應于響應式的開發(fā)與設計，為開發(fā)者和設計師帶來極大的便利性。同時，由于移動產(chǎn)品的界面相對較小，扁平化風格在此設計中有極大的優(yōu)勢，有益于移動產(chǎn)品的未來發(fā)展。

2.設計成本較低

扁平化風格的盛行，使設計師的門檻相對降低。扁平化不似擬物化設計，對于設計師的技術功底要求很高，這就給初學者和藝術愛好者開通了一扇通向設計的大門。

3.更加適應未來信息設計發(fā)展

Google glass的日漸流行，使交互過程進一步簡化，界面將遍布生活的每一個角落，用戶所使用的不僅僅是僅限于智能手機，而是可能會出現(xiàn)更加方便隨身攜帶的物品，甚至是無形的產(chǎn)品。

三、扁平化風格在信息可視化設計中的運用

（一）交互界面案例研究

1.講究簡約的iBooks界面

iBooks是蘋果公司官方的手機閱讀應用，它的界面視覺形式和功能刪繁就簡，基本上都沿襲了扁平風格，在扁平風格上體現(xiàn)出一種輕質(zhì)感之美。無論是封面還是內(nèi)文都有傳統(tǒng)書籍質(zhì)感的氣息。iBooks書店中有兩種截然不同的、講究質(zhì)感的書籍類型。一種是皮質(zhì)書籍的圖書封面，一種是簡單的色彩和文字堆疊得封面。前者將書籍的質(zhì)感表現(xiàn)出來，一般為古典名著。后者為現(xiàn)代主義風格，不受條條框框的約束。

2.Facebook的扁平美學

Facebook的界面從最初版本到目前最新版本，一直信奉扁平美學。除了按鈕的輕寫實，其他界面的元素一直是遵循扁平路線。盡管網(wǎng)絡上一直在Facebook界面風格過于簡潔，但它依然是用戶依賴最多的產(chǎn)品之一，可見體驗性大于視覺性。

（二）城市公共信息導向系統(tǒng)

1.英國倫敦地鐵圖設計

倫敦作為建立地鐵最早的城市，設計一個復雜的交通服務體系信息圖，是英國政府十分關注的問題。從最開始菲利斯·皮爾薩爾（Phyllis Pearsall）女士設計的第一套寫實性設計圖到哈利·貝克（Harry Beck）設計的圖解式信息圖，漸漸突破了時間和空間的局限，設計變得簡明扼要。如下圖為貝爾設計的1933年倫敦地鐵信息圖，該圖用原點代表交叉地點，用直線代表運輸方向，直線與直線的長短并不局限于實際距離。

2.德國科隆·波恩機場形象識別系統(tǒng)

科隆·波恩機場（簡稱CGN），是德國的主要機場之一，著名的設計公司Toan Vu-Huu完成了機場的全套形象識別系統(tǒng)。機場的形象識別系統(tǒng)通過扁平的字體、色彩、版式、圖形標識、輔助圖形等系統(tǒng)設計，使得相關信息結(jié)構(gòu)化、清晰化、系統(tǒng)化。

該設計在飛流程類的信息處理上，尤其是定點信息的處理（如停車場、等機艙等），設計師賦予了表意符號以運動的生機，標新立異的剪影的輪廓化信息符號大量運用在建筑、飛機等載體上。在對載體信息說明的基礎上，更是賦予了機場的獨特的視覺語境。

四、信息視覺扁平不如信息層級“扁平”

前面所論述的扁平化風格不僅僅是指視覺效果上的扁平，更應該衍生為信息層級上的“扁平”。視覺上的扁平只能作為一種風格暫時存在，就像人們看膩了古典主義，開始崇尚極簡主義，極簡主義淪落后，又在其基礎上加裝飾性的構(gòu)造。風格永遠都是潮流性的，真正可以一直延續(xù)發(fā)展的，是符合現(xiàn)代社會需要的快速體驗。

正如當下扁平化浪潮可謂是如日中天，但過于扁平的風格，有時候會受到點擊的限制，人們分不清一個按鈕是可以點擊還是不能點擊。這就是扁平視覺的限制。而扁平化更應該衍生為一種內(nèi)在的設計思想。并不局限于功能表達和認知障礙，信息層級的簡化也是提高信息提取效率的重要方式。信息層級的越少，用戶體驗越愉悅。

五、結(jié)語

以視覺效果而言，無論是簡約洗練的扁平化還是繁縟寫實的擬物化，都只是視覺風格中的一種，任何一種風格無法永遠立于不敗之地。無論是平面還是立體、簡潔還是繁瑣、現(xiàn)代還是古典，用戶都各有所好，但所有的用戶都要求有良好的交互體驗。

從信息層級而言，信息層級越“扁平”，用戶的歡迎度越高。在快速化、時尚化的現(xiàn)代社會，用戶的操作性和便捷性大于任何風格形式，只有符合時代發(fā)展需要的設計風格與形式，才能立于不敗之地。

［1］原研哉.白［M］.桂林：廣西師范大學出版社，2012.

［2］董建明.人機交互——以用戶為中心的設計和評估［M］.北京：清華大學出版社，2010.

［3］汪大偉.現(xiàn)代主義風格的UI設計之興起［J］.現(xiàn)代裝飾（理論），2012（09）.

［4］孫奕穎.圖形用戶界面的符號學解讀［J］.鄭州輕工業(yè)學院學報，2008（02）.

J51

A

1005-5312（2016）08-0048-02