扁平化图片是什么意思-扁平化设计：起源、问题与扁平2.0

艺术,或者美学上的东西,大多与时代的方方面面相关,如果粗暴地把扁平化流行的原因归于信息爆炸时代人们对简洁明了的表现风格的青睐会有失偏颇。事实上,网页、APP开屏等方面的应用,为扁平化风格插画的流行起到了绝对的推进作用。视觉上简单、干净,矢量格式又使其体积很小,扁平化风格就这样被广泛运用我们生活中的点点滴滴了。

扁平化不还原事物的本来面目,它只提炼事物特点,用简练概括的造型将事物直白地表现出来。前面说过,信息爆炸不是扁平风格流行的主要原因,但话说回来,随着人的大脑每天要接受的图片信息越来越多,使用最直接了当的图形,配上鲜明的、干脆的色彩来传递信息也是极好的选择。

拼接的图形

扁平风插画被提炼出的造型多是几何形态。虽然单一的几何图形方便使用且容易把控,但所呈现的效果也相对死板,缺乏灵气。

在实际创作过程中,为了增添画面的生动性和趣味性,常运用三到四个几何图形拼接组合,以其中一种几何图形作为主要的构成元素,剩余的几何图形在造型上与主要的构成元素保持一定的相似性,这样的拼接组合既可以保证画面结构的主次秩序,又能在统一中产生灵动的变化。

明快的纯色

通常来说,简化的造型比较适宜使用平涂式的纯色块来表现,以保持造型和色彩之间的平衡,创造干净并且严格的视觉层次。且因为造型扁平,配色上适用对比强烈的纯色进行搭配,让明亮的色彩对比支持快速视觉感知,营造视觉上张力,弥补造型上的单薄。

统一的角度

扁平化插画在事物的造型上是一直做减法的,甚至纯粹的扁平风格属于完全放弃透视语言的一种表现手法。所以,绘制扁平插画要注意角度的统一,而统一角度,也是简化造型的实用技巧。

相对而言,一件扁平化风格的插画作品里没有什么艰涩的技术含量,需要掌握无非几个要点:把物体整体及每一处细节都块面化;注意块面之间的层级关系,即前后遮挡关系和包含与被包含关系;边缘处要利落干净,注意细节。

除此之外,再多点儿耐心就是了。

【前言】扁平化设计是一种自2012年开始流行开来的网页设计风格、至今仍广泛使用。但滥用扁平化设计可能导致严重的可用性问题,其中最大的问题是这种设计缺少可点击的视觉标识。扁平2.0在这方面则可以有更好的变现。

扁平化设计是一种流行的设计风格,采用这种设计风格的网页中没有光泽或者三维视觉效果的图形元素。许多设计师认为,这是极简设计的分支。

扁平化设计常被视为是3D效果、纹理与写实主义设计风格的对立面。一个真正的扁平UI完全不会出现任何的3D效果、纹理或写实主义风格的元素。

3D效果为界面带来深度错觉,帮助用户形成视觉层次并知晓哪些元素是可交互的。

早期的界面中,伪3D效果(阴影、梯度和高光)来使可操作元素一目了然。然而,这种伪3D效果冲击性太强、过于厚重而容易分散用户注意力。

纹理是指界面设计时使用的那些用于模仿真实世界的装饰性设计。纹理设计想要做到的是,让用户可以借助已有经验去迅速理解所接触到的全新产品界面。

写实主义是指模仿真实物件或者其审美性的纹理的设计风格。

纹理设计常常与写实主义相混淆。我们常在网页设计中见到这两者的混合使用。两者的主要区别是:写实主义的目的纯粹是满足审美需要,而纹理设计则希望借助隐喻来帮助用户理解界面。

2011年,微软Metro design设计风格和Windows 8的发布极大地推动了扁平化设计的流行。微软文档将新设计风格描述为“真实的数字化”(authentically digital)――这一描述巧妙地提升了扁平化设计对设计师的吸引力。不同于纹理设计,扁平化设计被看着是对数据化媒介的探索,而不是真实物理世界的重复。

