當(dāng)代交互界面設(shè)計(jì)領(lǐng)域的扁平化設(shè)計(jì)界面研究

陳雯璐

【摘要】：通過分析當(dāng)代大數(shù)據(jù)技術(shù)在交互界面設(shè)計(jì)中對其設(shè)計(jì)范圍、設(shè)計(jì)理念與設(shè)計(jì)方法三個方面所產(chǎn)生的廣泛影響，提出扁平化設(shè)計(jì)在當(dāng)代交互設(shè)計(jì)領(lǐng)域中迥然于擬物化設(shè)計(jì)的創(chuàng)新特征與方法，包括抽象細(xì)致的設(shè)計(jì)編排和豐富的配色體系，簡析了扁平化設(shè)計(jì)在交互界面設(shè)計(jì)中的創(chuàng)新功能抽象化表達(dá)的視覺形式，為交互設(shè)計(jì)界面按扭設(shè)計(jì)提出合理化建議。

【關(guān)鍵詞】：交互界面；扁平化設(shè)計(jì)；按鈕；創(chuàng)新趨勢

在當(dāng)代交互界面設(shè)計(jì)領(lǐng)域中扁平化設(shè)計(jì)已經(jīng)成為主流視覺表現(xiàn)形式，交互設(shè)計(jì)長期以來一直遵循著以用戶為中心（User Centered Design，UCD）的設(shè)計(jì)原則，在設(shè)計(jì)的每一個階段中都圍繞UCD，運(yùn)用線框、層級形式進(jìn)行輔助設(shè)計(jì)。

在交互界面中的按鈕研究其學(xué)術(shù)名稱應(yīng)稱為：設(shè)計(jì)優(yōu)秀和有效的行為召喚。

一、扁平化設(shè)計(jì)的定義

扁平化的視覺表達(dá)是一種極簡主義風(fēng)格，和擬物化設(shè)計(jì)理念相左，基本上拋棄了所有 3D 效果，比如投影、漸變、織體和貼圖、或者各種增加實(shí)體的效果，轉(zhuǎn)而重心放在簡單化的元素、字體形態(tài)以及“扁平”的顏色（大意就是去掉漸變和裝飾）上。進(jìn)入 21 世紀(jì)以來越來越多的設(shè)計(jì)師們看好它簡潔而高效的界面，因?yàn)?Flat Design 能更加快速傳達(dá)內(nèi)容信息，而且視覺設(shè)計(jì)上更加平易近人。另外，比起擬物化設(shè)計(jì)，它更容易適配于各種不同尺寸的設(shè)備和做成響應(yīng)式，并且更好保持原樣不失真（因?yàn)榛旧鲜鞘噶吭兀?/p>

二、交互界面中的設(shè)計(jì)要素

就交互界面設(shè)計(jì)而言，視覺表現(xiàn)形式是為了更加人性化的用戶體驗(yàn)。有的扁平化界面設(shè)計(jì)按鈕設(shè)計(jì)不夠突出，就做不到有效的行為召喚，那是全局設(shè)計(jì)有相對應(yīng)的問題，而全局設(shè)計(jì)在界面當(dāng)中包含了對比（顏色對比，大小對比，位置對比）、上下文的銜接（轉(zhuǎn)換場景按鈕）、文案（各種短語活動口號或者識別度高的icon）、各種反饋（填寫校檢、懸停狀態(tài)）；最后一點(diǎn)，也是最重要的一點(diǎn)，代入感情色彩的表達(dá)，稱之為“有愛”表達(dá)。以上幾點(diǎn)如無做到位，就算按鈕再“突出”，用戶也沒有點(diǎn)擊欲望。

同一界面中的非扁平和扁平化對比，在IOS7中雖然扁平化了的鍵盤摒棄了各種漸變和材質(zhì)的視覺元素表達(dá)，但是視覺上的灰白鍵盤也是有陰影的。在界面設(shè)計(jì)上采用不同于過去擬物手法的傳統(tǒng)型設(shè)計(jì)方后之后，很好的剔除不必要的干擾因素，使視覺上變得更為抽象和簡練。扁平化的抽象設(shè)計(jì)元素可以滿足創(chuàng)新功能的需求，突破擬物化設(shè)計(jì)形式在功能上的諸多限制。

數(shù)據(jù)時代的遠(yuǎn)程交互

