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

作者:杨曦UEDC GameUE 2020-09-24 14.4k


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

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

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

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

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

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



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



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



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



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



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

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

重复的:

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



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

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



无用的:

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

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



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



无序的:

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

下图案例有两个问题:

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

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



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



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

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

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


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


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


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


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

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

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

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

总结

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

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

信息可读性还能加强吗?

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

设计师自查

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


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

相关推荐

最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多
FB出海
推广