https://blog.unity.com/games/mobile-ui-design-best-practices-part-1
作者：Adam Axler 2023年2月1日
移动用户界面设计具有挑战性，随着游戏和设备的数量以指数级的速度增长，制作最具性能的游戏已成为首要任务。
我们与Outfit7的高级软件工程师Aleksander Gregorka和UI设计师Maja Nadvešnik、三星的开发人员关系工程师Søren Klit Lambaek以及Unity的高级产品设计师（UI工具）Stefania Valoroso和高级技术产品经理Benoit Dupuis进行了一次分两部分的访谈，以获得他们有效的移动UI设计的实用建议和技巧。
在问答的第一部分中，他们讨论了UI设计过程和在手机上发货时遇到的设备特定挑战，以及如何最大限度地发挥手机游戏的创造力和流量的关键策略。
让我们从一个基本问题开始：你如何描述游戏中好的UI？
Maja Nadvšnik：好的游戏UI有助于创建无缝且令人愉快的玩家体验，让玩家专注于游戏本身，而不是纠结于混乱或设计不佳的界面元素。为了让玩家在游戏时感到更舒适和自信，我们作为UI设计师需要考虑清楚、可用性、一致性和可访问性。
Benoit Dupuis：游戏中良好的用户界面必须对玩家有吸引力，并与他们正在经历的宇宙或游戏幻想完美融合。它们应该易于访问和使用，在您需要时提供，但决不能妨碍您享受游戏。每当用户界面感觉到故障或无响应时，它就会开始干扰体验，因此健壮性和性能也是必不可少的。最重要的是，它们必须是可用的和可读的，使玩家能够和各种游戏系统交互并访问关键信息。
创建游戏UI时的流程是什么？
Maja：创建游戏UI的过程通常包括几个步骤，包括定义UI目标和需求、绘制草图和原型、设计和样式、实现和测试以及迭代和细化。在某些情况下，UI可能是作为更大开发过程的一部分创建的，该过程可能涉及与其他团队成员（如美工、程序员和监制）密切合作，以确保UI无缝集成到游戏或项目中。
如何为项目选择字体？你的配色方案怎么样？
Maja：应该选择字体和颜色方案，以支持和增强项目的整体视觉风格和色调。由于我们主要为家庭设计，我们的项目异想天开，富有创意，我们采用了更现代、更具活力的美学。
对于我们的游戏，我们选择清晰易读的有趣字体。在设计过程中，我们测试并定义最小可读文本大小。当我们在设计配色方案时，我们倾向于使用符合艺术总监的视觉、具有足够对比度并能协同工作的颜色。
平均来说，创建UI需要多长时间？
Maja：为游戏创建UI所需的时间取决于项目的具体需求，以及所使用的资源和流程。为我们的游戏创建UI开始于预生产阶段，这将持续几个月。在预制作之后，我们选择了UI方向，并继续改进UI，将其从主要游戏扩展到辅助功能。我们可能需要六个月到一年的时间才能有一个清晰的愿景并完全定义我们的UI风格，即使如此，我们的工作仍将继续，直到游戏的最后一个功能就绪。
考虑玩家不同的手和手指大小有多重要？
Aleksander Gregorka：这是一个重要的考虑因素，因为考虑到我们应用程序的混合受众，儿童与设备的交互方式与青少年或成年人略有不同。他们持有不同的姿势，有时他们对特定的姿势有点尴尬。他们也会尝试各种多点触摸动作，所以你最好做好准备。
我们喜欢做的是让按钮变大，易于识别。每当您需要选择多个对象时，它们将彼此远离。当你拖动东西时，我们会将它们稍微向上移动，这样你的手指就不会覆盖你正在拖动的东西。重要的是能够看到你在做什么，而不用手遮住屏幕。
Stefania Valoroso：特别是对于移动游戏，这是一个重要的考虑因素，很大程度上取决于你的目标受众。例如，如果你要为手比成年人小、可能没有成年人灵巧的孩子打造游戏，你需要考虑手势是如何工作的，特定用户的动作是如何的，以及常用按钮和交互的位置。一只较小的手很难到达设备的中间，更不用说他们的优势手通常所在的角落。
此外，值得考虑的是，您的用户如何根据他们完成交互的惯用手来定制控件或UI，或者是否可以以其他方式为那些希望使用辅助工具的用户完成交互。要深入研究，请考虑Fitts定律的设计原理——移动到目标所需的时间，取决于目标的大小和距离——与移动设备的关系。有关更多信息，请查看Nielsen Norman集团的这篇文章（https://www.nngroup.com/articles/fitts-law/）。
对于创建UI和设计UI密集型游戏，您的最佳建议是什么？
Aleksander：最重要的是保持一致。游戏中一个部分的按钮的行为和外观应该与另一个部分相同。添加一些呼吸器以创建属于一起的项目组。避免任何东西的混乱和沉重的动画，专注于绝对需要引起玩家注意的最重要的部分。
Søren Klit Lambaek：仔细制定一个性能友好的系统非常重要。确保定期在尽可能多的设备上测试UI。如果您有任何动态渲染的UI，请确保它仅在绝对必要时更新。
设计可折叠UI的挑战、附加工作和好处是什么？
Søren：在Unity中，对可折叠手机的支持非常好，这意味着开发者不需要做大量的腿部工作来支持可折叠设备。它已经内置在UI组件中，但屏幕的纵横比是一个常见的问题。在折叠手机上，从封面屏幕过渡到大型双屏幕的UI安排可能很棘手，因此您需要对设备进行一些广泛的测试。
可用于设计可折叠UI的工具和资源有哪些？
Søren：我们的团队编写了使用Unity支持可折叠手机的教程。这些教程可在我们的开发人员网站上获得：
. Unity和Unreal Engine 4的可折叠设备功能(https://developer.samsung.com/galaxy-gamedev/blog/en-us/2022/09/16/foldable-device-features-with-unity-and-unreal-engine-4)
. 如何在Android gamedev中使用Jetpack窗口管理器(https://developer.samsung.com/galaxy-gamedev/blog/en-us/2022/07/20/how-to-use-jetpack-window-manager-in-android-game-dev)
如何在UI中处理动画，同时保持UI响应？
Stefania和Benoit：我们的主要建议是不要过度使用它们。运动对于制作传达信息的可用用户界面、吸引用户注意力以及建立元素之间的关系至关重要。在游戏中，动画也用于庆祝关键时刻，这通常需要更精细的图形和视觉效果，为玩家带来奖励感。最好仅限于这些情况。
一个好的做法是尝试重用整个UI中常见的小动画或过渡。这不仅可以在整个游戏中传递一致性，还可以减少性能问题。如果可能，并且取决于您正在尝试实现的目标，知道何时通过代码和动画组件一起应用这些标准动画将帮助您的UI看起来很棒，并在响应布局或方向变化时快速做出反应。使用UI工具包，您可以利用我们的USS转换为您的UI添加轻量级过渡效果。
您的UI设计原则是什么，以涵盖移动设备的不同分辨率？
Maja：使用响应式设计可以确保UI的布局和外观自动调整，以适应不同的屏幕大小和分辨率。使用使用百分比或ems（而不是固定像素值）的灵活布局，可以类似地确保UI平滑地调整到不同的屏幕大小和分辨率。
你能分享一些针对三星设备的UI设计技巧吗？
Søren：当涉及到可折叠手机时，请确保纵横比和大小调整（从封面屏幕到主屏幕的过渡）按预期工作。如果没有，你会得到不想要的结果，比如缺少UI或看起来错误的图形。
对于可折叠手机，我建议尽早实现Flex模式（https://www.samsung.com/ca/support/mobile-devices/galaxy-foldable-flex-mode/#:~:text=When%20your%20phone%20is%20partially,of%20the%20screen%20to%20navigate.）。一旦实现了这一点，UI设计人员就可以玩弄各种想法并测试它们，看看它们是否按计划工作。
您需要在尽可能多的设备上测试UI；三星为此提供了远程测试实验室（https://developer.samsung.com/remote-test-lab)%20Turn%20on%20screen%20reader%20support%20%20Remote%20Test%20Lab%20|%20Samsung%20Developers），任何拥有三星帐户的人都可以免费使用。
设计跨平台UI的一些最佳实践是什么？
Stefania：第一步是了解每个平台如何影响UI和控件，包括放置、物理用户交互、预期行为和上下文。例如，在移动设备上用拇指在世界各地移动角色与在桌面上用鼠标和键盘或控制台上的控制器移动角色完全不同。
在这些上下文中，UI实际上是什么样子的？让屏幕边缘接受触摸设备上的用户输入（因此，是一个特定的可交互UI）有帮助吗？或者这会干扰用户在使用触摸设备时一天中可能进行的滑动操作，例如在应用程序之间切换或滑动以提出快速的设备设置？
在Unity实现方面，您可以利用根据目标平台切换的Prefab Assets或UI文档。使用UI工具包，您可以设置特定于平台的统一样式表（USS）来初始化UI文档，这些文档可以作为MonoBehaviours呈现，以便无代码工作流用户可以为每个平台分配他们想要的USS。如果有很大的差异，可以通过组件为每个平台分配UXML组件来做类似的事情。
主要的收获是尽可能多地在设备上进行测试，以真正了解用户将如何在特定平台上与您的界面交互。
对于为横向和纵向方向制作一个像样的移动UI，您有什么建议？
Aleksander：如果你只是将你的竖向UI移植到横向，在某些地方会显得很奇怪。最好通过组合移动来实际设计。例如，横向方向允许你将菜单移到一边，如果你选择允许的话，这可以让你在屏幕的某一部分看到游戏。我建议你测试它，观察玩家是否真的按预期使用它。我可以向你保证，你会感到惊讶的。
Stefania：了解用户在特定环境下如何与界面交互是关键。用户可以很容易地用拇指在纵向上快速触摸居中的按钮，但当用户界面切换到横向时，他们不太可能准确地按下这些按钮。他们可能需要移动到角落，以便更容易接近。
此外，锚定到角上的元素可以在两个方向上具有固定的大小，并在画布更改时进行刷新。如果元素需要重新定位，或者根据方向需要完全不同的界面，则可以根据视图启用和禁用元素。
如何管理具有不同屏幕分辨率的UI设计的安全区域？
Aleksander：我们将安全区域视为动态UI偏移。对于每个设备，我们都会获得顶部和底部偏移，或者横向游戏的左右偏移，并且我们会动态地偏移UI元素。
移动设计师从本次采访中获得的一些要点是专注于无缝、可访问和令人愉快的玩家体验。为您的受众进行设计并尽早规划一致性将有助于您完成整个设计过程，甚至更久。在本系列的第二部分中，我们的专家将深入了解UI的实现、测试、性能优化和分析集成。
想了解更多吗？阅读我们关于Unity中用户界面设计和实现的新电子书（https://resources.unity.com/games/user-interface-design-and-implementation-in-unity）。我们还邀请您在我们的“统一制造”论坛（https://forum.unity.com/forums/made-with-unity.11/）上与其他用户分享成功秘诀。
