现在网页设计的趋势是什么？

在这个视频中,我将与你分享2020年网页设计趋势，和在将在大趋势中流行的神奇网站的例子,你可以让你的网站变得美丽和得到更多的用户来访问你的网站,谢谢收看。

直接说趋势吧，可以说趋势潮流之外的就是过时的网页设计。
1、多样化导航 ，自适应网页设计兴起之后，“汉堡包菜单”大行其道。
2、分裂 屏幕 ，垂直将屏幕界面分为左右相等的两块，用撞色等方式进行分割，营造清晰的视觉分离效果，这种直截了当的网站风格会成为一大趋势。

3、色彩复兴 ，过去两年中，灰色大规模劫持了我们的网站。从前的白色网页背景变成了淡灰色；黑色文本变成了暗灰色；在Material Design中，用浅灰表示纵深的阴影。可以预见的是，复古色调将受到追捧。无论你最终决定用蓝色还是橙色，可以再试着给它加上一个“滤镜”，为用户制造一种温暖、怀旧的感觉，提升网站的整体氛围与质感。
4、 自定义滚动，越来越多的网站舍弃了传统的滚动条，转而创造一种自定义的滚动体验。一些网站使用的是“虚拟滚动”，即在页面程序内让用户进行滚动操作，而不受浏览器控制。虚拟滚动使更多类型的滚动方式得以实现。比如设计为水平线上的左右滚动，但可以用正常的鼠标进行控制。
6、 影院级别的交互体验，大幅的视频录像背景在2015年就成为网页设计的趋势，并且越来越流行。如今，技术的进步使得视频加载时间大大缩短，同时，WebGL（一种3D绘图技术）让这种背景变得更具互动性。
7、让美术指导取代长宽比，在Retina屏上完美显示的图片场景，在手机上可能看起来完全不是那么回事。面对诸多的显示屏幕，以及各种各样的长宽比，设计师如何处理这个“自适应的宇宙”？大多数情况下，他们选择裁剪。怎样才能在裁剪中保留设计的本意，不过分丢失信息呢？你需要：数字美术指导。设计的本质是提供解决问题的方法，而美术指导关注引发对的情感，让用户能够与他们所看到、所经历的事物产生关联和共鸣。在网页设计的过程中引入美术指导的思想，就不会拘泥于将所要传达的内容看作一张静止的图片，而是将它作为一个能传达故事的主题。
8、微动效与微交互，运动能吸引注意，这是人类进化的结果。但突发性的大动作只会让带来惊吓和警惕。相反，轻微流畅的运动能给人生机勃勃之感。在为网页设计动效时，要记住这二者的差别。过去很长一段时间，网页中的动效往往是用来“奖励”用户的某种动作，比如点击。但最近，越来越多的网页开始将小动效作为一种设计元素，用来吸引用户的注意力。

【2015年网页设计四大趋势 扁平化/HTLM5席卷而过！】

网页设计趋势变化的是如此之快，以至于我们甚至还没来得及全部体会，有的便已过时。所以，预测某个设计趋势会流行多久压根就是个伪命题。在21世纪初的时候，Flash曾被视为最热门的网页设计工具；而在几年前，富有光泽的按钮也是网页上必不可少的组件，可是现在，他们都已经被扁平化设计和HTLM5所席卷而过。

不要被炫酷时尚光鲜亮丽的时尚风格洗脑，许多刚刚出现或者才开始的流行的设计风尚都会是昙花一现。那些能对设计文化产生持续影响的设计趋势之所以存在，是因为它们在根本上有助于用户体验，或者服务于某些功能或者技术。但是今天这篇文字不是要做这些事情。今天所说的四个设计趋势是经过仔细推敲的，它们应该会在接下来的2015年里继续流行，甚至会强势地在2016年里继续做一个坚挺时尚的设计趋势。看下去，你会明白，它们不是在炫技或者耍猴，它们的确正在重新定义网页设计。

1、更少的页面

是否有人曾戳着你的屏幕说“少即是多？”越来越多的网站开始精简网站上页面的数量，使用单页设计的网站已经不在少数，即是相对传统的网站也过度到了简化后的多页式页面架构。促成这一趋势的原因来自两个方面：第一，用户喜欢简单，越简单用户越容易找到它们想要的内容，这自然也对网站越好；第二，据统计，移动端的流量占据了网站流量来源的4成，对于移动端越友好，自然也越有利于网站和网站的业务。如果你能在餐厅的移动端网页上订餐，何必费劲巴拉地找电脑来下单呢？成交额难道不会妥妥地上升么？下面这个高大上的单页网站属于伦敦的Jacks Bar，这是一家酒吧餐厅二合一的餐饮机构，在移动端浏览成为用户首选的今天，滚动比点击更加有用。

而这家名为三重樱咖啡的站点则是另一个实例，典型的单页设计，没有杂乱的信息，它只有两个导航链接，并且两者都在页面的相同区域。

2、无外乎是响应式设计

响应式网页自然可以适配各种各样的设备的屏幕，但是它们同时也是相对比较“庞大”网站，加载速度不会快到哪里去。在过去，许多品牌会为用户单独设计桌面端页面和移动端的页面，但是随着市面上设备的屏幕尺寸膨胀分裂，响应式网站设计就成了一个更为有效也高效的解决方案了。在搜索引擎抓取数据的时候，单个URL会更容易受到它们的青睐。从这个角度上来看，设计师有必要考虑一下手头项目是否做到了响应式设计。

