2020 年网页设计年回顾

“与众不同”的一年即将结束。 2020 年对每个人来说无疑都是独一无二的——包括网页设计师。 它在几个层面上对我们提出了挑战。

我们的日常工作因停工、孩子入侵家庭办公室以及需要我们帮助以迅速改变他们的商业模式的客户而变得复杂。 尽管我们中的许多人都被困在屋子里，但很少有沉闷的时刻。

除此之外，这一年还有许多与流行病或其他混乱无关的事态发展。 新工具被推向市场，我们最喜欢的软件看到了重要的更新，社区一如既往地富有创造力和乐于助人。 换句话说：2020 年有很多值得设计师和开发人员庆祝的积极因素。

让我们回顾一下过去一年影响网页设计师的一些重要而有趣的发展。

现代 CSS 蓬勃发展

虽然 2020 年 CSS 没有发生革命性的变化，但这并不意味着它没有一个伟大的一年。 恰恰相反。

该语言受益于网络浏览器的持续稳定发展。 随着现代版本的 Chrome、Edge、Firefox 和 Safari 的发布，对更新 CSS 标准和规范的支持也在增长。

在实践中，这意味着网页设计师可以自信地采用新技术。 例如，CSS 网格布局比几年前更安全。 虽然回退从来都不是一个坏主意，但它们可能不需要那么激烈。

这是由于 Internet Explorer 等旧版浏览器的用户数量不断减少。 根据 StatCounter Global Stats 的数据，截至 2020 年 10 月，IE 的使用率下降到了区区 1.05% 的市场。与一年前的近 2% 相比。

图表由 StatCounter Global Stats 提供

IE 和其他过时的浏览器越落后，就越容易将最新的 CSS 开发带到生产网站。 这使该语言能够更好地发挥其巨大的潜力。 2020 年是朝着这个方向迈出的一大步。

2020 年顶级 CSS 文章

• 在您的项目中避免“浪费”的 CSS
• CSS 中的 BEM 方法：快速入门指南
• 使用 CSS 创建 3D 插图
• CSS 透视图是如何工作的
• CSS 变量如何提高效率和一致性
• CSS 中的 LCH 颜色：什么、为什么以及如何？
• 学习 CSS 定位
• 使用 CSS 沿路径定位文本
• CSS 中的样式布局包装器
• 可视化 CSS 重置

Headless CMS 发展其利基市场

“无头”或“分离”内容管理系统的使用继续获得动力。 这种做法涉及使用 CMS（例如 WordPress）将内容提供给外部应用程序。

这导致了几个有趣的可能性。 您可以将内容发送到移动应用程序——允许您的应用程序和网站共享相同的博客文章。 同样，您可以利用 GatsbyJS 或 11ty 等静态网站生成器来创建超快速的用户体验——非常适合流量大的网站。 同时为您的内容创建者保持熟悉的后端 UI。

而且，虽然这项技术还比较年轻，但你可以看到它开始占据上风。 例如，GatsbyJS 在过去一年中取得了长足的进步。 GraphQL，它的配套查询语言，正在稳步成熟。 它的目标是高效和高性能。

此外，正在构建许多工具来简化创建无头配置的过程。 这是至关重要的，因为它目前不是一个适合初学者的任务。 这一切变得越容易，它的使用就越广泛和创造性。

目前，无头 CMS 配置的部署越来越多。 尽管如此，除非您是专家，否则一头扎进并将这项技术用于客户项目可能并不明智。

因此，最好从小处着手并进行试验。 一旦你在坚实的基础上，无头可能是一个很好的解决方案。

2020 年顶级无头 CMS 文章

• 对盖茨比的诚实评论
• 使用 GatsbyJS 构建无头 WordPress 网站
• 使用 Google Cloud Platform 构建无服务器前端应用程序
• 不要建立科学怪人网站！
• 使用 React、Serverless 和 Airtable 使用 Jamstack
• 无头 CMS：什么和为什么
• 如何开始开发无头 WordPress 网站的旅程
• 如何在 JAMstack 上创建无头 WordPress 网站
• 使用 ButterCMS Headless Engine 为 React Native 应用程序提供动力
• 何时使用无头 WordPress 有意义？

原型工具的改进和发展

我们构建网站和移动应用程序原型的方式不断变化。 许多设计师正在避开 Photoshop 等传统工具，转而使用 Adob​​e XD、Figma 和 Sketch 等小众应用程序。

