以視覺信息為主導的扁平化界面設計研究

張鐵琦 張 燾 （江南大學 214062）

以視覺信息為主導的扁平化界面設計研究

張鐵琦 張 燾 （江南大學 214062）

隨著用戶體驗領域的空前發展，不同類型的用戶體驗界面扁平化的趨勢日益明顯，經過對大量的扁平化界面設計實踐在色彩，排版等元素的總結和分析。發現在繁榮的信息時代，扁平化設計在色彩，字體以及布局等等視覺元素上采取不同的應用方法來以信息為主導從而使得用戶體驗產品界面更適應當今技術發展和用戶變化，相比傳統用戶體驗的視覺設計領域，這一優勢決定了扁平化趨勢的誕生。

扁平化；界面設計；視覺信息；視覺元素

引言：扁平化設計沒有明確的定義，但從設計師們的大量實踐總結來看扁平化設計風格是一種摒棄高光、陰影等能造成透視感的效果，通過抽象、簡化、符號化的設計元素來表現用戶體驗產品界面的視覺風格。界面上極簡抽象，頻繁使用矩形色塊，無襯線字體等元素，呈現出十足現代感。

一、扁平化設計的優勢

1. 適應用戶時代性的需求

（1）用戶不再需要降低學習成本

在數碼設備普及度不高的時代，低學習成本的傳統設計風靡一時，因為用戶都需要大量學習與訓練才能熟練使用陌生工具，所以犧牲信息來提高易學性的傳統設計更能夠被用戶接受，但一個先進的設備得通過模仿熟悉的事物讓用戶快速理解，是時代過渡中的一個不得已。

界面產品的易學性高于用戶自身的心智模型時，用戶就會對產品失去興趣。如此，產品易學性在用戶心智模型以下，同時在易學的區間內適當降低產品的易學性，會給予用戶以使用產品的自信，恰好保證用戶對產品的興趣，提高用戶粘度。而扁平化正是處在這一區間內的視覺風格，這是其盛行的重要原因之一。

（2）視覺疲勞

視覺疲勞雖然是扁平化設計盛行的次要因素，但也不可忽略。Layervault的Allen Grinshtein在一篇發表于HackerNews的文章中提到：“廣受歡迎的產品通常都有一些類似的設計美學，比如一些立體、內陰影、外陰影等。對設計師來說，他們會以實現這種“媚俗”的界面而感到自豪?！闭撎煜略O計，簡久必繁，繁久必簡， 用戶體驗也不例外，不管是研發者還是用戶，都會產生審美疲勞。即使不疲勞，個別產品也需要標新立異，與眾不同，也必然會走向另外一個極端。

2.以信息為主導，提高效率

傳統設計為了降低用戶學習成本，采取模擬現實物品的造型和質感的手法。此手法雖然是一種能夠降低用戶學習成本的一種方式，但其缺點在于需要花費設計師大量的時間觀察并模擬現實物品。

比如IOS7之前版本的自帶輸入法中按鈕中的文字效果：淺色和深色按鈕。在淺色按鈕上，文字90度向下方向有1px白色反光；而在深色按鈕上，文字90度向上方向有1px陰影，按鈕也有將近2px線高光投影，同時每個按鈕都運用漸變顏色，如此嚴格模擬現實光照效果能夠凸顯按鈕降低學習成本，但其弊端就在于花費了設計師甚至是開發者大量的精力和時間。

對比IOS7的默認輸入界面，半透明底白色字體，運用黑色半透明底與白色半透明底區分常用按鈕與非常用按鈕，提亮中間常用按鈕鍵將用戶的視覺動線確定為從中間向兩邊擴散。

以下是兩者輸入法按鈕內容層數對比見表1，從中可以看出設計師和開發者在兩者輸入法的視覺按鈕上所花費的精力和時間。

表1 輸入法按鈕內容層數的對比Tab.1 Comparison of input button layers

扁平化正是利用如此的色彩對比來劃分信息層級，當然，傳統設計也存在劃分信息層級的方法，但扁平化利用色彩對比的方法的優勢就在于利用最簡單的方式最有效的表現信息層級，并且最小化視覺干擾。

3.迎合設備多樣化發展

扁平化的盛行另一個重要原因在于比起傳統視覺設計其能更好的適應屏幕尺寸多樣化的趨勢，比如不同終端win8的metro扁平化風格的界面，win8只要通過色塊的不同排列順序就能適應不同屏幕尺寸，這不僅對開發者還是設計師來說都是及其節省工作量而且能夠達到視覺美感的統一視覺風格。

二、以視覺信息為主導的扁平化界面設計方法研究

1.色彩的選用

Carrie Cousins在《Making it Work: Flat Design and Color Trends》一文中總結了當今扁平化設計流行的三個色段色彩：鮮亮色、復古色和單一色。

所謂的鮮亮色并不是嚴格意義上的原色，而是指色彩純度較高的色彩。所以在使用鮮亮色配色方案要選擇類似的色相和飽和度。鮮亮的色彩為扁平化設計創造出一種與眾不同的感覺。其在亮背景和暗背景下都能獲得較為可觀的對比度，以吸引用戶的注意。

