扁平化设计概述
著名艺术家Edgar Degas曾说:“艺术不是你所见,而是你所呈现。”就平面设计而言,这句话也能够被定义为艺术解决特定的任务,进一步可以理解为:你给用户所呈现的能够告诉他们做什么,清晰展示聚焦点并且帮助解决一些问题。平面设计能够通过形状和阴影、文字、间距等最微不足道的改变来传达情感和信息。在这个领域的趋势,俨然已经成为了每天生活的一部分,在现代产品设计过程中有着关键的作用。今天我们能够将我们的关注点聚焦在现代平面设计最流行的方向上—扁平化设计。
文章译自:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.tjzsd0tu4
扁平化设计的定义
时至今日,扁平化设计因为众多的目的和任务被用于设计当中,这些设计都有一些相同的风格特征。扁平化设计是一个方向,在数字艺术中呈现多样性的表达,并且因极简抽象派和视觉意味表达的简洁明了扬名圈内。由于扁平化设计的构成基础在于简洁,现在这个定义被广泛用于装饰艺术(Rich Design)的对立面。这个名称最典型的来源是应用了扁平的二维视觉细节,明显与写实风格和拟物风格区分开。随着扁平化设计的发展,其已然渗透到更广的范围领域内,并在网页端和移动端大放异彩。这种设计风格能够提高可用性和用户界面的视觉和谐度。
扁平化设计的起源
显而易见,扁平化设计的出现并非无中生有。她扎根于国际主义风格(Swiss style),设计领域的学者发现了扁平化设计的直接先驱。国际主义,亦知名于国际平面主义风格,或着简言之国际主义。国际主义风格出现并且在1920年代备受瞩目,在40、50年代的瑞士迎来曙光并且在20世纪中期成为世界范围内平面设计的坚实基础。这一创新运动的领导者是Josef
Muller Brockmann,苏黎世工艺美术学院的院长,另一奠基人则是来自巴塞尔设计学院的Armin Hofmann。根据门户网站Design is History的简要描述,扁平化风格的关键特征是:这种风格趋向于简洁、清晰和客观性。这两所学校的突出贡献是对Sansserif字体,网格和不对称布局的使用。同样重要的是字体与图像的结合来作为视觉传达的方式。主要的影响层面是海报,被视为交流的最有效的方式。
米勒代表作品 米勒代表作品 米勒代表作品 米勒代表作品这一类海报的特点也暴露出了扁平化样式存在的普遍特征,如简洁的形式,粗并且明了、高可读性的字体样式,以及基于细节,扁平化叙述和清晰视觉层次结合的和谐和几何化特征。这种特征也让她快速的在世界的不同角落迅速开花,也在21世纪早起的艺术史中迎来了新生。
尽管这种风格在印刷视觉设计的领域有多种表达,像海报、邮票、明信片、书籍装帧、杂志等等,但是她的意义在于拓展了数字化设计时代的视野,尤其是在用户界面设计的范畴。网站和移动应用的生机勃勃,成为了这种风格快速发展的吉壤,被冠名以“扁平化设计”。
首先促进扁平UI流行的数字产品是围绕的新扁平和极简风格,这一改变始于2000年早起,并被2010年的产品设计广泛接纳,代表性的是Windows Phone7的移动界面设计。扁平化设计诸如直观简单的形状、粗并且干净的字体,明亮对比的颜色,长投影,减少复杂细节和纹理的特征终于在2013年苹果iOS 7的发布进一步发展,形成了用户友好界面的基础。在Google的Material Design的设计原则中同样能够见到扁平化设计原则的身影。
微软Metro Design扁平化设计特征
(1)简单的形状和元素
(2)极简抽象艺术
(3)功能主义
(4)粗并且高可读性的字体
(5)干净并且严格的视觉层次
(6)密切关注细节
(7)明亮的色彩对比支持快速视觉感知
(8)避免纹理、渐变和复杂形式
(9)运用网格原理,几何方法和视觉平衡
扁平化设计的优点
(1)可读性和清晰性
(2)形状、颜色和字体形成了干净的视觉层次
(3)网页和移动界面快速直观导航的有效支持
(4)自适应和响应式界面的易适应性
(5)在不同屏幕上的清晰性
(6)较少内存消耗
实战:应用扁平化设计的领域
扁平化设计的成功以及其在各种设计规范中的基础地位,使其在各个领域中得以发挥作用。
1.用户体验线框图
即使在设计排版布局,逻辑层级的早期阶段,扁平化设计的原则也能够发挥作用。数字设计工具和软件在这个关键阶段的使用使得设计师能够向他们的团队展现app界面和网页页面的原型设计,这些原型呈现的特点正是基于扁平化设计原则。在这个阶段,恰恰是扁平化设计,能够给设计师提供组件化的元素,达到快速的低保真原型。
线框图扁平化组件2.UI设计
用户界面已然成为扁平化设计的天下。这种风格体现在界面、icon、界面元素以及动效上。
扁平化动效3.UI导航元素和图标
扁平图标4.品牌设计
LOGO设计 LOGO设计翻译爱好者,设计爱好者,欢迎交流,个人微信号:UXD沉与思。
UXD沉与思
网友评论