什么是扁平化设计?
扁平化设计(flat design)是指“零3D属性的设计”,它仅是二维空间的一种表现形式,即使用单纯的不加上任何三维效果的图形进行设计的风格
如今,扁平化设计风格也已成为近年来重要的设计趋势,在过去的几年当中扁平化设计经历了快速的发展,不仅在数字设计领域大放光彩,也日益普及影响到越来越多的平面设计领域。
事实上,扁平化设计(flag
design)是相对于拟物化设计而言,它简化了拟物化设计,指摒弃那些已经流行多年的高光阴影、渐变、浮雕等视觉效果,通过抽象、简化、符号化的设计来表现一种干净整洁、扁平的呈现方式,让整体界面的视觉效果变得更为统一干练。
最典型的案例是在2013年苹果公司发布的iso7 的操作系统界面,其中大量的图标运用扁平化设计风格,改变了以往拟物化界面,简单大气。
在实践中,这个词指的是平坦的设计是由那些谁已经流行了多年渐变,阴影,高光等逼真的视觉效果被遗弃的,这样就产生了一种看起来更“平”的接口。一个优点是,它是平面样式可以更直观的信息,并显示事情成功的方式,减少认知障碍。与在许多平台上的网站和应用,涵盖越来越多的不同的屏幕尺寸,创建多个屏幕大小和分辨率skeuomorphic设计既繁琐又费时。设计正朝着一个更加扁平化设计,可以保证一次对所有的屏幕尺寸会很好看。扁平设计较为简单,清晰,而且最重要的一点是更好的适应性。与扁平化设计相比较,可以说之前,在当前最流行的是skeuomorphic设计,最典型的是物化苹果IOS系统的设计,所以我们觉得虚拟和物理物体的接近程度。在该模型中的扁平设计,是目前国内最强大的Win8的Metro界面,微软不得不说的PC用户体验当之无愧的先驱,并实施这样一个大胆的尝试,不得不佩服。扁平设计案例平面设计界,我们发现Win8的Metro界面,使用一个完全平坦的设计,苹果的IOS产品和系统,我们看到一些平面设计的影子,谷歌在,我们也看到了准平坦的设计模式,并在谷歌,我们经验是好的,但作为在Win8中的地铁在评论中并没有那么乐观,所以不管什么样的设计的一部分,美国的设计是合适的,我不能说这是比平板的设计更好,这种非 - 黑色和白色的理论不适合。但我敢说扁平化设计在建筑一个非常大的优势,网页设计,只是说可以弥补多年批评兼容的,我喜欢的扁平设计。
1、扁平化设计的优势——排斥效应
所有元素的边界都是干净的,没有羽毛、渐变或阴影。这种设计趋势试图避免任何客观的设计元素,导致设计风格有时在其他平台上显得单调乏味,前景图像、按钮、文本和导航栏与背景图像不一致。
由于平面设计的戏剧性视觉效果,使用的元素之间有一个清晰的层次和布局,让用户直观的了解每个元素的作用和如何相互作用。如今,平面设计风格被广泛应用于从网页到移动应用程序,特别是在移动电话上。由于屏幕的限制,这种风格在用户体验方面更有优势。更少的按钮和选项使界面干净和易于使用。
2、扁平化设计的优势——界面元素
图形设计通常使用许多简单的用户界面元素,如按钮或图标。设计师通常坚持简单的形状(矩形或圆形),并试图强调它们。所有的形状都是直角(有些有圆角)。这些用户界面元素是可点击的,并且极大地降低了学习与用户交互的新方法的成本,因为用户可以从体验中大致了解每个按钮的作用。
除了简单的形状,扁平化还包括大胆的配色方案。然而,需要注意的是,图形设计不仅仅是形状和颜色的组合。与其他设计风格一样,它由许多概念和方法组成。
3、扁平化设计的优势——优化布局
排版已经成为设计中一个非常重要的部分,因为极其简单的元素利用了平面设计的优势。排版直接影响视觉效果,甚至可能间接影响用户体验。
字体是排版的重要组成部分,也是对其他元素的补充。考虑一下平面界面中草书字符的草书效果。无衬线字体有一个大家庭,其中一些在特殊情况下非常有效。但是不要过度使用。不要用最暗的字体,因为它会给你带来麻烦。
4、扁平化设计的优势——用鲜艳的颜色
在平面设计中,色彩搭配似乎是最重要的部分。平面设计通常使用比其他风格更明亮和耀眼的颜色。平面设计也意味着更多的颜色。例如,其他设计最多包含两到三种原色,而图形设计平均使用六到八种颜色。
平面设计的优点往往是使用单一色调,尤其是纯色,没有任何稀释或软化。还有其他流行的颜色,比如复古色。
5、扁平化设计的优势——最简单的解决方案
尽量简化设计方案,避免不必要的元素。简单的颜色和字体就足够了。如果你想添加一些东西,试着选择一个简单的模式。图形设计对于以简单、逻辑的方式有效地组织和安排产品的零售网站特别有用。
以上便是关于扁平化设计的优势介绍了,希望它能帮助我们开拓,并确定属于我们自己的设计风格,这一点非常重要。如果您想了解更多关于ui设计的相关设计技巧及素材等,可以点击本站其他文章进行学习。
扁平化设计是一种流行的设计风格,采用这种设计风格的网页中没有光泽或者三维视觉效果的图形元素。许多设计师认为,这是极简设计的分支。
扁平化设计常被视为是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则为我们设计出既易于使用又简洁的界面,提供了可能。
1.扁平化设计的要求是什么样的? 图形处理软件PS和矢量图形设计软件Illustrator可以用于图形图像处理、多媒体图像制作、互联网网页或在线制作。熟练操作绘图软件是进行设计的先决条件。
2,注意培养对颜色的敏感,擅长使用明度,色温,对比色、互补色等手段,使设计意图更清晰,迅速抓住用户的眼球,尽量避免使用颜色的相似参数,避免与用户匹配的颜色。
3.在设计过程中,尽量简化自己的设计方案,所有的元素都是干净整洁的,反对使用复杂、不清晰的元素。特别是在图标的设计上,要遵循极简主义的原则,复杂不明确的元素可能会给用户带来问题。此外,与任何一种平面艺术一样,平面设计也非常重视留白的使用,给用户足够的呼吸空间。
4. 扁平化设计的要求是什么样的?在字体的选择上,扁平化的设计要求以简洁清新为标准,以流行的字体和笔触为主要情感,避免使用甲骨文等字迹不清不清的字体,避免给用户造成阅读困难。字体设计也很重要。流畅、清晰的布局将使设计更加高效、省力。
5. 作为一个UI设计师,最常见的问题就是缺乏灵感,所以如果你想获得足够的灵感,你需要找到更多优秀的UI设计网站,有足够的材料给自己充电。
关于扁平化设计的要求,由于用户界面设计越来越流行,用户体验的地位也越来越高。只有把握用户界面的发展前景,才能称自己为优秀的用户界面设计师。后续将会有更多关于ui设计中各个分类的设计技巧与资讯,可以点击本文其他文章进行学习。