游戏界面怎么设计？来看看这些技巧！

导读：游戏通过创造体验给玩家带来乐趣，而交互设计师则是通过设计易用的界面给玩家带来更好的体验。在玩家手指触碰到第一个功能之前，界面布局就已经给玩家带去直观感受。好的界面设计不仅需要科学的规划和计算，同时也需要充满创意的形式感。

如何进行界面设计、让有序的规划和创意感并存？本次，网易游戏琳姐姐带来分享：界面设计中的科学规划和形式感。


我们发现，在游戏界面设计中通过构建网格系统来设计，能更快地解决设计中的问题，并让设计更具功能性、逻辑性和视觉美感。

那到底什么是网格系统？简单的来说，将一个平面等分成更小的单元格，然后对他们设置间距，这就是网格系统。网格系统对于界面设计具有以下作用：

A.规划界面布局

例如战斗界面承载了大量的功能入口、玩家操作的按钮以及各种关键信息的显示，内容非常多。凭空设计难度很大，很难把控这种信息和操作按钮的尺寸位置，而且缺乏说服力。

基于网格系统来规划这些信息的尺寸、布局、排版，让设计更有说服力。


B.规划界面、控件尺寸，形成规范

我们通过网格系统的支撑，来规划一级界面、二级界面、三级界面的尺寸，这样整个游戏的界面体系都基于网格系统来搭建，让整个游戏的界面体系更统一规范。



C.规范字间距、行间距处理信息排版

大量的信息排版时，字间距行间距可以通过网格系统来规划处理内容的信息层级，也可以通过网格系统来划分区块，快速地得到多种布局方案的可能性。


网格系统作为一种辅助设计手段，在排版布局和处理大量信息层级的时候非常有用，但是在一些特殊界面需要突破设计或者重新破局的时候，要警惕不要被网格系统的数理关系限制住思维，该破则破，灵活运用。

二、形式感

形式感包含的内容很广泛，包括比例、构成、表现形式、画面节奏等。

A.形式感的作用

a)加强用户认知

相同或重复的内容大量充斥在我们生活之中，想要玩家更快的认知到产品，便需要更为独特的设计，强烈的形式感画面能给玩家更强的记忆性和联想性。

b)视觉引导

通过不同的形式变化不仅可以让信息的内容有主有次，让玩家能快速查看设计师想传达的重要信息，还会给人强烈对比的美感和舒适的感受。

c)强调个性化

游戏中个性化的内容是区别与其它游戏不同的核心。对个性的强调能让设计在种种内容中脱颖而出。如《楚留香》的交游界面，强烈的形式感可增强游戏设计的个性，让玩家能有更强的认同感。


B.如何增强形式感

a)现实中找灵感

现实的物体总能给人一定的感官印象，通过对这些物体的处理，可以给玩家呈现不同的感观：如物品整齐的摆放给人内敛和秩序的感受，而将其刻意散乱的摆放给人随性自然的感受。

通过现实物体对人们产生的不同心理来进行设计会让形式更符合想表达的内容。

b)形状构成

不同的形状给人不同的心理感受，圆形圆润、方形稳重、三角形尖锐，不规则形状给人不稳定性，通过这些形状的应用可以创造无限可能。

例如，下图中不同形状的变化与组合，让整体设计有更强的二次元感受。


c)简化

保留设计的核心，简化无关的装饰可以增强重点信息的展示，不让次要的信息或装饰过多干扰到核心信息的表现，最大限度突出核心内容增强记忆性。

例如《叛逆性百万亚瑟王》世界BOSS界面，重点信息非常突出，一目了然。


d)残缺与联想

偶尔的残缺和局部的设计，可以将设计内容更强地表达给玩家。除了能让设计变的更有特点外，也能让人更多的去联想留白部分的内容。

形式感的设计让游戏的界面充满更多特色和创新。当然，这些形式都要符合游戏所要传达给玩家的感受，形式的使用只有和游戏的世界观相结合才能发挥其最强的特性。

总结

总结一下在界面设计中的两大要素，科学规划——网格系统，创意点缀——形式感。

网格系统的作用：

●规划界面布局；

●规划界面控件尺寸，形成规范；

●规范字间距、行间距信息排版；

在界面设计中体现形式感，通过个人意识的梳理，对画面元素特性的提炼、选取与构成，来传达出全新的视觉感受。

形式感的作用：

●加强用户认知，给玩家更强的记忆性和联想性。
●视觉引导，形成强烈对比的美感和舒适感。
●强调个性化，让玩家能有更强的认同感。

如何增强形式感？

●在现实中寻找灵感，尝试增加一些生活物件的元素。
●形状构成，采用不同形状的变化组合。
●简化，分清主次要信息，突出核心内容。
●残缺与联想，采用残缺的部分表达设计理念。

好的交互设计师，优秀的地方就在于更多的思考与用心，懂得在不同的产品类型中取其优而应用。不同目的的界面布局可以以不同的特征为首要目标，不同形式的界面可以用不同的方法来实现，我们的初心是给玩家更好的体验。

来源：网易游戏学院
原地址：https://mp.weixin.qq.com/s/gpjrsD9al2-gJBXbUa89bw