UI界面是如何炼成的

复读机读复读机 · 发表于 2024-1-8 18:59:06

本帖最后由复读机读复读机于 2024-1-8 18:58 编辑

UI是如何炼成的

UI，也就是用户界面。是玩家与游戏之间的主要交流方式，会直接影响到玩家的游戏体验。那么怎么样才能生产一个美观易用的UI呢？

下面套用下产品五要素来解释下UI的一生

战略层：主要包括用户需求和游戏目标。好的游戏首先要有自己的战略定位，由于个人属性的千差万别，想要用户体验良好，一定是基于某类固定需求的目标用户群体展开的，任何产品都不能覆盖到用户的方方面面。因此首先在进行战略定位的时候，要问自己、团队、企业几个基本的问题：
- 面向的用户是谁?（我们是针对什么样的用户去做游戏和设计游戏）
- 解决的痛点是什么?（玩家为什么会觉得这个游戏好玩）
- 凭什么是我们?（我们跟市场上的竞品相比，凭什么我们能打过他们，品质更好？宣发更好？题材更新？游戏乐趣性飞跃性的提升？性能优化更好适配更低端的机型？）
- 拥有什么样的资源促成事情完成?（是否能实现、美术效果是否能达标、是否有能力宣发等等）
范围层：战略层根据用户需求提出了游戏目标，范围层则是根据游戏目标提游戏需求:对内容和功能做取舍和排期。需要建立哪些些功能，这些功能又需要哪些内容，这些内容又需要哪些功能来支撑。功能的取舍主要考虑行业，受众人群和竟品，以及公司的资源。
结构层：
- 交互设计:游戏功能通过怎样的流程行进、如何让游戏易用（本文讲的是UI，所以这里考虑的是UI流程和UI的易用性）
- 信息架构:在游戏界面的设计中，信息结构主要是信息界面的分级显影，是否能让用户能清晰的找到需要的功能和信息，是否能推动某个功能和强调某些信息。
框架层：
- 界面设计：界面最基本的性能是具有功能性与使用性，通过界面设计，让用户明白功能操作，并将作品本身的信息更加顺畅的传递给使用者。
- 导航设计：引导用户去哪里
- 信息设计：传达想法给用户
表现层
- 使用多种感知方式，包括听觉、视觉，保证对比和一致性，比如视觉元素的大小和颜色，做好配色和排版。
根据这个结构就能看出，一个UI的产出，他并不是凭空生成的，而是从市场痛点、用户需求出发，经过需求评审确定最终需求，再经过原型设计将UI功能串通且合理化，最终再有美术进行优化提升表现力，他就像一座高楼，如果跳过任意一个步骤，都可能会导致你的UI不好用，达不到设计目的、导致后期频繁迭代修改。
因为本文重点讲解UI制作相关的知识点，所以本文会从原型制作出发，尝试总结出一些方法论。

原型设计

工具推荐

工具网址

这是一个非常强大的支持多人协同制作的原型工具
基础的教程：教程链接

原型制作的步骤

第一步，了解清楚你的界面是为什么样的系统服务的，玩家有什么需求，把这些需求写到小本本上记住
- 认知需求：功能性为主的系统，界面应以实用性为主，视觉感官要素仅为辅助。
- 情绪需求：部分界面信息重要度不高或关键信息量少，但展示时恰逢玩家带有某种情绪，天然适合回应玩家的情感期待，有助于增强游戏体验。此类界面多为提示或付费类的系统（成功结果提示，福利界面，等待结果界面之类）。
第二步，确定界面制作的程度
- 界面简洁、功能全面、交互便捷是一个不可能三角，根据自己的系统和迭代节奏选择对应的方向即可
- 美术风格：美术风格正常不超出最开始既定的风格就行，如果要推翻基本都是大改了。
第三步，确定界面的大体结构
- 从0开始确定界面结构，新增系统则是找界面的入口，以及入口之后功能的结构。（这一步其实多用于传统的手游的UI设计，在我们或者MMO类型的游戏中，这一步神似但每个界面遇到的情况并不相同）
第四步，优化界面信息投放，降低用户的使用成本
- 需要对信息进行加工处理，让玩家能够有条理地处理复杂信息，即“一看就知道是什么”，“一读就明白怎么做”，“一做就清楚为什么”，总结起来即【易学性】，【合理性】，【完备性】
第五步，体验设计
- 之前的4步，你的UI界面已经可以用了，那么最后1步就是要把可用变成好用，从操作舒适、便捷、流畅、适应性几个方向思考你的界面是否能满足用户需求。

第一步了解玩家需求

认知需求：

了解清楚玩家玩这个系统他关心哪些重点【主要是功能型界面】
强化系统：升级后的属性更强、选择强化的装备、武器等级、消耗、成长后数值变化、成功率（有些游戏为了照顾清晰会选择弱化这个数据）

邮件系统：邮件列表、邮件状态、邮件信息、界面清晰、界面显示完全、便捷领取奖励

建议：做一个界面的时候，反复问你自己你会用这个界面做什么？你需要什么信息或者交互支撑？把你整理出来的信息记到1个本子上，在原型设计的时候，反复拿出来确认这些东西少没有少。

情绪需求：

