2020年网页设计最新趋势及原因

今天小编给大家带来一篇原创译文：2020年网页设计趋势与原因，文章是作者写给网页设计师和开发者的、针对最新设计和进步技术的探讨。在距离2020年只剩十几天的今天，Get明年的设计趋势已经是刻不容缓啦，快和小编一起来学习吧！

大部分的网页设计趋势，例如元素淡入，响应式布局和视差滚动，通常可以回溯到那时的可行技术。它有时是先前设计风格的后续效应，有时是总体平面设计趋势汇聚形成的结果。本文将探讨2020年即将到来的网页设计趋势，及这种变化与趋势的潜在原因。

 

毛玻璃效果

什么是毛玻璃效果

对出现在元素其后的背景进行模糊与半透明处理，被称作毛玻璃效果。在为Windows界面提供的高级视觉效果功能Windows Aero中，毛玻璃效果首次被大规模采用。之后苹果和主要应用的开发者也开始在他们的操作系统和应用程序中采用它。

 

导航栏中的毛玻璃效果(apple.com)

 

目前为止，这种效果还算少见，但你将会看到越来越多的网页上出现这种俏皮美丽的外观效果。当前它常见于导航栏或是作为文本背景的图像。

 

为什么

在网页上，需要精心模拟才能得出这种毛玻璃效果，这也使其难以实现。不过，许多现代浏览器已经支持这种叫做*背景过滤器*（*backdrop-filter*）的新样式表属性了。此外，这种毛玻璃效果具有现代感，半透明的纯色背景能轻易让人实现优美的回退。

 

雅虎在背景图片上采用了毛玻璃效果(yahoo.com)

 

暗黑模式

是什么

是一个自适应于网页应用和网站的配色方案，它会根据你的原生操作系统，适配一个高亮或是暗黑的网站主题模式。

 

YouTube的暗黑模式

 

为什么

几年前，一些网站开始采用一种可手动设置的暗黑模式。对于那些偏爱深色网页设计的夜猫子来说，这是一个简单的控制开关，它被放置在网站的角落里。今年，在安卓、Windows和苹果设备都增添了暗黑模式后，移动端和电脑端上主要的原生应用采用了起补充作用的暗黑模式(或高亮模式，具体取决于它们的默认设置)。

 

https://dribbble.com/shots/6470322-Admin-Dashboard-light-vs-night-mode

 

通过CSS媒体查询中*颜色方案*（*prefers-color-scheme*）的特性，网页浏览器正在进一步为网站开发者提供启用暗模式的系统首选项。它得到了所有现代且受欢迎的网站的支持。

（译者注：媒体查询（media query）是一种CSS响应式布局，使用媒介查询，你可以针对不同的媒介类型定义不同的样式。）

 

无处不在的渐变

是什么

渐变指从一种颜色逐渐过渡到另一种颜色。在扁平设计主导数字界面之前，渐变被用来创建(半)写实的表面。随着几年前扁平风格的兴起，似乎从纯粹的扁平过渡到注入渐变的设计风格，再次重添了一些深度。

 

按钮边框上的渐变(apple.com)

 

此外，这种渐变趋势适用于颜色被设置为渐变的字体设计里；为充分利用这种渐变效果，网页上也越来越喜欢采用更巨大更醒目的字体设计。

 

字体的渐变 (studiovoila.com)

为什么

如今没有一种特定的网络技术再能使渐变更具吸引力了。之前通过良好技术支持，渐变已经可以被用在背景，字体和各种元素上。

 

stadia.dev

 

类似的属性*背景裁切*（*background-clip*）和*文本填充色*（*text-fill-color*）支持创建渐变的文本，*混合模式*（*mix-blend-mode*）支持将多个图层混合来实现新的渐变效果。多年来这些技术得到很好的支持，并能成熟地投入生产应用。

 

css-tricks.com

 

不过，看到多家科技公司都采用渐变去制作产品标识时，这似乎是一种自然发生的设计趋势，而不是一种技术驱动的趋势。因此，对于*混合模式*和渐变颜色的更好支持，也仅仅说明各个设计选择的生动表现。

 

2016年，Instagram将其产品标识从纯扁平设计风格中重塑。2019年，多家公司走上了这条道路。

 

精致的三维图形

是什么

