2020 年的热门网络趋势及其原因

了解网页设计师和开发人员的最新设计和技术进步

大多数网页设计趋势，例如元素淡入视图、响应式布局和视差滚动，通常都可以追溯到当时可用的技术。有时，它也是先前设计趋势的后遗症，或是由一般平面设计中平行趋势所导致的。本文将探讨2020年即将到来的网页设计趋势，并探讨这些转变和趋势的根本原因。

磨砂玻璃效果

> 什么

毛玻璃效果是指元素背后呈现半透明、模糊的外观。它最初通过 Windows Aero 大规模应用于 Windows 用户界面。后来，苹果和主流应用开发商也开始在其操作系统和应用中采用该效果。

导航栏上的磨砂玻璃效果（apple.com）

到目前为止，这种情况相当罕见，但你也会在网络上越来越多地看到这种漂亮的效果。目前常见的用途是导航栏或图片上的文字背景。

rgb.wiki 在导航栏上使用磨砂玻璃

> 为什么

在网页上，这种效果必须以复杂的方式模拟，这使其难以实现。不过，有了新的样式表属性*backdrop-filter *，现在大多数现代浏览器都支持它了。它不仅外观时尚，而且在半透明、纯色的背景下，可以轻松实现优雅的回退。

Yahoo 使用磨砂玻璃效果作为图像背景（yahoo.com）

黑暗模式

> 什么

网络应用程序和网站的自适应配色方案，可识别您的本机操作系统设置并向您显示网站的明暗主题。

黑暗模式下的 Youtube 网站 (youtube.com)

> 为什么

几年前，一些网站就开始采用手动暗黑模式。它只是在网站某个角落设置了一个简单的控制开关，方便那些喜欢暗黑网页设计的夜猫子使用。今年，随着 Android、Windows 和 Apple 设备最近新增暗黑模式，移动和桌面上的主要原生应用也纷纷采用了配套的暗黑主题（或亮黑主题，取决于它们的默认设置）。

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

Web 浏览器正在通过 CSS *prefers-color-scheme *media-query将启用暗黑模式的系统偏好设置进一步提供给 Web 开发者。所有现代且受推崇的浏览器都支持此功能。

渐变无处不在

> 什么

渐变，指从一种颜色逐渐过渡到另一种颜色。在扁平化设计主导数字界面之前，渐变被用来创造（半）写实的界面。几年前，随着扁平化设计的兴起，似乎正在从纯粹的扁平化设计向融合渐变的设计过渡，再次展现出某种深度。

按钮边框上的渐变（apple.com）

渐变的趋势还适用于排版，其中字体颜色设置为渐变；这也推动了网络上更大胆、更大的排版，以充分利用这种效果。

渐变作为文本颜色（studiovoila.com）

> 为什么

目前还没有哪项 Web 技术能让渐变更具吸引力。之前，渐变作为背景、字体和元素，就已经有了良好的支持。

stadia.dev

诸如*background-clip * 和*text-fill-color*等功能允许创建带有渐变的文本，而 *mix-blend-mode 则允许通过将多个渐变混合到另一个渐变上来实现平面渐变。这些技术多年来获得了良好的支持，并且已经成熟，可用于生产环境。

css-tricks.com

然而，看到多家科技公司采用渐变色的产品标识，这似乎是一种自然而然的设计趋势，而非技术驱动的潮流。因此，对文本“mix-blend-mode ”和“gradient-colors”的更好支持，恰恰解释了这种设计选择的独特之处。

Instagram 于 2016 年重新定义了其产品形象，不再采用纯平面设计。2019 年，多家公司也走上了这条道路。

精致的3D图形

> 什么

大型影院级的图形和视频。有些是真实的 3D 渲染，有些是随着滚动屏幕互动播放的视频。它们的共同点在于，网络媒体的复杂性能够吸引你的注意力。

这个3D模型用于动画。注意这里的渐变效果。(netguru.com/carlens)

> 为什么

从技术角度来看，这更像是一种持续的进步，而非一种趋势。如今，廉价智能手机已经能够播放高清视频和 3D 渲染，而且随着网络技术日趋成熟，网页设计师和开发者有机会利用这类技术，而不必担心播放失败，也不必为此构建后备方案。

交互式 3D 游戏组合，可在移动设备上玩（https://bruno-simon.com）

对 AV6、H.265 和 WebM 等高质量视频格式的支持日益增多，这表明 Web 上对更大、更优质的图形元素的需求日益增长。随着 Web 的整体发展以及像three.js这样的流行 3D 框架的出现，这一趋势很可能将继续发展。

google.com/store

水平滚动

> 什么

水平滚动元素，否则会换行到下一行。尤其是在水平空间有限的移动设备上，我们看到越来越多的网页设计使用不间断列表，这些列表需要水平滚动才能显示更多内容。

两个水平滚动的例子（https://dribbble.com/shots/6794395）

> 为什么

这并非源于具体的技术进步，而是一种源于在小屏幕上呈现海量内容的需求的转变。水平滚动允许快速浏览内容，而无需向下滚动很长的距离才能到达下一节。这可以被视为 Web 用户体验的转变，尤其是在这类手势在原生应用中已经很常见的情况下。

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

开箱即用的布局

> 什么

网格状布局，网格元素通常具有变换、旋转、重叠和小偏差。

https://dribbble.com/shots/7748587

> 为什么

网格布局由网格和弹性盒技术负责，所有现代浏览器都基本支持这两种技术。设计师们已经在尝试打破传统的网格模式，采用不对称的元素布局，并将各个部分叠加在一起。安全生产应用所需的支持才刚刚开始，事实上，这两种布局方法仍有一些功能正在积极开发中（例如子网格、弹性间隙和均匀间距）。我们可以期待网页设计师和开发者在未来探索更多具有实验性变化的用例，因为这是网页领域的最新进展。