照顾玩家的情绪感受【主要是非功能型界面】
抽奖表现，情绪积累和释放原神抽奖中的光效变化
强化成功或者失败后不同的反馈，总体来说是兼顾传递信息后，要增强正反馈降低负反馈反馈设计
建议：玩家情绪是可以被引导进行放大和削弱的，所以在制作UI原型之前，如果你可以设想自己界面需不需要对玩家的情绪进行操控，如果需要，那么及时的记下来，除了上述的强化、抽奖的常见案例外还有：
- 玩家获得大幅获得提升（不仅是数值上的提升，比如段位这样标识玩家技术上的提升做情绪的放大也是很值得的）
- 玩家努力通过难题时（当玩家解决难题的过程中其实是处于一种情绪积累的过程，所以当他解决难题后，请不要吝啬，释放他）
- 竞技性很强的游戏弱化失败的反馈（连续的高频的负反馈，是很容易导致玩家流失的，而竞技类游戏这一点更胜，所以在游戏机制上做保护外，也请不要放大他的负面情绪）

第二步确定制作程度

界面制作程度：

越是使用频率高，重要度高的系统，配套的周边设计越完善，值得花费的时间较长。
辅助类系统就算只是满足大致需求，制作时间少，体验一般的情况下也可以接受。
找到界面侧重点，无论是好看好用还是好清晰，围绕这个快速出成品也比想要每个界面都极致满意现实得多。

第三步确定界面的结构

横向结构

横向结构概括了一个界面信息的大致排布位置，是玩家对信息秩序与逻辑关系的感知。设计界面结构时，选择重点全屏还是窗口的表现形式，是第一步。
- 全屏：优点：可以放信息的区域更多，表现力更强，操作空间体验更好。缺点：遮挡主界面，连续使用全屏会让玩家认知变难，记忆困难。
- 弹窗：优点：更轻度、可以开UI的同时观察实时的信息，打开界面视觉上更连续。缺点就是全屏界面的优点
- 不同游戏类型使用全屏/窗口的比例不同，混用居多。
在确定好全屏，横向结构上的信息类型都可以划分为三个区域：标题区；页签区；功能区。

下面就会讲解对应区域中，常见的功能和他的优缺点，希望大家能够正确选择。

标题：

常见职能1：标题文本：对整个界面的概括，相当于界面的0级页签

常见职能2：层级切换
- 职能是对纵向层级的管理，为标题区最主要的功能。最主要分类：【关闭】；【返回】；【跳转】。大多游戏标题区只用关闭或返回，可满足标题区的基本需求。
- 返回和关闭：
  - 使用【返回】的界面，优点：玩家在认知上是很清晰的，子功能返回到系统界面最后返回到主界面天然符合层级之间关系的解释。加上返回界面大多全屏，信息展示空间大，成了手游游戏的主流的做法。缺点：如果多个需要返回的界面连续使用，会有认知上的负担
    
    <div align=center><img src="https://arkimg.ark.online/1703483648550-6.webp" alt="img" style="zoom: 50%;" /><img src="https://arkimg.ark.online/UIcreate4_magic.webp" alt="UIcreate4_magic" style="zoom: 70%;" /><div align=left>
  - 关闭界面多用于端游或者手游中大截面中的子功能，优点是直观的能看到层架之间的关系和嵌套。
  <div align=center><img src="https://arkimg.ark.online/image-20231225140954991.webp" alt="image-20231225140954991" style="zoom: 67%;" /> <img src="https://arkimg.ark.online/UIcreate5_magic.webp" style="zoom: 50%;" /><div align=left>
- 跳转：
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-8.webp" alt="img" /><div align=left>
  - 面包屑虽然看起来清晰便捷，但游产品在设计上就单个系统纵向层级比较少，玩家也不需要记忆前后界面关联，所以并不推荐。
常见职能3：公共行为
- 某些覆盖整体的需求和行为也适合放在标题区，比如资源情况，全局搜索，全局筛选，游戏说明等。全局类行为的覆盖范围延伸到了整个界面，适合放在标题区。
<div align=center><img src="https://arkimg.ark.online/1703483648551-9.webp" alt="img" /><div align=left>
失败的案例：

比如上图标题区域没有名称，且返回和关闭同时存在，用户第一眼看上去就需要理解一下

页签：

页签的本质是对界面树状从属结构的展示，通过切换页签可以改变某个面板的状态。
由于页签与附属界面之间存在紧密的关联，因此需要将它们放置在被改变页面的附近。此外，根据人的视线规律，从左上到右下是最常见的浏览方式，因此页签的最佳位置应该是在左右两侧和上方。
侧边页签
- 侧边页签往往是1级页签
- 侧边页签黄金位置为页签区左右两侧，尤其是左侧居多，既方便点击，又符合人体自然的视觉规律。（纵向屏幕的游戏则以顶部和底部为黄金位置）
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-11.webp" alt="img" style="zoom: 33%;" /><div align=left>
垂类页签
- 概念区分度/功能差异不够大，可使用垂直页签，这类页签往往是二级页签。其黄金位置位于标题区之下，页签区的顶部或者底部。手机横向距离长，尤其适合展示分类多，需要频繁切换的系统。

筛选框和折叠页签
- 一般用于3级及以上的页签
- 设置三级及以上页签时需要格外慎重，界面页签越多，界面的从属结构越复杂，不利于阅读理解与内容展示。
- 也多用于一些拍卖行，商城的地方。这类场景中玩家第一需求是快速找到自己需要的内容。

功能区

