ui设计是什么意思-【干货】游戏界面设计（三）信息设计

相关阅读：

上一期的界面结构设计完成后，玩家就可以了解大类信息之间的父子关系，并在心里决定好信息的阅读顺序，然后开始消化具体的信息。

我们需要对信息进行处理，让玩家能够有序地处理复杂的信息，即“一看就知道是什么”、“一看就知道怎么做”、“一看就知道为什么”正如你所做的那样”。 【性】、【理性】、【完整性】。 本文将梳理我在制作界面时信息处理的整个流程，并详细讲解流程中如何实现这三个目标。

1、总体设计阶段

这一阶段，我们会对界面整体信息的呈现做出一个总体的提纲和规范，以满足信息设计中【易学性】的要求。

我个人认为理解是使用的前提。 只有理解了，你才有使用的意愿和行为，最后才有机会感受到好用。 因此，让信息易于学习是所有步骤的开始。

玩家在第一次看到界面时并不是阅读具体的信息，而是模糊界面整体，以了解界面中所有元素的关系和功能。 这种模糊处理的时机可以通过给出心理预期来给出。

1.1 给予心理预期

就像有预习习惯的孩子考试成绩会更好一样，如果玩家对界面的构图和布局有预期，那么界面的学习压力就会更小。 这种期望可以从四个方面入手：心智模式； 现实的拟物化； 追随主流； 统一规则。

前三点是利用游戏的外部手段来引导和教育玩家，而最后一点是利用游戏中的规则来减轻玩家的认知负担。

1.1.1 心智模型

人类认知有普遍规律，即先天的心智模式。 如果我们制作的界面符合这个模型，那么不同认知水平和受教育程度的玩家都可以快速理解界面的整体布局。 这里推荐业界最广泛使用的格式塔心理学原理。 这个理论的优点是下沉足够，应用范围足够广，应用时间足够长，已经被市场证明可行。

具有对称、规则、平滑等简单图形特征的零件往往会形成一个整体。 我们的大脑在处理信息时，首先会将各个部分组合成一个易于理解的整体图形（正方形、圆形、三角形、环形、叉子、对角线等），而不是把局部图形拆开并一一分析。 大多数游戏界面的整体构成都会被参考，以降低玩家的理解成本。

《街头霸王对决》中的搭档面板采用了最常见的斜切图案，将空间划分为两个易于识别的直角梯形

在某一方面相似的个体视觉个体往往会形成一个视觉整体。 玩家通常会将明显具有共同特征（例如形状、趋势、色调、大小等）的事物归为一类。 这种应用的范围就更广了，界面中类似的视觉元素会被视为一组。

这里顺便来一张网络图，拓展一下知识理论

界面中空间上靠近的视觉元素会被大脑视为一个整体，从而削弱对视觉元素个体特征的感知。 游戏中经常使用角色阵容和按钮矩阵，让玩家一眼就能区分出界面结构。

当玩家面对日常生活中熟悉的事物时，即使大脑不完整，也会拼凑出剩余的样子，仍然将这个事物感知为一个整体形象。 但需要注意的是，如果局部图像过于陌生或过于简短，则不会产生整体的联想。 在游戏中，一般用于展示较大主题、突出重要信息时。 特别注意：空白部分成为负闭包，也可以被感知。

“黑潮之上”等级晋升面板，即使28号被挡住，玩家也能毫无压力地认出来

如果某个界面元素有向某个方向持续的趋势，玩家就会将该地方视为一个整体，并根据趋势的顺序调整视线。 连续式和封闭式应用的结合更为常见。

《女神异闻录 5》界面上的引导线引导玩家从右上角到左下角查看信息

隐藏物品其实是连续使用的，可以让玩家察觉到下降的趋势，所以很自然的想到这里有向下拖动的操作

1.1.2 现实的准物体

在现实生活中，每个人都有一定的社会生活经历。 如果一个系统的操作可以封装成熟悉的日常道具使用形式/自然现象，那么玩家可以直接使用记忆快速掌握界面要点，而无需额外学习。 传统的方法。

