![游戏UI设计方法与案例应用解析](https://wfqqreader-1252317822.image.myqcloud.com/cover/464/43738464/b_43738464.jpg)
1.4 空间设计
1.4.1 视觉空间
视觉空间是眼睛的可视范围,也就是在游戏中每个界面空间的多与少,会给玩家带来不同的心理感受。例如,有时在主界面中放置了很多入口按钮,导致整个界面被挤满,留给玩家的视觉空间很少,会造成一定程度的心理压力。
1.信息空间处理
UI信息全部显示在第一(主)界面中,这种做法大多是因为设计师没有掌握交互基础知识,将所有的信息全部显示出来。虽然这样做的初衷是更有利于引导消费,但实际效果却恰恰相反,不但无法突出重要信息,还会造成较差的游戏视觉体验。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_39_1.jpg?sign=1739131625-enpwZjTOqUkJHTYK6eu3q7OiJ2qIXUkT-0-c80db5399cd1f9cd973bed615523f19d)
[UI信息展现处理]
计算机端UI显示与移动端UI显示有所不同。计算机显示器的屏幕较大,界面呈现信息较多;移动端显示屏较小,界面呈现信息较少,需要处理信息的优先级。所以,合理区分信息,将同类信息进行分组设计,避免界面按钮过分拥挤在界面空间中,这一点非常重要。
2.视觉环境空间
在一款游戏中,除信息整理外,整体的视觉环境空间也会影响玩家的心理活动。从过去的桌面游戏到2D、3D电子游戏,再到最新的VR(虚拟现实)游戏,每次游戏形式的变革都进一步增加了游戏的视觉空间。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_40_1.jpg?sign=1739131625-cfV8cElHACkMXP1iazyJch1ORhqoW86h-0-09072c650d98600385096e04ba569dd1)
[不同的空间设计]
1.4.2 视觉平衡
视觉平衡是指介于中轴线两端所承载信息容量相同,不出现视觉倾斜。在实际项目中,应该怎样去判断界面的视觉效果是否平衡呢?
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_40_2.jpg?sign=1739131625-293ljXJeD3iwUtzM4LmRBDn3GekMZ6M4-0-28d613c9abc856337e524830f99d29ea)
[视觉平衡]
以上页下图为例,按照内容将界面中的组件组成模块。例如,Logo与登录按钮可以作为一个整体,然后与界面整体对比。调整前,场景角色与Logo的重叠视觉效果并不理想,且左右重量明确不平衡;调整后,避免了场景角色与Logo重叠,界面效果看上去更平衡、更规范,且易于操作。
虽然,在游戏设计行业已经有了一些规范,还有不少的游戏范例,但设计师仍然要逐个分析不同界面布局的优缺点,以及界面布局的易用性。
实际设计时需要注意
-1-界面整体布局信息的平衡性。
-2-拥有较宽广的视觉空间。
-3-结合实际项目分析单双手操作,以及少数特殊情况应该如何处理,例如,左利手(俗称“左撇子”)等。
1.4.3 落差空间
落差空间是指将三维空间附加到界面中,并将设计元素立体化,简单理解就是将平面图转化为立体图。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_41_1.jpg?sign=1739131625-ihLXuIHpnNoAAJIo7SvLu35nl4CuSlTN-0-d4fe687a126492732f8a0fe609b4d043)
[落差空间]
通过上图可以看到在立体图中每个元素之间的落差,但这里需要分析的是,元素的落差应该如何规范。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_41_2.jpg?sign=1739131625-v0xTP65N5Qt8ZuL0aAsSG5pfrnDlqx5S-0-894978fa11f44fe0bb6ab094e0168619)
[落差]
通过观察立体图,可以看到前者的落差点非常多,不同元素之间的串联混乱;修改后的区块较少,不同元素之间联系紧密。也有人说,利用落差设计不是会增大元素之间的距离吗?但如果细心去看,你会发现即使它们的落差再大,元素之间也是紧密联系的。
在设计界面时,因为需要高频率修改,不可能一直利用3D软件来实现并分析调整。我们可以将大脑看作一台高速运算的机器,将所学技巧输入其中并进行分析。这是一个非常实用的技巧,能让工作事半功倍,且让你拥有预见性的设计能力(预见性设计:通过对设计元素的开拓思考,实现对设计发展的预判)。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_42_1.jpg?sign=1739131625-1pSu0o0529uM2QRgmfDPy4DU01KsvMMT-0-851cfe66e45a43012df391474bd47bd8)
[虚拟设计]
实际设计时需要注意
-1-进行落差设计时要分析整体界面,让元素与模块之间相互联系。
-2-考虑不同场景,调整元素的落差设计。
-3-学会使用大脑快速分析,提高工作效率。
1.4.4 矩阵格测试
在实际工作中,很多时候游戏实际的运行效果与完成的设计效果总会出现或多或少的差异,为了让这些差异变得越来越小,我提出了矩阵格测试方法。
矩阵格是通过黄金比例分割线延伸出来的研究成果,利用矩阵格可以更精确地分析界面,并结合人的行为习惯纠正信息、布局等微小错误。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_43_1.jpg?sign=1739131625-tXYNtoCXxkjLe3aOhbcDFkStO5MoDv5X-0-a332b2e6a85fb22768f7bb0f63b0d26c)
[矩阵格]
为此我总结出了5种线用来针对不同的部分进行分析:空间平衡线、界面中心线、矩形规格线、单元素中轴线、视觉出血线。
1.空间平衡线
空间平衡线用于检测UI与场景之间信息的搭配程度。下图所示为三维空间平衡线和三角形与倒三角形平衡线(含梯形与倒梯形平衡线)。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_43_2.jpg?sign=1739131625-2nCDe6orjSaRbFed3o3BzK0vRIxI6qBJ-0-a06598f172fdb15e403128773d033c67)
[空间平衡线]
实际设计时需要注意
-1-场景与UI相结合,相互不存在失衡状态。
-2-信息布局在同一层级。
-3-根据不同设备,动态适配平衡线并进行设计调整。
2.界面中心线
界面中心线是界面从上到下或从左到右的中心分割线。下页上图所示为十字交叉中心线和对角交叉中心线,具有界面整体信息对比和避免界面失衡的作用。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_44_1.jpg?sign=1739131625-5lEcKszNG2vASBT9330MSZ49JrLaLbmg-0-1629c5cee69191a394b87b409b1c9331)
[界面中心线]
实际设计时需要注意
-1-场景与UI结合,相互不存在失衡状态。
-2-中心线与设备显示屏比例有直接关系,动态适配中心线并进行设计调整。
3.矩形规格线
矩形规格线是元素与元素之间实现对齐或居中的依据,同时结合操作行为可以快速划定点击热区范围,避免热区过小,导致点击困难。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_44_2.jpg?sign=1739131625-r8MSXQ564MdPnVmGxA7VoVokC8D1xYjS-0-3c675467a92bed050f4e34e5f47ffd30)
[矩形规格线]
实际设计时需要注意
-1-在矩形规格线上区分模块,布局UI位置。
-2-为单元素中轴线奠定基础。
-3-可以快速确认区域大小,并判断热区操作是否困难。
4.单元素中轴线
单元素中轴线是基于矩形规格线,并对元素对齐进行检查的辅助线。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_45_1.jpg?sign=1739131625-AiETUwBY48cB0FulWZB7PUUfy7Bh1bF5-0-bc69a75937551f476ced18fa0e8d447f)
[单元素中轴线]
实际设计时需要注意
-1-调整元素之间的微小位置差。
-2-调整后需要再次建立单元素中轴线,在空间平衡线、界面中心线、矩形规格线中查看是否与其他模块保持统一,如果有偏差需要再次调整。
5.视觉出血线
视觉出血线用于特殊内容的调整,保证界面整体视觉效果的平衡,可以结合视点行为进行加权设计。
![](https://epubservercos.yuewen.com/73CB65/23020656101685706/epubprivate/OEBPS/Images/42667_45_2.jpg?sign=1739131625-PnpVVFOwyJ9pwAPpemCxJmMSbGhRXWAg-0-6acb9245fa8d67b78975abc5047d04dc)
[视觉出血线]
上页下图右下角所示的时间元素,在设计它的位置时,需要整体查看界面四角的平衡度。过于偏离边界会有元素要飞出屏幕的感觉,所以向内移动了位置。这种微弱的偏差大部分情况在1~10px,这需要进行整体对比才能发现。
实际设计时需要注意
-1-微弱的偏差需要与视觉行为相结合,进行加权设计。
-2-关注整体界面的设计偏差。
矩阵格测试是细节加权设计的工具,如果能掌握这些技巧,同时让程序员、策划人员、测试人员甚至更多人了解,那么,在日常的设计或游戏上线前就能避免非常多的小错误并提升游戏体验度。