Alt-F4 #17 - 界面设计哲学 2020-12-11
翻译 Ph.X
在本周的 Alt-F4 中，Therenas 从 FFF 的游戏手册中抽出一页，谈论了他的 Mod 工厂规划师（Factory Planner）的下一个大更新的开发过程，并谈到了他对界面设计的一些哲学思考。Dr_Doof 还和我们分享了由 Red Circuit 团队组织的一个圣诞温馨小活动。
界面设计的注意事项 Therenas
在过去的几个月里，我一直在对工厂规划师（Factory Planner）Mod 进行大规模的重新设计，跟大家分享一些设计上的考究我认为会很有趣。我将专注于主界面中最有趣的部分，因为那是重新设计中最复杂的部分，需要投入最多的思考和规划。
就算你不熟悉这个 Mod 也没问题，我将谈论我的设计方法，大致上也能适用于其他情况；Mod 只是一个让我聚焦这些想法的镜头。同样你也不需要成为一个设计师来才能理解这些内容（我就不是）；好的设计应该是任何人都能看出来的。
概述
那么，我们就来看看吧。左边是当前的版本，而右边则是更精美的新版。首先，我先简单介绍一下，让大家熟悉这个 Mod。
为什么旧版本看起来如此平淡？主要原因是它的设计可以追溯到异星工厂 0.16 的时期，是在 0.17 的界面设计革命公布之前。这意味着它是在异星工厂用户界面看起来很不一样的时候设计的，而且提供给 Mod 作者的工具箱也远比现在有限。尽管如此，我还是利用当初的工具完成了 Mod，在我看来，从可用性的角度来看，这个界面做得还不错，即便它在视觉上缺乏享受。
眼尖的朋友可能已经注意到，这个 Mod 的第一个发布版是针对异星工厂 0.17 的，而不是 0.16。那我有什么借口不在发布前更新到新的视觉标准呢？好吧，我需要考虑下花时间做事情的优先级，为缺失的必备功能（如插件和插件效果分享塔）添加支持比更新界面更重要。
这个基本逻辑在很长一段时间内都是如此，总是有其他的东西需要先改进。任何事情都是需要权衡的（尤其是在设计方面，我们很快就会看到！），直到几个月前，我才觉得需要进行一次重新设计了。一个复杂的因素是，这个任务是一个很大的工程，需要对界面进行彻底的重新思考，重写数千行复杂的代码。这可不是你在一个周日下午就能完成的事情，显然不是。
在我们开始讨论细节之前，我想先讨论一些术语。根据上下文，设计 这个词有几种不同的含义。本文中，我不打算讨论在视觉上看起来如何的设计，我基本上只是模仿了 Wube 在游戏界面上使用的东西，只是在一些小方面有偏差。这样做要经济得多，因为我可以复用很多他们的成果，而且也只是让人感觉和原游戏相似并融入游戏之中。我所要讨论的设计更多的是涉及到界面布局和交互的内容。
操作按钮
红框内的按钮可以对当前选中的子工厂进行各种操作，即按钮颜色为黄色的那个子工厂。旧的设计有一个问题，就是这些按钮占据了相当大的空间，浪费了中间部分的空间。将它们从文本按钮改为图标按钮后，大大缩小了它们的大小，并将它们移到（同样经过改造的）子工厂列表的上方，腾出了大量的空间，这使得其他元素可以向上移动，为配方行腾出更多的空间。
到目前为止还不错。基于图标的按钮在我看来也更漂亮，因为它们更符合异星工厂的审美。此外将所有的按钮都放在子工厂列表的上方，可以清楚地知道它们与界面的哪一部分有关。很棒。尽管如此，这种变化还是带来了一些可用性的挑战（权衡），这也是为什么我保留旧设计这么久的原因。
最明显的一个问题是，图标几乎永远没有文本标签那么直观，图标总是有解释的空间。现在，Mod 的新用户首先要探索按钮，悬停并阅读提示以确保他们知道按钮的作用。旧的设计可以让你更快地理解并上手。“添加”和“删除”按钮的颜色也有点帮助，借鉴了原版游戏的界面。
一个不太显眼但我觉得很有意思地方是，有一个旧设计的操作按钮很突出。就第一个按钮，明确地写着“新 子工厂”，而其他的按钮只是暗示它们的操作与子工厂有关。你可能会觉得这不是什么大问题，或者说是设计界面时的疏忽；如果每个按钮都省略它，会更合理，也更一致。不过加入这个按钮会对用户产生潜意识的影响：他们会内化他们正在组装的东西叫做子工厂。在主界面的其他地方都没有这样的称呼，但每个使用 Mod 的人都知道什么是子工厂，因为这个按钮暗示了它。这让我可以在其他地方的工具提示和描述中自由地使用术语，而不必每次都解释它是什么，这非常强大。在我看来，建立这种共享语言是非常重要的，无论是在使用界面时，还是在开发者和用户之间就 Bug 和功能进行沟通时。
这个例子特别好的诠释了设计的取舍性质。毕竟我可以用两段话讲旧版界面如何如何好，那我为什么又要改呢？好吧，这就是一种权衡。我用我的判断力决定，尽管有的东西变差了，但最终的结果来说是总体上更好的。同样重要的是，你不能孤立地看待这些变化。让这个部分稍微变差一点，如果能让另一个部分，比如子工厂按钮（见下图），变得更好，那这就是个值得的权衡。
子工厂按钮
子工厂的按钮。哦，子工厂按钮。这些按钮让你选择你所定义的不同的子工厂。在过去的两年里，它们让很多人头疼，我很高兴终于摆脱了它们。它们自始至终在视觉上都没有变化，虽然它们的实现改变了几次，但它们始终是一堆巨大的黑客技术。尽管这并不完全与设计有关，但我还是需要分享一下我的痛苦，并且我认为了解一个幕后的黑客技术的产生的会很有意思。
你可能会注意到，旧的按钮使用了等宽字体。它们是整个界面中唯一使用这种字体的按钮，这并非出于我的设计决定，而是源于需要。你看，我将它们整合到界面中的方式带来了一些问题，需要一些相当有创意的变通办法。
最重要的问题是我需要知道何时需要开始新的一行按钮，因为第一行按钮已经满了。异星工厂并没有提供任何方法来自动做到这一点。为此，我需要知道每个按钮有多宽。这不是小事，因为它们的长度取决于用户输入的子工厂名称。游戏不会告诉我，所以我需要计算这些按钮上文字的宽度。
我的天真的初次尝试使用了一种可变宽度的字体。我愚蠢地确定了该字体中每个字母的像素宽度，然后，我动态地将每个按钮的所有实际字母的宽度加起来。如果当时我知道字偶距，我就会知道一开始就不该尝试这样做。查看维基百科文章以了解更多细节，但是，从本质上讲，单词中字母之间的距离是动态调整的，来让文本看起来是“正确的”，你可以看这里。这意味着使用可变宽度的字体来预测按钮的宽度是完全不切实际的；这个想法已经过时了。
为了解决这个问题，我决定改用等宽字体，因为这种字体没有字偶距问题，每个字母每次都会占用相同的空间，等宽。这正是我所需要的，经过大量的摆弄，它让我能够准确地计算出按钮的宽度，使我非常复杂的子工厂按钮列表成为可能。现在回想起来，我本应该寻找其他的设计，而不是钻进这个烂摊子里。这里的教训是，有时候，如果某种实现被证明太复杂和/或愚蠢，那么还不如放弃这种设计。
重新设计的子工厂列表的设计考虑很简单：我需要节省一些空间。旧的按钮占据了大量的空间，尤其是当你有足够多的子工厂来填满第二行的时候。将它们转化为垂直列表，一举解决了上述所有的技术问题，同时也只是一种更自然的布局。毕竟它们所在的 GUI 元素叫做 list box。
到这里了，我想说说为什么更多的垂直空间是这次重新设计的核心目的。我之前提到过，有不少论据。首先，配方行是你想看到并与之互动的主要内容，所以让尽可能多的配方行同时出现在屏幕上是有意义的。界面的其他部分，尤其是子工厂列表，都是次要的。
另一个重新选择子工厂列表的原因是与优化屏幕比例有关。现代屏幕是 16:9 甚至更宽，这意味着它们相比垂直高度而言水平上更宽，使得垂直空间比水平空间有更高的溢价。如果你能安排东西使用更多的水平空间而不是垂直空间，那很可能会更有效的利用你的画布。在这种情况下，这一点特别有效，因为配方行实际上并不需要整个对话框的宽度，反正在大多数情况下浪费了一些水平空间。因此，我们可以在不损失任何东西的情况下，通过放弃一些多余的水平空间来获得垂直空间，这显然是一个有利的权衡。
物品框
最后，我们来看看物品框，其中包括旧设计中左边的信息窗格。它们给出了你的子工厂的净输入/输出的概况，信息窗格包含一些辅助信息和功能。旧的解决方案相当优雅，但结果是非常不灵活。在这里，它又占用了大量的垂直空间，而你现在知道，这些空间是很宝贵的。
第一个关于灵活性的争议点是，这四个部分的高度都是固定的，由于该布局的设置方式，它们必须是相同的大小。正如我们在截图中看到的那样，包含物品的框根本没有被填满，仅仅因为信息窗格有一定的尺寸，就浪费了大量的空间。在新的设计中，如果没有必要让这些框变大，界面可以自由地缩小这些框。这就腾出了（你猜对了）垂直空间，我们喜欢这个。我还让各个盒子的宽度可变，如果原料框包含更多的项目，允许它的宽度是其兄弟姐妹的两倍，这一点很有意义，因为你通常会有更多的原料而不是产品或副产品。
关于灵活性的另一点是信息窗格的内容。在旧的设计中，它的大小直接决定了项目框的大小，进而决定了它们占据了多少垂直空间。这就意味着在上面添加任何内容都会浪费一整排的内容。我决定采用四行信息窗格，因为这是我能承受的所有内容。新的设计允许我使用我想要的信息窗格的行数，因为减少子工厂列表的高度并不是什么大问题。
结论
正如你现在可能已经注意到的，这次重新设计最重要的目标是增加灵活性和垂直空间。为了实现这个目标，我做了好几处改动，往往需要小心翼翼地进行权衡。不过有时候，你会遇到一个完美的改变，在各方面都很成功，这感觉很棒。我希望你喜欢这篇关于设计界面时需要考虑的因素的文章。
你可以在 Mod 门户上查看工厂规划师（Factory Planner）（包含这些改动的更新将在今天晚些时候发布），如果你想聊天的话，可以加入我的 Discord，我很乐意和你讨论这些事情。另外，还要向 Raiguard 致敬，他是后 0.17 视觉设计的开拓者。他帮助我适应了新的设计元素，并优雅地挑剔了我的第一次尝试，这真的非常有帮助。这是他对重新设计的界面的最初想法，我把它变形为现在的设计。不过我为什么要做这样的改动，那就是另外一个话题了。
圣诞工厂 - Red Circuit 活动 Dr_Doof
Red Circuit 致力于帮圣诞老人制作礼物！他们邀请你参加他们的异星工厂圣诞工厂活动，就在北京时间 12 月 12 日本周六下午 8 点。活动将有少许修改，来让你获得冬天的感觉，科研包将被圣诞老人的礼物所取代。希望能在那里见到你！
倒计时已逾期
12 月 12 日来到我们的飞船
没有一台电脑在运行，甚至没有一声呢喃。
Red Circuit 团队正蜷缩在 Discord
希望你加入我们来让船员多多的！
从船上传来一声巨响
所有人跳出飞船的坠落场
环顾四周我们看到的是外星之雪
铜矿，煤矿，还有铀矿遍布荒野！
冬日的土地上建起一座工厂
有你的帮助必可赢得欣赏！
加入我们就在下午八点
圣诞工厂在这里上演！’Twas the 12th of December when all through our ship
Not a computer was working, not even a blip.
The Red Circuit team was all snug in Discord
With hopes you join us and bring more aboard!
When from the ship there came a loud crash
All jumped off board for it was all smash
We looked all around to see alien snow
With copper, and coal, and uranium all aglow!
A factory to build in the cold winter land
With your help it could be amazingly grand!
Come join us this day at 12 UTC
And build a factory for the whole world to see!— Dr_Doof
征稿
一如既往的，我们正在召集任何想要为 Alt-F4 做出贡献的人，无论是提交文章还是帮助翻译都可以。如果您有些有趣的想法，并乐于与社区分享，这里就是一个好地方。如果您没有太大把握，我们会很乐意帮助您讨论内容创意和结构问题。如果您有意参与，从加入 Discord 开始吧！