介绍FandomDesktop：全新的桌面版皮肤

本文由铁桶翻译自2021年3月26日的英文社区中心博客（有改动）。

大家好！

在迁移至统一社区平台（英文：Unified Community Platform，简称UCP）的过程中，最常被问到的问题之一就是“平台的新设计是怎样的？”这就是我们今天要深入研究的问题。您将了解到新的FandomDesktop体验的外观样式；这个项目有什么，又没有什么；我们采纳了哪些反馈；我们从Fandom和Gamepedia上吸取了哪些经验和教训；以及读者和登录编辑者的不同体验。

几周前的社群交流会议上，我们所做出的承诺之一就是“More is More”（越多越好）。更多的透明度、更多的背景信息、更多的坦诚、更多的信息。这篇博客真的很长，但它是为了现在和将来兑现这一承诺而做出的努力。我们很高兴大家一同研究这些设计。这么说不仅仅是因为我们在Fandom工作——我们对FandomDesktop感到“难以置信”的兴奋。这是一个现代化的Fandom设计体验，其中又包含了Gamepedia的重要元素。事实上，在这篇博客的后面还有一处惊喜，那是我们能够带给大家的最激动人心的消息，到时我们就会公布这个惊喜。

且慢，你们刚刚搞完UCP，现在又要改设计？[]

在漫长的UCP过程之后，我们应该先回顾一下之前就所提供过的信息，并且为大家提供更多的背景信息。在我们宣布UCP计划的时候，我们所述了两个阶段——技术（即平台在技术层面上的运行方式）和外观。截至目前，我们和您一样仍然重点关注在第一阶段。毕竟，在造车时，必须先确保引擎运转良好，然后才能关心如何给汽车喷漆。

在过去几个月里，我们基本完成了UCP迁移作业，即将关上旧平台的大门。在过去的两周里，我们在修复关键的“体验质量”错误方面做了很大的努力，您应该也很高兴听到这些消息。随着不断发展，我们的开发团队将有更多的时间和资源专注于不断改善现有以及新的功能，提高所有用户的“体验质量”，并减少平台上运行的错误。

我们也将会把Gamepedia的所有wiki和目前30%的Fandom的wiki默认使用的全新FandomMobile皮肤全域启用，这是我们全新的统一移动体验的第一阶段中的一部分。

探讨大家最为关心的话题的时候到了：Fandom和Gamepedia上wiki的桌面版体验是怎样的。毕竟，诸位中不乏使用移动版体验者，使用移动版的流量也确实占了我们总流量的大部分，但是wiki通常是在桌面版体验上更改和维护的。因此，设计好FandomDesktop至关重要，尽管桌面版的流量不是主要流量，但它一定是大多数人所使用的皮肤，是社区的管家和命脉。

什么是FandomDesktop？[]

FandomDesktop是Fandom和Gamepedia上的wiki的全新统一外观。这是我们对它最为精辟的说法。简而言之，就是网站上的桌面版皮肤。它是基于我们从过去的试验和之前改变平台设计的尝试中所吸取的经验设计而成。这也不是我们第一次这样做了！但这一定是自2010年以来我们对Fandom外观所做出的的最大视觉改变，我们同时也意识到这是Gamepedia上的wiki的一次重大转变。

这也基于多年以来的反馈，包括普通读者、管理员和编辑者的反馈。这也包括了一些最近的研究。我们已经做了三次用户研究（两次是有关编辑者方面，一次是有关用户方面），我们直接从社区委员会征求反馈，还在社群交流会议上听取了反馈意见。在这一过程中，我们测试了许多方案，根据反馈意见进行了修改，并与所有读者进行了进一步测试，以确保设计符合预期。

设计同时也考虑到了两个平台的重要元素，但并非所有元素——如果我们将这两种截然不同的风格结合起来，那么很可能就是一个试图取悦所有人但最终谁也开心不起来的“科学怪人”。

wiki管理员和编辑者认为有一些因素对他们而言至关重要，普通读者也是如此。让我们来看看一些因素：

