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

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

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

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

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

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

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

一、扁平化設計的優(yōu)勢

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

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

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

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

（2）視覺疲勞

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

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

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

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

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

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

表1 輸入法按鈕內(nèi)容層數(shù)的對比Tab.1 Comparison of input button layers

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

3.迎合設備多樣化發(fā)展

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

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

1.色彩的選用

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

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

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

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

2.字體與圖形的使用

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

（1）字體的選用

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

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

當然相同粗細的字體因形態(tài)的不同，呈現(xiàn)效果也不同，比如在相同粗細的情況下Bauhaus 93字體看起來就比Helvetica Neue Condense black活潑可愛。基于對于目標用戶分析與研究，目標人群不同的用戶體驗產(chǎn)品對于字體的選擇不同。

（2）圖形的選用

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

（3）網(wǎng)格布局

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

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

圖1 網(wǎng)格留白示意圖Fig.1 Schematic diagram of grid blank

三、結(jié)語

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

[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]. 湖北工業(yè)大學, 2011:7-32. Zhang Lian. Using Visual Elements in the Interaction Design[D]. Hubei University of Technology . 2011:7-32.

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

J524

A