地址：
ing-b538ecbb9b94
译文地址：应谋鬼计（公众号）
作者：jouan marcel
译者：阿童
今天小编给大家带来一篇原创译文：2020年页面结构网页设计趋势与原因，信息文章是作者写给页面结构网页设计师和建设开发者的、针对最新设计规划和进步技术的探讨。在距离2020年只剩19天的今天，Get明年的设计规划趋势已经是刻不容缓啦，快和小编一起来学习吧！
（全文共计3866字，阅读约需要11分钟）
大部分的页面结构网页设计趋势，例如元素淡入，自适应响应式部署布局和视差滚动，通常可以回溯到那时的可行技术。它有时是先前设计规划样式风格的后续效应，有时是总体平面设计规划趋势汇聚形成的结果。本文将探讨2020年即将到来的页面结构网页设计趋势，及这种变化与趋势的潜在原因。
毛玻璃结果效果
>什么是毛玻璃结果效果
对出现在元素其后的背景进行模糊与半透明处理，被称作毛玻璃结果效果。在为Windows界面供应提供的高级视觉结果效果功能Windows Aero中，毛玻璃结果效果首次被大规模采用。之后苹果和主要应用的建设开发者也开始在他们的操作系统和应用程序中采用它。
导航栏中的毛玻璃结果效果(apple.com)
目前为止，这种结果效果还算少见，但你将会看到越来越多的网页页面上出现这种俏皮美丽的外观结果效果。当前它常见于导航栏或是作为文本信息背景的图像。
>为什么
在网页页面上，需要精心模拟才能得出这种毛玻璃结果效果，这也使其难以实现。不过，许多现代查看浏览器已经支持这种叫做*背景过滤器*（*backdrop-filter*）的新样式表属性了。此外，这种毛玻璃结果效果具有现代感，半透明的纯色背景能轻易让人实现优美的回退。
雅虎在背景image图片上采用了毛玻璃结果效果(yahoo.com)
暗黑模式
>是什么
是一个自适应于网页页面应用和网站站点的配色方案，它会根据你的原生操作系统，适配一个高亮或是暗黑的网站主题类型模式。
YouTube的暗黑模式
>为什么
几年前，一些网站站点开始采用一种可手动配置设置的暗黑模式。对于那些偏爱深色页面结构网页设计的夜猫子来说，这是一个简单的控制开关，它被放置在网站站点的角落里。今年，在安卓、Windows和苹果设备都增添了暗黑模式后，手机移动端和电脑端上主要的原生应用采用了起补充作用的暗黑模式(或高亮模式，具体取决于它们的默认配置设置)。
/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渲染结果效果，而且随着互联网网络发展越来越成熟，页面结构网页设计师和建设开发人员可以利用这样的技术，而不必担心回放失败且还得围绕它确立建立备援。
可在移动端手机上玩的互动3d游戏作品集
对于高价值质量多媒体视频格式（如 AV6, H.265 and WebM）的技术支持正在提升增加，这体现了对网页页面上更大、更好的图形元素的需求。随着网页页面的总体发展和像three.js这样的3D渲染引擎的流行，这种趋势可能会持续发展。
（译者注：Three.js是当下最流行的网页页面3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封装。你可以将它理解为Three + js。three表示3D的意思，js表示java的意思。那么合起来，three.js就是使用java 来写3D程序的意思。）
google.com/store
横向滚动
>是什么
水平滚动是指让本会滚动到下一行的元素进行横向滚动。特别是在水平虚拟空间有限的手机移动端上，我们看到越来越多的页面结构网页设计使用了不换行的列表，这些列表必须通过水平滚动才能获得更多信息内容。
两个水平滚动实例
(/shots/6794395)
>为什么
这不是因为什么明确的技术进步，这个转变似乎源自对使小屏承载更多信息内容的需求。横向滚动可以让人更轻松地获得信息内容，不必反复无常地向下滚动就能够到达下一部分。这可以被视为用户体验用户评价在网页页面上的一个转变，尤其是像这样的手势，对本地应用来说已经很常见了。
Fabian Sebastian所写有关双向滚动的好处的信息文章
/shots/7748587
>为什么
目前网格式部署布局是来自被所有查看浏览器基本支持的网格（Grid）和弹性盒子（flexble box）技术。设计规划师已经在通过放置不对称的元素和把各部分重叠一起，去尝试突破显而易见的网格模式。直到不久前，才有在可靠的生产应用中所需的技术。实际上，这两种尚处在积极建设开发中的部署布局方式方法仍有各自的特性，例如子网格（subgrids），灵活变化的间隙（flex-gap）和虚拟空间的平均分配（space-evenly）。我们可以期待未来页面结构网页设计师和建设开发者能探索出更多具有实验性变化的用例，因为这必定是网页页面近期的一个发展。
/shots/6283244
微交互
>是什么
是一种在互动时出现的小动画和细微的反馈模式。在默认情况下，本身已经存在很多微交互。不过，像是一个提交按钮在被访问点击后变成进度条以显示进度，下拉刷新的交互，或者为某个普通的帖子点赞并出现一个恰当的动画，这些微交互都比寻常的颜色变化考虑得更加全面。
giphy.com
>为什么
互联网网络应用，基于组件的建设开发(针对可重复使用的元素)和在网页页面上采用原生手势的情况正在稳步提升增加。有足够多的的公司企业依赖与用户使用者确立建立情感联系，而这正是通过网站站点上的媒体与交互来确立建立的。成熟的建设开发框架和建设开发实践会考虑通过微交互让更多的注意力投入到那些更精妙的细节点去。
/shots/5346227
滚动捕捉
>是什么
滚动捕捉允许在用户使用者在滚动查看浏览信息内容后，自动将滚动条位置平稳地固定在某些元素上。这为用户使用者供应提供了清晰的焦点，而且没有被截断的信息内容。
tesla.com
这是因为在我们滚动时，尤其是横向滚动，需要重新调整滚动位置让信息内容适应屏幕。直到最近，这个操作通过Java才可以被手动实现。对手机移动端来说，为了在作为容器的组件与图像间循环查看浏览，更轻易地实现侧边滑动尤其具有必要性和可能性，所以它成为了一项用于展现展示信息内容的流行技术。
>为什么
ark-shelter.com
CSS现在支持通过滚动快照（scroll-snap）的几行代码实现自动滚动捕捉，鉴于对这方面的需求量很大，我们会看见越来越多的人使用它。它的规范自建设开发初始时已发生了变化，不过，即使是在IE和Edge查看浏览器上它也得到了部分支持。
告诉我们你对什么趋势感兴趣！你还在等待哪些趋势未来上升？你又看见了哪些正在下降的趋势？
版权说明：Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有
免费热线：400-683-0016
扫二维码关注公众号
当前位置：