設計

扁平化設計

從iPhone iOS 7版本採用扁平化設計之後,扁平化設計(Flat Design)變成相當熱門的設計概念,無論是UI或是網站甚至到平面美術,扁平化設計已經逐漸影響到許多設計的風格。

而扁平化設計的概念除了簡化之外,就是讓整個視覺看起來是平的,但如果我們進一步觀察,可以從現代“扁平化設計”中看見”網格設計”的精神,因此若要進一步了解扁平化設計,我們可以從以下幾個設計方向開始。

1.網格設計

網格設計又稱為瑞士平面設計風格(Swiss Design)或國際主義平面設計風格(International Typographic Style)[1],是以瑞士為中心的瑞士平面設計風格發揚了這類設計。瑞士平面設計風格是受到構成主義的影響,透過網格的佈局讓畫面產生區塊的設計,非常適合海報、書籍排版、報紙直到近幾年網頁設計的排版也開始受到網格設計的影響。

瑞士平面設計風格
瑞士平面設計風格(網格設計)

來源:http://make.lucienlee.cc/how-to-use-gird-systems-to-design-web/

2.字體

字體設計是設計風格很重要的元素,扁平化設計與網格設計有著密不可分的關係,因此字體設計方面就可以選擇無襯線字(Sand-serif)[2]。

我們可以從維基百科的資料得知,目前比較標準的字體例如Helvetica(瑞士體), Arial和Univers體等,無襯線字體的特色在於,筆畫筆直,字體寬度較為一致。因此若是要使用中文字體設計扁平化風格,比較接近無襯線字的字體就建議選擇黑體字。

Helvetica(瑞士體)
Helvetica(瑞士體)

來源:http://en.wikipedia.org/wiki/Helvetica_(film)

3.色彩

扁平化設計經常會使用到許多鮮明的色彩,目前的色彩大概可以分為復古配色與現代配色兩個大方向。

從設計角度來觀察,扁平化設計無論是色塊、文字或是圖形符號,都非常需要色彩應用,例如同色系配色,或是相近色配色等,但色彩的選擇上仍然會有限制,這是值得去注意的地方。

所以好的扁平化設計除了字體的選擇之外,用色的配置也是成功的關鍵之一。

扁平化色彩
扁平化色彩

來源:https://designrockin.wordpress.com/2014/07/11/%E6%89%81%E5%B9%B3%E5%8C%96%E8%A8%AD%E8%A8%88%E7%9A%84%E6%B5%81%E8%A1%8C%E9%85%8D%E8%89%B2%E6%96%B9%E6%A1%88/

4.圖形簡化

幾何圖形與線條是扁平化風格精神之一,大部份的扁平化設計都是去除圖形的立體與陰影,經過簡化的方式產生圖形,當然最常見的就是把幾何圖形構成圖形或符號的元素,可別小看這個動作,因為簡化後的圖形與線條可以讓整個畫面一目了然。

圖形簡化
圖形簡化

來源:http://samshen0709.blogspot.tw/2013/03/flat-design-app-app-flat-design-by.html

 

備註:

[1]柵格系統 http://zh.wikipedia.org/wiki/%E6%A0%85%E6%A0%BC%E8%AE%BE%E8%AE%A1

[2]無襯線字體 http://zh.wikipedia.org/wiki/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93