扁平化界面設(shè)計及應(yīng)用研究

丁浩

摘要：數(shù)字終端界面

扁平化設(shè)計應(yīng)用越來越廣。探討了扁平化和擬物化兩種設(shè)計風格；研究了扁平化設(shè)計的創(chuàng)新特征與方法，從扁平化設(shè)計中的編排和布局、顏色運用以及符號學的角度闡述了扁平化設(shè)計特征；針對實際項目，詳細分析了扁平化設(shè)計思想在系統(tǒng)界面設(shè)計中的運用；總結(jié)了扁平化設(shè)計的優(yōu)點。

關(guān)鍵詞：扁平化；擬物化；界面設(shè)計

DOIDOI：10.11907/rjdk.151213

中圖分類號：TP317.4

文獻標識碼：A 文章編號文章編號：16727800（2015）008020203

0 引言

目前，在界面設(shè)計領(lǐng)域有兩種截然不同的設(shè)計理念，即擬物化設(shè)計與扁平化設(shè)計。擬物化設(shè)計簡單來說，就是模擬現(xiàn)實世界中已存在的同類事物，因而這種設(shè)計方式的初衷便是使人們能夠更加形象地理解系統(tǒng)所要表達的功能，所以擬物化設(shè)計需要花費更多的時間和精力來描繪UI細節(jié)。擬物化設(shè)計也正是蘋果公司已故CEO喬布斯所推崇的一種設(shè)計風格。

扁平化設(shè)計從2012年開始流行，這種設(shè)計的核心思想就是放棄一切裝飾效果[1]，所有元素的邊界都要求干凈利落。目前業(yè)界關(guān)于擬物化設(shè)計和扁平化設(shè)計存在著激烈的爭論，并且這種爭論愈演愈烈。筆者認為，在研究討論這兩種設(shè)計風格時，不僅要考慮界面元素的呈現(xiàn)方式，還要考慮信息在界面上的傳遞效果，對信息層級的精簡也正是扁平化設(shè)計的重要特點之一，這種設(shè)計風格在很多方面都有著別具一格的創(chuàng)新性。

1 扁平化設(shè)計的創(chuàng)新特征與方法

相對于擬物化來說，扁平化設(shè)計在視覺交互中的優(yōu)點越來越明顯。這種具有抽象化的設(shè)計形式更適合智能產(chǎn)品新功能的拓展。

1.1 扁平化設(shè)計編排與布局

扁平化設(shè)計通常是從視覺層面入手，通過吸引用戶和設(shè)計師的目光，使之從一種對風格的接受逐漸演變?yōu)閷Ρ馄交O(shè)計思想的贊賞和理解。交互界面設(shè)計是一種重要的視覺信息傳遞媒介[2]，因為扁平化設(shè)計需要丟棄一切裝飾效果，圖形元素已經(jīng)被最大程度地簡化，所以版式布局和編排變得尤為重要，不合理的布局和編排不但會影響系統(tǒng)界面的視覺效果，還會對用戶的操作體驗產(chǎn)生影響。扁平化設(shè)計中版式的編排需要注意以下幾點：

（1）要有一個統(tǒng)一的風格，界面上的各個圖形元素要與整個版式相結(jié)合。比如可以從圖形元素中提取一些重要特征將其運用到版式設(shè)計上，以此達到與整體相呼應(yīng)的效果。

（2）版式布局編排要引導操作流程，強化版式功能，還要注意減少一切不必要的裝飾，防止對各個單一的圖形元素造成不必要的干擾。

（3）編排設(shè)計時要強調(diào)主次之分，突出使用頻率高和重要的功能。在有限的界面中，如何通過文字和圖形的組合來呈現(xiàn)一種和諧的美感，給予用戶流暢的視覺效果，需要進一步創(chuàng)新。

1.2 扁平化設(shè)計中的顏色運用

在扁平化設(shè)計中，常用的圖形元素比較簡單和純粹，如何對其進行色彩的搭配便顯得尤為重要。與目前流行的其它設(shè)計風格相比，扁平化設(shè)計對色彩的運用更為大膽，通常用鮮亮的顏色，特別是飽和度、純度較高的顏色，有時在特定的情況下甚至會用到灰色和黑色這種偏暗的色系。為了加強視覺沖擊，扁平化色彩設(shè)計通常不作任何柔化或者淡化處理，這樣才能呈現(xiàn)出圖像鮮明的效果。扁平化設(shè)計平均會使用6～8 種流行色彩，部分流行顏色如圖1所示。

在扁平化設(shè)計色彩方案中，配色盡量簡潔，通常以飽和度和色調(diào)相一致為原則，采用的顏色一般為高飽和、復古、鮮亮、單色塊為主，同時色彩會隨著當前的流行色趨勢不斷變化。筆者在研究扁平化配色體系后，發(fā)現(xiàn)許多值得借鑒的地方。例如，鮮艷明亮的顏色能夠展現(xiàn)出一種與眾不同的氣質(zhì)，特別是在暗背景或者亮背景中，能產(chǎn)生理想的視覺對比度，通常能得到較高的吸引力指數(shù)。綜上所述，顏色的運用在扁平化設(shè)計中尤為重要，在顏色搭配方面也有著更多的創(chuàng)新點值得進一步探討和研究。

