
扁平化設計是指擯棄多余的裝飾,如陰影、透視、紋理、漸變等,以抽象化、簡潔化、符號化的設計元素將信息和事物的工作方式展示出來的一種設計風格 。信息結構呈現的是一種扁而寬的結構形式 。其風格特點為抽象新穎、色彩豐富、清新質樸、網格設計明顯 。說起扁平化設計就不得不提擬物化設計 。擬物化設計是指以高光、紋理、陰影等效果模仿現實世界實物的造型、材質和顏色,從而達到現實實物的再現,通過這種形象易懂的方式來表達操作方法的一種設計風格,其信息組織結構呈現長而深的縱向樹形結構,風格特點是具象寫實、華麗逼真 。
扁平化設計在網頁界面視覺上的優勢
網頁界面元素
格式塔心理學家認為,人們的知覺有一種“簡化”的傾向 。這種傾向是一種將任何物體以盡可能簡單的機構組織起來是能夠體現物體最本質的形態的表達 。[3]在擬物化設計中 , 設計師會模仿現實世界里真實物體的顏色、形狀等 。例如:設計師會為按鈕添加漸變、陰影等效果以符合真實按鈕的特征,以求對用戶產生親切的感覺 。然而,這樣的按鈕往往帶來的是一種不符合用戶預期的體驗,同時這也一定程度上限制了用戶的個性化想象空間,更重要的是設計開發的周期相對更長 。扁平化設計使用的都是基本形狀 , 去除了漸變、陰影等裝飾性效果 , 弱化了視覺上的復雜性 , 突出了每個元素所表達的信息本身 。另外,由于扁平化設計的元素的這些特點 , 其具有更廣泛的適用性 , 比如:眼睛近視和弱視的用戶也可以方便的使用這類設計 。
網頁布局
之前的網頁設計講求精美的圖片和排版效果 , 漂亮的插畫與周到的布局設計,扁平化設計拋棄了復雜的光影效果,更專注于根本的內容呈現 。扁平化設計中大量使用扁平化的圖標、矢量圖形和圖標字體,這種設計更符合現代人的審美觀 。一方面,擬物化設計初衷是降低用戶的認知成本,目的是讓用戶在使用科技產品時可以參考現實世界的操作規律,可短時間內輕松掌握數碼產品的用法[4] 。而在現今階段 , 數碼產品普及度已非常高,特別是在年輕用戶群體中,擬物化設計的功能性優勢已無法凸顯,用戶已經熟悉了各類數碼產品的基本特點,適應了各類界面的操作方法,在扁平化設計風格的界面中更容易更快速地找到所需要的信息 。另一方面,扁平化設計界面更能提升用戶操作的效率 。
色彩
扁平化設計頁面中,因為追求極簡主義,所以沒有其他多余的裝飾 。因此,網頁設計者在設計時需要更加注意色彩的搭配,這樣將會收到更好的視覺效果 。總結扁平設計的色彩搭配大致分為兩種:同類色搭配:同類色搭配,最常用的是把同一種顏色的黑、白、灰三種色調結合在一起,形成層次上的對比 。在扁平化設計中,單色的使用不僅能分清層次感,同時也能把握住整體感 。對比色搭配:對比色搭配的使用可以使頁面看起來極富活力又有豐富的色彩變幻,視覺效果醒目 。在使用對比色進行搭配時,設計師要注意到在設計時應當先了解網頁的主題,選用合適的顏色進行搭配 。
字體
文字是設計師向用戶傳遞信息的最主要手段 。而字體的選擇不僅要符合扁平化設計的簡約風格,同時還要符合整個頁面主題的設計風格 。一般扁平化風格的頁面會使用無襯線字體,再通過對字體字號、顏色和粗細的變化進行排版[5] 。不同排版的文字信息會帶來不同的視覺瀏覽體驗,如字號較大,或是粗體,能幫助用戶輕易地分辨、獲取文字所傳達的信息,這就在內容上創造出一定的層次感,可明顯提升內容的易讀性 。
扁平化設計在網頁信息組織結構上的優勢
擬物化設計的信息組織結構主要表現為層級化結構,呈現為金字塔形的縱向樹形結構,是一種邏輯性較強的層級化組織方式[6] 。這種信息組織結構層級較多,每個層級容納的信息量少而準確,根據嚴密的邏輯關系將信息進行有效的分類,因此信息獲取的準確率比較高 。同時層級間的轉換路徑較長 , 不同界面的切換耗時長且不利于全局觀察,已造成用戶“迷路” 。
扁平化設計在網頁交互方式上的優勢
擬物化設計的網頁往往由于擬物的不徹底,比如可能由于花費時間較長的原因,按鈕的四種狀態不能做到完全的擬物,會造成用戶體驗上的不連貫 , 給用戶造成疑惑 。同時由于擬物化設計耗時比較長,往往很少在網頁動效方面改善用戶體驗的事情 。而扁平設計中使用的多是簡單的矢量圖形、圖標、圖片,做交互動效比較容易且不易亂 。同時網頁交互動效可以大大提高用戶的情感體驗,避免扁平化設計風格給人造成冰冷、毫無生機的感覺 。
總結
扁平化與擬物化設計一樣都由來已久 , 隨著互聯網的飛速發展,特別是移動互聯網的崛起 , 滿足了用戶的各種新需求,解決了用戶體驗的痛點,扁平化設計的優勢得以凸顯并得到了廣泛傳播 。扁平化設計風格運用在網頁設計上,他的這些優點將同樣會對用戶體驗產生非常積極的影響 。擬物化設計風格也不會就此覆滅,它會用適當的方式對用戶體驗做出貢獻 。
【扁平化設計風格在網頁設計中的優勢】
