MDN改版了,都有哪些变化呢?

973 阅读7分钟

今天,我像往常一样通过关键字+MDN搜索资料,点进去发现页面有些陌生,我以为是一个新出的高级版伪站,更换关键字搜索后都是同样的页面风格,最后得以确认:这不是伪站,MDN改版了。

这是一篇MDN工作组成员发布的关于MDN网站新面貌的文章,看完觉得挺有趣,索性翻译出来分享给大家,原文链接

如果今天访问MDN网站,你可能会注意到它相比之前有很大的变化,我们希望这是一个好的变化,请允许我做一番解释!

在过去的16年,MDN经历了许多变化,从早期作为 wiki 开始,到最近迁移到一个由 GitHub 支持的静态站点。在此期间,有超过45,000名贡献者和众多的开发人员和设计师参与、见证了MDN的成长。毫不奇怪,在这中间,一致性的用户体验逐渐失去了平衡。

2021 年年中,我们开始考虑对 MDN 的设计进行现代化改造,以创建一个干净且引人入胜的网站,让浏览我们的 44,000 篇文章尽可能容易。我们希望为我们的用户创造更全面的体验,重点是改进导航功能和整体页面的通用外观。

全新的首页,专注于社区

MDN 社区是促成我们的内容质量可靠且值得信赖的原因。 MDN 内容经过仔细审查、讨论,当然,在某些情况下还存在争论。任何人都可以通过编写内容、建议修改或修复错误来为 MDN 做出贡献。

我们承认并感激这样一个杰出社区的最佳场所便是主页。

新主页的构建侧重于社区和简单性的核心概念。我们将改进的搜索作为页面的中心元素,同时还向用户展示了最新和阅读次数最多的文章。

我们还将展示对我们的 GitHub 内容存储库的最新贡献,并添加了一个聚焦区域用来突出 MDN 的贡献者。

moz_mdn_dark-mode.gif

文章页重新设计,改善导航效果

距离上次对MDN核心内容进行全面的设计审查,已经有五年了之久了,在这五年里,MDN 的内容发生了演变和变化,出现了新的内容结构方式、新的构建和编写文档的方式以及新的贡献者。随着时间的推移,文档的外观和感觉逐渐脱离了它应有的阅读和书写方式。

虽然您不会看到一些令人眼花缭乱的改造,但您会发现 MDN 上的大多数视觉元素确实受到了喜爱和关注,从而为我们的文档创建了一个更加连贯的视图。这种重新设计为 MDN 内容提供了应有的内容,包括:

  • 更一致的颜色和主题
  • 更好地标记主要部分,例如 HTML、CSS 和 JavaScript 改进的可访问性,例如增加对比度
  • 添加了暗模式切换,以便在模式之间轻松切换

我们特别为一些细微的改进和便利感到自豪。例如,页面内导航始终可以在您滚动时显示您在页面中的位置:

moz_mdn_navigation.2022-02-24-13_14_00.gif

我们还重新审视了浏览器兼容性数据的显示方式,提供了更加直观的浏览器支持图表。因此,您不必牢记版本号,我们更加强调浏览器功能的“是”和“否”图标,并可选择查看您期望从我们的浏览器兼容性数据中获得的详细信息。我们认为您应该尝试一下。

我们不会止步于此。我们所做的工作涉及面极广,还有很多机会可以完善和改进我们正在交付的设计。

社区投票诞生了新Logo

当我们开始在 WebDocs 之外重新设计和扩展 MDN 时,我们意识到也是时候使用新徽标了。我们想要一个现代且易于定制的标志,既能代表 MDN 的今天,又能加强其身份并使其与 Mozilla 当前的品牌保持一致。

我们与品牌专家 Luc Doucedame 密切合作,将我们的选择范围缩小到八个潜在的徽标,并呼吁我们的用户社区帮助我们选择并邀请人们投票选出他们最喜欢的。我们在短短三天内就收到了超过 10,000 张选票,很高兴与您分享“MDN 人的选择”。

Screenshot-2022-02-24-at-10.36.21.png

入选者是选项 4,一个 M 字母组合,使用下划线来传达编写代码的过程。非常感谢所有投票的人!

moz_blog_header_MDN-Intro.png

MDN,接下来会有哪些期待

将内容带到您最需要的地方

近年来,MDN 内容对作者而言变得更加复杂,例如从 wiki 迁移到 Git 以及从 HTML 转换为 Markdown。这对贡献者来说是一个福音,他们可以使用更强大、更熟悉的工具来创建更有条理和一致的内容。

有了更好的工具,我们终于能够为读者带来更多可见和系统的好处。例如,你们中的许多人可能通过自己喜欢的搜索引擎导航 MDN,而不是 MDN 自己的站点导航。我们知道了。从历史上看,维基使大型内容架构工作变得不切实际。但我们现在比以往任何时候都更接近于对网站结构和导航进行改进。

展望未来,我们有雄心勃勃的计划来利用我们的新工具来探索改进的导航、生成的标准化和支持总结,并将 MDN 文档嵌入开发人员最需要的地方:在他们的 IDE、浏览器工具等中。

即将到来:MDN +

MDN 已经建立了声誉,作为一个值得信赖的中心资源,提供有关标准、代码、工具以及开发人员创建网站所需的一切信息。 2015 年,我们探索了通过创建学习区来超越中心资源的方法,旨在为常规 MDN 参考和指导材料提供有用的对应物。

2020 年,我们为其添加了第一个前端开发人员学习途径。我们看到了用户的极大兴趣和参与度,学习领域目前占 MDN 每月网络流量的 10%。这让我们走上了一条道路,看看我们可以在这个领域为我们的社区做些什么。

去年,我们对用户进行了调查,询问他们想要从 MDN 体验中得到什么。最受欢迎的功能包括通知、文章集合和 MDN 上的离线体验。我们看到的总体主题是用户希望能够以适合他们的方式组织 MDN 庞大的库。

我们一直在寻找满足用户需求的方法,无论是通过 MDN 的免费 Web 文档还是个性化功能。在接下来的几个月中,我们将根据从希望定制 MDN 体验的 Web 开发人员那里收到的反馈,扩展 MDN 以包含高级订阅服务。请继续关注有关 MDN Plus 的更多信息。

Screenshot-2022-02-24-at-10.45.53.png

感谢你,MDN社区

我们感谢为新徽标投票的数千人以及自我们开始此旅程以来参与早期 beta 测试阶段的所有人。此外,非常感谢来自 Open Web Docs 的合作伙伴,他们为我们提供了关于重新设计的宝贵反馈,并继续每天为 MDN 内容做出贡献。多亏了你们,我们才能让这成为现实,我们将继续投资以进一步改善 MDN 的体验。