苹果官网页面的扁平化成为这一趋势风向标。苹果一直坚持的是纹理设计和写实主义设计,直到2013年,苹果官网才转变成扁平风格。

自2011年扁平化设计提出开始,Nielsen Norman Group便公开批评其可用性问题(见链接 vocal critic of its inherent usability issues  )。其最主要的观点是扁平化设计为了追求美学的时尚而牺牲了用户的需求。

多年来,用户已经习惯了传统的点击标识,比如蓝色字体、下划线链接或带3D效果的按钮。随着设计趋势的改变、用户接触到新的设计原型,用户识别可链接可点击元素的能力也在进化,但这并不意味着我们可以完全抛弃这些可点击线索。

当我们问一个22岁的加拿大人,她是如何知道网站的可点击元素的时,她给出了如下回答:

“最初可点击样式,无论文字或其他元素,蓝色、有下划线就表示可点击。但是……有下划线时会特别有帮助。或者是一个按钮……不必说点这里……只需要说立即购买、购买或添加到购物车即可。”

这句话形象地说明了人们是如何利用线索来判断可点击性的:

如果您的网站想要变得更加扁平,为避免影响用户快速找到可点击元素,请遵照我们的点击元素设计指南(译者注:原文另附,要点翻译如下):

1、最安全的颜色为蓝色,其他颜色也可选择;

2、下划线并不是必须的,比如导航菜单就不需要。

3、请测试你的超链接颜色,确保色盲色弱者能正常使用;

4、超链接(或其他科点击元素)以外的任何地方,请勿使用你定义的超链接颜色,也不要

不要使用蓝色字体或下划线;

5、请保持全站超链接样式的一致性。

1、请确保你的按钮看起来像真正的按钮。必须有正确的视觉线索来帮助用户快速识别按钮。如果你使用3D效果,那么按钮建议设置为矩形;如果使用扁平化设计,也要确保它看起来可点击。

2、不可点击的元素,请避免其看起来像按钮。比如为标题文字添加了黑色的背景,就会给人以按钮的感觉。

3、请留意页面的内容层次,避免为用户带来五花八门的按钮。这样用户无法区分。

1、让小图片在点击时有视觉反馈,比如图片变大。

2、要充分利用图片、ICON、文本等元素,来扩大可点击区域、提高用户的点击意愿。

3、请不要为图片设置过多的行动召唤按钮(CTA),除非图片里清晰地呈现了超链接列表(或按钮)。

1、如果要使用icon图片链接,请确保其清晰可识别。

2、请尽量为icon添加文本等可点击的视觉线索,除非你所使用的icon识别性很高或已成为行业惯例。

注:此处只介绍要点。详细解释和案例,请访问文末链接:可点击性设计指南。

最近,设计师们开始意识到扁平化设计中的可用性问题。因此一个更为成熟和平衡的扁平化设计开始成型。设计师们发现可以在探索“真实的数字化”的独特机会的同时,不会损害可用性。

这样的扁平化设计也被称为“半扁平”( semi flat ),“准扁平”( almost

flat)或“扁平2.0”。这种风格的设计几乎扁平,但使用了微妙的阴影、高光和布局设计来创建用户界面的深度。

谷歌的材料设计语言是扁平2.0的一个例子:它借助遵循物理学原理的隐喻和原则,去帮助用户理解界面及其视觉层次。

Evernote Android 版是一个扁平2.0的优秀案例。尽管大部分死扁平UI,这个APP在导航栏和FAB按钮(the floating plus button“+”)中添加了微妙的阴影。在内容展示方面,它采用了卡片隐喻方式提供了扁平而有层次的三维空间。

早期伪3D GUI和史蒂夫・乔布斯式的纹理设计往往产生沉重的的界面。去除这些沉重的元素有利于提升可用性。但磨平视觉差异、完全扁平化也会走向另一个坏的极端。扁平2.0则为我们设计出既易于使用又简洁的界面,提供了可能。

