移动端UI设计最佳实践（第一部分）

移动端UI设计并不简单，随着市面上的游戏数和设备量呈指数级增长，最大化游戏表现力已经成为一件优先事项。

本次，我们请到了Outfit7的资深软件工程师Aleksander Gregorka与UI设计师Maja Nadvešnik，三星的开发者关系工程师Søren Klit Lambaek，以及Unity的高级产品设计师（UI工具）Stefania Valoroso和高级技术产品经理Benoit Dupuis，来采访有关高效移动端UI设计的技巧和建议。

在第一部分的问答里，几位嘉宾讨论了UI设计过程、部分移动设备带来的特殊挑战，及最大化游戏创意和心流体验的关键策略。

我们首先看一个基础性问题：好的游戏UI有哪些特征？

Maja：好的UI能营造连贯、令人享受的体验，让玩家不会受困于难以理解或设计不佳的界面，专注于享受游戏本身。要想让玩家感到舒适和自信，UI设计师们必须十分注重明确性、可用性、连贯性和无障碍性。

Benoit：好的用户界面必须要有吸引力，还得融入游戏的宇宙或幻想情节。它们必须使用简单，能在需要的时候出现，且不能阻碍玩家享受游戏。如果UI出现故障或没有响应，那游戏体验便会遭到破坏，所以稳健性和性能也非常关键。最重要的是，UI必须可以被使用和阅读，好让玩家能与各个游戏系统互动，获取关键信息。

你们为游戏制作UI的流程是有哪些？

Maja：制作游戏UI通常分几步进行，包括确定目标和要求、制作草图和原型、完善设计和样式，实现和测试、以及迭代和完善。有时，UI制作需要融入更大的开发进程，设计师要与美术师、程序人员、制作人等其他团队成员紧密合作，来保证UI能无缝结合到游戏或项目中。

你们怎样为项目选取字体？怎样选配色方案？

Maja：字体与配色方案应当支撑并强化项目的视觉风格和色调。由于我们的用户多为家庭，项目经常充满了奇思妙想，美术风格也更为现代和鲜艳。

我们在游戏里使用的字体充满趣味又不失可读性。在设计阶段，我们会检验并确定最小的字体大小。在制定配色方案时，我们挑选的颜色大多符合美术指导的构思，并且具备足够的对比度和一致性。

你们平均需要多少时间才能完成UI？

Maja：UI制作时间需要视项目需求，以及所采用的资源与流程而定。我们通常会在几个月的预制作阶段开始着手准备。随后，我们会敲定UI制作方向，并继续完善UI，把UI从主要游戏玩法扩展到其他辅助功能上。完全确立UI风格可能要花六个月到一年时间，之后我们仍得继续制作，直到游戏的最后一个功能。

照顾不同大小的手掌和手指有多重要？

Aleksander：这个方面很重要，如果应用面向着全年龄用户，那儿童的互动方式会与青少年及成人有所不同。儿童握持设备的方式并不一样，并且很难做出一些手势。他们还会尝试各种多点触控，所以也要考虑到。

我们特别喜欢做容易识别的大个按钮。在选取多个物体时，这些按钮会相隔很远。在拖动物体时，拖动对象会稍稍上移，防止手指完全覆盖住物体。不让手掌完全覆盖屏幕，让玩家看到自己在做什么，这点很重要。

Stefania：在移动端游戏上这点特别重要，它主要视目标用户而定。儿童的手要比成年人小，也没那么灵活，你需要仔细想想手势的设计、特定用户的运动方式，以及常用按钮和互动的位置。较小的手很难触碰到屏幕中心，更别说横跨屏幕的另一角了。

另外，用户还可能根据惯用手来定制控制方式或UI来完成互动，或者利用无障碍工具以其他方式完成互动。费茨法则（Fitts' Law）声称，引导用户至某个目标位置的耗时由目标的大小与距离决定。这一法则在移动端同样适用。要想了解更多相关信息，请查看尼尔森诺曼集团（Nielsen Norman Group）的这篇文章。

对于在UI很多的游戏里制作和设计UI，你们有哪些好建议？

Aleksander：最重要的是保持一致。同一按钮在一处位置的作用和外观应该与其他位置的完全相同。用一定的空隙来将同一批UI划分到一块。避免使用大量杂乱且复杂的动画，只专注于那些必须要玩家注意的重要部分。

Søren：制作一个对性能友好的系统很重要。并且，一定要经常在尽可能多的设备上测试UI。对于实时渲染出的UI则只在绝对必要的时候更新。

折叠设备的UI有哪些难点、额外工作和好处？

