社区中心
注册
Advertisement

本文由Lakejason0翻译自2021年5月14日的英文社区中心博客(有改动)。

大家好!

正如3月份发的那份FandomDesktop介绍中说的一样,我们正在持续推进“越多越好”(More Is More)的工作方法来预览在今年春季晚些时候和夏季时发布到Fandom和Gamepedia上的更改。我们努力提升FandomDesktop的透明度,希望更多地展现我们的设计思维,以使你们在这些功能正式推出之前更深入地看看到底有哪些变化。

那么今天呢,我们来讲讲新的主题设计器(Theme Designer)如何与FandomDesktop带来的新特性、更好的性能解决方案和更多的自定义选项并肩作战,以使您的社区形象更加生动。

全新外观,全新特性[]

作为统一社区体验(UCX)计划的一部分,我们从头开始重建了主题设计器,使其作为一个更强大的功能来增强新的体验。在UCX计划的其他部分中,我们更专注于优化现有的功能以带来新的体验,但对于主题设计器,我们听到了来自你们的用户需求,并看到了超越以往、全新升级、重振Fandom用户体验的宝贵机遇。

向左看齐!

随着图形和显示技术的大幅改进,当前的主题设计器发布以来,桌面用户趋向于使用越来越宽的屏幕。为此,我们将主题设计器的布局调整为了左侧栏布局,而不是一直以来的顶栏布局。这样一来,在进行设计任务时,实际页面的预览部分变大了,您就可以一目了然地看到更多的内容,使这些设计任务更容易完成。

Theme Designer Light

预览实时,页面真实

新的主题设计器预览体验做到了所见即所得。你可以从wiki中选择一个实际的页面作为预览的例子——您所写的内容,而不只是一些占位的内容。在您调整主题的过程中,页面会得到实时调整。

Theme Designer - Page URL

这将允许您在预览和修改主题时查看特定的页面,以了解您的修改会如何影响实际内容中一些特定格式,而不像先前那样非得应用这些更改,关掉主题设计器,点开相关的页面,如果有问题的话还得再回到主题设计器这么麻烦。如果您想查看另一个页面,您可以在预览窗口的URL栏中改变其页面目标,这样主题设计器就会相应地更新。

还记得先前导航预览中的交互成本,即完成一个交互所需的精神花费和体力花费的总和吗?现在的设计可以说大大降低了主题设计器工作的交互成本,让您更清楚、更直接地了解哪些变化会如何影响页面元素。

哦对了,favicon的更改现在也可以从预览窗口的URL栏预览了!

日日夜夜

毫无疑问,您应该在FandomDesktop的早期预览中注意到了,我们将在新的体验中原生支持浅色和深色主题,这就包括在主题设计器中对这两种主题的支持。

你将能够在主题设计器界面中轻松地在两个主题间切换,在同一个预览窗口中对每一个主题进行操作并对比两个主题的显示效果。你也可以选择设置哪个主题为社区的默认主题,向读者展示您作为wiki管理员认为最适合您wiki的体验。

以下是有关浅色和深色主题在用户选择方面将如何运作的简短说明:

  • 在初期的用户自主选择(opt-in)的发布阶段,浅色和深色主题只适用于已登录的用户,且会通过用户参数设置的方式提供。
    • 如果没有设置首选项,则在每个wiki上会根据管理员选择的默认主题来显示实际页面。
  • 设计原型图中展示的wiki内开关,出于整体体验考虑,当前计划在第一批wiki转换到FandomDesktop之前发布。
  • 该开关将对登录用户和未登录用户(匿名用户)可用。
    • 对于登录用户,此开关将保存您对浅色与深色主题的选择到您的全域参数设置中。
    • 对于匿名用户,此开关将为当前会话保存您对浅色与深色主题的选择。在发起新会话时,匿名用户会被认为没有此项参数设置,在任何给定的wiki上显示管理员选择的默认主题。

我们需要更多的时间来开发参数设置和开关的逻辑,且本着透明度精神,我们希望你们都能提前知道与当前已经展示的原型图有所不同的轻微变化。

自定义字体选择

Theme Designer - Font

为标题文本选择自定义字体的选项将会实装到主题设计器体验中。我们首先会上线产品设计团队审查过的,已经检查过可用性和无障碍需求的5种字体:Rubik、Work Sans、Lora、Roboto Slab、BioRhyme以及Inknut Antiqua。这些字体选择也在截图中展示了。其他的自定义字体仍然可以通过CSS的方式设置,只要符合无障碍标准即可。

突出改进[]

除了从根本上改变该功能的工作方式外,我们还利用这个机会,根据用户反馈和从统一社区平台迁移中学到的经验,进行了一些改进。

更好的存储解决方案

旧的主题设计器将特定的文件(比如wiki的logo)储存在MediaWiki软件以外的位置。这导致了一些在UCP迁移的时候,因这些图片有时没有正确迁移而产生的一些问题,而且事后也很难将这些文件找回。

今后,所有的文件储存将会完全依赖MediaWiki本身的文件管理,这让wiki管理员可以选择通过MediaWiki工具来控制这些图片及其修订版本,而不是仅仅依靠之前主题设计器提供的有限而专有的管理工具。这样就能避免以后我们进行(若有需要)任何文件管理相关的变化时可能产生的问题,因为主题设计器将成为整个wiki系统整体的一个小部分,而不是作为另一个系统,去迁移去做些什么都很麻烦。

更多颜色与更好的取色方式