功能区是玩家发生系统交互的区域。没有固定的范式或者规则，策划可以自由的排布内容，但自由并不是意味着混乱，合理利用原件，可以有效的降低玩家的理解成本
信息原件
- 信息元件是系统规则展示的核心，提供了玩家决策的依据，是一个界面最重要的展示主体。它可以是文字，图片，视频或者混合等任何表现形式，其视觉面积大视觉层级高。
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-14.webp" alt="img" style="zoom: 50%;" /><div align=left>
- 不同系统有不同展示的主体，角色系统的主体是角色列表或角色详情，福利界面主体是奖励道具等，公告界面就是需要展示的公告内容，根据系统需求确定。
执行原件
- 执行元件是玩家可对信息做出反应的部分，常见有按钮，选中框，滑动区域等可交互部分。其位置一般放在信息元件之下或右侧，让玩家阅读完信息后再做出反应。
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-15.webp" alt="img" style="zoom: 50%;" /><div align=left>
装饰原件
- 装饰元件常见于角色立绘，UI底纹，UI特效，场景原画等，以静态或动态方式呈现。虽然其重要程度不够，但装饰元件本身也可以承载部分信息，且图形化色彩丰富的装饰信息让大脑注意力快速被吸引。因此装饰元件主要有以下作用
- 强化界面预设的情绪。
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-16.webp" alt="img" style="zoom: 50%;" /><div align=left>
- 突出重点信息
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-17.webp" alt="img" style="zoom: 50%;" /><div align=left>
- 增强界面美观度
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-18.webp" alt="img" style="zoom:67%;" /><div align=left>
- 帮助塑造情境化界面，或加强展现游戏世界观
  
  <div align=center><img src="https://arkimg.ark.online/1703483648551-19.webp" alt="img" style="zoom:50%;" /><div align=left>
混合原件
- 混合元件是将以上三种元件进行组合得到的元件，是压缩界面信息量的有效方式。这类元件往往会采用闭合的视觉印象，将不同作用的元件结合在一起。
信息+执行

<div align=center><img src="https://arkimg.ark.online/1703483648551-20.webp" alt="img" style="zoom:150%;" /><div align=left>
信息+装饰

<div align=center><img src="https://arkimg.ark.online/1703483648552-21.webp" alt="img" style="zoom:150%;" /><div align=left>
执行+装饰

<div align=center><img src="https://arkimg.ark.online/1703483648552-22.webp" alt="img" style="zoom:150%;" /><div align=left>

纵向结构

纵向结构更多的是在宏观对整个游戏的界面之间层级的规划

纵向结构是不同界面层级堆叠在一起的状态，我们需要做好多个层级的规划，有两个点是一定要注意的：
- 1.避免各个界面引发遮挡冲突，避免流程的阻断或者信息的缺失；
- 2.保证玩家清晰理解界面之间的结构父子关系，从而塑造快捷方便的界面使用体验。
比较合理的纵向结构层级：主界面-》功能界面-》引导提示

<div align=center><img src="https://arkimg.ark.online/UIcreat7_magic.webp" style="zoom:67%;" /><div align=left>
- 功能界面中也有层级之分：UI背景底板→3D模型→普通UI元件→UI特效→ 主动弹出式的功能界面 → 浮动信息层 → 全局提示/弹窗层
- 当然上述层级并不是绝对的，比如主动弹出式功能界面，有时为了避免被引导遮挡也是会强制显示在最上层。
  
  <div align=center><img src="https://arkimg.ark.online/UIcreat8_magic.webp" style="zoom:67%;" /><div align=left>

层级优化

横向结构会将信息的位置大致排布在一个界面上，而纵向结构则会将多个横向界面按顺序排列在一起。
在规划界面结构时，需要做出一些决策，比如选择全屏还是窗口显示、使用返回还是关闭体系、确定通用页签区和功能区的位置等。建立通用的界面结构规则有助于统一信息的表达方式，降低玩家的学习成本。
然而，仅仅规划结构还不够，为了让玩家觉得界面结构好用，我们需要关注两个方面的优化：确保界面清晰可见和减少层级。

横向结构优化

平面层的策略

玩家打开界面会习惯性地寻找视觉焦点和父子关系，来感知界面结构，并决定阅读的顺序。而刚好平面设计中的一些美术技巧可以帮助玩家理解这些。
- 区域色调：
  - 界面颜色的饱和度和灰度对玩家的层级判断有着显著影响。根据研究，自然世界中的光线作用使得灰度偏白的物体通常被感知为“更近”，而较黑的区域则被感知为离玩家更远。因此，通过使用偏白的颜色可以有效地表示更深层级的界面，并且还可以突出显示视觉上更重要的区域
    
    <div align=center><img src="https://arkimg.ark.online/1703483648552-23.webp" alt="img" style="zoom: 50%;" /><div align=left>
- 实物模拟：
  - 为了表现界面的顺序，除了使用抽象方法外，还可以利用实物之间的堆叠关系来帮助玩家理解层级关系。例如，可以像书页、页签、地图或手机等实物一样，通过它们之间的堆叠关系来传达界面的层级结构。这种方式能够更直观地向玩家展示界面的顺序和层次关系。
    
    <div align=center><img src="https://arkimg.ark.online/1703483648552-24.webp" alt="img" style="zoom:50%;" /><img src="https://arkimg.ark.online/1703483648552-25.webp" alt="img" style="zoom:50%;" /><div align=left>
