游戏UI设计的3条重要原则

Chengsoul

在日常的审核工作中发现，有时候虽然设计稿精致漂亮，但实际落地到产品的效果并不好。

UI本质是为“信息”设计载体，其中呈现的“文本”与“数值”是信息，“角色立绘”与“ICON”也是信息。

有时候设计师过分依赖策划提供的线框图，缺少对实际信息的思考：如果界面载体不能匹配信息的变量，设计就会出错。

对此，我总结了3个需要注意的设计原则，大家可以通过其中案例触类旁通，相信一定能减少后期迭代，提升设计品质。

第一条设计原则：设计稿中要用正确的信息占位，充分考虑变量情况。

在面对大量属性信息时，设计师习惯“复制、粘贴”，这很难体现信息究竟是怎样在排版中进行对齐的。

“整齐划一”的信息排列会将问题隐藏，最终体现在版本中的效果大打折扣。

策划需求中也会使用大量克隆信息去占位示意，所以设计师需要去找策划确定有哪些正式内容，在设计稿中尽可能把排版与对齐方式传达清楚。

数值也是变量的，为极限情况留出合理的间隔空间：

文本信息也是变量的，特殊的对齐方式不要遗漏标注：

第二条原则：优化复杂信息，强化可读性。

可以先简单的将复杂信息定义为“重复的”、“无用的”、“无序的”三种情况。

重复的：

下图案例，设计稿中“提升”和“降低”明显是重复信息，整体可读性不高。

多站在用户角度，反复审视自己的界面设计稿，将令人头晕目眩的重复信息进行提炼、整合。

这时你会发现，无需华丽的技巧也可以提升设计效果：

无用的：

我们可以把复杂信息比作“噪音”，去噪也是强化可读性的好办法。

例如，打开一个附属弹窗后，玩家更关注当前界面中的内容，其他信息此时都是无用的。

不如将这个框体放大，提高载体容量的同时，也故意遮挡住“无用信息”，减少视觉噪音。

无序的：

我们擅长将界面中的信息进行有秩序排列，但可能会忽略视觉的阅读顺序。

下图案例有两个问题：

引导了错误的纵向阅读顺序；

无法通过占位字制定对齐规则。

有序 = 排列秩序 + 阅读顺序，优化后视觉体验得以提升：

第三条原则：充分考虑应用情景的变量，设计需要适配所有情景。

情景适配问题常发生在UI底板设计中。

例如，道具有六种品阶，颜色各不相同。在设计道具名称的底板时，就需要充分考虑到这些颜色变量，在设计稿中为每一个品阶色做适配预演，避免出现识别困难的问题。

红色品质下，文字可读性不佳

以立绘为背景的样式中，如果在设计阶段使用的占位图是深色立绘，那么设计稿不会存在识别度问题。一旦应用在游戏里，立绘信息出现变量，视觉情况则不再可控。

亮色立绘背景下，标题识别困难

活动界面也是此类问题的重灾区。

例如七日签到，策划案刚开始的规划是最后一天送架飞机，设计师按照需求放入了飞机立绘，并通过各种对应设计元素来渲染这件物品的价值感，设计稿看起来是没问题的。

但游戏实际运行过程中，产品调整了投放策略改送坦克，这种变量就意味着活动界面需要重做了。

面对应用情景的各种变量，在设计之初要做足准备。如果只考虑怎么把UI设计稿做漂亮，那最终换来的可能是加班去修正错误……

总结

基于这3个设计原则，我会要求团队中的设计师充分自查，以避免项目在执行落地时出现相关问题。

界面中考虑到文字和数值内容的变量了吗？

信息可读性还能加强吗？

这个设计能匹配到所有应用情境中吗？

设计师自查

最后：UI设计为信息服务，画面漂亮不是唯一标准。

文/杨曦UEDC
来源：GameUE
原文：https://mp.weixin.qq.com/s/2E8NoOHTF6OtZvQI6N_hFA