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

陳雯璐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3、信息傳遞的直觀路徑

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

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

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

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

結(jié)論

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

參考文獻：

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

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

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

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

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

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

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

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

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

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

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

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