《家庭教师》中的送礼物扭蛋机系统，有类似经验的玩家一看就知道怎么操作

1.1.3 跟随主流

除了一小部分刚接触游戏的用户外，有过类似游戏经验的玩家都会对市场现有的交互方式感到熟悉，这是市场带来的自然教育结果。 如果项目中有同类标杆产品，且系统类似，找不到更好的解决方案（改善不明显），可以参考对方的互动实践，减少不必要的学习过程玩家。

1.1.4 规则统一

如果某个概念应用在游戏内部（例如，目标在左边，执行在右边等），那么在做任何其他界面时最好应用这个规则。 玩家学习一次后即可巩固印象。 如果能够一直强化这种印象，那么玩家的认知成本就可以大大降低。

在《黑潮之上》中，很少有点击图标直接获得奖励的操作。 通常，会有一个特殊的按钮用于接收奖励。 其他功能中的奖励接收也大致遵循这个规则。

建议为每个类似的功能创建一个模板。 只要接口不是太重要，直接用现有的模板填充即可，不需要太费力。

1.2 控制信息总量

掌握了整体信息设计的方向后，就需要最终确定此时信息总量的范围，以进一步强化信息的【可学习性】。

根据我的经验，整个界面的信息量有一个合理的范围。 如果大于这个范围，信息就会被淹没，从而降低玩家的阅读意愿。 如果小于这个范围，信息就会过于分散或者不完整，也会影响界面的交互体验。 如果想要制定合理的信息量，可以通过优化界面层次、控制视觉元素的数量来完成。

1.2.1 限制层数

根据我自己的经验，接受的信息量与结构设计有很大关系。 界面层次越清晰，玩家能够接受的信息就越多。 目前主流玩家推荐的单一界面级别为3表情包设计，即除了界面本身之外，还包括1个一级选项卡和1个二级选项卡。 如果界面层级表示合理，单个界面层级最多可达4级，即包括一级、二级、三级选项卡。

《猎王》有明确的等级，但是净化最高等级是4级，看起来还是很清晰的，理论上可以存储更多的信息

1.2.2 限制元素数量

除了关卡之外，玩家感知中的每组相似信息中，需要独立处理的物体上限为6个。这里，根据格式塔的相似性和邻近性原则，将认为具有相似帧的独立个体作为一个整体，称为一组相似信息。 一般来说，这个整体中独立个体少于6个就是最优解。 这是因为人类一眼就能认出的数字是5或6，所以很多游戏在不断迭代后都会将同一组数据中的个体数量限制在6个或更少。

《明日方舟》每行角色槽数为6

有人可能会奇怪，这个例子中的字符槽数量是6×2（水平×垂直），而不是6个？ 因为如果独立的视觉个体在水平和垂直方向上排列紧密，玩家会倾向于将数量较多的方向视为一个群体。 玩家一眼就能看出水平方向的个体数量为6个，垂直方向的物体数量为2个，识别速度比较快。

所以如果没有其他视觉因素，界面中只有独立的视觉个体的话，6×5或者5×6已经是极限了，而6×6会让玩家一时很难在视觉上对独立的个体进行分组。

《王者荣耀》的背包接口等级为3，槽位为6×5。 好在视觉层次感做得不错，界面信息量也刚刚好。

单个界面层级≤4+单组视觉元素数量≤6+良好的界面结构和视觉层次感，是目前个人推荐的信息内容解决方案。 但这也不是绝对的。 只要能控制好界面的易学性，就可以插入更多的视觉元素。 如果具体问题具体分析，每个项目制定的信息范围也不会相同。

这里再举一个例子，我个人认为接口信息有点超出了信息量的限制。

《神武4》中，界面级别为4级，共有三级选项卡，其中第二级和第三级选项卡中每组信息有6个独立实体。此外，在视觉上没有明显的层次感。接口层面，这使得这个接口已经很繁琐，无法添加更多信息

1.2.3 简单和粗暴

