做游戏的都知道，我们平时玩游戏积累的经验，其实暗藏大量用户体验设计的核心逻辑。尤其是主打手速、精准度和竞技性的游戏，里面的底层思维完全可以直接套用在办公工具、设计APP的界面开发上。设计的核心目的是把信息清晰、高效地传递给用户。而游戏，就是最贴合普通人认知、最容易理解的设计教科书。
我先聊几个我们游戏中见到过的一些现象和设计。
即时战略游戏：组块思维
玩过即时战略游戏的人，其实早就掌握了专业设计里的分块（组块）认知能力，只是自己没有察觉。我们所知道的克制关系有很多，不同的游戏也不一样，比如龙石战争的兵种/剑与远征的阵营等。
以《星际争霸》为例，这款游戏和绝大多数RTS一样，有着经典的石头剪刀布克制体系，不同兵种互相克制，没有万能单位。比如对手虫族常用的飞龙+小狗进攻组合，是游戏里非常经典的打法。普通玩家会盯着眼前一堆零散的敌人，手忙脚乱乱造兵；但职业选手BoxeR一眼就能识别出这是一套固定进攻组合，不用逐个分析单位，直接针对性造出攻城坦克、陆战队员完美反制。
高手和新手的差距，核心就在于组块思维，高手不会把画面里的单位当成一个个独立个体，而是把重复、固定的组合，记成一个整体模块，反应速度自然碾压新手。
国际象棋棋盘实验
有一项经典心理学实验，印证了这套思维，也解释了为什么老手靠经验，新手靠硬记。研究人员找来从新手到特级大师的不同棋手，给大家看不同的棋盘布局，限时30秒记忆，之后凭原样复原棋盘。实验结果非常有意思。
1. 真实对战的合理棋盘：特级大师的复原正确率远超新手；
2. 棋子随机乱摆的棋盘：大师和新手的水平几乎一模一样，谁都记不住。
顶尖棋手脑海里，存着成千上万套真实对局的棋子组合。看到合理棋盘时，他们不用逐个记棋子位置，直接调取脑海里的现成模块，一眼就能看懂整体布局。但随机乱摆的棋盘会出现很多不可能、不合规则的情况，比如两个国王挨在一起、同色格子出现两颗白象。这些布局棋手从未见过，没有对应的记忆模块，只能和新手一样逐个硬记，优势直接清零。
这和星际高手的打法完全同理，熟练的人识别的是组块思维，新手记忆的是零散细节。这套组块认知，是游戏界面设计的核心准则之一吧，最典型的就是3D设计、建模软件通用的TRS控件（平移、旋转、缩放）。
主流软件（Unity、Maya）的TRS界面逻辑高度统一，第一行是位置平移、第二行是旋转角度、第三行是缩放大小，三轴顺序固定。用户用久了就会形成固定认知模块，比如看到「0、0、0 / 0、0、0 / 1、1、1」，不用细看就知道物体在中心位置、无旋转、无缩放，操作效率极高。而有些软件（Stingray、Softimage）非要反常规设计，要么把数值方向改成竖向，要么调换缩放、旋转、平移的顺序。这种改动看似只是排版变化，却会直接废掉用户已经养成的认知习惯。用户切换软件时，原本的记忆模块完全失效，需要重新适应、反复核对，极易出错、大幅降低工作效率。
工具界面的信息排序、排版逻辑必须统一。尽量贴合用户已经熟悉的通用范式，让用户复用已有经验，不用每换一个工具、每换一个页面都重新学习。
格斗游戏：看懂人眼规律
除了组块思维，格斗游戏还能帮我们理解人眼和大脑的工作机制，这也是UI界面优化的关键。
1. 眼跳掩蔽
眼睛快速移动时，大脑会自动断片。我们的眼睛有两种状态，一是定点注视，聚焦看清事物；二是快速扫视，切换观看位置。眼睛快速扫视的瞬间，大脑会暂时停止处理画面，相当于短暂失明，以此避免画面模糊、视觉错乱。这就是眼跳掩蔽效应。你眼睛快速乱瞟的时候，其实看不清任何东西，界面的细微变化都会被直接忽略。
2. 中心视觉与周边视觉
人眼只有视野正中心（中央凹视觉）清晰度最高，能看清细节；四周的周边视觉分辨率极低，只能分辨颜色和动态，看不清文字细节。大脑会靠过往经验自动脑补画面，填补模糊的部分。
3. 顶尖玩家的操作秘诀是减少无效视线移动
顶尖《街头霸王》职业选手Sako，和新手玩家最大的区别不在手速，而在视线。新手打游戏，视线会在两个角色之间来回疯狂扫视，频繁触发眼跳掩蔽，很容易错过对手的出招前摇、关键帧动作，直接输掉对局。而Sako的视线始终稳定落在两个角色中间，用中心视觉同时覆盖双方动态，最大限度减少无效扫视，几乎不会错过任何细节。同时他也靠多年对战经验，把角色姿势、连招套路变成记忆模块，反应速度远超常人。
用户看着最不累？
笔者曾看过一个实验，实验对比了表单标签的三种排版：左对齐、右对齐、顶部对齐，最终得出明确结论。
1. 右对齐、顶部对齐标签：用户眼跳次数最少，视线不用来回乱跑，读取信息效率最高；
2. 左对齐标签：视线需要反复横向移动，扫视次数是顶部对齐的两倍，阅读最累、效率最低。
放到设计软件的属性面板里，差距非常明显。采用右对齐标签，标签和输入框距离近、视线集中，用户不用反复移动眼睛就能同时看清文字和数值；而Stingray采用左对齐标签，视线来回跳转，窗口拉伸后距离更远，阅读难度翻倍。而顶部对齐虽然视觉效果好，但会占用大量纵向空间，不适合内容繁多的属性面板，只适合少量输入项的简单表单。因此，功能密集的工具界面，右对齐标签是最优解。
比如虚幻引擎细节面板，就是典型的右对齐标签。在调整模型 Transform（位置、旋转、缩放）、材质参数、光照属性的时候，一长串参数挤在面板里，标签文字靠右，输入框紧贴标签。你扫一眼就能快速对应 “位置 X” 和后面的数字，连续改十几项参数，眼睛不用大幅度左右来回跳。如果换成 Stingray 那种左对齐标签，标签长短参差不齐，长标签和短标签的末尾不在一条竖线上，文字和输入框之间空隙忽大忽小。当你一次性调整几十项模型、材质、粒子参数时，每看一组都要重新寻找文字和对应数值，窗口拉宽后空隙更大，阅读和修改的效率明显下降。而顶部对齐就像弹窗里的简易表单，比如引擎里简单的 “新建文件夹” 弹窗，每项标签放在输入框上方，看着清爽好看，但每一项都要占很高纵向高度。如果直接用在塞满上百个参数的属性面板，页面会变得极长，需要疯狂滚动滚轮，完全不适合重度编辑场景。
欢迎阅读笔者其他内容
未经授权请勿用于任何商业用途
发表评论