當(dāng)今時代也是一個大數(shù)據(jù)時代，所有的信息和數(shù)據(jù)通過電子產(chǎn)品進(jìn)行統(tǒng)計(jì)數(shù)據(jù)上傳到云端匯總再進(jìn)行分析再分類，也就是說我們的計(jì)算機(jī)正在全面代替人力做人類日常的生活需求進(jìn)行高度概括的分析工作。從傳統(tǒng)的以用戶心理模型為中心的設(shè)計(jì)理念正在悄無聲息的往多元化發(fā)展。逐步轉(zhuǎn)變?yōu)楦訉挿旱脑O(shè)計(jì)理念設(shè)定，包括由物-物交互（產(chǎn)品的可識別語言）、人-機(jī)交互（用戶體驗(yàn)）在內(nèi)的框架式模型空間設(shè)定。利用大數(shù)據(jù)技術(shù)的優(yōu)勢，將交互設(shè)計(jì)推向新的歷史發(fā)展階段，與當(dāng)前科技發(fā)展齊頭并進(jìn)。與此同時，產(chǎn)品信息的資料獲取的即進(jìn)性有利于設(shè)計(jì)前期繁冗調(diào)研工作的簡化，從而得出更為科學(xué)準(zhǔn)確的數(shù)據(jù)，為設(shè)計(jì)決策提供確鑿的依據(jù)。

大數(shù)據(jù)與扁平化的結(jié)合優(yōu)勢

扁平化設(shè)計(jì)有鮮明的圖形對比較果，給人深刻的印象和強(qiáng)烈的視覺沖擊力。它去除了多余的裝飾，畫面純粹簡單、干凈利落。在有限的交互界面中，各個設(shè)計(jì)元素之間的關(guān)系分明，層次清晰，版式布局嚴(yán)謹(jǐn)，能夠讓用戶以最直觀的形式看到每一個元素符號，并理解它所代表的功能作用和使用方式。就是這樣一種新穎的純粹的強(qiáng)烈的視覺形式和設(shè)計(jì)理念，彰顯著與眾不同、別具一格，信息直觀傳遞的視覺優(yōu)勢。

1、創(chuàng)新功能抽象化表達(dá)

自蘋果公司ISO7以全新扁平化視角進(jìn)入市場以來，越來越多的電子產(chǎn)商包括微軟、安桌都跟風(fēng)推風(fēng)進(jìn)行了扁平化設(shè)計(jì)風(fēng)格的革新。從Window XP發(fā)展到Win7用了數(shù)時年的時間，也就是說長時間的推陳出新的過程當(dāng)中我們只是把擬物化視覺表達(dá)做到了極致。如圖所示，微軟公司從九幾年至二零一零年的圖標(biāo)變化過程中可以看到從簡單象形到材質(zhì)逼真擬物的過程。到二零一三年的時候，圖標(biāo)更替成了具有扁化特點(diǎn)的圖標(biāo)，抽象的概念的表達(dá)。

2、抽象化的設(shè)計(jì)美學(xué)

抽象化視覺形式的信息傳遞帶給人最為直觀有用的信息，減少了擾亂信息準(zhǔn)確程度的各種裝飾性干擾因素。讓用戶操作變得更為簡潔明了、快捷方便。因而，在抽象的扁平化設(shè)計(jì)里，去除了逼真的質(zhì)感，去除了紋理，簡化了透視陰影之后。各項(xiàng)層次變得干凈、清晰、直接。它用最為簡單的視覺符號將各種功能、信息、操作方式高度簡化表達(dá)，無需探索用戶復(fù)雜微妙的心理感情變化，摒棄一棄視覺干擾障礙?？梢哉f在創(chuàng)新功能的同時，這種無障礙性更有利于新型產(chǎn)品的操作應(yīng)用推廣。

3、信息傳遞的直觀路徑

“扁平化”可以理解為兩層含義，一層是以色彩和圖形無素為主要表達(dá)媒介的視覺形式；另一層指的是它的功能特性，具有大跨度、少層次的特征。有效縮短信息傳送時間和間隔，進(jìn)而提高信息與指令傳達(dá)的效能。具有簡單、直觀、快捷、易用的特點(diǎn)。以扁平化的視覺表達(dá)方式取代過去以計(jì)算機(jī)語言和擬物化形式為主的動作模式，可以很好的在機(jī)-人、機(jī)-機(jī)、人-人進(jìn)行無障礙轉(zhuǎn)換。即以圖形、色彩為主，簡寫文字為畏的表達(dá)方式來傳遞各種信息，成為一種人-人間能用的符號式語言。

三、扁平化設(shè)計(jì)的顏色搭配

