本页使用了标题或全文手工转换

扁平化设计

维基百科,自由的百科全书
跳转至: 导航搜索
两款扁平化交互界面示意图:一台笔记型电脑与搭載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的交互界面。

谷歌公司产品界面的质感设计(包括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]. 
  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] (American English). 
  13. ^ Flat Design vs. Material Design: How Are They Different? - Designmodo. 2015-04-10 [2016-07-04] (American English). 
  14. ^ Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe. Adobe Dreamweaver Team Blog. [2016-07-04]. 

外部链接[编辑]