随着智能手机的普及，越来越多人接触手机游戏，巨大的玩家数量吸引众多厂商推出手游抢夺市场。手游市场竞争日渐激烈，玩家对于手游质量的要求也越来越高。然而许多手游的界面设计仅仅停留在满足功能阶段，缺乏高水平的界面质量。发展时间更长，更注重叙事性和沉浸感体验的主机游戏成为手游设计的设计标杆和灵感库。手游界面设计该如何向优等生主机游戏抄作业，本文列举了六个参考方向。
01、高界面清晰性
设计优秀的主机游戏尤其是3A游戏的一大特征是清晰明确，界面包含信息容量适中，且经过合适的排版分区，玩家可以快速理解界面表达的信息。清晰的界面常遵循以下设计原则：
（1）格式塔原理
格式塔心理学（又称完形心理学）提出，人的视觉认知习惯是整体的，不是在观看一开始就区分各个组成部分，而是先将各个部分“建立“一个更容易识别的整体。被识别为整体的信息更容易被感知和理解。
格式塔提出了多个视觉认知原理：如相似性原理、接近性原理、封闭性原理、连续性原理等，这里不作展开介绍。（后续GameTube将单独讲解格式塔原理在游戏界面设计中的应用，敬请期待）
下图的彩虹六号界面，巧妙地利用了格式塔原理组织界面，玩家第一眼就可以感知出界面的分区，以及不同视觉的分区服务不同的功能。因此玩家在操作时可以根据不同目的快速定位到具体的视觉整体中。
右方的干员都使用矩形人物立绘，图形相似且位置接近，满足“相似性原理”和“接近性原理”，容易被认知成一个整体。
左下方的干员详情信息使用一个黑色矩形将分散的内容“框”出，与背景区分开，可以看做一个视觉整体。干员详情内的信息也利用相似性原理，通过控制信息间的距离，内部形成易读的视觉分区。
（2）阅读顺序
人的阅读习惯一般从上到下，从左向右。优秀的界面符合玩家的阅读顺序和认知决策流程，没有复杂曲折的眼跳路径。
下图，《战神4》的商店界面，从左到右依次是：商品列表、商品详情、穿戴后对总数值的影响。信息的组织顺序符合玩家先选择商品然后判断是否可以购买的认知决策过程。玩家在不同信息区域间的眼跳路径是从上到下、从左到右、符合视觉习惯。
符合视觉习惯和决策支持的信息布局，让战神4的购买流程清晰且流畅。
（3）围绕聚焦区域设计
因为视网膜中锥状细胞和杆状细胞分布的不同，人的视觉存在中央视觉和边缘视觉。中央视觉区域是视野的中央部分，在此区域人可以分辨具体细节，对红和绿更加敏感；边缘视觉区域是视野的周边部分，在边缘视觉中人对于细节分辨力差，但是对位移和明暗变化更加敏感。因此在信息设计中，可将重要的信息放在中央区域中，次要信息放在边缘区域。如果想提示玩家注意边缘区域的信息，可以使用亮度或者元素的移动提醒玩家。
如下图《圣歌》使用闪光特效提示玩家注意边缘视觉区域的信息。
（4）层级分明
清晰明确的界面一般拥有清晰的层级划分。设计者可以通过控制大小、颜色、明度、位置间距等调整信息层级。
下图《天外世界》中文字信息使用不同的明暗、颜色和间距建立清晰的信息层级，让内容复杂的天赋界面也有清晰的可读性。
（5）明暗对比
可读性强的界面即使去掉颜色，也可以通过明暗分辨信息优先级。
（6）视觉识别顺序
眼睛识别影像的顺序：光/移动＞颜色＞图形＞具体意向，清晰的界面符合人眼识别影像的规律，巧妙利用动效、颜色、图形引导玩家注意信息。
如《耻辱》的商品/升级页面中，选择物品时有人眼最先会注意的光效闪烁，且选中态具有类似“无线电扰动”的动态效果，选中态符合人眼认知规律可以清晰地被感知到；另外在不可升级的物品，使用颜色（红色）+图形（叉号）作明确的标识。
02、丰富的界面动态
主机游戏界面的界面简单而不单调，许多界面加入动态元素让层级更分明，让信息更明显，让界面更动感。
动态界面可以从两个方向补充：
（1）控件的动态
以《刺客信条·大革命》为例，菜单选中和切换加入光效，使得菜单更加清晰和突出，动态的反馈让界面交互感受更加丰富。
（2）背景的动态
界面背景使用动态氛围可以让界面更灵动更真实。动态的背景也可以渲染游戏气氛，让游戏更具有代入感。
下图为《耻辱》的提示界面的动态背景效果。
03、叙事的设计风格
界面也是游戏故事的一部分，对于游戏叙事同样重要。优秀的游戏界面不仅仅是传递故事的背景板，它同样构成了故事，让故事更加生动可信。玩家可以只用过观察界面，就可以对游戏的故事背景有一个基础的判断。
下图，《耻辱》的界面可以感受到混乱阴暗，符合故事发生在被鼠疫困扰的破败城市设定。
《天外世界》的飞船导航界面，星球下的黄铜罗盘、精密的纹理，伴随星球投影的像素点，混在在一起，让玩家感受到一种特殊的科幻设定：真空管科技。
《天外世界》的HUD界面也进行了真空管朋克风格的改造，左上角的血量条、右下角的子弹数量，都让人感受到真空管笨重、复古但又具有一定先进技术的游戏背景。
04、界面变化流畅
主机游戏的界面交互流畅顺滑，可以学习其在以下两个方向的流畅性设计：
（1）转场流畅
从A界面到B界面的跳转中加入顺畅的转场动效，减少界面的打断感，保持游戏的流畅体验。
附图：《刺客信条辛迪加》的转场动效
转场流畅另一优秀案例：手游《万象物语》在界面跳转上加入了转场动效，降低了界面跳转的打断感，界面交互感受非常“丝滑”：
（2）镜头流畅
在同一界面切换不同不同状态/点击不同选项时，通过模型&镜头的流畅移动，提升玩家操作感受和游戏体验，让游戏更加真实。
附图：《彩虹六号》的枪械界面
（3）提示流畅
对于游戏中存在的各种提示（升级/获得/进入新地点），主机游戏的提示使用流畅的提示减少对玩家的打断。
05、使用故事内界面
游戏界面可以根据玩家扮演的角色能否在游戏世界中看到，划分为两种：故事内界面（degetic ui）和故事外界面（non-degetic ui）。
典型的故事外界面：超级马里奥的得分信息——马里奥本人是无法看到的。
故事外界面因为脱离游戏故事，因此对游戏的故事沉浸感有一定的打断。
故事内界面同样是玩家扮演角色可以看到的，界面并没有脱离游戏世界，因此故事内界面具有极强的代入感。
如辐射4中的菜单界面：
纯故事内界面很难实现，故事内界面和故事外界面结合的界面，可统称为局部故事内界面，具有故事内界面的高沉浸感和故事外界面的拓展性和适用性。因此被设计师广泛使用。
如下图中《无主之地3》的商店界面：
(注：严格意义上讲，无主之地3的商店界面也是故事内界面，因为右侧的商品详情面板是透过主角佩戴的ECHO设备显示的。)
06、重视声音设计
DICE设计师Younas的提出，听觉体验占游戏体验的50%。声音界面设计同样重要。
游戏设计者一般重视图形界面设计，而忽略了声音反馈的重要性。丰富声音设计可以极大提升游戏的体验质量。
主机游戏十分重视声音的设计。声音在游戏中主要分为两个部分：
（1）背景音乐
音乐可以影响玩家对于环境的判断，通过背景音乐可以强化游戏场景的设定，如《塞尔达传说·荒野之息》中，不同场景有不同的特征丰富的背景音乐，玩家通过聆听音乐就可以大致判断自己所处的环境是沙漠、树林还是神庙。同时背景音乐也可以渲染背景情绪，引导玩家的情绪走向。
（2）反馈音效
声音可以影响玩家对于交互物体的认知，如打开一个界面听到翻书的声音，在认知中倾向将界面看做一本书。材质音效可以提升代入感。
同时，音效可以强化玩家的控制感，让操作的反馈更加丰富。
手游《百闻牌》十分重视音效设计，在游戏大厅打开弹窗时，弹窗会“掩盖”一定的大厅背景音乐，让弹窗的存在感提升，不再是一个抽象的界面；每个控件每个反馈都有符合其自身材质设定的声音，让整个交互操作感受十分真实流畅。
总结
本文通过简单列举主机游戏高质量界面的设计因素：界面清晰、界面动态、转场流畅、故事内界面和声音设计，帮助手游设计者找到改善提升界面信息质量的方向。
来源：GameTube
原文：https://mp.weixin.qq.com/s/KzA3lTHY_fjRYFYxNsR5FQ
Steam 
App Store 
闽公网安备 35020302034348号