圖1 扁平化設(shè)計中常用的7種顏色（本刊為黑白顯示）

1.3 從符號學角度解讀扁平化設(shè)計

著名符號學家卡西爾曾說過：“人是符號的動物” 。語言、工具包括思想，都隸屬于符號系統(tǒng)[3]。符號體系的發(fā)展伴隨著人類文明的發(fā)展。龜甲刻字、巖壁作畫都顯示出圖形化信息是人類信息傳遞的本源這一事實，如圖2所示。

圖2 龜甲刻字和巖壁作畫

從視覺角度看，圖形界面上任何有意義的可視化元素都是由相應(yīng)的符號組合而成的，比如圖標、

文字等；另一方面，從交互的角度來說，界面上所有涉及到的信息反饋都是以符號的信息交流規(guī)則為前提，設(shè)計圖形界面就是將界面符號化。界面本質(zhì)上是以信息交流為根本，是一個起源于設(shè)計師然后延續(xù)到用戶的一種思維過程，在這一過程中，圖形界面能給用戶帶來不同的情感體驗。

扁平化正是圖形界面的圖像符號向指示符號進化的必然結(jié)果，因為UI要面對大量不同人群，所以其建立的符號系統(tǒng)必須具有廣泛的認知性[4]。在UI發(fā)展初期，種類繁多的視覺元素設(shè)計往往沒有形成統(tǒng)一的規(guī)范，導致符號的能指與所指無法在人群中形成清晰的約定，這個時期也正是設(shè)計師在不斷嘗試修正和構(gòu)建兩者關(guān)系的時期。

扁平化圖形符號通常為指示符號，這種指示符號通常由幾種圖像符號組合或者再造，以此來詮釋新的意義，如圖3所示。

指示符號的新意義得到群體的廣泛認同是社會約定的必然結(jié)果，而扁平化設(shè)計是圖形界面的圖像符號向指示符號進化的必然結(jié)果。在數(shù)碼設(shè)備分辨率越來越高的今天，圖像符號因為精致、生動、注重個性等特點，能為用戶帶來優(yōu)秀且獨特的視覺感受；而指示符號通過復雜的組合規(guī)則，含有大量的數(shù)字信息，并且設(shè)計成本更低、界面功能更強，這正是其優(yōu)于圖像符號的地方。

圖3 扁平化圖標案列

2 扁平化設(shè)計應(yīng)用

隨著時代的發(fā)展，客戶對軟件和系統(tǒng)界面的要求越來越高，不僅希望界面給人漂亮、舒適的感覺，還對系統(tǒng)界面的交互過程、信息顯示有特定需求。

2.1 客戶需求

本文通過應(yīng)用項目實例探討客戶對系統(tǒng)界面方面的需求。

設(shè)計團隊通過與該項目客戶反復溝通，明確了幾點需求：①客戶希望該項目系統(tǒng)背景為單一色，界面上其它元素要能與背景顯著區(qū)分；②系統(tǒng)中的圖標要美觀且易于點擊，同時圖標所代表的功能要容易理解；③重要的信息要在進入系統(tǒng)時能夠方便實時顯示，不用進行任何操作便能在主界面獲得相關(guān)信息；④界面上元素的編排要符合用戶習慣，界面交互要友好；⑤系統(tǒng)界面要在不同分辨率的屏幕下都能使用，不能因為分辨率而影響系統(tǒng)功能。

針對以上客戶需求，設(shè)計團隊在分析討論之后，決定選用扁平化的設(shè)計思想來對該項目系統(tǒng)界面進行設(shè)計，因為采用扁平化的設(shè)計思想不僅可以滿足用戶對圖標、界面背景的要求，還能有效地精簡信息層級，滿足客戶方便快捷獲取重要信息的目的。

2.2 系統(tǒng)界面設(shè)計

針對客戶需求，在頁面編排上，設(shè)置了導航欄并將其以豎排的方式放置于系統(tǒng)頁面的最左側(cè)，通過導航欄，客戶可以迅速進入到相關(guān)子系統(tǒng)。導航放置在最左側(cè)可以最大限度地減少對主頁面信息的遮擋。在主頁面上部位置，設(shè)計放置了各個子系統(tǒng)大圖標，從而以醒目的方式將所有子系統(tǒng)進入方式展示給客戶，客戶通過點擊這些圖標便能非常方便地進入相關(guān)子系統(tǒng)，系統(tǒng)主頁面布局如圖4所示。