Søren：Unity对折叠手机的支持非常友好，开发者不必在支持折叠设备上做太多的工作。UI组件目前已经包含了折叠设备，但屏幕的长宽比很容易出问题。折叠手机外屏到内侧大屏的转换经常会打乱UI布局，因此你必须进行大量的测试。

折叠设备的UI设计有哪些工具和资源呢？

Søren：我们团队写了几篇用Unity支持折叠手机的教程。这些教程都发布在了我们的开发者网站：

• 使用Unity和虚幻4制作折叠设备的特色功能（Foldable device features with Unity and Unreal Engine 4）
• 怎样在安卓游戏开发中使用Jetpack WindowManager（How to use Jetpack Window Manager in Android gamedev）

你们是怎样在保证响应性的同时制作UI动画的？

Stefania和Benoit：我们最大的建议是不要滥用动画。动态的关键作用在于帮助界面传递信息、吸引注意、建立与其他元素的联系。在游戏里，动画经常被用于庆祝重大时刻，用精细的图形和视觉效果来奖励玩家。动画的作用最好也仅限于此。

UI动画最好的做法是重复使用简短的动画和转换。这不仅能为游戏带来统一感，还能减少性能问题的出现。根据目标的不同，尽可能地用代码和组件来应用这些动画可以让UI变得美观、响应迅速，同时适应布局或朝向的改变。UI Toolkit还能利用USS转换来为UI添加简单的转换效果。

你们在应对不同的设备分辨率时有自己的设计原则吗？

Maja：响应式设计可保证UI的布局和外观能自动适应不同大小的屏幕和分辨率。使用百分比或ems制作灵活的布局同样可以保证UI能流畅地适应不同大小的屏幕和分辨率。

你们能分享些为三星设备设计UI的提示吗？

Søren：请注意折叠手机的长宽比和界面缩放（从外屏切换至主屏）是否能正确工作。如果不能，有些UI可能会消失、图像会出错。

我推荐在折叠手机上尽可能地使用 灵活（Flex）模式。使用该模式后，UI设计师便能随意尝试各种想法，看看它们能否按预期工作。

你还需要在尽可能多的设备上测试UI；三星提供有 Remote Test Labs（远程测试实验室），你只需注册一个三星账号即可免费使用。

设计跨平台UI有哪些最佳做法？

Stefania：第一步是找出每个平台对UI和控制方式的影响，包括摆放、用户的身体互动、预期行为和背景/上下文。比如，用手指在手机上移动角色和用键盘鼠标、手柄控制器等一定是不一样的。

UI在这些情境下应有怎样的外观？利用设备边缘接收用户输入（比如在四周创建专门的互动UI）有时很有用，有时却会干扰用户的日常使用，比如切换应用或打开快捷设定菜单。

在Unity上，你可以使用预制件或UI Documents在特定平台上开关特定UI。UI Toolkit支持为指定平台创建Unity 样式表（Unity Style Sheet，USS）用于初始化UI Documents，样式表表现为MonoBehaviour脚本，不用代码就能为每一个平台分配样式。如果改动非常大，你可以在组件上为每个平台分配UXML文件来替换样式。

这里的关键在于尽可能地多做实机测试，了解特定平台上的用户会怎样与界面互动。

对于制作横屏与竖屏UI，你们有什么建议？

Aleksander：如果单纯把竖屏UI用在横屏，有时它看起来会很怪。更好的做法是拖动元素，为横屏重新设计UI。在横屏下，你可以将菜单移至一边，让玩家能用余下的屏幕继续观看游戏。建议你在测试中观察玩家是否会按预想的使用UI，结果一定会让你吃惊。

Stefania：了解用户如何在特定上下文中与界面互动非常关键。位于屏幕中心的按钮在竖屏时可以轻松触碰，但换成横屏手指就很难精确地按到按钮了。按钮可能需要移到角落里来方便点按。

除此之外，即便固定在角落里的元素在横竖屏下大小固定，它们在切换时仍会触发画布（Canvas）刷新。如果某个元素需要调整位置，或者替换成另一个界面，你可以根据不同的视图启用或禁用各个元素。

你们如何管理不同分辨率下的安全区？

Aleksander： 我们将安全区当作动态的UI端点。对于每个设备，我们会获取设备的顶部和底部，对于横屏游戏，则是左侧和右侧，并动态地移动UI元素。

本次采访的关键点在于，设计师需要专注于提供流畅、无障碍又令人享受的玩家体验。提前围绕用户开展设计工作、规划界面一致性能在整个设计流程，乃至以后的工作中发挥作用。在第二篇里，我们的专家将介绍UI的实现、测试、性能优化和分析工具整合方面的内行知识。

想了解更多？欢迎在我们的新电子书里学习Unity里的用户界面设计与实现。我们也邀请大家前往 Made with Unity论坛向其他用户分享自己的成功经验。