2019年网页设计趋势——behance汇总

hello，大家好，我是设设发抖君。这是我发布的第一篇文章。在进入正式的文章内容之前，请允许我为这个栏目做个简单的介绍。设设发抖君，聪明的你肯定立即就能猜到这是一个和设计相关的账号。没错，注册这个账号就是为了记录一些与设计有关的点点滴滴，包括但不限于设计资讯，软件技能，职场吐槽，以及其他一些与设计相关的随想。希望能通过这些文章和各位进行或多或少的交流和互动，相互学习，共同成长。

---

2019年已经过去1/4了，进入了新的一年你的设计风格和能力是否也进入了一个新的平台呢？你是否也了解到设计上一些新的变化和趋势呢？本文节选梳理了作者在behance上看到的认为比较有代表性的一些“新”设计与各位共享。以下就从网页设计出发，一起了解一些2019网页设计的一些新趋势。从而窥一斑而知全豹，了解当前设计行业的新趋势。

虽然behance上说的是网页设计趋势，但笔者看了很多的内容之后，所谓的网页设计趋势，倒不如说是banner风格的设计趋势。但也无妨，聪明的你肯定能够触类旁通，举一反三。此外，behance上2019年设计趋势很多的风格其实也已经流行了很久。略微搜索一下，其实有相当一部分还出现在2018年设计趋势甚至2017年设计趋势的文章里。

1.三维立体/3D

作为这两年圈里最热门的词之一——3D，绝对代表目前设计圈的一个最火热的表现趋势。相对于很多纯平面的展示，3D呈现有着更丰富的细节和视觉层次，无疑能带来更震撼的视觉冲击，更能抓住用户的眼球。合理地使用三维立体的设计风格，一定能让你的页面脱颖而出。以下节选了一些网页里3D应用的例子。当然，更多的是应用在banner层面。

说的3D设计，Cinema 4D作为一款三维设计软件在这两年可谓是炙手可热。尽管作为一个UI设计师或者平面设计师，如果你说你不知道C4D，都不好意思和同行打招呼了。在这样一个3D设计潮流中，各类相关教程和文章也是多如牛毛。虽然3D设计不一定合适你当前的设计项目，但掌握一门新的技能肯定不是什么坏事。所谓技多不压身，你说呢？

2.可交互三维动画

得益于网络速度的飞速提升，设计师在网页上开始加入了更多大展拳脚，终于不用受限于网速了。这种情况下，有时候只有静态的3D banner想要让用户一见倾心可是远远不够的。在3D呈现的基础上，加入可交互式的动画，可谓是提升用户体验的大杀器。交互操作的增加大大提升了用户在网页里的参与感，通过这种参与，可以让用户获得更进一步的体验。以下同样节选一些来自behance和dribbble的优秀设计作品。

交互式的网页确实能给用户带来更有趣而与众不同的体验。但是这一切是建立在网页已经加载完成的情况。如果一味追求复杂华丽的效果而不考虑页面的加载时长，用户非常容易在焦灼的等待中流失殆尽。当然，如何合理优化网页设计资源和在等待中降低用户的焦虑感，又是另外一门话题了。

3.等距视图/Isometric

提起isometric你可能会比较陌生，但说到2.5D设计你肯定十分之熟悉了。2.5D插画在这两年非常的火爆，特别是在游戏神作《纪念碑谷》推出之后。这种风格的设计早已蔓延到了各个设计领域，成为这两年来最热的一类视觉表现了。所谓2.5D，其实就是等轴测视图。最早使用在技术制图和工程制图中，一种在二维平面呈现三维物体的方法。绘制2.5D插画并不需要设计师对空间或者透视有着多深的了解，就能轻松掌握。借助良好的配色和场景创意，非常容易出彩。以下节选一些来自behance和dribbble的优秀设计作品。

关于2.5D插图的绘制教程在网上已经有太多的人写过教程了，实现起来其实也非常容易。关键在于你有没有良好的色感和创意。笔者根据网上的教程，制作了2个Photoshop的动作文件。一键将平面的图形转化为2.5D视图的顶面和侧面。在文末附上下载链接，希望能够给你带来些许帮助。

4.更生动的颜色和渐变

在网页中应用大面积高对比高纯度的颜色和渐变，也是近期的一个流行趋势。在一个有限的页面当中，人眼对颜色的敏感程度仅次于动效。高对比高纯度的用色能让你的网页在打开的瞬间就吸引住用户的眼球。下面就来看看国外的网页是如何用出彩的配色来让自己的网页更具吸引力。

用色是一门很有意思也是很有难度的设计学问。如何使用更具吸引力的配色，同时兼顾产品定位和品牌调性，是一个视觉设计师需要综合考量的问题。网络上有很多出名的配色网站或许能够帮到你，给你提供一些参考和启发。例如Kuler，colorfavs。

5.全幅背景

用一张全屏的高清大图或者一段视频作为一个网站的banner甚至首屏已经不是什么新鲜潮流了。随着高分辨率大屏显示器的普及，这是设计方式带给用户的震撼感必然是有增无减的，毕竟分辨率和屏幕大小的提升能带来更多的细节呈现和更宽广的视野范围。

当然，只有一张静态的大图有时候会显得有些无聊和死板。尝试在网页里加入一些简单的动效和切换效果一定能给网页的用户体验带来质的提升。

6.多彩的插画

一副优秀的插画非常容易拉近网页和用户的距离。插画能够让你忽略某些现实的束缚，用更加艺术化和更有想象力的方式去表达你的产品和想法，更容易让用户产生共鸣。更加丰富的色彩使用，使得插画的吸引力和张力更进一步。

7.愉悦的动效

动效一直是提升用户体验的一大利器。无论是提高页面整体的趣味性还是减少页面跳转时用户的焦虑感，动效都能带来事半功倍的效果。合理的动效可以让整个页面的视觉效果更加鲜活，也可以很有效地捕捉到用户的注意力和视觉焦点，突出视觉重点。

最后想说两句。所谓设计潮流只是当前的一个热门设计风格的集合，新的设计风格并不一定能匹配你的产品和项目。盲目去追随潮流而不考虑项目产品的本身定位和品牌调性，到最后必然是捡了芝麻丢了西瓜，得不偿失。合适的才是最好的。热门的东西必然有它流行的原因，关注和分析新的设计趋势，给自己的设计风格和设计思维换换新鲜血液。即便不能做时代的弄潮儿，也不能一成不变，被拍死在沙滩上吧。 

本文基于behance文章《2019 Web design Trends》和《2019 Design Trends Guide》进行总结和修改，并加入了一些个人想法。

---

文章图片的作者和来源从上往下分别是：mike，Squarespace，Diatech，Theglyph，Best Served Bold，DigitalOcean，Plus-Renewable，Gradient Topography Animation，Heartbeat Agency，Cabin Fever Header Transition，Horizontal Parallax Scroll，Cuberto，human，Awwwards Conference，Zhenya Rynzhuk，

以上。

附上2.5D平面转换PS动作。