扁平化設(shè)計(jì)風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

◎余 晶

扁平化設(shè)計(jì)是指擯棄多余的裝飾，如陰影、透視、紋理、漸變等，以抽象化、簡(jiǎn)潔化、符號(hào)化的設(shè)計(jì)元素將信息和事物的工作方式展示出來(lái)的一種設(shè)計(jì)風(fēng)格。信息結(jié)構(gòu)呈現(xiàn)的是一種扁而寬的結(jié)構(gòu)形式。其風(fēng)格特點(diǎn)為抽象新穎、色彩豐富、清新質(zhì)樸、網(wǎng)格設(shè)計(jì)明顯。擬物化設(shè)計(jì)是指以高光、紋理、陰影等效果模仿現(xiàn)實(shí)世界實(shí)物的造型、材質(zhì)和顏色，從而達(dá)到現(xiàn)實(shí)實(shí)物的再現(xiàn)，通過(guò)這種形象易懂的方式來(lái)表達(dá)操作方法的一種設(shè)計(jì)風(fēng)格，其信息組織結(jié)構(gòu)呈現(xiàn)長(zhǎng)而深的縱向樹(shù)形結(jié)構(gòu)，風(fēng)格特點(diǎn)是具象寫(xiě)實(shí)、華麗逼真。擬物化設(shè)計(jì)常常被用來(lái)與扁平化設(shè)計(jì)作比較，不僅因?yàn)閮蓚€(gè)風(fēng)格在時(shí)間軸上呈現(xiàn)交疊關(guān)系并各有堅(jiān)守的設(shè)計(jì)師陣營(yíng)，更因?yàn)閮烧唛g的設(shè)計(jì)風(fēng)格有明顯的對(duì)立區(qū)別。

一、扁平化設(shè)計(jì)的特征

對(duì)于沒(méi)接觸過(guò)的人來(lái)說(shuō)，“扁平化設(shè)計(jì)”是一種設(shè)計(jì)風(fēng)格術(shù)語(yǔ)，它拋棄任何能使得作品突顯3D效果的特性，通俗地說(shuō)，設(shè)計(jì)中不使用透視、紋理、陰影等效果。扁平化設(shè)計(jì)最基本、最突出的特征包括：簡(jiǎn)單的元素和形狀；極簡(jiǎn)風(fēng)；強(qiáng)功能性；大膽而易讀的排版；清晰而嚴(yán)謹(jǐn)?shù)囊曈X(jué)層次；關(guān)注細(xì)節(jié)；明亮的色彩和對(duì)比度明顯的視覺(jué)感知；避免使用紋理、漸變和復(fù)雜的樣式；采用柵格、幾何特征以及視覺(jué)平衡的原則。它廣泛運(yùn)用于User Interface（用戶界面，以下簡(jiǎn)稱“UI”）中，減少了裝飾得復(fù)雜多樣的閱讀障礙，給用戶提供了更便利的操作，具有直觀易懂、簡(jiǎn)約時(shí)尚等特點(diǎn)。

設(shè)計(jì)師們?nèi)缃袼坪跽馄交L(fēng)格傾斜，因?yàn)檫@種風(fēng)格干凈利索，現(xiàn)代氣息濃郁，而且能讓設(shè)計(jì)師專注最重要的內(nèi)容和信息要素。這樣設(shè)計(jì)出來(lái)的作品不容易過(guò)時(shí)，而且看起來(lái)簡(jiǎn)潔、高效。

扁平化設(shè)計(jì)的發(fā)展歷程當(dāng)然是有跡可循的，它的根源通常被追溯到名為“瑞士風(fēng)格”的一種裝飾設(shè)計(jì)風(fēng)格上。20世紀(jì)初的瑞士現(xiàn)代主義運(yùn)動(dòng)催生了這種設(shè)計(jì)風(fēng)格，隨著二戰(zhàn)結(jié)束，這種設(shè)計(jì)風(fēng)格開(kāi)始在歐洲流傳開(kāi)來(lái)，贏得了更多的擁簇，并且在21世紀(jì)初獲得了新生。這就是今天所說(shuō)的扁平化設(shè)計(jì)。