- 页签摆放规则：
  - 当多个页签放在一起时，如果没有进行区分，可能会对玩家的层级判断造成困扰。
  - 为了在同一界面中区分一级和二级页签，通常有两种处理方法。
    - 第一种方法是将一级和二级页签分别放置在不同的区域。例如，将一级页签放在侧边，而将与之相关的模块组件附近的区域用于放置二级页签。这样，玩家可以很容易地区分左边是一级页签，另一个是二级页签。
  <div align=center><img src="https://arkimg.ark.online/1703483648552-26.webp" alt="img" style="zoom: 33%;" /><img src="https://arkimg.ark.online/1703483648552-27.webp" alt="img" style="zoom: 33%;" /><div align=left>
  - 另一种方法是通过形状、颜色、大小等特征来区分一级和二级页签，以防止玩家产生误解。如果希望将一级和二级页签放在同一侧，这种方法尤为有效。
  <div align=center><img src="https://arkimg.ark.online/1703483648552-28.webp" alt="img" style="zoom:67%;" /><div align=left>

界面动效

策划眼里的界面动效，是可以引导玩家视线顺序，帮助玩家理解界面的结构

比如上述这个视频中，界面是一个非常复杂的，信息繁杂的界面，通过动效的帮助，让玩家第一眼就能大致的了解界面中的区域关系。

纵向层级优化

纵向层级过多会给玩家带来记忆上的困难，因此应该尽量降低纵向层级的深度。当然，如果无法避免或减少层级，可以考虑在父界面中添加子界面或抽屉界面作为解决方案。

第四步确定界面中的信息

在第三步，我们确定了整体界面的结构，并了解了如何使界面清晰易懂的方法。接下来，我们将对界面中的信息进行一些处理，这里主要介绍一些小技巧。总体来说，只要遵循这些原则，你的界面信息就是合格的。
我们需要对信息进行加工处理，以便玩家能够有条理地处理复杂信息。具体来说，我们希望实现“一看就知道是什么”，“一读就明白怎么做”，“一做就清楚为什么”的效果。总结起来，这三个方面分别是【易学性】、【合理性】和【完备性】。

玩家第一眼设计

理解是使用的前提，只有通过阅读和理解才能产生使用的意愿和行为，最终才能体验到产品的易用性。因此，确保信息的呈现具有易学性是所有步骤的起点。
当玩家首次看到界面时，他们并不会详细阅读具体信息，而是对界面整体进行模糊处理，以理解界面中各个元素之间的关系和作用。我们可以通过提供心理预期来引导玩家进行这种模糊处理。

给予心理预期

就像有预习习惯的学生在考试中表现更好一样，如果玩家对界面的组成和布局有了预期，他们面临的学习压力将会减轻。这种预期可以从四个方面入手：心理模型、现实拟物、遵循主流和规则统一。
前三个方面是通过游戏外部的方式引导和教育玩家，而最后一点则是通过游戏内的规则来减少玩家的认知负担。

心理模型

人类认知事物存在普遍规律，即与生俱来的心理模型。如果我们所做界面符合此模型，则能让不同认知和教育程度的玩家都能快速了解界面整体布局。在此推荐业内应用范围最广的格式塔（Gestalt）心理学原理。这种理论优点在于足够下沉，应用范围足够广，应用时间足够久，已被市场证实可行。格式塔心理学原理介绍
简单（simplicity）
具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

<div align=center><img src="https://arkimg.ark.online/1703483648553-34.webp" alt="img" style="zoom: 43%;" /><div align=left>

<div align=center><img src="https://arkimg.ark.online/1703483648552-33.webp" alt="img" style="zoom: 80%;" /><div align=left>
相似（similarity）
某一方面相似的独立视觉个体趋于组成视觉整体。玩家通常把那些明显具有共同特性（如形状、趋势、色调、大小等）的事物归为一类。这个应用范围就更广了，界面中相似视觉元素会被视为一组。

<div align=center><img src="https://arkimg.ark.online/1703483648553-35.webp" alt="img" style="zoom:67%;" /><div align=left>
接近（proximity）
界面中空间接近的视觉元素，大脑会视作一个整体，从而削弱视觉元素个体特征的感知。
- 比如下图中因为距离相近，玩家在第一眼会将此类同一个区域。
<div align=center><img src="https://arkimg.ark.online/1703483648553-36.webp" alt="img" style="zoom:67%;" /><div align=left>
连续（continuity）
如果界面元素具有某个方向延续的趋势，那么玩家会将这个地方看作是整体并会将视线调整为趋势的顺序。连续与闭合结合应用比较多。

<div align=center><img src="https://arkimg.ark.online/1703483648553-37.webp" alt="img" style="zoom:100%;" /><div align=left>
- 被隐藏的物品其实也是连续的运用，能让玩家察觉到有向下的趋势，从而自然联想到这里有向下拖拽的操作

现实拟物

每人都拥有一定的社会生活经验，如果能将一个系统的运作包装成日常熟悉的道具使用形式/自然现象，那么玩家直接利用记忆即可快速掌握界面要点，无需额外学习，这也是种传统可行的方法。

遵循主流

就像有预习习惯的孩子考试成绩更好一样，如果玩家对界面的组成和布局有了预期，界面学习压力就更小。这种预期可从四方面入手：心理模型；现实拟物；遵循主流；规则统一。
前三者是利用本游戏外部的方式引导和教育玩家，而最后一点则是利用游戏内的规则减少玩家认知负担。