在各個子系統(tǒng)圖標下面，編排了4個矩形塊，這4個矩形塊與特定流程關(guān)聯(lián)，可以實時顯示出今日新增案卷的數(shù)量等信息。通過這種編排設(shè)置，客戶可一目了然地看到相關(guān)案卷的數(shù)量信息，極大地精簡了信息層級。在4個矩形塊的下部，分別放置每月工單示意圖模塊和工作記錄模塊，這樣編排的原因同樣是為了讓客戶能夠清晰直觀地看到所需要的信息記錄。信息顯示模塊布局如圖5所示。

圖4 系統(tǒng)主頁面布局

圖5 信息顯示模塊

針對客戶希望的單一色背景，設(shè)計團隊在和客戶溝通后，選擇了客戶喜歡的紅色作為系統(tǒng)背景主色調(diào)。在選擇紅色作為系統(tǒng)背景主色調(diào)之后，根據(jù)客戶建議，對背景進行了不同程度的漸變處理，給用戶一種舒適柔和的視覺效果。同時為了避免用戶審美疲勞，還提供了幾種單一顏色作為主色調(diào)的背景圖片供用戶切換使用。

為了有效區(qū)分系統(tǒng)單一的背景色，選擇白色作為文字、線條、矩形塊等元素的顏色，因為白色不但能使文字等元素清晰地呈現(xiàn)在頁面上，并且會與背景色產(chǎn)生明顯的差異感。按鈕顏色選擇黑色作為主色調(diào)，因為黑色可以使按鈕元素與其它元素區(qū)分開，用戶很容易找到想要點擊的按鈕。同時按鈕中的文字與界面其它部分的文字顏色一致，采用白色可以與按鈕的主色調(diào)形成有效對比，用戶可以清晰看到點擊該按鈕后觸發(fā)的事件。按照客戶需求，在下拉框的配色上，采用了用戶最為習慣的白底黑字，使用戶在選擇時能夠清晰看到每一個下拉選項，如圖6所示。

設(shè)計中采用了扁平化的圖標來指代相關(guān)子系統(tǒng)，這些扁平化圖標給用戶一種非常直觀的表達，并且在PC以及移動設(shè)備上更容易被點擊，選擇這些扁平化的圖標避免了理解上的歧義，有利于用戶與系統(tǒng)之間的交互。特別要注意的是，為了與背景色更好地結(jié)合，本文對圖標的透明度等屬性也進行了調(diào)整，通過這些調(diào)整使得界面元素更加契合。系統(tǒng)中使用的部分圖標如圖7所示。

為了滿足用戶簡單直觀獲取重要信息的需求，本文有效利用了扁平化設(shè)計中精簡信息層級的思想來進行設(shè)計。在主頁面的突出位置設(shè)計放置了4個大的矩形塊，在這4個大的矩形塊當中使用圖形（小矩形塊）和數(shù)字相結(jié)合的方式，直觀展示出用戶所需要的重要信息。同時在主頁面?zhèn)冗叺拇k任務(wù)欄，特殊的待辦任務(wù)（比如說上級領(lǐng)導回退的待辦任務(wù)）更是以鮮艷的大紅色作為背景進行標注，以幫助用戶在打開主頁面的瞬間就注意到這些特殊的任務(wù)。

圖6 按鈕線條示例

圖7 系統(tǒng)部分圖標

采用Bootstrap框架開發(fā)，通過該框架不但能夠迅速完成前端界面的開發(fā)工作，還能夠?qū)崿F(xiàn)在不同的屏幕分辨率下系統(tǒng)界面自動調(diào)整的自適應(yīng)功能。該系統(tǒng)交付使用后，得到了客戶的一致肯定，特別是對用戶界面部分給予了充分的贊賞。

3 結(jié)語

隨著人們生活節(jié)奏的加快，對信息的傳遞要求也更加精確，條理清晰、界面簡潔的扁平化設(shè)計更接近人們的需求[5]。它不但秉承以人為本的設(shè)計原則，同時注重產(chǎn)品的功能，產(chǎn)生了全新的交互體驗?zāi)Ｊ健Ｄ壳暗臄M物化設(shè)計已經(jīng)接近飽和，全新的扁平化設(shè)計必將順應(yīng)時代的潮流，在今后的一段時間里成為界面設(shè)計的主流風格。下一步將在基于扁平化的界面設(shè)計方面進行更多的探索，在扁平化符號創(chuàng)新、界面編排、用戶交互和信息層級傳遞等多個角度進行研究和創(chuàng)新。

參考文獻：

[1] 汪大偉.現(xiàn)代主義風格的 UI 設(shè)計之興起[J].現(xiàn)代裝飾，2012（9）：182184.

[2] 宋冬慧，葛俊杰.符號學在圖形設(shè)計中的意義[J].桂林電子工業(yè)學院學報，2002，22（6）：5963.

[3] 孫奕穎.圖形用戶界面的符號學解讀[J].鄭州輕工業(yè)學院學報，2008（2）：5254.

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

[5] 綠帆博客.為何越來越多公司采用扁平化設(shè)計[EB/OL].http：//www.cnbeta.com/articles/240985.htm，2013.

（責任編輯：杜能鋼）