交互設(shè)計(jì)時(shí)代下的扁平化風(fēng)格綜述
——以信息可視化設(shè)計(jì)為例

崔夢(mèng)琳

（華中科技大學(xué)，湖北武漢430000）

交互設(shè)計(jì)時(shí)代下的扁平化風(fēng)格綜述
——以信息可視化設(shè)計(jì)為例

崔夢(mèng)琳

（華中科技大學(xué)，湖北武漢430000）

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

扁平；界面設(shè)計(jì)；信息可視化

一、交互設(shè)計(jì)時(shí)代發(fā)展和研究領(lǐng)域

（一）交互設(shè)計(jì)時(shí)代的發(fā)展簡(jiǎn)史

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

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

（二）交互設(shè)計(jì)時(shí)代的研究領(lǐng)域

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

二、扁平化風(fēng)格的相關(guān)理論概述

原研哉在《白》中曾寫(xiě)道，空不僅是指形式的簡(jiǎn)單，它提供給我們一個(gè)自由想象的空間，從來(lái)拓展了我們對(duì)于世界的感知力和理解力。

扁平化風(fēng)格是當(dāng)下最為流行的信息設(shè)計(jì)方式，它倡導(dǎo)的是極簡(jiǎn)的人性化設(shè)計(jì)，通過(guò)抽象化的視覺(jué)語(yǔ)言，使交互流程更加專(zhuān)注于功能本身。它之所以流行，起源于Windows和Apple為主的幾大公司在信息設(shè)計(jì)上一改以往普遍流行的擬物化設(shè)計(jì)風(fēng)格，崇尚簡(jiǎn)潔和平面化，給信息設(shè)計(jì)帶來(lái)了一股新的風(fēng)潮。

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

1.扁平化的概念

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

2.扁平化的前世今生

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

扁平化這一術(shù)語(yǔ)“名聲大噪”實(shí)在2013年蘋(píng)果公司推出IOS7系統(tǒng)之后，這一設(shè)計(jì)風(fēng)格并逐步滲透到界面設(shè)計(jì)、導(dǎo)向系統(tǒng)設(shè)計(jì)等設(shè)計(jì)方向中。

（二）扁平化風(fēng)格的特征

1.符號(hào)化圖形

格式塔心理學(xué)家認(rèn)為，人的先天性知覺(jué)有“簡(jiǎn)化”的傾向。簡(jiǎn)化并不是指一般意義上的簡(jiǎn)單，而是以一種象征性的符號(hào)來(lái)傳達(dá)物體的含義。符號(hào)化圖形包括圖像符號(hào)、指示符號(hào)和象征符號(hào)三種。

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

指示符號(hào)，一般是導(dǎo)視系統(tǒng)的外在化。最典型的是路上的指示牌。現(xiàn)在國(guó)外最為流行的是動(dòng)態(tài)的導(dǎo)視系統(tǒng)。

象征符號(hào)，是指所涉及的對(duì)象和設(shè)計(jì)出的符號(hào)不一定有內(nèi)在聯(lián)系，而是人們?cè)谖幕某恋硐滤纬傻募s定俗稱(chēng)的結(jié)果。例如，松、竹、梅歲寒三友。

2.鮮活性色彩

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

3.時(shí)尚型排版

由于扁平化設(shè)計(jì)要求元素簡(jiǎn)潔，首當(dāng)其要的便是排版的重要性。字體的大小應(yīng)該匹配整體設(shè)計(jì)，字體的使用也要求精簡(jiǎn)、干練。在排版過(guò)程中，一般使用簡(jiǎn)單的無(wú)襯線(xiàn)的字體，同過(guò)字體大小和比重來(lái)區(qū)分元素。相對(duì)新奇的字體的使用范圍縮小。

（三）扁平化風(fēng)格設(shè)計(jì)意義

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

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

2.設(shè)計(jì)成本較低

扁平化風(fēng)格的盛行，使設(shè)計(jì)師的門(mén)檻相對(duì)降低。扁平化不似擬物化設(shè)計(jì)，對(duì)于設(shè)計(jì)師的技術(shù)功底要求很高，這就給初學(xué)者和藝術(shù)愛(ài)好者開(kāi)通了一扇通向設(shè)計(jì)的大門(mén)。

3.更加適應(yīng)未來(lái)信息設(shè)計(jì)發(fā)展

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

三、扁平化風(fēng)格在信息可視化設(shè)計(jì)中的運(yùn)用

（一）交互界面案例研究

1.講究簡(jiǎn)約的iBooks界面

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

2.Facebook的扁平美學(xué)

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

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

1.英國(guó)倫敦地鐵圖設(shè)計(jì)

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

2.德國(guó)科隆·波恩機(jī)場(chǎng)形象識(shí)別系統(tǒng)

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

該設(shè)計(jì)在飛流程類(lèi)的信息處理上，尤其是定點(diǎn)信息的處理（如停車(chē)場(chǎng)、等機(jī)艙等），設(shè)計(jì)師賦予了表意符號(hào)以運(yùn)動(dòng)的生機(jī)，標(biāo)新立異的剪影的輪廓化信息符號(hào)大量運(yùn)用在建筑、飛機(jī)等載體上。在對(duì)載體信息說(shuō)明的基礎(chǔ)上，更是賦予了機(jī)場(chǎng)的獨(dú)特的視覺(jué)語(yǔ)境。

四、信息視覺(jué)扁平不如信息層級(jí)“扁平”

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

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

五、結(jié)語(yǔ)

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

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

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

［2］董建明.人機(jī)交互——以用戶(hù)為中心的設(shè)計(jì)和評(píng)估［M］.北京：清華大學(xué)出版社，2010.

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

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

J51

A

1005-5312（2016）08-0048-02