规则统一

在游戏设计中，如果已经采用了某种理念（例如，将目标设定在左侧，而操作则在右侧），那么在其他界面设计时，最好也遵循这一规则。一旦玩家掌握了这种规则，他们就能形成深刻的印象。如果能持续强化这种印象，那么可以极大地降低玩家的认知负担。

<div align=center><img src="https://arkimg.ark.online/1703483648553-40.webp" alt="img" style="zoom:67%;" /><div align=left>
- 当然有些游戏为了提高收入，也会利用这一点，做一些按钮位置互换，从而让玩家从习惯上误触

控制信息总量

在明确了整体信息设计的方向后，接下来我们需要确定一个合理的信息总量范围，以进一步提升信息的易理解性。
整体界面的信息量应保持在一个适当的范围内。如果信息量过大，会导致信息过于密集，从而降低玩家的阅读兴趣；反之，如果信息量过小，信息可能会显得分散或不完整，同样会影响界面的交互体验。为了制定出这个合理的信息总量范围，我们可以通过优化界面的层级结构和控制视觉元素的数量来实现。

限制层级数量

信息接受量和结构设计强相关，界面层级越清晰，玩家能接受的信息越多。目前主流玩家推荐接受的单个界面层级为3，即除界面本身外，另外包含1个一级和1个二级页签。如果界面层级表现方式合理，单个界面层级最高可为4，也就是包含一级二级三级页签。

<div align=center><img src="https://arkimg.ark.online/1703483648553-41.webp" alt="img" style="zoom:80%;" /><div align=left>
- 《猎手之王》在层级清晰情况下，单界面最高层级为4看上去仍然很清晰，理论上可以放更多信息量

限制元素数量

除层级外，玩家感知上每一组相似的信息中，需要独立处理的对象极限是6个。这里根据格式塔的相似和接近原理，类似框架的独立个体会被视作一个整体，称为一组相似信息。而这个整体内独立个体一般6个以内为最优解。这是因为人类一眼能辨识的个数是5或者6，因此很多游戏不断迭代后，会将同一组数据中个体限制在6个及以内。

<div align=center><img src="https://arkimg.ark.online/1703483648553-42.webp" alt="img" style="zoom:67%;" /><div align=left>
- 《明日方舟》中每行角色槽位数量为6
有些人可能会感到困惑，这个例子中的角色槽位数量是6×2（水平×垂直），这似乎并不等于6个。这是因为，如果水平和垂直方向上的独立视觉个体排列得较为紧密，玩家往往会将数量较多的方向视为一组。在这种情况下，玩家能够迅速识别出水平方向有6个个体，垂直方向有2个个体。
因此，在没有其他视觉因素影响的情况下，如果界面中只包含独立视觉个体，那么6×5或者5×6已经是其极限了。如果角色槽位的数量达到6×6，玩家可能会暂时难以将独立的个体进行视觉分组。

《王者荣耀》的背包界面层级为3，槽位布局为6×5。幸运的是，其视觉分层设计得相当出色，使得界面信息量在可接受范围内。
目前，我推荐的信息量方案是：单个界面层级≤4，单组视觉元素数量≤6，以及良好的界面结构和视觉分层。然而，这并非绝对的规定。只要能够确保界面的易学性，我们完全可以在界面中加入更多的视觉元素。具体问题需要具体分析，各个项目制定的信息量范围也会有所不同。

信息处理阶段

总体设计完成后，策划需要对交互案上所有信息进行精细化处理，以确保达到【合理性】与【完备性】。

筛选信息

按重要度分类

信息是玩家体验界面（查看和交互）的最终对象，也是左右界面体验的关键。此阶段需要挑选中最终呈现在面板上的所有信息。不同类型系统信息形式千奇百怪，但都可基于想要达成的界面目标，按重要性分为：必要信息；补充信息；无用信息。
必要信息
- 和界面主题强相关，且其存在与否会对玩家界面操作行为产生直接关系的信息。比如一个限时玩法界面中，玩法名称和有效期限，参与入口和限制条件，奖励预览等是必要信息。
- 必要信息一般如下处理
  - 突出显示：常见为塑造差异（颜色/特效/形状等）；提升占比（面积大小/层级先后）；调整位置（放在视觉中心处或偏中间等非视觉边缘位置）。<div align=center><img src="https://arkimg.ark.online/1703483648553-46.webp" alt="img" style="zoom:50%;" /><div align=left>
  - 普通显示：有些信息重要不可隐藏，属于玩家看一遍就能记住的一次性信息。比如只有穿戴装备，对应部位槽位宝石才会生效的提醒文字，还比如通行证界面活动截止时间等。<div align=center><img src="https://arkimg.ark.online/1703483648553-47.webp" alt="img" style="zoom:50%;" /><div align=left>
    - 此类信息占比小，位置比较边缘，但是需要让玩家清晰看到。
    - 当然此类信息视重要情况也可临时以悬浮框形式展示，数秒后消失，可以避免增加界面信息冗余度。

补充信息

和界面主题相关，玩家需求不够明显或者使用频率低的信息。比如限时玩法界面中，玩法背景预览，玩法剧情介绍，兑换商城/快捷购买等配套小功能等。
弱化显示：比如采用背景相似色调融入背景，扁平化处理，面积占比缩小等。<div align=center><img src="https://arkimg.ark.online/1703483648553-48.webp" alt="img" style="zoom:100%;" /><div align=left>
隐藏折叠：将部分信息或信息入口折叠在某个集成按钮里。