这些工具中的每一个都是在考虑 Web 和移动应用程序的情况下构建的。 因此，设计师不必满足于将静态模型图像传递给客户。 相反，他们可以创建完全交互的东西，更好地代表最终产品的功能。

当然，这些工具本身并不新鲜——它们已经投放市场好几年了。 但在 2020 年，使用任何这些应用程序的论点变得更加引人注目。

一方面，每个人都有强大的开发人员社区，可以发布有用的东西，例如插件和 UI 工具包。 它们帮助设计师扩展功能并提高效率。 并且这些应用程序本身已经发布了一些令人兴奋的功能，以及平滑粗糙的边缘。

然而，原型应用程序的另一个特性也变得非常重要：它们的内置协作工具。 它们促进了客户和团队成员的远程反馈。 今年我们中有这么多人在家工作，任何使审核过程更容易的事情都是一笔巨大的奖金。

2020 年热门原型工具文章

• 10 个帮助您掌握 Adob​​e XD 的教程
• 20 个适用于 Web 和移动应用程序设计师的免费 Adob​​e XD UI 工具包
• 20 个用于 Sketch 应用程序的免费移动 UI 和线框套件
• Figma 的 35 个免费 Web 和移动 UI 模板
• Adobe XD 焕然一新
• 设计到工程交接
• CSS、Figma 和 Sketch 中的渐变角度
• 如何使用 Figma 变体为您的组件增压
• 您的世界的一部分：为什么我们为构建真正的原生 Mac 应用程序而自豪（草图）
• Sketch vs. Figma vs. Adob​​e XD：哪种设计工具最适合初学者？

WordPress Gutenberg 块编辑器变得更加精致

2020 年 12 月是古腾堡区块编辑的第二个生日。 但是，与大多数 2 岁的孩子不同，似乎（大部分）发脾气已经成为过去。 古腾堡在其时代变得相当成熟。

查看编辑器的 UI，它比最初的位置早了几光年。 大量的开发时间用于使界面更直观。 四处走动要容易得多，查找和选择单个块也是如此。

可访问性也是一大焦点。 这个特定主题在 Web 开发的所有领域都很重要，但也是对古腾堡早期版本的主要批评。 因此，改进 UI 并使其更易于访问是 2020 年的重大胜利。

这一年还引入了自定义块模式，这使得使用和重用特定布局变得更加容易。 在任何需要的地方实现自定义布局的能力是不小的成就。 这是使块编辑器在某些用例中难以销售的缺失功能之一。

而且，虽然还没有准备好迎接黄金时段，但由 Gutenberg 提供支持的全站点编辑 (FSE) 正在进行中。 这将使具有兼容主题的用户能够通过块编辑器编辑其网站的所有方面。 第一个这样的主题 Q 于今年早些时候可供下载。

总而言之，WordPress 现在拥有默认的编辑体验，几乎可以认真考虑任何项目。 页面构建器仍然有一些优势——更不用说旧的经典编辑器了。 但是区块正在流行。

2020 年顶级 WordPress Gutenberg 块编辑器文章

• 块导航插件为 WordPress 编辑器提供缺少的基于上下文的大纲
• 为 WordPress Gutenberg 编辑器创建自定义调色板
• 让 WordPress 块编辑器看起来像前端设计
• 如何在 WordPress 中将经典块批量转换为古腾堡
• 如何在 WordPress 中创建一个简单的 Gutenberg 块模式
• 如何使用 WordPress 古腾堡封面
• Matt Mullenweg 和 Matias Ventura 演示新的图像编辑工具来到古腾堡
• 在 WordPress 中设计宽和全宽 Gutenberg 块
• 将现有 WordPress 网站转换为使用 Gutenberg 块编辑器的提示
• 什么是完整站点编辑以及它如何塑造新的 WordPress？

2020年，重点是更大的图景

关于上述项目，您可能注意到的一件事是它们都涉及进化变化。 对于网页设计师来说，这里似乎没有什么分水岭。 事实上，在 Twitter 上提出这个主题也没有产生任何惊天动地的建议。

也许这会成为不那么引人注目的头条新闻。 然而，这也意味着，在混乱的一年里，网页设计行业有一种令人欣慰的一致性。 我们已经使用的工具和技术变得更好了。 没有什么可抱怨的。

多年后我们回首往事，许多历史性事件将在 2020 年脱颖而出。但网页设计师可能会认为这是一个为未来更大的事情奠定基础的时间。