扁平化设计的大要点 5 如今设计界最炙手可热的明星大概就是扁平化设计了吧,关于它的讨论至今都没有冷却的迹象。诸多设计师分成了 泾渭分明的两个阵营,一边努力把扁平化做到极致,一面对其丌屑一顾。 那么,扁平化究竟该怎么实现怎么应用呢?下文将要做的就是分析扁平化的五个最典型的特征,同时也介绍一下伪 扁平化(丌含贬义,只是一种折衷的设计方式) 。 一 、拒绝特效 扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面, 丌叫扁平化都浪费这个词了。 这个概念最核心的地方就是放弃一切装饰效果, 诸如阴影、 透视、 纹理、 渐变等等能做出 3D 效果的元素一概不用。 所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。 这一设计趋势极力避免任何拟物化的元素,这导致这一设计风格在其它平台有时候显得突兀,前景图片、按钮、文 本和导航栏不背景图片格格丌入,各成一派。那么,扁平化的效果如何呢? 因为这种设计有着鲜明的视觉效果,它所使用的元素Y间有清晰的层次和布局,这使得用户能直观的了解每个元素 的作用以及交互方式。如今从网页到手机应用无丌在使用扁平化的设计风格,尤其在手机上,因为屏幕的限制,使 得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。 二 、界面元素 扁平化设计通常采用许多简单的用户界面元素,诸如按钮或者图标Y类。设计师们通常坚持使用简单的外形(矩形 或者圆形) ,并且尽量突出外形,这些元素一律为直角(极少的一些为圆角) 。 这些用户界面元素方便用户点击,这能极大的减少用户学习新交互方式的成本,因为用户凭经验就能大概知道每个 按钮的作用。 此外,扁平化除了简单的形状Y外,还包括大胆的配色。但是需要注意的是,扁平化设计不是说简单的搞些形状和 颜色搭配起来就行,它和其他设计风格一样,是由许多的概念不方法组成的。 三 、优化排版 由于扁平化设计的使用特别简单的元素,排版就成了很重要的一环,排版好坏直接影响视觉效果,甚至可能间接影 响用户体验。 字体是排版中很重要的一部分,和其他元素相辅相成。想想看,一款花体字在扁平化的界面里得有多突兀。上图是 一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分Y众多,其中有些字体会在特殊的情景下会有意想 丌到的效果。但注意,过犹丌及,不要使用那些极为生僻的字体,因为保丌齐它就把你带坑里了。 如何使用字体也是一门学问,要学会让不同的字体表达不同的概念,通过字体告诉用户这某一设计/功能的含义, 努力使字体成为你简化设计的有力武器。 四 、 如何配色 扁平化设计中,配色貌似是最重要的一环,扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时,扁平化设 计中的配色还意味着更多的色调。比如,其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到 八种。 而且扁平化设计中,往往倾向于使用单色调,尤其是纯色,并且丌做任何淡化或柔化处理(最受欢迎的颜色是纯色 和二次色) 。另外还有一些颜色也挺受欢迎,如复古色(浅橙、紫色、绿色、蓝色等) 。 五 、最简方案 设计师要尽量简化自己的设计方案,避免丌必要的元素在设计中出现。简单的颜色和字体就足够了,如果你还想添 加点什么,尽量选择简单的图案。 扁平化设计尤其对一些做零售的网站帮助巨大,它能很有效的把商品组织起来,以简单但合理方式排列。 另:伪扁平化设计范例: 有一种趋势值得关注,一些设计师把某一项特效融入整体的扁平化Y中,是其成为一种独特的效果。比如说,在简 单的按钮加一点点渐变或阴影,从而使这种风格成为其特色,产生出一种扁平化设计的变种。这种设计要比单纯的 扁平化更具有适用性和灵活性。 许多设计师比较喜欢这种设计,因为这意味着他们可以加点阴影或透视在某些元素上。用户可能也会喜欢这种稍微 圆滑一点的设计方式,这能引导他们行一些适当的交互。