wiki管理员和编辑者	普通读者
他们对Fandom和Gamepedia之间的变化感到焦虑，每个人都有他们永远不想失去的清晰的体验元素。	他们往往没有意识到，每个wiki都是一个平台的一部分。他们从搜索引擎进入网站查找信息，但没有将品牌联系起来。
他们想要利用更多的屏幕空间，许多人都不喜欢Fandom上的wiki的固定宽度体验。	wiki上的内容通常很长，难以阅读，尤其是在查找特定问题的答案的时候。
他们喜欢有机会自定义自己的wiki，并为自己所构建的内容和表达身份的方式而感到非常自豪。	他们喜欢易于浏览的简洁一致的设计，不喜欢会影响可访问性的自定义。
他们希望可以快速访问自己的编辑器工具和重要链接，并能够轻松地调整和管理自己的wiki。	他们在每次访问中通常只访问一种wiki和/或一种类型的内容，因此并不是每个工具或页面都与他们的体验相关。

考虑到这些因素，我们必须定义我们使用FandomDesktop和整个重新设计项目（包括FandomMobile）所做的范围。认识到什么是FandomDesktop有的，什么是FandomDesktop没有的至关重要。让我们来看看：

FandomDesktop有什么	FandomDesktop没有什么
这是一个重新设计的wiki文章布局，包括一致的广告位置投放和内容浏览，这样人们不必重新学习如何从一个wiki到另外一个wiki使用该网站。	它没有引入新类型的内容或创作者工具。这就是下个目标！我们很快就会有一个介绍一些您可以期待的新工具的的博客。我们在社群交流会议上宣布了其中的一些内容，引起热烈反响。
它为Fandom和Gamepedia上的wiki提供了统一的全域导航栏体验和本地导航栏体验，让用户可以轻松地在自己所在的wiki上以及整个平台上找到内容。	它没有实现与搜索相关的新功能，不过在长期解决更好的搜索体验之前，我们可以在这个项目中进行一些渐进式的搜索改进。
这是一个将与FandomMobile皮肤进一步结合的设计，全新的主题设计器最后将应用于移动版上（将移动版主题引入到Fandom上的wiki——这是Fandom用户多年以来一直想要的）。	它没有重新设计非wiki页面，例如Fandom首页、Fandom文章或讨论版。另外一个对Fandom首页网站进行一些初步更新的项目将同时进行。

FandomDesktop是怎样的？[]

既然我们已经把所有背景信息都弄清楚了，那么我们终于可以开始最有趣的部分了——它的神秘面貌到底如何！先说一下，我们将先展示非登录用户以及非wiki编辑者的体验。所以您可能会看到一些模拟广告以及一些并非针对您的方面的东西。我们认为，首先向您展示普通读者会看到什么是很重要的。

注意：本模拟图中的部分元素（例如：信息框）仅供模拟，不代表wiki不可以自定义这些元素的外观。

这是普通读者第一次访问网站并没有登录时所见的体验，通常是在搜索引擎的搜索结果中找到所需wiki之后所见。在介绍更多将显示更个性化的浏览体验的模拟之前，我们想提醒大家注意一些事项。

