跟随这10个趋势，你可以在2018年设计出出众的网页

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

年底最后一个月是总结头一年，思考和展望下一年的月份。经过2017年一整年的沉淀和总结，在最近的这些设计作品，重设计甚至小幅度的设计改版中，窥见一些即将在2018年流行开来的设计趋势。在网页设计上，这些设计趋势将会深刻地影响着设计师们接下来的设计方向。

1、不对称网格

完美对称的时代已经过去了。虽然分屏设计在2017年流行得一塌糊涂，但是这一趋势在逐步的沉淀和演进之下，开始有了新的变化。

均匀的对称式布局并没有非对称式的分屏设计有表现力，这促使不对称网格开始逐渐流行开来。

为了使得不对称的设计更为有效，设计师需要一些独特的元素让不对称的网格下，整体设计是足够平衡的。在整体布局下，留白，文本和图片等视觉元素需要进行合理的配比，在吸引用户的同时，不至于失衡。

而网格也是这种设计中必不可少的组成部分。虽然整体上不对称，但是网格的约束下，能让各个元素各司其职，不至于随意摆放以致失控。

2、更多明亮的色彩

这两年霓虹色着实是狠狠地流行了一把，并且就目前来看，它依然非常坚挺地站在流行的最前沿。对于扁平化设计和Material Design，明亮的色彩同样是非常重要的组成部分。

撇开扁平化设计，大胆明亮的色彩也始终是引人瞩目的，它们会吸引人进入设计，关注设计。明亮的色彩如果用好了，能够成就品牌和产品，为网站和APP创造独特的氛围和气质，营造出令人着迷的情绪和体验。

3、底部悬浮固定元素

曾经流行于APP和移动端网页底部的小广告开始越来越多地出现于桌面端的网站了。而有意思的地方在于，出现得越来越多的不仅仅是广告，还有对话框，弹出框，通知，甚至导航栏。

用户阅读的习惯使得底部的这个位置并不会第一时刻进入用户视野，但是它是主要的视野区域，并且不具备明显的视觉侵略性，更容易被接受。被悬浮固定在屏幕底部的内容比起弹出的大面积广告以及顶部广告要来的更加自然，不会遮盖到主要内容，更为有效。

4、语音交互和语义搜索

可以想见的是，网页设计的未来不会是100%纯视觉的，其中或多或少会设计到音频。

从设计可以被「听到」的界面，到可以理解自然语义的搜索工具，语音的输入将会成为网页交互的一个组成部分。就目前来看，技术上自然语言和语义并不那么容易被计算机争取而完整地理解，相应的技术也还没有那么受欢迎，但是语音交互和语义搜索只会越来越流行，也许你需要注意一下这些技术的走向，以便你在接下来的项目中使用到它们。

5、动态图形

虽然即将过去的2017年当中，锐利的多边形和多样的几何形状在网页中出现频率很高，但是我们可以观察到，结合动态效果的柔和的图形倒是越来越流行了。

边缘平滑的设计元素是多边形元素的自然进化。多边形大多以扁平、二维的形态出现，而随着动态效果越来越多地出现在网页设计当中，带有三维效果的动态图形自然而然就成为网页设计师的心头好。

和多边形相似，流畅的动态图形有着明显的装饰性，对于网页风格和体验的提升很明细那，而区别在于动态图形时髦值更高，没有尖锐的棱角，也更加具有亲和力与动感。

6、微妙的动画

小巧微妙的动态效果不仅能够取悦用户，有的时候甚至会给他们带来惊喜。动效如今已经是网页和UI设计中必备的组成部分，它们同样可以为用户提供信息，积极地引导用户交互。

微妙的动效本身并不是为了隐藏加载的过程和数据处理的过程，而是为了强调运动本身。

无论是悬停触发的动态图片，还是看起来很复杂的插画动效，它们都是促进用户交互的重要手段。为了充分运用微妙的动效，设计师在使用的时候要遵循一些最基本的规则：坚持使用一种动效技巧，尽可能保持逼真，模仿现实世界的物理定律，不要强行为动效配音，尽量确保动效可靠，不要过慢，让用户能够预期到它的完成。

7、SVG图片

可缩放的矢量图形正越来越多地运用在网页设计当中。SVG格式是一种轻量级的矢量图片格式，这种格式的图片大小通常不会太大，而且无论是大屏幕还是小屏幕上都能像素完美地呈现出来。

无论是3D图片、动态图片还是标志logo，SVG都能够很好地展现，它是图片格式的未来。

8、兼容桌面端和移动端分屏展示

分屏式设计同样是越来越受欢迎的设计技巧。分屏式设计能够让设计师更好地兼顾到桌面端和移动端的体验，因为内容的展示更加自由，可以拆分合并堆叠展示，让内容的呈现更加一致，体验也更加可控。

虽然许多早期的分屏展示是针对不同平台进行定制的，但是如今的分屏设计已经可以相对完美地同响应式设计结合起来。

9、更多滚动动效

视差滚动已经非常流行了，以至于有些设计师开始有意识地规避这种「流行」。但是这并不意味着你需要绕靠滚动动效。

通过滚动动效来驱动用户参与交互是颇为不错的方法。适当的混合一些视差特效，常常能够获得奇效。比如上面的Doggo for Hire 这个页面就巧妙地使用视差滚动特效。

10、非极简风下的留白

许多优秀的设计都借助留白来达到效果的。但是许多时候会因为设计需求而妥协，无法使用简约的设计风格。但是留白依然很好用，通过增加更多的色彩和设计元素，保持留白比例，增加整个设计的饱满感。这种情况下，留白并不少，被留白所包围的元素同样会显得突出而不会拥挤。

Design Calendar 这个网站在这方面就做的比较突出。网站采用了彩色的背景，虽然页面中内容元素不少，但是留白营造出了足够的呼吸感。

结语

随着新需求的诞生，每年都会有新的趋势和新的设计技巧涌现，想要让自己的设计不过时，设计师需要密切的关注趋势的改变。在即将到来的2018年，你可能要有意识地改变你的设计了。

【这些趋势好文，让你的设计走到用户心里】

1. 《这3种独特的趋势，能让网页设计增色不少》
2. 《2017年最后几个月，网页设计师值得注意的趋势》
3. 《这3个流行趋势虽然好，但依然要注意这些细节》
4. 《看了那么多的设计趋势，你知道怎么落地实践吗？》

本文由木子设计网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：https://www.muzisucai.com/