在先前的主题设计器中,你有两种方法来挑选颜色:使用预制的颜色搭配或填写HEX(十六进制)颜色代码。这对那些精通设计的管理员来说是很好的,他们知道颜色代码,或者碰巧能在我们提供的色彩选择中挑选一款称心如意的颜色搭配。但这对于创造力的发挥来说,也就止步于此了。

Legacy Swatch Picker

在新的主题设计器中,我们将开始使用一个在整个可见光范围内给你很多选择的取色器。听上去很棒,对吗?当然,如果你想的话,你仍然可以输入十六进制颜色代码。

Better Color Picker

我们已经在展望这个功能的未来,希望能进一步提供超越这些已有的选项的体验,包括对无障碍的更多支持。在FandomDesktop的第一轮功能推出后,CATS团队将提供更多有关这方面的信息。

Theme Designer - Color

变大变美变漂亮!

就和上文说的一样,随着图形技术的进步,屏幕分辨率一直在向上攀升,与显示技术并肩同行。整个世界正朝着8K显示器的主流使用方向发展,所以我们需要与你的技术选择一起发展。

由于这一趋势和创作者社区的具体要求,背景文件的大小限制将从300 KB上升到1 MB。

logo相关

Gamepedia和Fandom在设计方面的一个很大的区别是社区辨识度如何以logo的形式呈现。Gamepedia wiki使用正方形logo,而Fandom wiki则使用长方形的文字标志(wordmark)。

Theme Designer - Logo

在新的FandomDesktop体验中,我们将在一个新的统一格式中同时支持这两种风格,统一称为logo。上传的文件分辨率将可达到500x500像素,使两种格式都能适应并享受更高分辨率屏幕的好处。在桌面上,正方形的logo将以100x100显示(在平板电脑上为80x80)。文字标志式的logo将继续以250x65的尺寸显示。

Theme-Designer-Avatar-Scroll

我们将鼓励wiki使用正方形(头像式)logo。正方形logo比长方形的文字标志式logo更容易在更多的地方推广wiki的辨识度。在读者向下滚动文章页面时,方形的logo可以滚动并固定在本地导航栏里面,在左上角展示您wiki的辨识度。而长方形的logo会占用过多的可用导航空间。当然,logo在滚动时出现在固定的导航中的这一功能是可选的。我们还有一些未来的功能正在开发中,这些功能将利用你wiki的logo这一更移动化的元素。更多信息将在它们准备好被公开时发布。

主题的导入流程[]

读完这些文字之后,你可能会想,“好吧,不过过渡期的时候这些东西会如何运作呢?”CATS团队就这一具体问题提出了许多想法。如何在过渡到新设计和新的主题设计器的同时尽可能做到无痛体验呢?欸,他们想出的办法相当不错,分别为Fandom和Gamepedia wiki设计两个流程,但也能让两个平台做到一样的效果。

Fandom wiki的各位,选择权在你们手上啦!

当您以管理员身份使用FandomDesktop时,进入主题设计器时,系统会弹出一个选择。您可以选择导入现有主题,或从头开始设计。当您选择从头开始设计时,您将会看到一个预制样板,让您探索新的主题设计器体验,以免让之前的主题决定影响您的第一个FandomDesktop主题设计。

Theme Designer Choice

注意: 这么做并不会失去您现有的主题。在初期用户自主选择的发布阶段,您也可以再次确认您确实想要导入现有的主题,也可以从主题历史部分取回原有主题,且主题设计器将把您的之前的Oasis主题转换成一个新的FandomDesktop主题。对于在自主选择发布阶段没有活跃管理员的wiki,自动导入将在wiki完全过渡到新体验时将传统的Oasis主题转换为FandomDesktop主题。

对于现有的主题导入,主题设计器将采用先前的一些颜色逻辑,在导入过程中检查原有的Oasis主题,并确定该主题是浅色还是深色,并相应地保存。同时,主题设计器将尽力为剩下的那个选项做一个适当的反色主题。例如,如果Wookieepedia导入了他们的主题,主题设计器会将这个主题指定为浅色,然后为深色模式制作一个标准主题。就个人而言,我(MisterWoodhouse)真的很期待看到平台上各个星球大战百科全书的不同原力光明面和黑暗面主题呢。

Gamepedia上的导入流程

Gamepedia从来没有过主题设计器,因为所有的Gamepedia wiki布局都是由当时Wiki经理/Wiki主管(现在的Wiki Representative)或管理员作为策划wiki创建过程的一部分通过CSS完成的。当原本的Gamepedia wiki转移到FandomDesktop时,最初的主题将包括原有的favicon、logo,以及默认的亮色/暗色主题,取决于原本的主题是Hydra还是HydraDark。其他的一切都将从头重新开始。考虑到上文所提及的空白预制样板的方法,社区体验和社区发展团队将为先前的Gamepedia wiki提供特别的主题支持。当我们接近发布时,我们会有更多关于这方面的信息。

我们还会有更多关于自定义的信息,并会为你们这些精通CSS的人提供关于文件、值、选择器、变量等是如何随着FandomDesktop而改变的详细信息。在接近自主选择发布阶段的时候,我将很快宣布一个日期。

现在,原作者在英文博客将一如既往地接受你们用英语书写的问题,并尽他所能地回答你们的问题。

 


Lakejason0 avatar

Lakejason0

Lakejason0Fandom logo 2021 light font中文社区中心团队PVT wordmark dark中文预志愿团队的成员。如果您有任何问题,请在社区论坛上提问。
Advertisement