雖然這種風(fēng)格最初呈現(xiàn)的方式大多是海報(bào)、郵票、明信片、書(shū)籍裝禎設(shè)計(jì)，但是它的出現(xiàn)，大大擴(kuò)展了數(shù)字設(shè)計(jì)領(lǐng)域的視野，特別是在UI設(shè)計(jì)的領(lǐng)域。

最初走出扁平化設(shè)計(jì)這一步的是微軟，在2008年的時(shí)候，微軟便開(kāi)始從瑞士風(fēng)格、現(xiàn)代主義和包豪斯中汲取靈感，隨后在2010年推出了Windows Phone 7，它就是典型的扁平化設(shè)計(jì)。這個(gè)版本的操作系統(tǒng)中采用了大量的簡(jiǎn)單的形狀，清晰的排版，明亮而對(duì)比明顯的色彩，復(fù)雜的細(xì)節(jié)和紋理都被移除了。

二、扁平化設(shè)計(jì)在網(wǎng)頁(yè)界面視覺(jué)上的優(yōu)勢(shì)

1.網(wǎng)頁(yè)界面元素

格式塔心理學(xué)家認(rèn)為，人們的知覺(jué)有一種“簡(jiǎn)化”的傾向。這種傾向是一種將任何物體以盡可能簡(jiǎn)單的機(jī)構(gòu)組織起來(lái)是能夠體現(xiàn)物體最本質(zhì)的形態(tài)的表達(dá)。

在擬物化設(shè)計(jì)中，設(shè)計(jì)師會(huì)模仿現(xiàn)實(shí)世界里真實(shí)物體的顏色、形狀等。例如：設(shè)計(jì)師會(huì)為按鈕添加漸變、陰影等效果以符合真實(shí)按鈕的特征，以求對(duì)用戶產(chǎn)生親切的感覺(jué)。然而，這樣的按鈕往往帶來(lái)的是一種不符合用戶預(yù)期的體驗(yàn)，同時(shí)這也一定程度上限制了用戶的個(gè)性化想象空間，更重要的是設(shè)計(jì)開(kāi)發(fā)的周期相對(duì)更長(zhǎng)。扁平化設(shè)計(jì)使用的都是基本形狀，去除了漸變、陰影等裝飾性效果，弱化了視覺(jué)上的復(fù)雜性，突出了每個(gè)元素所表達(dá)的信息本身。另外，由于扁平化設(shè)計(jì)的元素的這些特點(diǎn)，其具有更廣泛的適用性，比如：眼睛近視和弱視的用戶也可以方便的使用這類設(shè)計(jì)。

相較于擬物化，扁平化設(shè)計(jì)更適合“小屏幕”時(shí)代。在美觀性與識(shí)別性上，擬物化設(shè)計(jì)的豐富細(xì)節(jié)被縮小后容易顯瑣碎，而扁平化卻往往簡(jiǎn)潔大方、恰到好處。同時(shí)，擬物化設(shè)計(jì)精致細(xì)膩的特征不僅增加了設(shè)計(jì)制作的人力成本和時(shí)間成本，也提高了接收端的流量成本，而扁平化設(shè)計(jì)則反之。

2.網(wǎng)頁(yè)布局

之前的網(wǎng)頁(yè)設(shè)計(jì)講求精美的圖片和排版效果，漂亮的插畫(huà)與周到的布局設(shè)計(jì)，扁平化設(shè)計(jì)拋棄了復(fù)雜的光影效果，更專注于根本的內(nèi)容呈現(xiàn)。扁平化設(shè)計(jì)中大量使用扁平化的圖標(biāo)、矢量圖形和圖標(biāo)字體，這種設(shè)計(jì)更符合現(xiàn)代人的審美觀。

一方面，擬物化設(shè)計(jì)初衷是降低用戶的認(rèn)知成本，目的是讓用戶在使用科技產(chǎn)品時(shí)可以參考現(xiàn)實(shí)世界的操作規(guī)律，可短時(shí)間內(nèi)輕松掌握數(shù)碼產(chǎn)品的用法。而在現(xiàn)今階段，數(shù)碼產(chǎn)品普及度已非常高，特別是在年輕用戶群體中，擬物化設(shè)計(jì)的功能性優(yōu)勢(shì)已無(wú)法凸顯，用戶已經(jīng)熟悉了各類數(shù)碼產(chǎn)品的基本特點(diǎn)，適應(yīng)了各類界面的操作方法，在扁平化設(shè)計(jì)風(fēng)格的界面中更容易更快速地找到所需要的信息。