无用信息

和界面主题无关，对实现界面目标没有帮助，或者有关但此信息已被其他信息所传达，构成了完全的重复信息。此类信息只要认真分析一般都可分辨出来。无用信息一般如下处理
- （1）屏蔽：直接删掉。
- （2）弱化显示：非完全的重复信息就可以保留，弱化方式同上。
再次强调，重要度分类是基于想要达成的目标来分类。比如某个玩法需要玩家对关卡内某个BOSS进行阵容调整，那么界面上BOSS角色的形象，技能，属性等信息就会抬升至必要信息。如果玩法只是日常资源向，则BOSS相关为无用信息。这个目标如果不清楚，可以重新再理一遍玩家的需求。

遍历信息状态

在制作UI原型的时候，因为游戏界面中的状态是多变的，不同条件下信息显示情况也是不同的，所以在制作UI原型的时候一定要考虑全面，避免遗漏。下面为信息常见的状态。
根据信息极端情况可分为：
- 空态：界面没有游戏元素可展示给玩家，或者界面处于起始状态。
- 满态：决定界面的某个游戏元素到达峰值，界面无法继续改变。
- 比如排行榜没有人上榜的状态，和满人的状态
根据信息变动情况可分为：
- 静态：完全不会变动的信息，比如固定日期：X年X月X日X时。
- 变动态：会随着时间或游戏进程改变的信息，比如活动剩余时间：X日X时X分X秒。
- 比如活动倒计时变成活动正在进行中
根据信息是否可交互还可衍生出：
- 不可交互态：一般称作灰态，最早用处是告诉玩家没有达到交互条件，点了没有反应。但现在趋势为灰态点击也最好由反应。
- 可交互态：操作有反馈，可达成玩家的界面目的。
- 比如玩家等级不够时按钮为不可交互状态，等级满足时，按钮恢复为可交互态。

塑形包装

挑选形式与载体

同样的信息本身可以是图片，文字，视频，音频等表现形式。
越是复杂重要的信息越推荐使用视频或图文的方式展示，方便表达的则可用文字。
- 《原神》等游戏中，教程信息基本都以图文或视频文字的形式存在
在同一个界面中，我更推荐信息以多样化的方式出现。单一的信息（尤其是纯文字）表达效率低下，也会影响到界面观感。

<div align=center><img src="https://arkimg.ark.online/1703483648554-51.webp" alt="img" style="zoom: 33%;" /><img src="https://arkimg.ark.online/1703483648554-52.webp" alt="img" style="zoom: 50%;" /><div align=left>
- 排行榜界面几乎都是纯文字，玩家阅读起来费时且排名前列的玩家的奖励感不足
- 将前三甲的头像名称以特殊位置展现出来，玩家能迅速抓住视觉重点，这个思路可继续延伸
另外信息需要合适的UI载体，不同UI面板上展示的同样信息含义轻重有别。比如同样是获得道具提示，悬浮框就比单独获得界面更轻量操作步骤更少，但玩家获得感奖励感更低。两种方案适用不同环境，并无直接优劣之分。

<div align=center><img src="https://arkimg.ark.online/1703483648554-53.webp" alt="img" style="zoom: 100%;" /><div align=left>

<div align=center><img src="https://arkimg.ark.online/1703483648554-54.webp" alt="img" style="zoom: 100%;" /><div align=left>
- 无论是信息形式还是载体，我都推荐按信息场景和玩家需求划分，以适应不同情境下的信息需求。

2.2.2 适度包装

包装是对信息进行特定封装的过程，以满足特定玩家群体的情感需求。
在这个过程中，文案和UI美术通常会接手包装工作。文案通过剧情、世界观等方式展现信息，而UI则致力于提升美观度。对于IP产品，有时甚至会以牺牲可读性或易学性为代价来封装信息。
然而，系统需要适当地控制包装的程度，明确重点。与游戏内容设计相似，做减法往往比做加法更有效。文案希望每个信息都富有文化内涵，或者UI希望每个界面都令人印象深刻，这是不现实且不科学的。人的认知规律决定了感知体验需要适度的张弛有度。与游戏核心内容相关的信息和界面可以进行适当的包装，但对于偏功能类的信息，玩家的预期是快速获取信息并达到目的。在这种情况下，给玩家呈现精良的包装既耗费资源又无法达到预期效果。

挑选出现时机

随着游戏时间和功能状态不同，玩家对信息出现时机的需求均有不同。比如某些简单的界面操作提示，玩家学会后便不再需要，若该信息持续显示则不利于界面保持适中的信息量。不同类型信息最佳显示时期分类如下：

重要规则类信息

这类信息和功能的运作规则强烈相关，如果玩家不清楚则会限制玩家对功能的认知和使用范围，一般会常驻在界面上。

时间提示型信息

用于提示玩家重要活动/玩法/功能时间点的信息。这类信息出现的时机需要在正式开始的时间点前，持续有限的时间。

临时教学型信息

此类消息一般是引导并告诉新人玩家某些功能该怎么用，出现在玩家可能需要帮助时，玩家学完后消息在某个时间阶段不再出现。

组合优化阶段