全域导航栏体验。您也许已经注意到Fandom的全域导航栏现在位于页面左侧而非页面顶部，这不令我们惊讶。我们改变它有几个原因。首先，由于页面顶部有全域导航栏和广告，所以要真正到达页面的重要部分——内容——要花费更多时间。因此，这一更改可以释放一些垂直空间。其次，我们总是很难让人们点击我们放在顶级导航栏上的任何内容。通过这种新方式——我们相信——在用户测试中亲眼目睹——我们将吸引更多的目光，从而增加对更多内容的发现，特别是在Fandom首页也进行了改版并变得更具相关性之后。因为知道我们大多数读者是从左至右阅读的，因此我们将其放在了左侧，可能会使它对人们来说更加突出。将这一成果与顶部导航栏进行比较会很有趣。这也是对Gamepedia左侧导航栏体验的认同。我们正在寻找利用这种全域导航栏的方式来推动跨wiki访问，这反过来也会为您的wiki带来更多读者和潜在的新编辑者。
本地导航栏体验。在全新的设计中，我们仍然选择使用Fandom上的wiki中现有本地导航栏的位置。我们知道左侧导航栏对很多Gamepedia编辑者来说非常重要，作为这个过程的一部分，我们探索了几十种可能的布局选项，使用了全域导航栏和wiki导航栏放置的不同组合，以及它们如何与可变的宽度体验交互（稍后将详细介绍！）。最后，我们发现这种设计是我们构建后最具伸缩性、功能性和现代性的方案。稍后我们将详细介绍这些。
页眉图片。在这个设计中，我们将从本地导航栏移除纯色页眉，并用更个性化的背景页眉取而代之。

这不仅可以让人们更深入地沉浸在wiki的主题之中，还可以让社区的个性化在整个页面中上升到新的高度，从而在页面加载之后的一开始就定下了“基调”。尽管这是我们全新的主题设计器所将支持的设计，但是wiki仍然可以通过CSS设置整个背景图片。

伸缩自如的宽度。在内容空间的左侧，您将看到一个带有双向箭头的按钮。我们还借鉴了Gamepedia，所有用户都可以浏览流畅的布局。无论所用设备或浏览器的大小如何，对于任何想要扩大页面宽度的人来说，您的内容都会占据更多的屏幕。这提供了比当前Fandom所允许的更大的屏幕空间，也超过了非登录的Gamepedia用户通常在屏幕上所能看到的空间。
Gamepedia徽章。正如所承诺的那样，Gamepedia上的wiki将保留Gamepedia的重要元素，这是全新体验的一部分。这是我们当前的想法，以表明其wiki为Gamepedia社区。Gamepedia的标志（由火焰和书本所组成）将位于wiki标题的旁边，并由职员设置，因此只有原Gamepedia社区才能拥有这一徽章。点击徽章将进入社区中心上的页面，以纪念Gamepedia的历史。我们希望得到您对这种方案和它的设计的反馈。

向下滑动后，FandomDesktop是怎样的？[]

问得好！页面顶部非常重要，但当您滚动到页面的核心并开始挖掘内容时，不要忘记了网站的外观。

当用户开始查找信息时，对我们来说重要的是让所有导航栏元素都应保持在触手可及的范围内，以便用户可以快速穿梭于页面、wiki或Fandom中。

以下是对这一情况的模拟图：

注意：本模拟图中的部分元素（例如：折叠的目录）仅供模拟，并不表示有意更改功能。

让我们探讨一些要点：

搜索总是触手可及。您可以看到我们如何开始保留滚动页面后工具的使用方式，同时搜索功能在页面左侧就可以看到了。Fandom上的wiki已经做了这一点，它有一个固定的全域导航栏，然而Gamepedia上的wiki并非如此。因此，这将在所有社区变得一致，这样人们就可以快速地搜索更多内容。
本地导航栏伴您滚动。当您向下滚动页面时，本地导航栏的大小将会折叠，并在您向下滚动页面时一直伴随。这样，读者就可以随时访问您为他们所提供的的重要链接。我们之前就提过，我们尝试了很多不同的导航栏设计，顶部和侧面的都有。我们之所以选择这个设计，并非是一定要把它放在左边，很大程度上是因为我们能让导航栏伴您滚动。这在Fandom上的wiki是无法实现的（本地导航栏仅固定在页面顶部），在大多数的Gamepedia上的wiki同样无法实现（左侧导航栏可以任意设置，因为需要滚动才能看到所有链接，因此不能保持固定）。这是全域导航栏位于左侧的部分原因，这样就不会有两个导航栏堆在顶部了。
轻松使用工具链接。 您也许已经注意到三个按钮悬停在内容空间的左端。第一个（即最上面的）按钮是宽度切换，第二个按钮可以打开您所在页面的目录，虽然在文章的简介和正文之间仍有目录，但无论您向下滚动到何处，您都可以打开目录，使页面导航更加方便。三个按钮是编辑按钮，它也会伴随您的滚动。您仍然可以像往常一样使用整个页面的章节编辑，这确保了无论您身在何处，都可以轻松地访问完整的文章编辑视图。