很多策划和UI都提倡“简约”的理念，但这里需要提一下一个误区：痴迷于信息减法。 具体表现为：（1）删除或隐藏关键信息（2）使每个界面上的信息量尽可能小。

确实，市场上的每个人都欣赏简单而强大的界面，但简单≠简单。 简单就是将大量的集中信息分批分发到各个界面，让玩家每次处理合理的信息量。 简单就是削减/简化关键信息，牺牲游戏体验，让玩家更加困惑。 简单界面的信息太少也会导致界面资源的浪费。 当所有信息都被折叠隐藏后，玩家需要花费更多的步骤才能找到目标信息。

为了达到简洁、避免简单的目的，解决以上两个问题，我的参考方案如下（1）如果关键信息量比较大，我们会尽可能批量发布，不删除它，使复杂的信息显示在位置比较大的二级界面中。

《王者荣耀》技能介绍中的关键信息需要玩家点击技能图标才能查看。 为了方便切换和显示，技能详情界面的级别与当前界面持平，覆盖其他级别的信息和操作，为关键信息的显示留出足够的空间

（2）如果单一界面上的信息过于简单（不需要大脑进行额外的思考和处理），界面体验就会显得呆板、单调。 添加一些必要的信息和补充信息来建立界面逻辑。

另外，简单并不是控制信息量的唯一方法，只要玩家在面对复杂的信息时仍然能够维持秩序，知道如何处理，并愿意处理更多的信息。

2、信息处理阶段

整体设计完成后，策划需要对交互案例的所有信息进行细化，以保证【合理性】和【完整性】。

2.1 过滤信息

2.2.1 按重要性分类

信息是玩家界面体验（观看和交互）的最终对象，也是塑造界面体验的关键。 此阶段需要挑选最终将在面板上呈现的所有信息。 不同类型的系统信息有多种形式，但都可以根据要达到的界面目标分为必要信息、补充信息和无用信息。

与界面主题强相关的信息，其存在将会与玩家的界面操作行为产生直接关系。 例如，在限时游戏界面中，游戏名称和有效期、参与入口和限制、奖励预览等都是必要的信息。

必要的信息一般进行如下处理（1）突出显示：常见的是制造差异（颜色/特效/形状等）； 增加比例（区域大小/级别顺序）； 调整位置（放置在视觉中心或中间等非视觉边缘位置）。

（2）普通显示：有些信息很重要，无法隐藏，而且是一次性信息，玩家看过一遍就能记住。 例如对应槽位宝石只有在装备穿戴后才生效的提醒文字、通行证界面的活动截止时间等。

这类信息所占比例较小，位于边缘，但需要玩家清晰可见。

当然，此类信息也可以根据重要情况暂时以浮框的形式显示，几秒后消失，这样可以避免增加界面信息的冗余。

与界面主题相关，玩家需要的信息不够明显或使用频率较低。 比如限时游戏界面中，游戏背景预览、游戏剧情介绍、兑换商城/快速购买等配套小功能。

补充信息一般进行如下处理（1）弱化显示：例如使用与背景相近的颜色融入背景、压平、减少面积比例等。

(2)隐藏式折叠：将部分信息或信息录入折叠成一体按钮。

与界面主题无关，无助于实现界面目标，或者相关但该信息已被其他信息传达，构成完全重复的信息。 这类信息只要仔细分析，一般是可以辨别出来的。

无用信息一般作如下处理（1）屏蔽：直接删除。 (2)弱化显示：可以保留不完整的重复信息，弱化方法同上。

同样，重要性类别取决于您想要实现的目标。 例如，如果一款游戏需要玩家调整关卡中某个boss的阵容，那么界面上boss角色的形象、技能、属性等信息就会升级为必要的信息。 如果玩法只是为了日常资源，那么BOSS相关的信息就没啥用了。 如果这个目标不明确，请参考第一章：核心设计。

2.2.2 遍历信息状态

继上一步之后，最终选择的信息会根据时间和游戏进度而变化。 我们需要列出信息的所有状态，以保证每条信息的表达是完整的。 以下是常见的信息状态。

根据信息极值可分为：