到此阶段时，局部信息已被全部处理完毕，此阶段将会把信息以合理方式拼接起来，并对最终交互体验进行优化。

摆放位置

根据格式塔原理的“接近”原则，靠近的信息能创造关联，间隔留白的信息能体现差异。有逻辑关联的信息会摆放在一起，各自独立的信息视觉上远离。
父子关系
- 若信息间有从属关系，可运用左右，上下，包裹，周围，对齐的方法展示<div align=center><img src="https://arkimg.ark.online/1703483648554-57.webp" alt="img" style="zoom:50%;" /><div align=left>
- 装备槽位分布在角色立绘周围，被蓝色圆形背景包裹住，表现出装备槽位对主角的从属关系。此部分也是对格式塔理论的生动应用
顺序关系
- 信息之间若存在推导，解释，补充等逻辑先后关系，那么就会天然存在阅读顺序。纯信息展示采用上下和左右相邻效果更好，如果是交互元件，则只推荐上下相邻，因为对顺序的理解上垂直关系比水平关系明显得多。<div align=center><img src="https://arkimg.ark.online/1703483648554-58.webp" alt="img" style="zoom:100%;" /><div align=left>
- 道具左侧图标是主体，右侧是主体属性的说明，二者是补充关系采用左右相邻更适合展示。不过这里把图标和道具名称顶端对齐下逻辑关系会更明确<div align=center><img src="https://arkimg.ark.online/1703483648554-59.webp" alt="img" style="zoom:100%;" /><div align=left>
选择数量和最终确定选择有明显先后顺序，涉及到操作最好采用上下垂直布局

独立平级关系

信息之间没有强烈的逻辑联系，甚至属于不同功能，但它们都为达到某个界面目的而存在，这类信息只有对玩家的优先级差异。处理上需要散布留白，间隔，如果界面空旷，这类信息之间还不一定要靠近，如果基于界面空间考虑要靠近，那也需要有足够留白来区分彼此独立性。

协会信息和公告存在明显的作用差异，但又可以共同让玩家了解公会的大体情况，因此虽是上下布局也溜了足够间隔

完善方案

有些策划能考虑到功能信息的各个状态，信息本身阐述也清楚，但提供信息不对或不全。为保证信息完备性，系统策划需要给予玩家最清晰的阐述和解决方案。
比如强化养成系统中玩家材料不足，糟糕和合理的信息方案完全不同。
- 糟糕的方案：弹出提示 “无法强化”。（只透露发生了什么事情，但完全没说出了什么状况）
- 不及格的方案：弹出提示 “缺少材料A，无法强化”。（说明了状况，但玩家不知道怎么做）
- 及格的方案：弹出确认框“缺少n个材料A，无法强化，是否前往购买？”（说清楚了状况，也给了解决方案，但解决方案比较单一，特定情况下可用）
- 合理的方案：弹出专用界面“缺少n个材料A，无法强化，您可以在以下途径获得”，玩家点击各个途径可跳转不同界面。（说清楚了状况，也给了所有解决方案）

建立引导

信息引导是一种弱引导方式，通过对信息的包装、修饰和暗示，引导玩家进行特定的行为。例如，按钮上的流光特效、红点、动效以及关键文字的特殊字色等都是信息引导的体现。与引导功能相比，信息引导的程度并不强烈，但它同样有助于玩家实现界面目标，或者按照策划者的意图进行操作。
信息引导是玩家的一种自然需求，他们希望自然而然地知道如何操作以达成界面目标，而无需停留思考或阅读冗长的建议。同时，策划者也希望通过信息引导来提示玩家哪些地方需要特别注意，以避免走弯路，比如剧情的关键信息和道具的价值感知等。
几乎所有需要玩家自主操作或策划有信息展示需求的界面都需要信息引导。例如，技能装配界面的高亮按钮、商城界面的推荐和打折信息，以及首充界面中的充值按钮等。
建立信息引导主要通过凸显差异化来实现，具体方法如下：

视觉差异化

通过色调，形状，特效，动效等方式凸显特定信息差异的方式是最常见的做法。
如果仅是普通决策级别的强调，或者对玩家有利的行为，比如技能中的升级，福利中有奖励可领取，大多游戏会采用和UI主色调的对比色来凸显，或者同色调但明度上升了很多个级别。

而无需强调的决策或行为则一般采用和主色调UI相同的颜色。
形状差异化或大小有别的强调一般是对信息相似性和视觉地位的展示。同类型但强调等级不同的功能一般形状相似但大小有别，如果功能差别很大（比如决策按钮和跳转按钮），则一般用形状差异表现。

《王者荣耀》为了强调玩法入口采用了色调+形状+大小的区分方式

提醒功能与声效

声效是UI界面上容易被忽视的体验。如果某个重要功能内部有变化，策划想玩家立即前去查看，可新增提醒功能，在主界面等位置新增UI。这种方式属于功能，但仍和界面体验相关所以也提下。
常见的有好友上线提示，限时活动开始提醒，等级解锁功能提示等地方可用到。配合声效提醒，能起到更强的引导作用，比如《剑灵》好友上线时的提示语音和飘字提醒。

第五步体验设计

操作舒适

操作设计的目标就是让玩家在操作时获得手与脑的双重舒适感。

明确手指的职能

