開啟主選單

Wikipedia β

兩款扁平化互動介面示意圖:一台筆記型電腦與搭載iOS 7系統的平板電腦

扁平化設計是一種簡約的UI設計理念,現被廣泛套用於圖形化使用者介面上(例如網路應用程式手機應用程式),在圖形材料,例如海報,藝術作品,指導文件,各類出版物等方面尤為常用。

目錄

定義和目的編輯

扁平化作為一種互動介面的設計理念,強調對於三維效果圖像元素使用的最小化(其元素也包括陰影漸變紋理[1],亦專注於使用去除了冗餘資訊的圖像元素,排版及純色效果。現在的平面設計師可能更傾向於選擇扁平化的設計風格,這是因為此類設計可以使畫面看起來顯得更為流線型,更加平滑,資訊處理的效率也會更高(對此亦有人持反論[2])。其次,這種設計也使人們一眼看上去就知道了介面所傳達的資訊,兼顧了視覺上的親和力和耐看性[3]。與此同時,在不同螢幕尺寸的電子裝置上,扁平化的介面能夠更好地實現畫面尺寸的轉化。正是因為扁平化僅僅使用了簡單的設計元素,所以使用這一設計的網頁會載入得更快,畫面大小的調整也更加輕鬆,在高解析度的螢幕上各種資訊和元素仍然十分醒目。作為一種設計理念,人們經常會將之與仿真設計和富含構思風格進行對比。 [4] [1]

歷史編輯

扁平化設計起初是受到了國際印刷風格英語International Typographic Style(又名:瑞士風格、國際主義平面設計風格[5])、文字使用者介面英語Text-based user interface現代主義,以及包浩斯(Bauhaus)新興風格的影響[1][6][7][8]。其中,人們普遍認為國際印刷風格對扁平化設計理念的影響是最為深遠的,上世紀50、60年代的設計風格被認為是扁平化設計的開山鼻祖,但到後來的數位時代卻又銷聲匿跡了。[9]

2002年,美國微軟公司發布的Windows媒體中心(Windows Media Center)和2006年發布的Zune MP3播放器都包含了扁平化設計的元素。Zune的介面設計風格顯得十分簡約,其介面出現了大號的小字型排版,剪影風格的LOGO和純色風格的字型顏色。之後在2010年發布的Windows Phone 7里,微軟延續了Zune MP3這一設計理念,其中出現了大尺寸、清新明亮的風格、無襯線字型、扁平化的圖示,以及網格狀的清單。Windows Phone 7的介面設計大獲成功、廣受好評,因此微軟公司之後又發布了基於Metro介面的作業系統Windows 8。這款系統也同樣擁有扁平化的介面。而在網頁互動介面的設計中,純色效果,簡約式的字型、長陰影、和「幽靈按鈕」都是至關重要的設計元素,而其主要的設計則包括網格狀清單,銳邊風格,明亮的色彩和清晰的排版。微軟公司目前已經將旗下的諸多產品轉移到了Metro介面中,包括Xbox 360Microsoft Office微軟公司的各類網站。[1]

2013年美國蘋果公司發布了iOS 7,其介面首次採用扁平化的設計[10],一改之前舊版本的仿真設計風格。

運用範例編輯

時下常見的扁平化設計的案例包括微軟的Metro介面[11],以及蘋果公司iOS 7的互動介面。

Google公司產品介面的質感設計(包括App網頁等)[12]雖然運用到了一些仿真設計的元素,如長陰影,但仍然可以視為一種扁平化的設計。[13][14]

參考資料編輯

  1. ^ 1.0 1.1 1.2 1.3 Turner, Amber Leigh. The history of flat design: How efficiency and minimalism turned the digital world flat. The Next Web. March 19, 2014 [April 11, 2014]. 
  2. ^ 扁平化設計增加用戶 22% 的導航時間
  3. ^ Clum, Luke. A Look at Flat Design and Why It's Significant. UX Magazine. May 13, 2013 [April 11, 2014]. 
  4. ^ Yair Grinberg. iOS 7, Windows 8, and flat design: In defense of skeuomorphism. VentureBeat. September 11, 2013 [April 13, 2014]. 
  5. ^ 關於扁平化設計,你需要知道這些
  6. ^ Diogo Terror. Lessons From Swiss Style Graphic Design. Smashing magazine. July 17, 2009 [March 28, 2014]. 
  7. ^ A brief history of flat design. Tech Samurais. July 31, 2013. 
  8. ^ Xavier Bertels. The History of Flat Design. Wolf’s Little Store. March 5, 2014 [December 23, 2014]. (原始內容存檔於2014年12月23日). 
  9. ^ Taimur Asghar. The True History of Flat Design. Web Design Ai. July 9, 2014. 
  10. ^ Verve. The History of Flat Design. Infographics. August 17, 2015. 
  11. ^ Kelsey Campbell-Dollaghan. What Is Flat Design?. Gizmodo Australia. May 27, 2013 [April 13, 2014]. 
  12. ^ Summers, Nick. 9 Principles Google Created for its 『Material Design』 UI Refresh. 2014-06-26 [2016-07-04] (美國英語). 
  13. ^ Flat Design vs. Material Design: How Are They Different? - Designmodo. 2015-04-10 [2016-07-04] (美國英語). 
  14. ^ Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe. Adobe Dreamweaver Team Blog. [2016-07-04]. 

外部連結編輯