扁平化設(shè)計(jì)風(fēng)格在網(wǎng)頁設(shè)計(jì)中的優(yōu)勢

陳冠軍 張阿維

(西安工程大學(xué)，陜西 西安 710048)

互聯(lián)網(wǎng)的誕生是一個奇跡，而網(wǎng)頁則是這個奇跡的載體和縮影。隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)頁的設(shè)計(jì)越來越重要。擬物化和扁平化設(shè)計(jì)風(fēng)格作為當(dāng)下最流行的兩種設(shè)計(jì)風(fēng)格，關(guān)于它們的爭論從未停止過。

1 扁平化設(shè)計(jì)和擬物化設(shè)計(jì)簡介

扁平化設(shè)計(jì)是指擯棄多余的裝飾，如陰影、透視、紋理、漸變等，以抽象化、簡潔化、符號化的設(shè)計(jì)元素將信息和事物的工作方式展示出來的一種設(shè)計(jì)風(fēng)格。信息結(jié)構(gòu)呈現(xiàn)的是一種扁而寬的結(jié)構(gòu)形式。其風(fēng)格特點(diǎn)為抽象新穎、色彩豐富、清新質(zhì)樸、網(wǎng)格設(shè)計(jì)明顯。[1]

說起扁平化設(shè)計(jì)就不得不提擬物化設(shè)計(jì)。擬物化設(shè)計(jì)是指以高光、紋理、陰影等效果模仿現(xiàn)實(shí)世界實(shí)物的造型、材質(zhì)和顏色，從而達(dá)到現(xiàn)實(shí)實(shí)物的再現(xiàn)，通過這種形象易懂的方式來表達(dá)操作方法的一種設(shè)計(jì)風(fēng)格，其信息組織結(jié)構(gòu)呈現(xiàn)長而深的縱向樹形結(jié)構(gòu),風(fēng)格特點(diǎn)是具象寫實(shí)、華麗逼真。[2]

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

2.1 網(wǎng)頁界面元素

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

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

2.2 網(wǎng)頁布局

之前的網(wǎng)頁設(shè)計(jì)講求精美的圖片和排版效果，漂亮的插畫與周到的布局設(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)品的用法[4]。而在現(xiàn)今階段，數(shù)碼產(chǎn)品普及度已非常高，特別是在年輕用戶群體中，擬物化設(shè)計(jì)的功能性優(yōu)勢已無法凸顯，用戶已經(jīng)熟悉了各類數(shù)碼產(chǎn)品的基本特點(diǎn)，適應(yīng)了各類界面的操作方法，在扁平化設(shè)計(jì)風(fēng)格的界面中更容易更快速地找到所需要的信息。

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

2.3 色彩

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

2.4 字體

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

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

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

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

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

擬物化設(shè)計(jì)的網(wǎng)頁往往由于擬物的不徹底，比如可能由于花費(fèi)時(shí)間較長的原因，按鈕的四種狀態(tài)不能做到完全的擬物，會造成用戶體驗(yàn)上的不連貫，給用戶造成疑惑。同時(shí)由于擬物化設(shè)計(jì)耗時(shí)比較長，往往很少在網(wǎng)頁動效方面改善用戶體驗(yàn)的事情。而扁平設(shè)計(jì)中使用的多是簡單的矢量圖形、圖標(biāo)、圖片，做交互動效比較容易且不易亂。同時(shí)網(wǎng)頁交互動效可以大大提高用戶的情感體驗(yàn)，避免扁平化設(shè)計(jì)風(fēng)格給人造成冰冷、毫無生機(jī)的感覺。

5 總結(jié)

扁平化與擬物化設(shè)計(jì)一樣都由來已久，隨著互聯(lián)網(wǎng)的飛速發(fā)展，特別是移動互聯(lián)網(wǎng)的崛起，滿足了用戶的各種新需求，解決了用戶體驗(yàn)的痛點(diǎn)，扁平化設(shè)計(jì)的優(yōu)勢得以凸顯并得到了廣泛傳播。扁平化設(shè)計(jì)風(fēng)格運(yùn)用在網(wǎng)頁設(shè)計(jì)上，他的這些優(yōu)點(diǎn)將同樣會對用戶體驗(yàn)產(chǎn)生非常積極的影響。擬物化設(shè)計(jì)風(fēng)格也不會就此覆滅，它會用適當(dāng)?shù)姆绞綄τ脩趔w驗(yàn)做出貢獻(xiàn)。

［1］宋方，金錦虹，逯新輝.析“扁平化”手機(jī)界面設(shè)計(jì)[J].包裝工程，2012,33(14)：60-63.

［2］夏穎翀.數(shù)字產(chǎn)品界面中樸素的設(shè)計(jì)和冗余的設(shè)計(jì)[J].裝裝飾，2013（5）：98-99.

［3］馬海港.少即是多：論扁平化界面設(shè)計(jì)風(fēng)格的優(yōu)勢[J].現(xiàn)代裝飾：理論，2013（12）：88.

［4］馬娜娜.簡潔而不乏味：淺談扁平化界面設(shè)計(jì)[J].大眾文藝，2013（16）：137-138.

［5］張蕓.扁平化設(shè)計(jì)在網(wǎng)頁上應(yīng)用的優(yōu)勢[J].藝術(shù)科技，2013（6）：229.

［6］嚴(yán)屏，韋錦城.探析現(xiàn)代數(shù)字界面中的擬物化風(fēng)格與扁平化風(fēng)格[J].包裝工程，2013（22）：114-126.