扁平化設計流行的另一種色彩則是復古色，此色彩模式選用的色彩的純度和明度都較低，復古色常用于主色和輔色之上，其給人感覺較舒緩，這也是此色彩模式在扁平化設計中盛行的原因，這類色彩適合作為主色元素出現，配以圖案或柔和的色彩，效果最佳。

單一色并不是所謂只使用一種顏色進行設計，而是指在父色的基礎上通過調節對比度，得到諸多不同的色調。比如原始顏色對比度為100％，調成50％，20％和8％后進行搭配使用。單一色的優勢就在于利用明顯的色調對比使用戶較快理解信息層級，使得用戶的視覺動線清晰明確，提高用戶獲取信息的效率。誠然，使用單一色相最大的缺點在于視覺感受冰冷不活躍，但配以活潑的圖案或者圖像，這種視覺感受將被弱化。

2.字體與圖形的使用

扁平化設計是一種以信息內容為主角的視覺設計風格，對于扁平化設計中不使用裝飾性強的襯線字體，而為了表現信息層級，字體的大小和布局設計將是重要手段。

（1）字體的選用

上述介紹了扁平化設計是通過色彩的對比來實現信息層級的呈現，但具體的信息排序一部分是由色彩承載，而另一部分則是通過字體的大小來呈現。字體越大，信息更易被用戶獲取，所以，改變字體的大小能夠進行信息排序，即較為重要的信息要求更易被用戶獲取，字體相比之下需要略大。

字體是排版中的重要部分，需要和其他元素相輔相成。扁平化網站使用無裝飾的無襯線字體，無襯線字體家族龐大分支眾多，其中部分字體會在特殊情景下會有意想不到的效果[3]。字體的粗細形狀不同給用戶的心理感受是不同的，比如Helvetica Neue Condense black與Helvetica Neue Ultra light都屬于Helvetica Neue 家族的字體，兩者形狀相同，但粗細存在巨大差距，使得兩者給用戶的感受不同，Helvetica Neue Condense black呈現出一種嚴肅穩重的狀態，而Helvetica Neue Ultra light給人以一種時尚感。

當然相同粗細的字體因形態的不同，呈現效果也不同，比如在相同粗細的情況下Bauhaus 93字體看起來就比Helvetica Neue Condense black活潑可愛?；趯τ谀繕擞脩舴治雠c研究，目標人群不同的用戶體驗產品對于字體的選擇不同。

（2）圖形的選用

設計師通常將圖形運用到用戶界面中，諸如按鈕或者圖標之類。設計師們通常堅持使用簡單的圖形（矩形或者圓形等幾何圖形），盡量突出圖形，此元素一律為直角（極少的一些為圓角）。這些用戶界面元素可以方便用戶點擊，這能極大的減少用戶學習新交互方式的成本，用戶憑經驗就能大概知道每個按鈕的作用。

（3）網格布局

扁平化設計產品大多基于網格布局。無論從理論、美學還是整齊來說，網格布局都較好平衡。其布局方式給扁平化設計以高效的信息傳達，清晰的信息層級等優勢，網格布局是扁平化設計的基礎，它總能給用戶完美無暇的信息設計。

雖然網格布局的種類很多，但所有網格布局的視覺質感是由留白空間決定的見圖1。從紅框的區域可以看出來，空白區域大小決定視覺整齊程度，元素的排版決定空白區域。元素適當組合，可以讓版面看來更整齊，例如B；但若讓元素散布在版面各處，空白割裂過多，看起來零亂，例如A。網格排版的留白區域都符合B類區域，所以對于扁平化設計來說使用起來對其信息的排布和分層都是合理并具有一定優勢的。

圖1 網格留白示意圖Fig.1 Schematic diagram of grid blank

三、結語

綜上所述，在用戶體驗產品領域，扁平化設計風格在適應用戶需求變化以及設備更新方面都存在較大優勢，而為了保證優勢，扁平化設計風格在色彩、字體、圖形和布局等視覺元素的設計和選用上比起其他視覺設計風格更能夠適應當今用戶與技術的需求。當然，隨著時代變化，扁平化界面設計風格也需要不斷調整方法來適應瞬息可變的時代需求。

[1]姚武. 大眾文化視野中的“審美媒介化”與“審美疲勞”[J]. 社科縱橫. 2007(05):92-94. Yao Wu. Popular Culture in the Perspective of "Aesthetics" and "Aestheticfatigue" [J]. Social Science. 2007 (05):92-94.

[2]張蓮. 視覺元素在交互設計中的運用[D]. 湖北工業大學, 2011:7-32. Zhang Lian. Using Visual Elements in the Interaction Design[D]. Hubei University of Technology . 2011:7-32.

[3]SunI視覺設計．字體設計法則[M].電子工業出版社.2012．SunI Visual Design. Font Design Rules [M]. Electronic Industry Press .2012.

J524

A