扁平化設(shè)計(jì)中使用的顏色較為純粹簡單，極強(qiáng)的用顏色對比突出主體物，色彩運(yùn)用較為大膽，通常使用鮮亮顏色，高飽和度高純度顏色進(jìn)能搭配，摒棄一切柔化、漸變的手法，以加強(qiáng)單純的色彩對比來加強(qiáng)界面視覺沖擊力。較傳統(tǒng)視覺設(shè)計(jì)當(dāng)中，一個畫面通?？刂撇怀^三個顏色進(jìn)行搭配，而在扁平化設(shè)計(jì)中平均可以使用6～8種顏色搭配。

在扁平化視覺配色規(guī)則中，力求達(dá)到簡潔、清爽的效果，通常以色調(diào)和飽和度相一致作為基本原則，色彩搭配也會跟隨每年流行色的更替而改變?；蚴歉鶕?jù)表達(dá)內(nèi)容的不同而改變。例如，鮮亮的色彩反映出年輕、活潑、時尚的氣質(zhì)，尤其在亮色背景或是暗色背景中都可以達(dá)到理想視覺對比度，顯得格外出挑，從而得到較高的吸引力指數(shù)。設(shè)計(jì)中還經(jīng)常會使用到復(fù)古色與單一色。復(fù)古色，具有懷舊的情感色彩，是建立在鮮亮色彩基礎(chǔ)上的不飽和色，通常和白色結(jié)合，復(fù)古色與白色的反差能夠帶給人以柔和舒緩的視覺效果。

結(jié)論

扁平化設(shè)計(jì)對于很多人來說都是一個新潮的名詞，其明顯的視覺特點(diǎn)也給交互設(shè)計(jì)師、用戶耳目一新的感覺。它的簡單直白讓人視感覺豁然開朗。但它受追捧并不僅僅因?yàn)樗浅绷鞯拇?，更重要的是它是交互設(shè)計(jì)和科技化相結(jié)合的一個數(shù)字時代的必然產(chǎn)物。扁平化設(shè)計(jì)為智能領(lǐng)域提供了更加直接的功能運(yùn)用，為數(shù)字發(fā)展提供了更多的可能性和便利。扁平化設(shè)計(jì)摒棄了擬物化的質(zhì)感堅(jiān)持至簡至純的內(nèi)在本質(zhì)?？梢哉f，扁平化設(shè)計(jì)始終以功能優(yōu)于形式為準(zhǔn)則。

參考文獻(xiàn)：

[1]韓曉墨. 繼承與發(fā)展并重——論扁平化設(shè)計(jì)的席卷[J]. 現(xiàn)代裝飾 （理論）， 2013， 7： 072

[2]張蕓. 扁平化設(shè)計(jì)在網(wǎng)頁上應(yīng)用的優(yōu)勢[J]. 藝術(shù)科技， 2013， 26

[3]宋方， 金錦虹， 逯新輝. 析 “扁平化” 手機(jī)界面設(shè)計(jì)[J]. 包裝工程， 2012， 14： 60-63

[4]崔天劍，現(xiàn)代設(shè)計(jì)的形式意味 藝術(shù)百家， 04期（4）， 178-180.

[5]崔天劍，徐碧珺. 大數(shù)據(jù)時代扁平化設(shè)計(jì)趨勢研究[J]創(chuàng)意與設(shè)計(jì)，2014.03

[6]崔天劍，董甜甜. 當(dāng)代交互設(shè)計(jì)的扁平化研究 [J].包裝工程，2014.09

[7]于鳳陽. 福田繁雄視覺傳達(dá)設(shè)計(jì)中的創(chuàng)作方法研究 [J].文藝生活，2015.04

[8][英]諾伯特·林頓. 現(xiàn)代藝術(shù)的故事 [M]. 廣西美術(shù)出版社，2012.09

[9]馬娜娜. （2013）. 簡潔而不乏味——淺談扁平化界面設(shè)計(jì). 大眾文藝：學(xué)術(shù)版， 16期

[10]徐云飛. （2014）. 被誤讀的扁平化設(shè)計(jì)趨勢. 美術(shù)教育研究， 06期， 66-66

[11]夏燕靖. 中國設(shè)計(jì)藝術(shù)史 [M]. 沈陽 遼寧美術(shù)出版社，2001

[12]張貝， & 方衛(wèi)寧. （2013）. 扁平化風(fēng)格界面設(shè)計(jì)的探討. 2013國際工業(yè)設(shè)計(jì)研討會暨第十八屆全國工業(yè)設(shè)計(jì)學(xué)術(shù)年會