空状态：界面没有任何游戏元素可以向玩家显示，或者界面处于初始状态。

满状态：确定界面的某个游戏元素达到峰值，界面无法继续变化。

不管这两类极端状态最终是否会出现，都必须好好规划，否则系统修改起来很容易翻车。

根据信息的变化，可以分为：

静态：根本不会改变的信息，比如固定的日期：X小时X月X日X小时。

动态：会随着时间或游戏进度而变化的信息，例如赛事剩余时间：X天X小时X分X秒。

这两种状态看似平常，但实际上是值得规划时考虑的。 玩家在特定情况下需要静态信息还是动态信息，动态信息何时会转变为另一种形式。

根据信息是否具有交互性，还可以推导出：

非交互状态：一般称为灰色状态，最早的用途是告诉玩家交互条件尚未满足，点击后没有任何反应。 但现在趋势已经变灰，点击也是最好的反应。

交互状态：操作有反馈，可以达到播放器界面的目的。

2.2 塑料包装

2.2.1 选择形式和载体

同样的信息本身可以是图片、文字、视频、音频等形式。 例如，战斗技能提示“当角色释放A技能时，可以同时释放B技能”，可以直接以文字方式显示，也可以以图形或视频方式显示。

越复杂、越重要的信息，越建议以视频或图形的形式展示，如果方便表达也可以使用文字。

在《原神》等游戏中，教程信息基本以图文或视频文字的形式存在

在同一个界面中，我建议信息以多种方式出现。 单一信息（尤其是纯文本）表达效率低下，而且还会影响界面的观感。

《倩女幽魂》的排行榜界面几乎是纯文字，玩家阅读起来很费时间，而且排名靠前的玩家奖励不够

在《黑潮之上》等游戏中，排名前三的角色名字会在特殊位置显示，玩家可以快速抓住视觉焦点。 这个想法可以延伸

另外，信息需要合适的UI载体，相同的信息在不同的UI面板上显示有不同的含义。 例如，如果同时获取道具提示，悬浮框比单独获取界面更轻量，操作步骤更少，但玩家的奖励感较低。 两种方案适用于不同的环境，没有直接的优缺点。

无论是信息形式还是载体，我建议按照信息场景和玩家需求来划分，以适应不同情况下的信息需求。

2.2.2 适当的包装

包装相当于对信息进行特定的封装，以满足特定玩家群体的情感代入需求。

这时，文案和UI艺术通常会接管包装。 文案会通过剧情世界观等方式展现信息，UI也会尽力提高美观度。 就IP产品而言，信息甚至可能被封装，但牺牲了可读性或可学习性。

但系统需要帮助来控制程度——适当的包装和明确的要点。 和游戏内容设计一样，减法往往比加法更好。 对于文案来说希望每一条信息都富有文化内涵，或者对于UI来说希望每个界面都给人留下深刻的印象，这是不现实、不科学的。 人类认知规律决定了感知体验的松弛程度。 包装与游戏核心内容相关的信息和界面还可以，但对于功能性信息，玩家的期望是快速获取信息以达到目标。 此时呈现给玩家的优秀包装消耗资源，达不到效果。

2.2.3 选择出现时间

不同的游戏时间和功能状态，玩家对信息出现的时机有不同的需求。 比如一些简单的界面操作提示，玩家学会后就不再需要了。 如果继续显示信息，不利于界面上保持适度的信息量。 不同类型信息的最佳展示时段分类如下：

这类信息与函数的运行规则密切相关。 如果玩家不清楚，就会限制玩家对功能的认识和使用，一般会停留在界面上。

比如宝石系统中，“零件未装备装备时宝石属性不会生效”这一规则必须时刻向玩家明确。 如果做成临时显示，一旦玩家忘记就会对系统体验造成不良影响，所以建议正常显示。

用于提醒玩家重要事件/游戏风格/功能时间点的信息。 此类信息的发布时间需要在正式开始时间之前持续有限的时间。

例如，限时活动的时间提醒一般会在活动开始前1-5分钟显示活动何时开始，活动开始后显示活动正在进行，活动结束后隐藏信息。 当角色升级时，会持续显示新功能的预览，直至玩家达到相应等级。