Skinny Ties 就是一个响应灵敏的响应式网页，在任何屏幕上都能良好地显示，从图片到内容，这个网站都经得起最挑剔的客户的考验。

3、个性化的用户体验

网页Cookie并不是啥新鲜的东西，它们已经为网页和用户服役多年。现在，设计师们开是借助它们让网页的弹出窗口呈现出更加精准的内容了：更加个性化的广告，更加符合用户习惯的用户体验设计。做电商的朋友可能会非常需要这样的设计。

举个例子，假设你拥有一个销售促销礼品的电商网站，你的某个用户是一家公司的经理，或者是一个小企业主，它正在为自己的客户和员工寻找类似的商品。这并不是他第一次访问你的网站了，那么你可以借助个性化的体验设计，为他推荐它可能需要的商品，让他成为回头客。

在欧美市场，你恐怕找不到比亚马逊更好的例子，当然，生活在大陆的我们，可能已经被无所不能的淘宝的推荐系统所折服。

4、高清大图

讲故事其实也是设计的基本功。使用可靠的内容和漂亮的图片将用户从A点引导到B点，已经被证明有利于网站的转化率。使用大幅图片和富有质感的文字能够赋予整个页面以生命力，让它更加有趣，令用户愿意与之进行互动。随着高分辨率设备的普及，这些拥有高清大图的网页会轻松讨好用户的双眼。

温馨/动人/真实的故事配合着高清大图元素，用户会买账。不论图片是用作背景还是配图，整个页面的基调都会因此而改变。 就是这样的一个案例。

作品展示网站这样做其实很不错，电商和零售类的网站则需要斟酌一下如何展示才不会太过突兀。使用大图的诀窍在于图片的选择，抓人眼球的视角和富有质感的细节会让人驻足。配合着有趣的故事，用户就会留下。

网上很多各种杂七杂八的趋势分析过的我就不列出来了，都是重复的没啥意思，感觉2016年、未来2年内有这些趋势存在，希望对设计师们有一定的研究方向！

1.传感器访问赋予页面对用户环境的感知能力

很多年以来，web 页面掌握的用户情况十分有限，通常只有用户的屏幕尺寸以及浏览器类型等。但现在各种 W3C 标准把环境光、麦克风、摄像头等各种传感器数据都提供出来了。这使得网站可以跳出页面之外掌握更为丰富的信息。

2.信息推送

让网站可以保持与用户的连接—哪怕用户关闭了网站的浏览器标签页，使用一些新的w3c新标准技术。比如可以使用websocket，还有其它标准技术实现信息推送的体验。

3.SVG图形和动画

以优越的处理性能和动画性能，加载速度，不言而喻它比png,jpg,gif效率质量都高太多。

我自己主要使用SVGDeveloper这款工具结合jquery做动画，因为用的是mac系统，这款工具要使用虚拟机parallels desktop来配合mac系统运行

4.超快用户体验

“离线优先”，HTML5应用类缓存

网页的浏览速度和等待时间就不用多说了，非常重要。

5.智能响应

根据用户点击等等而响应内容，而不是仅仅根据设备分辨率响应，所以这里说的智能响应并不仅仅指响应式布局Responsive Layout.

比如：当你是新用户开始浏览文章时，会有在线FAQ的表单来响应你的操作，反之，在你登陆后阅读一篇文章的时候，会有标注功能让你更好的对文章进行整理方便下次阅读。

比如Medium和The Next Web在阅读体验上做得就非常棒。

6.ServiceWorkers

可让网站安装 JavaScript 文件，让web原生应用化，离线推送，这就类似一个基于WEB的半原生，甚至就是原生APP的实现。

7.360全景+视频交互

使用HTML5技术生动的360全景展示，视频内置于其中，形成完美的场景交互，让网站完全趋向真实场景。

这种体验将摄影，技术，表现力，特效，音效等方面结合起来，在FWA上看到过几个网站

8.基于HTML5的交互

比如碎片、离子、NDA、电影特效等运用到全屏轮播，tab切换，登陆注册弹窗等模块中。

9.PJAX的普及

最早应该是体验在behance和pinterest这两个网站上，然后慢慢流行到了国内，比如花瓣，接着是前不久dribbble的瀑布流和查看作品的改版体验，利用HTML5的特性结合完全/局部刷新实现改变网址无刷新加载，同时满足SEO的需求。

10.CSS3动画将更加广泛

现在做国外的设计基本不用考虑IE9以下了，也就是说基本不用考虑IE，所以很好的运用CSS3动画能大大提高网站的视觉舒适程度，特别是细节动画，小小的细节动画可能会是点睛之笔哦。

是不是看了这些感觉怎么都是PC端的趋势？NO,NO，其实移动端也同时存在这些趋势，移动不仅仅使用APP这个词去衡量的，现在APP的技术门槛越来越低，满大街都是，和卖白菜一样，参差不齐，基于移动端的体验趋势，也是非常重要的。

移动端的一些常见趋势就不说了，谷歌百度一大堆，再增加一点：

11.web移动端的PC效果移植

我们在PC网站上很常见视差，滚轮侦听，滑出等交互效果，使用HTML5的一些新特性，使用国外开源的移动框架，可以将PC上酷炫的效果同样移植到移动端上，体验会大不一样。