魔兽世界暗影国度 的发布提供了一个新的机会来简化和重新设计角色创建过程。与高级 UI 设计师 Jeff Liu 一起深入幕后，详细了解其背后的思维过程。
艾泽拉斯的居民！我叫 Jeff Liu，是魔兽世界用户界面团队的一名高级 UI 设计师。我在这里分享一些对 Shadowlands 推出的 Character Creation 重新设计的见解。随着最近推出的所有出色的新自定义选项，我们认为这是拉开帷幕并展示我们对用户界面（UI）所做的更多幕后设计选择的好时机）。
我之前参与了幻化系统和拍卖行的重新设计。改造旧的 UI 是迄今为止我最喜欢的项目类型，所以我对重新设计角色创建屏幕感到非常兴奋。
这是新玩家体验计划的一部分，其中包括新玩家起始区 Exile's Reach。角色创建是新玩家与之交互的第一个屏幕，因此我们希望对其进行现代化改造，以给人留下良好的第一印象。角色美术团队也在为 Shadowlands 添加许多新的自定义选项，因此 UI 更新的时机非常完美。
新布局
作为参考，这是旧的角色创建屏幕的样子：
我们尝试的第一件事就是拆分班级和种族选择屏幕。您将在第一个屏幕上选择您的课程，然后在第二个屏幕上选择您的种族：
在这个例子中，如果你想玩暗夜精灵，你必须回到上一个屏幕，选择一个不同的类，然后继续在屏幕之间来回切换以查看所有选项。
是的，这很尴尬。
这没有成功，所以我们几乎最终保留了旧的布局并简单地更新了艺术。在最后一分钟的头脑风暴中，我的 UI 设计师同事 Crash Reed 和 Ray Ocampo 提出了一个概念，将种族分成对立面：
这种布局的一大亮点是部落和联盟之间的对峙如何立即传达派系战争。我们喜欢这种设计的简单性和新鲜感，所以它全力以赴！
顺其自然
有了口袋里的新布局，我重新评估了这个屏幕上呈现给玩家的信息量。旧的角色创建屏幕以文本描述的形式提供了大量信息：
提供过多信息（即使它有用）的危害在于它会阻止某人做出其他简单的选择。
我们设计了新的角色创建屏幕来帮助新玩家避免所谓的分析瘫痪。我们删减了大量文字，依靠视觉和声音来解释种族和阶级。我们宁愿向您展示一位法师正在施放火球而不是向您描述它。
大多数新玩家已经通过流行文化熟悉了这些幻想原型。人们普遍认为，战士挥舞着剑，穿着相对厚重的盔甲，在近战范围内战斗。
我们按照有助于新玩家快速识别他们理解的课程的顺序对课程进行排序：
前三个是最强大、最容易理解的原型。接下来的三个强度略低。例如，从未玩过电子游戏的人可能不知道牧师是做什么的。之后是更复杂的混合类。
需要注意的是，这种设计选择并不是关于每个职业有多难玩，而是在不需要额外解释的情况下理解职业是什么以及他们做什么背后的概念有多容易。
种族在很大程度上是一种审美选择。我们不想让新玩家担心种族能力，所以我们默认隐藏它们：
对我们来说，新玩家不会在第一次就创造他们的“永远的角色”是可以的。他们将通过玩游戏了解更多关于种族和职业的信息，这比我们在角色创建屏幕上所能解释的要多得多。
我们希望新玩家做的就是选择最酷的种族，选择最喜欢的职业原型，然后去！
显示，不要告诉
现在我们删除了所有这些文字，我们着手创建新的动画，这些动画可以真正销售类幻想。
我们首先探索动画应该有多精细。我们特别注意持续时间，因为我们不希望它拖得太久。
以下是首席动画师 Ian Lang 创建的第一个模型：
旁注：最后一个剪辑显示了我们尝试的早期概念，即大型布料背景和站立在基座上的角色。这是另一个模型：
在我们确定方向后，动画团队为每个班级创建了一个序列，与 FX 团队合作选择合适的特效来配合所展示的能力。完成后，声音设计师将声音连接到所有动画。
我想你会同意动画、FX 和声音团队做得非常出色，让这些课程感觉很英雄。动画被证明是新角色创建屏幕的最大亮点之一。
保持专注
我们的主要目标之一是让您的注意力集中在屏幕中间的角色模型上。我们想让它感觉就像你在设计一个超级英雄。这一理念指导我们在设计此屏幕时做出的许多决定。
我们采用了更简约的美学，而不是传统的 WoW UI 艺术风格。我们移除了两侧精心制作的艺术作品，例如旧的派系横幅，因为它们在视觉上过于分散注意力并且分散了您对角色的注意力。
我们在屏幕边缘放置了一个大阴影，使角色具有聚光灯效果，有效地创建了一个小插图。
我们还定位了 UI 元素，以将您的视线吸引到我们希望您看的地方。
最后，当相机在自定义模式下放大时，我们会模糊背景。这使角色流行起来并帮助您专注于角色的特征。
新玩家
新玩家看到的角色创建版本与老玩家不同。我想为他们策划一个更简单、更干净的体验。
比如只显示核心种族，头像下方标注了他们的名字。
然后还有一些更细微的差异。
作为资深玩家，您将看到的第一个角色是完全随机的种族/职业组合。对于新玩家，他们看到的第一个角色将始终是人类或兽人战士（随机性别）。这可以追溯到通过向他们展示更相关的东西来让新玩家轻松进入游戏的想法。
新玩家的角色随机化也略有不同。由于这可能是他们对魔兽世界的第一次介绍，我觉得每个种族都能很好地视觉阅读是至关重要的。出于这个原因，当角色随机生成时，我们禁用了遮挡面部的选项，例如纹身、战绘和头饰。
不过别担心，一旦玩家进入自定义模式，他们就可以自由选择这些选项。
最后，新玩家会在自定义屏幕上看到提示：
我们从用户测试中得到的一个结论是，一些新玩家对最终确定他们的角色感到焦虑。这是有道理的，对吧？如果您认为这是自定义角色的最后机会，那么您将花时间确保它完美无缺。这个技巧可以让他们自信地继续前进并更快地进入游戏。
角色定制
说到角色自定义，让我们看看该屏幕的一些早期模型。您可以看到设计是如何从旧布局演变而来的：
有一次，我尝试了一种更自由的布局，其中选项不包含在框内：
我们不喜欢它看起来很杂乱，但喜欢它的开放性，所以我将它与一些早期的想法结合起来，我们将选项分为几类：
现在我们接近最终布局！
选项选择器
您会注意到最后一个模型中的选项由滑块控制。这个 UI 控件在开发过程中经历了多次迭代。
旧版式在右侧具有大型预览肖像。如果您查看这些示例，则很难分辨出不同面部选项之间的区别：
它们的可扩展性也不是很强，这与我们专注于中间角色的目标背道而驰。
因此，我们着手寻找可以替代肖像的 UI 控件。
我不想混合使用不同的控件（如复选框、按钮和颜色选择器），因为我觉得这会使屏幕看起来杂乱无章。我想使用一个可以适用于所有选项类型的控件。
然而，最重要的目标是让您能够快速地在任何两个选项之间跳转，以便您可以轻松地比较它们。
前几次迭代不满足该要求，并且在相距很远的选项之间导航很麻烦。
滑块使快速跳跃成为可能，但并不精确。滑块通常还用于在两个极端（如矮和高）之间移动，但大多数这些选项并非如此。
最后，我想出了一个多列下拉菜单，它满足了我们的每一个目标：
它可以让您在任意两个选项之间快速跳转。
它让您可以同时查看所有选项。
它是一个单一的、多功能的 UI 控件，可用于名称和颜色。在某些情况下，我们甚至在同一个下拉列表中混合使用这两种类型。
您的注意力集中在中间的角色上。
也许最酷的部分是：它让您只需将鼠标悬停在选项上即可实时预览选项。
旁注：我是《守望先锋》的忠实粉丝。您可以在选项名称中找到多少个《守望先锋》参考资料？类别图标
所有自定义选项都包含在三个类别之一中。以下是类别及其图标的演变方式：
我最初计划有五个类别，但在我在游戏中测试后改变了。
我觉得将头发选择归为第二类很笨拙，因为改变发型通常是你做的第一件事。所以我将它们移到带有面部选项的第一类。
大多数比赛没有很多身体和纹身选项，所以我也将这两个类别结合起来。这就是我们最终进入最后三场的方式。
理发店
您可能还记得理发店曾经拥有与角色创建屏幕完全不同的 UI。通过重新设计，我们在这两个地方都使用它很有意义。
一些理发店过去很不方便，因为照明是基于周围的环境。这也使得在某些情况下对颜色的感知不准确。例如，绿色可能看起来是黄色的。
当您激活理发店椅子时，美术团队通过在您的角色周围应用完全中性的光线解决了这个问题。现在照明既明亮又色彩准确。
理发店的一个新功能是您可以更改角色的性别。这是第一次性别互换的视频，由实施它的工程师录制。
错误
在这个项目的过程中，我们必须解决许多视觉错误：
您可以感谢 QA 团队让您免于这种噩梦般的设计！
直到下一次
Character Creation 改造是一项巨大的合作努力，涉及角色艺术家、动画师、制作人、测试分析师、声音设计师、用户研究人员和工程师（在此处阅读他们之前发表的文章！）。我们希望构建一个灵活、现代的 UI，这将有助于在未来几年内创建数百万个角色。
我希望您喜欢我们如何重新设计角色创建人物的深入了解。谢谢阅读！
Jeff Liu
高级 UI 设计师，魔兽世界
标签
更多总结进入公众号下方菜单查看
点下方留言更多人看到你的观点
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
