扁平化設計
扁平化設計是一種簡約的UI設計語言，現被廣泛套用於圖形化使用者介面上（例如網絡應用程式和手機應用程式），在圖形材料，例如海報，藝術作品，指導文件，各類出版物等方面尤為常用。
定義和目的
扁平化作為一種互動介面的設計理念，強調對於三維效果圖像元素使用的最小化（其元素也包括陰影、漸變和紋理）[1]，亦專注於使用去除了冗餘資訊的圖像元素，排版及純色效果。現在的平面設計師可能更傾向於選擇扁平化的設計風格，這是因為此類設計可以使畫面看起來顯得更為流線型，更加平滑，資訊處理的效率也會更高。其次，這種設計也使人們一眼看上去就知道了介面所傳達的資訊，兼顧了視覺上的親和力和耐看性[2]。與此同時，在不同螢幕尺寸的電子裝置上，扁平化的介面能夠更好地實現畫面尺寸的轉化。正是因為扁平化僅僅使用了簡單的設計元素，所以使用這一設計的網頁會載入得更快，畫面大小的調整也更加輕鬆，在高解像度的螢幕上各種資訊和元素仍然十分醒目。作為一種設計理念，人們經常會將之與仿真設計和富含構思風格進行對比。 [3] [1]
歷史
扁平化設計起初是受到了國際印刷風格（又名：瑞士風格、國際主義平面設計風格[4]）、文字用戶介面，現代主義，以及包豪斯（Bauhaus）新興風格的影響[1][5][6][7]。當中人們普遍認為國際印刷風格對扁平化設計理念的影響是最為深遠的，上世紀50、60年代的設計風格被認為是扁平化設計的開山鼻祖，但到後來的數碼時代卻又銷聲匿跡了。[8]
2002年，美國微軟公司發佈的Windows媒體中心（Windows Media Center）和2006年發佈的Zune MP3播放器都包含了扁平化設計的元素。Zune的介面設計風格顯得十分簡約，其介面出現了大號的小字型排版，剪影風格的LOGO和純色風格的字型顏色。之後在2010年發佈的Windows Phone 7里，微軟延續了Zune MP3這一設計理念，其中出現了大尺寸、清新明亮的風格、無襯線字型、扁平化的圖示，以及網格狀的清單。Windows Phone 7的介面設計大獲成功、廣受好評，因此微軟公司之後又發佈了基於Metro介面的作業系統Windows 8。這款系統也同樣擁有扁平化的介面。而在網頁互動介面的設計中，純色效果，簡約式的字型、長陰影、和「幽靈按鈕」都是至關重要的設計元素，而其主要的設計則包括網格狀清單，銳邊風格，明亮的色彩和清晰的排版。微軟公司目前已經將旗下的諸多產品轉移到了Metro介面中，包括Xbox 360、Microsoft Office 和微軟公司的各類網站。[1]
2013年美國蘋果公司發佈了iOS 7，其介面首次採用扁平化的設計[9]，一改之前舊版本的仿真設計風格。
運用範例
時下常見的扁平化設計的案例包括微軟的Metro介面[10]，以及蘋果公司iOS 7的互動介面。
谷歌公司產品介面的質感設計（包括App、網頁等）[11]雖然運用到了一些仿真設計的元素，如長陰影，但仍然可以視為一種扁平化的設計。[12][13]
爭議
尼爾森諾曼集團的研究發現，扁平化設計可能導致使用者的導航時間增加達22%[14]。
參考資料
- ^ 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]. （原始內容存檔於2014-10-16）.
- ^ Clum, Luke. A Look at Flat Design and Why It's Significant. UX Magazine. May 13, 2013 [April 11, 2014]. （原始內容存檔於2016-02-06）.
- ^ Yair Grinberg. iOS 7, Windows 8, and flat design: In defense of skeuomorphism. VentureBeat. September 11, 2013 [April 13, 2014]. （原始內容存檔於2016-04-29）.
- ^ 關於扁平化設計，你需要知道這些. [2016-09-05]. （原始內容存檔於2016-09-16）.
- ^ Diogo Terror. Lessons From Swiss Style Graphic Design. Smashing magazine. July 17, 2009 [March 28, 2014]. （原始內容存檔於2015-06-24）.
- ^ A brief history of flat design. Tech Samurais. July 31, 2013 [2016-07-02]. （原始內容存檔於2014-10-02）.
- ^ Xavier Bertels. The History of Flat Design. Wolf’s Little Store. March 5, 2014 [December 23, 2014]. （原始內容存檔於2014年12月23日）.
- ^ Taimur Asghar. The True History of Flat Design. Web Design Ai. July 9, 2014 [2016-09-03]. （原始內容存檔於2014-09-13）.
- ^ Verve. The History of Flat Design. Infographics. August 17, 2015 [2016-09-03]. （原始內容存檔於2015-09-06）.
- ^ Kelsey Campbell-Dollaghan. What Is Flat Design?. Gizmodo Australia. May 27, 2013 [April 13, 2014]. （原始內容存檔於2016-03-03）.
- ^ Summers, Nick. 9 Principles Google Created for its ‘Material Design’ UI Refresh. 2014-06-26 [2016-07-04]. （原始內容存檔於2016-06-29） （美國英語）.
- ^ Flat Design vs. Material Design: How Are They Different? - Designmodo. 2015-04-10 [2016-07-04]. （原始內容存檔於2016-07-04） （美國英語）.
- ^ Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe. Adobe Dreamweaver Team Blog. [2016-07-04]. （原始內容存檔於2016-08-22）.
- ^ 扁平化設計增加用戶 22% 的導航時間. [2017-09-09]. （原始內容存檔於2017-09-09）.