此类消息一般用于指导和告诉新手如何使用某些功能。 它们会在玩家可能需要帮助时出现，而在玩家完成学习后的某个时间段内将不再出现该消息。

形式比较多变。 例如，《火影忍者》中的分享界面告诉玩家分享固定的气泡盒提醒ui设计是什么意思，并获得奖励。 界面上显示一段时间后，今天不再显示提醒。 并且，当玩家触发潜在教学节点时，该信息会自动弹出，并在玩家查看后消失。

《火影忍者新世代忍者》中，新手加入佐助和小樱时，会触发秘密演示教学信息，玩家可以自主关闭

此类消息是系统主动告知玩家的提醒消息，以防止玩家犯下不必要的错误。 在玩家可以执行不合理行为后出现，根据情况，它可以停留或持续一段有限的时间。

例如，如果玩家的战力值低于推荐值，仍然需要挑战副本； 试运行的地下城启用自动战斗； 当MOBA游戏中使用对某个角色不利的符文时，系统会主动提示玩家确认风险。

以上分类只是对需要特别注意的信息时序的粗略统计。 其实还需要具体信息具体分析。 我的目的是希望大家在放置界面信息的时候，能够考虑信息什么时候出现，提高玩家体验，或者在不同的时间给大家带来启发。 考虑应该传递什么样的信息。

3.组合优化阶段

至此，本地信息全部处理完毕。 在这个阶段，信息将被合理地拼接在一起，并优化最终的交互体验。

3.1 放置

根据格式塔原理的“邻近”原则，接近的信息可以产生联想，留空的信息可以体现差异。 逻辑上相关的信息将被放置在一起，而独立的信息将在视觉上被分开。

如果信息之间存在从属关系，可以采用左右、上下、环绕、包围、对齐的方式显示

在《DNF》手游中，装备槽分布在角色立绘周围，周围有蓝色圆形背景，展现了装备槽对主角的从属地位。这部分也是格式塔理论的生动应用

如果信息之间存在推导、解释、补充等逻辑顺序，那么就有了自然的阅读顺序。 纯粹的信息显示最好采用上下左右邻接的方式。 如果是交互组件，建议只使用上下邻接，因为垂直关系比水平关系在理解顺序上要明显得多。

道具左侧的图标为主体，右侧为主体属性的说明。 两者是互补关系，左右相邻的话更适合展示。不过图标和道具名称上方的逻辑关系会更清晰

选择的数量和最终的选择有明显的顺序，操作时最好采用上下垂直布局

信息之间没有很强的逻辑联系，甚至分属不同的功能，但都是为了实现某种接口目的而存在。 这类信息对于玩家来说只是有优先级的区别。 在处理上，需要分散空格和间隔。 如果界面为空，则这些信息不必彼此靠近。 如果基于界面空间接近，还需要有足够的空白来区分彼此的独立性。

协会信息和公告的作用有明显的区别，但也能让玩家了解协会的概况，所以上下布局之间有足够的空间

3.2 完善的方案

有些计划可以考虑功能信息的各种状态，并且信息本身解释清楚，但提供的信息不正确或不完整。 为了保证信息的完整性，系统规划需要给玩家最清晰的解释和解决方案。

比如强化养成系统中玩家素材不足，不良信息方案与合理信息方案完全不同。

不好的解决办法：弹出提示“无法增强”。 （只透露了发生的事情ui设计是什么意思，但根本没有说发生了什么）

方案失败：弹出提示“缺少材料A，无法强化”。 （解释了情况，但玩家不知道该怎么办）

合格方案：弹出确认框“缺少n种材料A，无法强化，是否购买？” （澄清了情况并给出了解决方案表情包设计，但解决方案比较简单，在特定情况下可用）

Reasonable solution: A special interface pops up that reads "N materials A are missing and cannot be strengthened. You can obtain them in the following ways." Players can click on each way to jump to different interfaces. (Clarify the situation and give all solutions)

