企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

一直进化的扁平化设计,2017年设计看这里

发布时间:2017-06-20 14:13:00

TAGS:北京网站设计

云智内容头图.jpgAMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

平面化 VS 拟物化 的战争已经过去好几年了。扁平化设计彻底占据了如今的主流设计趋势。但是,大局已定的扁平化设计,是否已经固化不变了呢?并非如此。在过去的几年当中,扁平化设计风悄然地进化,变得越来越多样,也越来越有吸引力。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如今再来重新审视早期的扁平化设计,渐变、阴影和纹理的缺乏,让它在视觉上显得略为单调,而几年的时间沉淀,扁平化设计中开始适时地融入了许多其他的设计元素,丰富了整个扁平化设计的思想,并且创造了不少值得一体的独特扁平化设计分支。不论你所设计的是APP还是网站,在2017年所处的这个时间节点,枝叶繁茂的扁平化设计中,总会有那么几种风味独特的设计风尚,能够让你倾心。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化设计缘起AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

曾一直被苹果公司所引领的拟物化设计风潮,在2010年的时候开始受到扁平化设计的冲击。逼真的纹理、多样的渐变和繁复的细节逐渐为人所厌倦,线条简约的2D扁平化设计开始取代“抄现实”的设计手法,一时间,是拟物还是扁平的争论充斥设计和技术圈,并快速蔓延到圈外的普通用户,各执一词,莫衷一是。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

随着乔布斯的过世、iOS 7和Android 4.0的发布,设计趋势终还是向着扁平化迈出了关键性的一步。醒目而高饱和度的色彩和形式感更强的排版取代细节和纹理成为抓人眼球的元素。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

初的扁平化设计,对于细节的剥离是非常彻底的,这使得设计师能用的元素大多只剩下色彩和图形,这种局面对于设计师和用户都是困扰,细节的缺失让设计并不足以支撑全部的信息传达,这种局面下,许多微妙的扁平化分支就诞生了。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化设计仍然是近10年来具革命性的视觉设计趋势,并且它还将一直向前推进。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Material DesignAMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

想要系统了解扁平化设计的快速发展历程,Material Design 是值得研究的案例。这一扁平化设计语言是谷歌为其旗下的数字产品的界面所创造的统一的视觉设计语言。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Material Design 吸取了扁平化设计精华的部分,还巧妙地保留了拟物化的隐喻——纸,从而创建出如今所看到的Material Design,其中扁平化的元素被加上了一个微妙的维度,其外化的表现就是微妙的阴影。贴合物理运动规律的动效和微妙的视觉维度令Material Design 仿佛能够跳出界面同用户进行互动,在扁平化的风尚之下,它让数字产品拥有了和现实世界在质感上有了某些相通的地方。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

仔细审视 Material Design ,你会发现它许多“拟物”的特征很好地软化了近乎苛刻的早期扁平化设计。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Material Design 有着明确的概念,同时又随着Google 旗下产品的演进而不断地优化和更新。从某种意义上而言,Material Design 是扁平化设计的主要和重要的推动者,如果你想第一时刻了解它的变化,你可以跟着Android 的版本更新还适时查看它的调整。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化 2.0AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化设计在几年的时间沉淀之后逐步成熟,终在2015年被设计师们阶段性地归纳为“扁平化 2.0 ”。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

“扁平化2.0 具有更强的易用性,因为它将扁平化设计的主要特征和高度可用的视觉线索结合到了一起,兼顾到设计的美观和功能。同时,扁平化2.0 的高适用性,让它几乎可以和任何概念结合起来使用。和早期的纯粹扁平化设计不同,扁平化 2.0 中融入了不少微妙的渐变和不多的纹理,提高了它的整体可用性。”AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化 2.0 的说法早源于设计师 Ryan Allen :“扁平化 2.0 是演变的结果,它并非革命性的改变。扁平化设计和之前疯狂流行的拟物化设计截然不同,而扁平化 2.0 是扁平化设计上的一个分支。如果说扁平化设计是圣诞树的话,那么扁平化 2.0 就是圣诞树上的礼盒与糖果。它并不是浮华的装饰,但是让整个圣诞树充满了趣味和惊喜。”AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化 2.0 和 Material Design 一样,打破了早期扁平化设计中的生硬规定,并且通过适度的调整让视觉效果更加吸引人了:AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

·高亮和强调AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

·适度的渐变AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

·同色系下多种色调和色度AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

·微妙的阴影AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

·更广泛的配色方案AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化 2.0 本身并不存在于UI和图标设计的世界当中,实际上它已经延伸到视频、摄影和图片当中。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2017 的扁平化设计AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

进入2017年之后,扁平化设计仍然是主流,在设计手法和细节上,随着时代的发展而演进,越来越成熟和多样。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下面,是属于2017年扁平化设计的特征:AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化元素AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

早期的许多扁平化元素在如今的扁平化设计项目中,已经并不适用了。按钮的样式比以往更加简单,圆角矩形的按钮搭配黑色或者白色的文本,在今天更加流行。LOGO和图标采用了扁平化的风格,甚至只是由线条构成,这样不仅和整体风格更搭,而且在很多时候能够突出显示。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

精简的导航AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

汉堡图标已经成为当前网站的标准配置,设计师可以将非关键因素隐藏在汉堡图标之后的菜单里面。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当然,如果你不喜欢汉堡图标导航,也可以这么玩儿:《网页|厌倦了汉堡图标,这4个替代方案也许不错》AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

大胆明亮的配色AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

由于扁平化设计对于配色的可接受性更强,网页设计有了更多的可能性。这使得如今的网页设计整体上比以往更加多彩有趣,许多网页首页甚至采用了图片+色彩叠加的设计。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当然配色这件事还是有很对技巧的:《在配色这件事情上,总会有一些有趣且有用的小技巧》AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

极简的首页设计AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

作为目前通行的设计思路,绝大多数网页不再将大量的内容塞满首页,即使拥有多个元素,也尽量让首页专注于单个任务,不再让用户在多个不同的目标或任务之间分心。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

极简的设计也有讲究:《符合极简主义风格的设计有什么讲究?》AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

更优秀的排版AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

将复杂的样式从设计中剥离之后,字体排版的形式感就更加突出了,这种局面使得设计师在进行网页设计的时候,更加倾向于通过优质的排版来强化设计感。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

更少拟物特效AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

虽然如今的动画和特效越来越多,但是稍有特效去模拟一个现实生活中的特定的交互场景或者效果,它们通常是为了功能而存在,并且专注于体验本身。从某种意义上来说,拟物化的设计并未回归。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

动效与反馈AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Material Design 是动效和反馈设计中的翘楚。将动效和反馈结合起来从而更好的引导用户、同用户沟通,这是如今交互设计和UX设计的关键。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

动效取悦用户的效果可不是盖的:《沿着这7个思路,你可以正确的使用动效取悦用户》AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

大量的留白AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在屏幕越来越大的趋势之下,通过屏幕留白来突出关键内容是极简设计中常用的手法,而在简约风盛行的今天,留白也成了许多扁平化风格网页中常见的设计手法。当然,留白并不一定非得是白色。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

扁平化图层AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

毫无装饰的扁平化图层同样存在于许多网页当中,它们能成为不同元素的载体,或者单纯的营造空间感。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

超大的设计元素AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联


AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

超大的字体,超大的图片,甚至超大的按钮和图标,都已经不是什么新鲜的设计手法了,它们借助过人的体积感和强有力的对比来制造视觉奇观,是非常有用的设计技巧。这种设计手法在早期的扁平化设计就有了,现在使用很频繁。AMN北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7231,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号