手指作为现阶段输入端最常用的器官，是操作设计中最需考量的一点。而手指怎么用起来舒服又取决于手在输入端上的握持姿势。握持状态下反复操作感受最快捷且不累的手指可承担频繁操作，其余承担次要或辅助操作。
T1大拇指&食指承担了最频繁的操作（比如普攻，跳跃，转视角，沟通交流等核心操作）；
T2中指（有时候也包括了无名指）承担了次要操作
T3无名指&小拇指仅提供支撑或同时承担了不太重要的辅助操作

手机端-屏幕

手机（也包括平板）屏幕特点为既是显示区域又是操作区域，因此手指的操作习惯对其界面设计的影响非常大。

手机端主要握持姿势和操作舒适区（舒适区为绿色，不便区为黄色，死角为红色）
- 手游中常见的玩家手持状态为上图的2,3
手机屏幕特殊在于，它几乎只用到大拇指和食指（T1），只有极少数情况下会用到其他手指（比如部分音游将屏幕固定在桌子上多指并用）。因为在上述握持姿势下用拇指和食指之外的手指反而降低操作效率。
因此，市面上绝大多数横屏手游HUD的重要按键位置基本和握持的舒适区相吻合。但是UI界面中非高频操作，比如商业化，便捷窗口，退出和标题按钮等还是会放在边角。

在HUD界面中，手机界面键位尽可能放在左右手大拇指操作舒适的位置，操作越频繁的按键尺寸越大。但在UI界面中则更倾向于按照整体逻辑而不是舒适度去排按钮位置

操作原则

界面中用哪些操作必须遵从某些原则，以达到让玩家少思考就知道怎么使用的目的。

统一原则

有经验的人都清楚，大脑非常喜欢有规律的事物，会自然地把之前学到的经验用于新的事物上。因此不同界面中相同性质的操作需要保持一致，可降低学习成本，减少迷惑。
举例：将技能装备在技能槽上，如果一开始规划时采用点选而不是拖拽，那么后面类似宝石镶嵌之类的功能也需要用点选。如果要改则需一并修改。

最少原则

根据大多数人的游戏体验需求，玩家对于操作“宁可等待，不愿多动”：一方面指相比连续按键，按住或者悬停一段时间更容易被接受，又指能够由系统帮忙决策的事情，系统可以自动或者弹出提示询问是否要去做。
举例：Windows的双击打开程序操作会让很多不熟悉鼠标操作的老年人很难达到目的，因此加了个右键并点击来弥补；很多手游中，获得更好的装备会弹出快捷装备提示让玩家免去进入背包，查询属性并装备的诸多步骤，只需一键即可完成。

全面原则

很多系统都存在一些收益很低的行为操作，玩家大概率不会做，我们一般称之为“边缘需求”。很多小伙伴会直接忽略省去这些操作，但可能会伤害到某些玩家的体验感，最好还是要保留。
比如装备伙伴可以让角色在战斗中多一个技能，某些策划可能认为卸下伙伴对玩家而言是负收益，于是做成只能替换伙伴无法卸下伙伴。但这是不对的，也许玩家想要测试主角技能伤害占比，或者干脆只是想挑战无伙伴技能通关之类。
玩家的需求是多变的，策划很少能完全得知，只能尽可能保留可能性。给玩家兼顾的选择越多，界面体验就越好

设计容错率

人是不完美的生物，自出生起就在时刻对抗错误。操作也不例外，过于灵敏和机械且没有防错机制的设计都不会是最舒适实用的体验。
最常见的防错功能——二次确认（弹窗确认、密码确认、长按确认），实际上是对已经发生错误后的补救，而想预防错或者让玩家迅速意识到发生了错误，可有以下方法：
- 设置长按/连按的检测上限值，避免极端值出现；
- 增加避免按错的功能（比如MC按住Shift可防止角色在高处移动过程中跌落）；
- 增长最短响应时间（比如按下0.3秒后才会跳跃）；
- 部分操作采用长按形式。
屏幕类容错方法侧重点有所不同：
- 加强输入后按钮的视听反馈，让玩家意识到自己刚才点了什么；
- 放大按钮尺寸及按钮的间距，让手抖的人也不易点错；
- 响应区域（也有人称“热区”）做得比显示区域略小一点，避免点到边缘也触发了命令；

自定义设置

每个玩家操作习惯不同，理论再科学也无法照顾到所有人的体验，因此自定义操作功能逐渐成了标配。常见的有：
预制操作方案；

按键尺寸和布局调整；

<div align=center><img src="https://arkimg.ark.online/1703483648555-68.webp" alt="img" style="zoom:67%;" /><div align=left>

多语言文字

受不同语言文字长短影响，界面设计基本为窄长条列表；文本除了数字能并排外，其余都需另起一行。文字特别长的需关注葡萄牙语和俄语。如果他俩放得下，那其他语言基本没问题。

窄长条，文字与数字间空隙足够来避免超框
做成手机端常见的矩阵式也行，但免不了要分成多行
如果文字还是超框，解决方法有：
- “走马灯”循环播放，适合窄长条；
- 多语言字号缩进：以英文字号为基础，葡萄牙语/俄语-2，德语/西班牙语-1，其余看情况；
- 多出的部分可不显示但需做个省略号标记（实在无奈的做法，不推荐）；
- 精简文字，并让翻译想办法缩减字数；
另外界面上属性等词汇的缩写（比如等级LV）并不全是由英语表示，法语德语等都有不同，但日中韩市场是可以接受的。