Providing complete information itself is a combination of punches. There may be multiple information superimposed or new functions need to be developed, which requires continuous accumulation by individuals.

If it is not easy to define my complete boundaries, then I suggest that you can do more feedback and try not to do less. After all, verbosity can be cut down, but missing or inaccurate feedback will directly confuse players and lead to loss.

3.3 Build Boot

Information guidance is a kind of weak guidance that implies players to take specific actions by packaging and modifying information. For example, the streamer effect on the button, the red dot, the dynamic effect, the special color of the key text, etc. The degree of information guidance is not as strong as the guidance function, but it also helps the player to achieve the purpose of the interface, or guide the player to operate according to the planned idea.

Information guidance is a natural need. Players want to know how to operate to achieve the purpose of the interface naturally, instead of needing to stop thinking or read lengthy suggestions. The planner also hopes to use information guidance to remind players which areas need special attention and avoid detours, such as key plot information, value perception of props, etc.

All interfaces that require players to operate independently or plan for information display needs more or less information guidance, such as the highlighted button on the skill assembly interface, the recommendation and discount information on the mall interface, the recharge button on the first charge interface, etc.

The establishment of information guidance is mainly accomplished by highlighting differences, as follows:

3.3.1 Visual differentiation

It is the most common way to highlight the difference of specific information through tones, shapes, special effects, dynamic effects, etc.

If it's just an emphasis on ordinary decision-making levels, or behaviors that are beneficial to players, such as upgrades in skills, rewards can be claimed in benefits, most games will use contrasting colors with the main color of the UI to highlight, or the same color but the brightness has increased a lot levels.

Decisions or actions that don't need to be emphasized are generally in the same color as the main color UI.

The emphasis on difference in shape or size is generally a display of similarity and visual status of information. Functions of the same type but with different emphasis levels are generally similar in shape but different in size. If the functions are very different (such as decision buttons and jump buttons), they are generally expressed by shape differences.

The battle and ranking functions in "Glory of the King" are similar, and they are all specific gameplay entrances. The competition and adventure journey are relatively different, and another shape is used. In order to emphasize the gameplay entrance, the distinction method of color + shape + size is adopted.

"Harry Potter: Magic Awakening" is also a jump button. The button to participate in the activity has a difference in shape and size on the basis of similar shape.

The differentiation of special effects and motion utilizes the contrast between motion and stillness, which produces a much stronger guiding effect than static tones and shapes. The guiding effect produced by motion effects is more reflected in reminding the player where to pay attention, while the special effect is more to remind the player which interface elements can be interacted with, and the two are often used in combination.

The current main quest (red frame) in "Harry Potter: Magic Awakening" will remind the player with floating and stretching animations. The special effects (blue frame) of prop quality and background are relatively small, and the guidance and decoration effect of the entire interface is balanced

It should be noted that the guiding effect produced by movement and stillness is produced by contrast. If the interface is full of dynamic effects and special effects, the static part will be emphasized instead. If there are only 1-3 dynamic effects/special effects in the interface, and the amplitude is different, it is easier to produce a guiding effect.

Compared with the decorative background animation/special effects, it is suggested that the dynamic/special effects of information must be differentiated, otherwise the effect of guidance will be greatly reduced.

3.3.2 Reminder function and sound effect

Sound effects are an easily overlooked experience on the UI interface. If there is a change in an important function, the planner wants players to check it immediately. A reminder function can be added, and a UI can be added to the main interface and other places. This method is a function, but it is still related to the interface experience, so it is also mentioned.

The common ones are reminders when friends are online, reminders for time-limited events, and reminders for level unlocking functions. Combined with the sound effect reminder, it can play a stronger guiding role, such as the prompt voice and floating word reminder when friends in "Sword Spirit" go online.

4. Knowledge framework of this chapter

After the information is completely filled in the interface, an interface that can make players feel "understandable" is born. But this is not the end, we will enter the actual experience stage and then explore whether the interface is "easy to use" and make further adjustments to our interaction scheme. Stay tuned for the next chapter, entering the stage of experience design.