扁平化設計風格在網頁設計中的應用

◎余 晶

扁平化設計是指擯棄多余的裝飾，如陰影、透視、紋理、漸變等，以抽象化、簡潔化、符號化的設計元素將信息和事物的工作方式展示出來的一種設計風格。信息結構呈現的是一種扁而寬的結構形式。其風格特點為抽象新穎、色彩豐富、清新質樸、網格設計明顯。擬物化設計是指以高光、紋理、陰影等效果模仿現實世界實物的造型、材質和顏色，從而達到現實實物的再現，通過這種形象易懂的方式來表達操作方法的一種設計風格，其信息組織結構呈現長而深的縱向樹形結構，風格特點是具象寫實、華麗逼真。擬物化設計常常被用來與扁平化設計作比較，不僅因為兩個風格在時間軸上呈現交疊關系并各有堅守的設計師陣營，更因為兩者間的設計風格有明顯的對立區別。

一、扁平化設計的特征

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

設計師們如今似乎正朝扁平化風格傾斜，因為這種風格干凈利索，現代氣息濃郁，而且能讓設計師專注最重要的內容和信息要素。這樣設計出來的作品不容易過時，而且看起來簡潔、高效。

扁平化設計的發展歷程當然是有跡可循的，它的根源通常被追溯到名為“瑞士風格”的一種裝飾設計風格上。20世紀初的瑞士現代主義運動催生了這種設計風格，隨著二戰結束，這種設計風格開始在歐洲流傳開來，贏得了更多的擁簇，并且在21世紀初獲得了新生。這就是今天所說的扁平化設計。

雖然這種風格最初呈現的方式大多是海報、郵票、明信片、書籍裝禎設計，但是它的出現，大大擴展了數字設計領域的視野，特別是在UI設計的領域。

最初走出扁平化設計這一步的是微軟，在2008年的時候，微軟便開始從瑞士風格、現代主義和包豪斯中汲取靈感，隨后在2010年推出了Windows Phone 7，它就是典型的扁平化設計。這個版本的操作系統中采用了大量的簡單的形狀，清晰的排版，明亮而對比明顯的色彩，復雜的細節和紋理都被移除了。

二、扁平化設計在網頁界面視覺上的優勢

1.網頁界面元素

格式塔心理學家認為，人們的知覺有一種“簡化”的傾向。這種傾向是一種將任何物體以盡可能簡單的機構組織起來是能夠體現物體最本質的形態的表達。

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

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

2.網頁布局

之前的網頁設計講求精美的圖片和排版效果，漂亮的插畫與周到的布局設計，扁平化設計拋棄了復雜的光影效果，更專注于根本的內容呈現。扁平化設計中大量使用扁平化的圖標、矢量圖形和圖標字體，這種設計更符合現代人的審美觀。

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

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

3.色彩

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

4.字體

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

三、扁平化設計在網頁信息組織結構上的優勢

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

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

四、扁平化設計在網頁交互方式上的優勢

隨著生活節奏的加快，由“讀圖”獲取信息的效率優勢日益凸顯，圖像的呈現方式也更加多元，從靜態圖發展為動態圖便是近年來的讀圖新趨勢。動態圖不僅能承載更多生動有趣的創意思維、創造更高效的視覺吸引、呈現更飽滿的審美情趣，甚至還能滿足及強化圖像的敘事功能。擬物化設計要實現動態圖需要花費較高的人力和時間成本，因為每一幀動態都可能涉及多個復雜形態的協調運動，而扁平化設計的輕快體量明顯更能滿足動態制作的需求，做交互動效比較容易且不易亂，同時網頁交互動效可以大大提高用戶的情感體驗，避免扁平化設計風格給人造成冰冷、毫無生機的感覺。

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