通常以大型的，类似电影一样的图形和视频呈现。有些是真实的3D渲染效果，有些是在你滚动时交互播放的视频。它们的共同点在于用来吸引你注意的精致的网络媒体。

 

被用于动画中3D模型，同时注意它的渐变(netguru.com/carlens)

 

为什么

从技术方面讲，这更多的是一种持续的发展，而非一种趋势。如今廉价的智能手机能再现高清视频和3D渲染效果，而且随着网络发展越来越成熟，网页设计师和开发人员可以利用这样的技术，而不必担心回放失败且还得围绕它建立备援。

对于高质量视频格式（如 AV6, H.265 and WebM）的技术支持正在增加，这体现了对网页上更大、更好的图形元素的需求。随着网页的总体发展和像three.js这样的3D渲染引擎的流行，这种趋势可能会持续发展。

 

（译者注：Three.js是当下最流行的网页3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封装。你可以将它理解为Three + js。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。）

 

google.com/store

 

横向滚动

是什么

水平滚动是指让本会滚动到下一行的元素进行横向滚动。特别是在水平空间有限的移动端上，我们看到越来越多的网页设计使用了不换行的列表，这些列表必须通过水平滚动才能获取更多内容。

 

两个水平滚动实例(https://dribbble.com/shots/6794395)

 

为什么

这不是因为什么明确的技术进步，这个转变似乎源自对使小屏承载更多内容的需求。横向滚动可以让人更轻松地获取内容，不必反复无常地向下滚动就能够到达下一部分。这可以被视为用户体验在网页上的一个转变，尤其是像这样的手势，对本地应用来说已经很常见了。

 

Fabian Sebastian所写有关双向滚动的好处的文章https://uxplanet.org/be1afe53206d

 

打破常规的版面

是什么

一种通常在网格元素上呈变换，旋转，重叠和小偏差的网格式布局。

 

https://dribbble.com/shots/7748587

 

为什么

目前网格式布局是来自被所有浏览器基本支持的网格（Grid）和弹性盒子（flexble box）技术。设计师已经在通过放置不对称的元素和把各部分重叠一起，去尝试突破显而易见的网格模式。直到不久前，才有在可靠的生产应用中所需的技术。实际上，这两种尚处在积极开发中的布局方法仍有各自的特性，例如子网格（subgrids），灵活变化的间隙（flex-gap）和空间的平均分配（space-evenly）。我们可以期待未来网页设计师和开发者能探索出更多具有实验性变化的用例，因为这必定是网页近期的一个发展。

 

https://dribbble.com/shots/6283244

 

微交互

是什么

是一种在互动时出现的小动画和细微的反馈模式。在默认情况下，本身已经存在很多微交互。不过，像是一个提交按钮在被点击后变成进度条以显示进度，下拉刷新的交互，或者为某个普通的帖子点赞并出现一个恰当的动画，这些微交互都比寻常的颜色变化考虑得更加全面。

 

giphy.com

 

为什么

网络应用，基于组件的开发(针对可重复使用的元素)和在网页上采用原生手势的情况正在稳步增加。有足够多的的公司依赖与用户建立情感联系，而这正是通过网站上的媒体与交互来建立的。成熟的开发框架和开发实践会考虑通过微交互让更多的注意力投入到那些更精妙的细节去。

 

https://dribbble.com/shots/5346227

 

滚动捕捉

是什么

滚动捕捉允许在用户在滚动浏览内容后，自动将滚动条位置平稳地固定在某些元素上。这为用户提供了清晰的焦点，而且没有被截断的内容。

 

tesla.com

 

这是因为在我们滚动时，尤其是横向滚动，需要重新调整滚动位置让内容适应屏幕。直到最近，这个操作通过Javascript才可以被手动实现。对移动端来说，为了在作为容器的组件与图像间循环浏览，更轻易地实现侧边滑动尤其具有必要性和可能性，所以它成为了一项用于展示内容的流行技术。

 

为什么

 

CSS现在支持通过滚动快照（scroll-snap）的几行代码实现自动滚动捕捉，鉴于对这方面的需求量很大，我们会看见越来越多的人使用它。它的规范自开发初始时已发生了变化，不过，即使是在IE和Edge浏览器上它也得到了部分支持。

告诉我们你对什么趋势感兴趣！你还在等待哪些趋势未来上升？你又看见了哪些正在下降的趋势？

 

原文地址：应谋鬼计（公众号）

作者：阿童