游戏UI的基础模块设计

当我们确定设计需求开始绘制原型图时，我们面临如何将信息通过最优的方式实现。将大型网游的UI内容结构进行分解，其中基础交互模块可分为导航模式、内容展示、基础控件三大部分。导航模式是玩家获取内容的快速途径，内容展示关系着玩家对游戏内容的理解，基础控件直接引导着玩家进行选择操作。

2.2.1 导航模式

导航模式是交互体验的基础，也是UI体验的关键部分。设计师要在保证其结构合乎逻辑的同时解决系统的平衡性、用户习惯和使用场景等多方面问题。

1．菜单式导航

菜单式导航通过一次点击弹出悬浮形式的功能菜单，可通过再次点击收起。游戏活动系统的入口和雷达/地图等常用到；一些界面中选项部分也会出现下拉式菜单，可通过点击屏幕其他区域使其收起。菜单式导航更少地占据画面，与游戏场景的融合性优于其他形式，如图2-23所示。

图2-23 菜单式导航的原型和案例

2．标签式导航

标签式导航在游戏中常配有图标，通常位于屏幕边缘的固定区域。它可以让玩家直观地了解核心的系统功能，适用于多个主要且重要程度相似的内容体系。它的缺点是会占用一定的空间高度，因而适用于高频操作的内容，如图2-24所示。

图2-24 标签式导航的原型和案例

3．选项卡式导航

在PC端上，选项卡式导航通常在一个系统界面外整合比较大的系统，也可以在界面内作为功能分类，适用于层级较多的系统。它可以对大量信息进行分页收纳，并通过逐渐加入，来帮助玩家减轻记忆负担，如图2-25所示。

图2-25 选项卡式导航的原型和案例

4．列表式导航

列表式导航常作为浏览控件及二级导航，因其结构清晰给人以平静感，常用于需要高效操作的界面。它可以让玩家直观地了解到任务情况，比如邮件列表、任务列表，如图2-26所示。

图2-26 列表式导航的原型和案例

这些导航模式在不同平台操作系统上有不同的表现形式，对于其定位和设计也有不同规则，如在移动端的选项卡模式有固定选项卡和滑动选项卡等形态，还有通过组合而形成的组合式导航。

游戏场景中也存在副本出入口、NPC传送这样的场景式导航。在设计过程中，应当以内容为先，按照实际的玩法需求，结合游戏自身特性选择更适合的导航模式，不必因跟风交互的趣味性而忽略导航模式的自身特点。

2.2.2 内容展示

内容展示更像是一种氛围的营造。设计师要保证其有效地传达信息，同时还要保证为内容服务，以及流行元素和游戏背景等多方面问题。常用的内容展示方式有四种。

1．幻灯片式

幻灯片适用于图片或整块内容的并列展示和内容轮显。这种方式给设计师很大的设计空间，同时也能够帮助玩家建立轻松的情景。幻灯片式在一些游戏活动商城中比较常见，另外一些比较大型的玩法也可以这样包装，如图2-27所示。

图2-27 幻灯片式原型和案例

2．卡片式

卡片式能够将不同的信息内容模块化，并高效有序地组织整合起来。信息归纳简洁有序是卡片式的主要特征。它可以对重要程度相似的内容做比较，也可以作为有难度梯度的目标引导。比如有很多选择的副本入口、需要进行对比的VIP购买界面，如图2-28所示。

图2-28 卡片式原型和案例

3．网格式

网格式利用分组和间隔来创造规律，将不同的视觉元素在框架中进行编排，画面按一定的比例关系进行分割。它的优点是网格的规律性能形成一定的视觉美感，有利于浏览，缺点是对用户的选择压力较大。比如以场景画面为引导的副本入口、以图片作为吸引点的商城界面，如图2-29所示。

图2-29 网格式原型和案例

4．隐喻式

隐喻式通过按照现实世界中的对象与操作进行模仿，给用户带来可预期性和熟悉感。情景式整体隐喻界面，比如签到的日历、倒计时的钟表、游戏地图、家谱式的技能书、书籍、名片夹、信封等。另一种类似iOS文件夹整理时，通过对真实的抽屉空间进行隐喻，让用户直接进行操作。如游戏的锻造系统中的武器宝石镶嵌这样的玩法系统，如图2-30所示。

图2-29 网格式原型和案例

2.2.3 基础控件

从字面上理解，控件就是可以通过直接操作而实现控制的物件，如生活中的门把手、按钮开关。设计师借助隐喻的方法，根据现实中的操作对象，按照软件特性归纳出直观高效的控件。

常用的基础控件根据功能归类可分为四种基本类型。

·命令控件，用于启动和触发操作功能如按钮、超链接等。

·选择控件，用于选择选项如复选框、单选框、开关静音等。

·输入控件，用于输入及控制如复选框、滑块、滚动条等。

·显示控件，用于信息展示如进度条、分割线等。

操作控件是为了还原真实场景的反馈感而设计的。当我们进行操作时会出现不同的状态，如按钮最初的未选择可用形态、禁用状态、聚焦滑过和选中状态等，每个控件都有不同的状态，如图2-31所示。

图2-31 游戏UI基础控件

在图形界面发展过程中，设计师要关注常使用的控件在不同时期和不同平台所发生的变化，品味控件的视觉层次从认知心理学角度如何被广泛应用。设计中再微小的元素都需要谨慎安排，考虑到真实的使用场景。了解每一种基础模块的特点、适用的场景，可以帮助我们设计出较合理的方案。

最后

以上就是寂寞西装为你收集整理的游戏UI的基础模块设计的全部内容，希望文章能够帮你解决游戏UI的基础模块设计所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。