另一方面，扁平化設(shè)計(jì)界面更能提升用戶操作的效率。隨著移動(dòng)互聯(lián)網(wǎng)的迅速崛起，移動(dòng)終端屏幕尺寸的多樣化給網(wǎng)頁(yè)設(shè)計(jì)造成了很多麻煩，所以響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)應(yīng)運(yùn)而生了。在這方面，擬物化設(shè)計(jì)的網(wǎng)頁(yè)很難實(shí)現(xiàn)跨屏幕、跨平臺(tái)的界面適配，特別是在小尺寸的屏幕上，擬物化的圖標(biāo)非常不易識(shí)別，而扁平化設(shè)計(jì)的圖標(biāo)則可以很好地滿足這些變化因素的需求。扁平化更多的使用矢量圖形，減少了對(duì)像素精度的依賴，這樣設(shè)計(jì)師也有了更大的創(chuàng)意空間，從而可以創(chuàng)建出適應(yīng)性更強(qiáng)的用戶界面。

3.色彩

扁平化設(shè)計(jì)頁(yè)面中，因?yàn)樽非髽O簡(jiǎn)主義，所以沒(méi)有其他多余的裝飾。因此，設(shè)計(jì)者在設(shè)計(jì)時(shí)需要更加注意色彩的搭配，這樣將會(huì)收到更好的視覺(jué)效果?？偨Y(jié)扁平設(shè)計(jì)的色彩搭配大致分為兩種：同類色搭配：同類色搭配，最常用的是把同一種顏色的黑、白、灰三種色調(diào)結(jié)合在一起，形成層次上的對(duì)比。在扁平化設(shè)計(jì)中，單色的使用不僅能分清層次感，同時(shí)也能把握住整體感。對(duì)比色搭配：對(duì)比色搭配的使用可以使頁(yè)面看起來(lái)極富活力又有豐富的色彩變幻，視覺(jué)效果醒目。在使用對(duì)比色進(jìn)行搭配時(shí)，設(shè)計(jì)師要注意到在設(shè)計(jì)時(shí)應(yīng)當(dāng)先了解網(wǎng)頁(yè)的主題，選用合適的顏色進(jìn)行搭配。

4.字體

文字是設(shè)計(jì)師向用戶傳遞信息的最主要手段。而字體的選擇不僅要符合扁平化設(shè)計(jì)的簡(jiǎn)約風(fēng)格，同時(shí)還要符合整個(gè)頁(yè)面主題的設(shè)計(jì)風(fēng)格。一般扁平化風(fēng)格的頁(yè)面會(huì)使用無(wú)襯線字體，再通過(guò)對(duì)字體字號(hào)、顏色和粗細(xì)的變化進(jìn)行排版[5]。不同排版的文字信息會(huì)帶來(lái)不同的視覺(jué)瀏覽體驗(yàn)，如字號(hào)較大，或是粗體，能幫助用戶輕易地分辨、獲取文字所傳達(dá)的信息，這就在內(nèi)容上創(chuàng)造出一定的層次感，可明顯提升內(nèi)容的易讀性。

三、扁平化設(shè)計(jì)在網(wǎng)頁(yè)信息組織結(jié)構(gòu)上的優(yōu)勢(shì)

擬物化設(shè)計(jì)的信息組織結(jié)構(gòu)主要表現(xiàn)為層級(jí)化結(jié)構(gòu)，呈現(xiàn)為金字塔形的縱向樹(shù)形結(jié)構(gòu)，是一種邏輯性較強(qiáng)的層級(jí)化組織方式[6]。這種信息組織結(jié)構(gòu)層級(jí)較多，每個(gè)層級(jí)容納的信息量少而準(zhǔn)確，根據(jù)嚴(yán)密的邏輯關(guān)系將信息進(jìn)行有效的分類，因此信息獲取的準(zhǔn)確率比較高。同時(shí)層級(jí)間的轉(zhuǎn)換路徑較長(zhǎng)，不同界面的切換耗時(shí)長(zhǎng)且不利于全局觀察，已造成用戶“迷路”。擬物化設(shè)計(jì)是一種注重功能實(shí)現(xiàn)的信息結(jié)構(gòu)，它更適用于信息結(jié)構(gòu)邏輯性強(qiáng)，信息種類繁多且詳細(xì)的產(chǎn)品。

