2015 年网页设计的流行趋势是啥？

Posted 2023-04-13

参考技术A

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

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

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

1、更少的页面

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

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

2、无外乎是响应式设计

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

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

3、个性化的用户体验

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

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

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

4、高清大图

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

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

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

参考技术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上酷炫的效果同样移植到移动端上，体验会大不一样。

基于最流行设备的响应式设计中的行业标准断点是啥？ [复制]

【中文标题】基于最流行设备的响应式设计中的行业标准断点是啥？ [复制]

【英文标题】：What are the industry standard breakpoints in Responsive Design based on the most popular devices? [duplicate]基于最流行设备的响应式设计中的行业标准断点是什么？ [复制]

【发布时间】：2016-06-20 06:48:23

【问题描述】：

当今响应式设计中最流行的断点是什么？我的兴趣主要是移动设备 > 平板电脑 > 台式机。

注意：我觉得这是一个客观的问题，因为受欢迎程度不是基于意见的，而是可以衡量的。

谢谢！

编辑：这个问题不是重复的，因为我问的是“今天”的尺寸。您引用的问题已有 4 年历史，不再相关，因为分辨率要高得多。请删除“重复”消息的惩罚。谢谢。

【参考方案1】：

响应式断点的标准是在媒体查询中。

@media 查询是响应式设计的 1/3。它是最简单形式的关键要素，允许根据设备应用指定的 CSS，以及它是否符合媒体查询条件。

查看此链接了解更多信息： https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints