當代交互界面設計領域的扁平化設計界面研究

陳雯璐

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

【關鍵詞】：交互界面；扁平化設計；按鈕；創新趨勢

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

在交互界面中的按鈕研究其學術名稱應稱為：設計優秀和有效的行為召喚。

一、扁平化設計的定義

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

二、交互界面中的設計要素

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

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

數據時代的遠程交互

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

大數據與扁平化的結合優勢

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

1、創新功能抽象化表達

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

2、抽象化的設計美學

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

3、信息傳遞的直觀路徑

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

三、扁平化設計的顏色搭配

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

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

結論

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

參考文獻：

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

[2]張蕓. 扁平化設計在網頁上應用的優勢[J]. 藝術科技， 2013， 26

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

[4]崔天劍，現代設計的形式意味 藝術百家， 04期（4）， 178-180.

[5]崔天劍，徐碧珺. 大數據時代扁平化設計趨勢研究[J]創意與設計，2014.03

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

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

[8][英]諾伯特·林頓. 現代藝術的故事 [M]. 廣西美術出版社，2012.09

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

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

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

[12]張貝， & 方衛寧. （2013）. 扁平化風格界面設計的探討. 2013國際工業設計研討會暨第十八屆全國工業設計學術年會