暗色模式？[]

我们关注到了您的需求。暗色模式在Gamepedia上作为wiki级别的选项已经有很长一段时间了，但它从未在Fandom上出现过。随着我们增加更多个性化的浏览选项，这种情况即将改变。看看这个：

每个用户都以自己的方式使用内容，与之相符的是，FandomDesktop让用户即使在非登录状态时也能更好地控制他们查看页面的方式。我们喜欢Gamepedia对亮色模式和暗色模式的支持，所以我们把它作为全新体验的基础部分。

我们全新的主题设计器可以您自定义自己wiki上的亮色模式和暗色模式。虽然模拟图上使用的页眉图片没有变化，但主题设计器可以让您在亮色模式和暗色模式自定义不同的图片。管理员还可以将自己想要的任何版本设置为wiki的默认主题——这是自2010年以来默认主题首次有任何可选项。我们还添加了对自定义标题原生字体的支持，这可以更好地表现wiki的特征。

当涉及到为亮色模式和暗色模式选择颜色的时候，我们还将提供辅助功能支持，以确保所有读者都能欣赏到您wiki的内容。

好了，那么登录用户的体验是怎样的？[]

这又是一个好问题——今天表现得不错嘛。

在Fandom和Gamepedia上，无论您是登录状态还是非登录状态，网站看起来都一样。不过仍有些不同之处，例如登录后Fandom上大多数广告会消失，在Gamepedia可以通过Gamepedia PRO做到这一点，但仅此而已。值得一提的是，当前Fandom的外观是“一刀切”设计，编辑者可以看到读者看到的所有内容，即便这些内容对他们没有任何用处。多年以来的经验告诉我们，这不对，我们应该找到新方案，让登录后的体验更加适合编辑者。FandomDesktop在很大程度上是朝着这个方向迈出的一步。

登录后，网站的外观如下所示：

让我们再探讨一些要点：

无广告体验。和往常一样，您可以选择不显示所有广告的选项。这一点不会改变，让您的页面看起来更时尚，更多的关注在内容上，而不是如何利用其盈利。盈利固然重要，否则我们将无法保持正常运营或创造新内容，但您不需要看到它。您带给网站的价值弥补了因为我们没有向您显示广告的收入损失，我们只能用无限乘以蝙蝠侠来概括。太多了。
以编辑者为中心的操作。在页面右上角，您可以看到“以编辑者为中心”的按钮，例如创建新页面、最近更改、管理员面板以及附加菜单中的添加新图片或添加新视频的按钮。其中大多数非登录用户是看不见的，因为它们对非登录体验微乎其微。它们是为了您的编辑工作而精心准备的。您还可以通过按钮在亮色模式和暗色模式之间来回切换。
页面工具。您可以看到侧栏现在包含了许多重要的页面链接和工具，可以快速使用例如链入页面、页面历史、讨论页等内容。这些同样也是底部工具栏中的可用选项，它们是设计中的一部分，虽然没有在这张模拟图中展现出来。
首选宽度保持不变。如果您将选项设置为在页面上获得更宽的宽度体验，网站就会记住这一点，这样您不必在每次浏览页面时都打开或关闭扩展宽度了。

在滚动时，您将看到以下内容：

和往常一样，以下是一些要点：

页面编辑按钮总是触手可及。与非登录体验类似，无论您位于页面的何处，您都可以使用章节编辑和页面编辑按钮。
快捷方式依然触手可及。本地导航仍会伴随您向下滚动页面，因此您仍然可以使用导航栏选项。
量身定做的右侧栏模块。更多以编辑者为中心和以合理为核心的右侧栏模块将继续伴随您进入页面。
重新设计的编辑者工具栏。您可以看到右下角重新设计的工具栏。我们将在另外一个博客中对此做包括它是如何工作的更深入的探讨。

