淺談扁平化設計

扁平化設計風格帶給受衆的是一種乾淨、簡潔的設計情緒。這種設計風格現在已經得到了大量的應用。那麼什麼是扁平化設計呢?扁平化設計是指放棄漸變、陰影、高光等擬真視覺效果,從而更加簡單直接的將信息展示出來。

一、扁平化設計的五大特點
1、拒絕特效
扁平化設計概念最核心的地方就是放棄一切裝飾效果,諸如陰影、透視、紋理、漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都乾淨俐落,沒有任何羽化、漸變或者陰影。這一設計趨勢極力避免任何擬物化設計的元素,這導致這一設計風格在其它平臺有時候顯得突兀,前景圖片、按鈕、文本和導航欄與背景圖片格格不入,各成一派。

  因爲這種設計有着鮮明的視覺效果,它所使用的元素之間有清晰的層次和佈局,這使得用戶能直觀的瞭解每個元素的作用以及交互方式。如今從網頁到手機應用無不在使用扁平化的設計風格,尤其在手機上,因爲屏幕的限制,使得這一風格在用戶體驗上更有優勢,更少的按鈕和選項使得界面乾淨整齊,使用起來格外簡單。
  
這裏寫圖片描述

2、僅使用簡單的元素

 扁平化設計通常採用許多簡單的用戶界面元素,諸如按鈕或者圖標之類。設計師們通常堅持使用簡單的外形(矩形或者圓形),並且儘量突出外形,這些元素一律爲直角(極少的一些爲圓角)。這些用戶界面元素方便用戶點擊,這能極大的減少用戶學習新交互方式的成本,因爲用戶憑經驗就能大概知道每個按鈕的作用。

  此外,扁平化除了簡單的形狀之外,還包括大膽的配色。但是需要注意的是,扁平化設計不是說簡單的搞些形狀和顏色搭配起來就行,它和其他設計風格一樣,是由許多的概念與方法組成的。
  
這裏寫圖片描述

3、注重排版

 由於扁平化設計的使用特別簡單的元素,排版就成了很重要的一環,排版好壞直接影響視覺效果,甚至可能間接影響用戶體驗。

  字體是排版中很重要的一部分,和其他元素相輔相成。想想看,一款花體字在扁平化的界面裏得有多突兀。下圖是一些扁平化網站使用無襯線字體的例子。無襯線字體家族龐大分之衆多,其中有些字體會在特殊的情景下會有意想不到的效果。但注意,過猶不及,不要使用那些極爲生僻的字體,因爲保不齊它就把你帶進坑裏了。
  
這裏寫圖片描述

4、關注色彩

扁平化設計中,配色貌似是最重要的一環,扁平化設計通常採用比其他風格更明亮、炫麗的顏色。同時,扁平化設計中的配色還意味着更多的色調。比如,其他設計最多隻包含兩三種主要顏色,但是扁平化設計中會平均使用六到八種。

  而且扁平化設計中,往往傾向於使用單色調,尤其是純色,並且不做任何淡化或柔化處理(最受歡迎的顏色是純色和二次色)。另外還有一些顏色也挺受歡迎,如復古色(淺橙、紫色、綠色、藍色等)。
  
這裏寫圖片描述

5、極簡主義

設計師要儘量簡化自己的設計方案,避免不必要的元素在設計中出現。簡單的顏色和字體就足夠了,如果你還想添加點什麼,儘量選擇簡單的圖案。扁平化設計尤其對一些做零售的網站幫助巨大,它能很有效的把商品組織起來,以簡單但合理方式排列。

這裏寫圖片描述

二、扁平化設計方法
1、元素
按鈕

當使用邊框,梯度和下陰影來創建一個按鈕,就是使得這些元素在背景與內容中很顯眼。這使按鈕很好辨認爲一個可以點擊的元素。

當創建一個扁平的按鈕,你就不能應用這些細節,所以我們的焦點應該放在佈局的組織和顏色的差異上。當然,你只要你能保持按鈕的扁平外觀,你也可以使用斜邊和陰影,但是你會想使這些控件變得儘可能的簡潔。

表格

在扁平設計裏,表格是一個關鍵的元素。文本區域,輸入欄和下拉欄都不能按照它們默認的做法插入陰影。如果你想完全地控制這些元素,你可以使用一個支持主題的插件,比如uniformjs並應用你想要的主題樣式,甚至可以自己創建一些主題。

字體

字體是扁平化設計裏非常重要的元素。由於界面更加簡潔,你可以使用字體幫你創建你期望的風格和基調。你可以對扁平化設計的框架只使用定製的並且特定的字體來設置基調。由於背景簡單,字體就會突出並且本身就設置了風格。

色彩

設計界面的基礎之一是定義調色板。扁平化界面設計所採用的色彩的模式與其他調色板相比傾向於更加醒目和更加明亮。扁平化UI色彩在思想上就是用這樣的理念開發的,而且是下載今天扁平化設計裏所用的某些最佳(和最流行)的色彩的好去處。

2、步驟:梳理重要信息,設計整體方案,確認選色、創意及具體內容等

網站信息梳理工作是非常重要,一個網站的首頁如果被各式各樣繁雜的信息塞的滿滿當當,被就可能次要的信息沖淡了重要信息的比重,信息的主次得不到體現,訪問者在瀏覽過網站很難對主要信息留下深刻的印象。
而扁平化的設計就是要體現簡潔、乾淨的特點,以便更好地突出重點。
網站的信息確定之後,我們就可以着手來制定更爲詳細的設計方案。首先需要確定的是版式,也就是網站的佈局。
在扁平化風格的設計中,由於設計中常使用特別簡單的元素,所以排版和選色就變得非常重要。認真設計排版和選色,就可以使得整個設計更加出彩。

發佈了35 篇原創文章 · 獲贊 97 · 訪問量 27萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章