扁平化设计

扁平化设计是一种简约的UI设计語言，现被广泛应用于图形用户界面上（例如网络应用程序和手机应用程序），在图形材料，例如海报，艺术作品，指导文档，各类出版物等方面尤为常用。

两款扁平化交互界面示意图：一台笔记型电脑与搭載iOS 7系统的平板电脑

定义和目的

扁平化作为一种交互界面的设计理念，强调对于三维效果图像元素使用的最小化（其元素也包括阴影、渐变和纹理）^[1]，亦专注于使用去除了冗余信息的图像元素，排版及纯色效果。现在的平面设计师可能更倾向于选择扁平化的设计风格，这是因为此类设计可以使画面看起来显得更为流线型，更加平滑，信息处理的效率也会更高。其次，这种设计也使人们一眼看上去就知道了界面所传达的信息，兼顾了视觉上的亲和力和耐看性^[2]。与此同时，在不同屏幕尺寸的电子设备上，扁平化的界面能够更好地实现画面尺寸的转化。正是因为扁平化仅仅使用了简单的设计元素，所以使用这一设计的网页会加载得更快，画面大小的调整也更加轻松，在高分辨率的屏幕上各种信息和元素仍然十分醒目。作为一种设计理念，人们经常会将之与仿真设计和富含构思风格进行对比。 ^{[3] [1]}

历史

扁平化设计起初是受到了國際印刷風格（又名：瑞士风格、國際主義平面設計風格^[4]）、文本用户界面（英语：Text-based user interface），现代主义，以及包豪斯（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. 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）. 
2. Clum, Luke. A Look at Flat Design and Why It's Significant. UX Magazine. May 13, 2013 [April 11, 2014]. （原始内容于2016-02-06）. 
3. Yair Grinberg. iOS 7, Windows 8, and flat design: In defense of skeuomorphism. VentureBeat. September 11, 2013 [April 13, 2014]. （原始内容于2016-04-29）. 
4. . [2016-09-05]. （原始内容存档于2016-09-16）. 
5. Diogo Terror. Lessons From Swiss Style Graphic Design. Smashing magazine. July 17, 2009 [March 28, 2014]. （原始内容于2015-06-24）. 
6. A brief history of flat design. Tech Samurais. July 31, 2013 [2016-07-02]. （原始内容于2014-10-02）. 
7. Xavier Bertels. . Wolf’s Little Store. March 5, 2014 [December 23, 2014]. （原始内容存档于2014年12月23日）. 
8. Taimur Asghar. The True History of Flat Design. Web Design Ai. July 9, 2014 [2016-09-03]. （原始内容于2014-09-13）. 
9. Verve. The History of Flat Design. Infographics. August 17, 2015 [2016-09-03]. （原始内容于2015-09-06）. 
10. Kelsey Campbell-Dollaghan. What Is Flat Design?. Gizmodo Australia. May 27, 2013 [April 13, 2014]. （原始内容于2016-03-03）. 
11. Summers, Nick. 9 Principles Google Created for its ‘Material Design’ UI Refresh. 2014-06-26 [2016-07-04]. （原始内容于2016-06-29） （美国英语）. 
12. Flat Design vs. Material Design: How Are They Different? - Designmodo. 2015-04-10 [2016-07-04]. （原始内容于2016-07-04） （美国英语）. 
13. Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe. Adobe Dreamweaver Team Blog. [2016-07-04]. （原始内容于2016-08-22）. 
14. 扁平化設計增加用戶 22% 的導航時間. [2017-09-09]. （原始内容于2017-09-09）. 

外部链接

• http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant （页面存档备份，存于互联网档案馆）
• http://www.creativebloq.com/graphic-design/what-flat-design-3132112 （页面存档备份，存于互联网档案馆）

wooden Swings （页面存档备份，存于互联网档案馆）