扁平化設(shè)計(jì)最大程度地縮短了信息層級(jí)，不斷擴(kuò)展橫向信息承載量，呈現(xiàn)出一種扁而寬的結(jié)構(gòu)形式。特別是卡片式的信息展現(xiàn)形式可以同時(shí)展示信息標(biāo)題和少量?jī)?nèi)容，減少了用戶在訪問(wèn)多個(gè)目標(biāo)信息時(shí)所耗費(fèi)的認(rèn)知成本。但是如果單個(gè)層級(jí)承載的信息量過(guò)大，獲取精確信息的難度將變大，對(duì)于信息在頁(yè)面中的定位也增加了難度。因此，扁平化設(shè)計(jì)適用于快捷的信息瀏覽，信息及模塊的分支少且信息傳達(dá)迅速的產(chǎn)品。扁平化設(shè)計(jì)的這種信息組織結(jié)構(gòu)可以很好地優(yōu)化目前絕大部分網(wǎng)頁(yè)體驗(yàn)。

四、扁平化設(shè)計(jì)在網(wǎng)頁(yè)交互方式上的優(yōu)勢(shì)

隨著生活節(jié)奏的加快，由“讀圖”獲取信息的效率優(yōu)勢(shì)日益凸顯，圖像的呈現(xiàn)方式也更加多元，從靜態(tài)圖發(fā)展為動(dòng)態(tài)圖便是近年來(lái)的讀圖新趨勢(shì)。動(dòng)態(tài)圖不僅能承載更多生動(dòng)有趣的創(chuàng)意思維、創(chuàng)造更高效的視覺(jué)吸引、呈現(xiàn)更飽滿的審美情趣，甚至還能滿足及強(qiáng)化圖像的敘事功能。擬物化設(shè)計(jì)要實(shí)現(xiàn)動(dòng)態(tài)圖需要花費(fèi)較高的人力和時(shí)間成本，因?yàn)槊恳粠瑒?dòng)態(tài)都可能涉及多個(gè)復(fù)雜形態(tài)的協(xié)調(diào)運(yùn)動(dòng)，而扁平化設(shè)計(jì)的輕快體量明顯更能滿足動(dòng)態(tài)制作的需求，做交互動(dòng)效比較容易且不易亂，同時(shí)網(wǎng)頁(yè)交互動(dòng)效可以大大提高用戶的情感體驗(yàn)，避免扁平化設(shè)計(jì)風(fēng)格給人造成冰冷、毫無(wú)生機(jī)的感覺(jué)。

從簡(jiǎn)到繁再到簡(jiǎn)、從擬物擬像再到符號(hào)的變化過(guò)程不僅反映出人們審美趣味螺旋上升的變化規(guī)律，也是社會(huì)發(fā)展提高交流效率的必然要求。扁平化設(shè)計(jì)正是遵循這樣一個(gè)發(fā)展規(guī)律，才得以在寫(xiě)實(shí)擬物的精致時(shí)代萌芽壯大。因此，扁平化設(shè)計(jì)的“簡(jiǎn)”實(shí)質(zhì)是經(jīng)過(guò)充分腦力勞動(dòng)的“簡(jiǎn)”，是對(duì)“取”與“舍”的慎重選擇。雖然扁平化設(shè)計(jì)依然存在種種不足，比如用大屏幕呈現(xiàn)時(shí)容易顯得空洞，氣氛渲染乏力，為追逐“平”的潮流而強(qiáng)逼畫(huà)面“平”，以及制作難度降低后導(dǎo)致的設(shè)計(jì)門檻降低，粗制濫造頻現(xiàn)等，但扁平化設(shè)計(jì)風(fēng)格運(yùn)用在網(wǎng)頁(yè)設(shè)計(jì)上，他的這些優(yōu)點(diǎn)將會(huì)對(duì)用戶體驗(yàn)產(chǎn)生非常積極的影響。當(dāng)然，擬物化設(shè)計(jì)風(fēng)格也不會(huì)就此覆滅，它會(huì)用適當(dāng)?shù)姆绞綄?duì)用戶體驗(yàn)做出貢獻(xiàn)。