这可真是有趣的惊喜……[]

确实。您可能在想，即便有那些更多的页面工具，我还是不想看到右侧栏怎么办？如果我想让屏幕上的内容有更大的空间，该怎么办？我们在本篇博客的早些时候就说过了，我们要公布一个我们公布过最令人兴奋的惊喜，就是对这些问题的回答。

如果您是登录用户，您可以在账户首选项中设置折叠并隐藏右侧栏。您还可以在页面上切换以显示或隐藏它。以下是这一情况时的外观：

在Fandom上，这是十年以来第一次，您登陆自己的账户，就可以拥有全宽体验。不过我们不会为非登录用户提供这项功能——右侧是广告投放的关键组成部分之一——我们正在为您整合这一优势。我们从2010年就收到了这样的反馈，当时固定宽度体验成为Oasis（绿洲）皮肤中最大的引雷针之一。在设计FandomDesktop时，我们在与编辑者进行的用户研究中收到了有关反馈，也从社区委员会收到了有关反馈，我们特别从Gamepedia的编辑者收到了一些有关反馈，否则他们可能会失去一些屏幕空间。我们还从社群交流会议上收到了有关反馈，我们承诺将吸取反馈，并尽我们所能将其纳入其中。

长话短说：我们清楚地收到了来自大家的反馈。这对Gamepedia的编辑者来说是非常重要的事情，我们从Fandom的编辑者那边收到了许多反馈，我们很高兴能够提供比Gamepedia上的屏幕空间更宽的内容。我们仍将努力使右侧栏对您更加有用，并希望您能够启用它，但我们把选择的权利留给您。

编辑时的体验呢？[]

我们希望能够确保您处于编辑模式的时候，FandomDesktop的视觉标识保持不变。我们正在努力改善编辑体验，目的是在保持核心功能不变的同时，给您更多的编辑空间，Gamepedia的编辑体验就做得很好，为您提供了编辑器工具栏之外的更多功能，这也是我们在新设计中所采纳的。

在您编辑时页面的外观：

以下是一些要点：

仍可使用本地导航栏。 在编辑的时候，您可能希望轻松访问另外一个页面。现在，这通常需要您打开新标签页并重新访问wiki。在这种情况下，您将能够立即在新标签页中打开重要链接。
在编辑器之间轻松切换。在源代码编辑和可视化编辑之间切换应该干脆利落些，这也是我们在做的事情。
使用页面工具。您正在编辑页面并不意味着您不需要使用部分页面工具。编辑器将由一个可以继续使用其工具的菜单。
更大的屏幕空间。编辑器占据了大部分的屏幕空间，为您的编辑工作提供了最大空间，并同步了在页面拥有全宽体验的选项。

如果我看到能够改进的地方该怎么办？[]

重新设计并非是故事的终章，而是全新的开始。新皮肤是我们能够继续改进的基础。我们知道仍有一些关键领域需要改进，包括：

显示。我们收到了一些用户的反馈，部分按钮并非每个人都能看得清楚。我们将探索新方案解决这一问题。
个人资料和公告。我们先前从社区委员会委员和社群交流会议的与会者方面的反馈是：个人资料按钮和公告菜单位于新全域导航栏的左下方，这需要很多时间加以习惯，而且还并不是那么直观，因为大多数网站都会将这些体验放在页面顶部。关于如何利用新全域导航栏，我们有些令人兴奋的想法，但需要确保我们得到的基本正确，我们会根据需求加以努力。

如果您认为我们遗漏了什么，请务必告诉我们！我们将阅读英文博客上留下的所有反馈。如果您的wiki拥有Fandom代表，可以向其反馈。如果没有，您可以发送电子邮件给我们：community@fandom.com。