以視覺(jué)信息為主導(dǎo)的扁平化界面設(shè)計(jì)研究

張鐵琦 張 燾 （江南大學(xué) 214062）

以視覺(jué)信息為主導(dǎo)的扁平化界面設(shè)計(jì)研究

張鐵琦 張 燾 （江南大學(xué) 214062）

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

扁平化；界面設(shè)計(jì)；視覺(jué)信息；視覺(jué)元素

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

一、扁平化設(shè)計(jì)的優(yōu)勢(shì)

1. 適應(yīng)用戶時(shí)代性的需求

（1）用戶不再需要降低學(xué)習(xí)成本

在數(shù)碼設(shè)備普及度不高的時(shí)代，低學(xué)習(xí)成本的傳統(tǒng)設(shè)計(jì)風(fēng)靡一時(shí)，因?yàn)橛脩舳夹枰罅繉W(xué)習(xí)與訓(xùn)練才能熟練使用陌生工具，所以犧牲信息來(lái)提高易學(xué)性的傳統(tǒng)設(shè)計(jì)更能夠被用戶接受，但一個(gè)先進(jìn)的設(shè)備得通過(guò)模仿熟悉的事物讓用戶快速理解，是時(shí)代過(guò)渡中的一個(gè)不得已。

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

（2）視覺(jué)疲勞

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

2.以信息為主導(dǎo)，提高效率

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

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

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

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

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

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

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

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

二、以視覺(jué)信息為主導(dǎo)的扁平化界面設(shè)計(jì)方法研究

1.色彩的選用

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

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

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

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

2.字體與圖形的使用

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

（1）字體的選用

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

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

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

（2）圖形的選用

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

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

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

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

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

三、結(jié)語(yǔ)

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

[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]張蓮. 視覺(jué)元素在交互設(shè)計(jì)中的運(yùn)用[D]. 湖北工業(yè)大學(xué), 2011:7-32. Zhang Lian. Using Visual Elements in the Interaction Design[D]. Hubei University of Technology . 2011:7-32.

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

J524

A