腾讯美术师分享：《无限法则》背后的UI设计原则

　　关于颜色数量的控制，总结一句话：大味必淡而淡而有味，就是说享受了太多的山珍海味，突然来一杯清爽的柠檬水，会觉得特别好喝。所以我们这款游戏的UI设计出发点也是这样，如果当角色和物件足够表达这款游戏的亮点和品质时，那UI就往后退。把所有的亮点都留给场景和角色，UI尽量克制过度用色，保留黑白的主题色以及带有情绪的两个黄蓝按钮以外，其他色彩丰富表现全都留给物件本身。

　　11.资源可复用性：设计控件和界面背景时，设计过程中考虑该资源在其他地方是否可以不断被复用

　　关于资源的复用性，网上很多练习作品，界面为了美观采用弧面设计，实际项目中弧面设计的资源相对难做九宫处理，大量采用弧面设计会带来资源量的浪费。我们在设计时，应该更多考虑开发的实现性。同时，我们会把所有的资源物件，建立公共资源池，一方面是为了快速获取资源；另一方便可以把项目中所有资源元素做体系化的管理。

　　12.信息分组（块面化）：拉近相似元素的距离，成为一体；功能按模块区分、层级明显、具有易用性

　　信息块面化处理：当设计师拿到策划案时，首先要读懂方案文字，按照类别分档，再开始具体做执行绘制。做这些前期工作是为了方便信息作块面化归类，拉近相似元素之间的距离，让界面更加有条理，便于用户阅读理解。

　　例如在做HUD武器信息界面的时候，左图版本迭代前，切枪界面、护甲状态、手雷状态等信息堆叠，没有做信息分类，显得所有内容特别繁杂；右图版本迭代后，把切枪界面拆分，并做默认隐藏处理，当前武器状态信息和血条独立成一个面板出来，将信息归类并块面化划分，目的在于提高识别度。

　　同理，背包界面中，物件栏格子化。子弹栏与配件栏拆分成组，医疗品、手雷单独成组并有快捷键提示，在战斗状态下，不用每次都打开背包，便能通用快捷键调用对应的医疗品、手雷和武器。

　　13.对齐：任何元素都应与其它元素有着明确纽带关系

　　对齐就是在平面设计当中，最基础同时也是大家很容易忽视的一点。从宏观视角出发，即一个界面中每一样元素都不会孤立存在，一定会基于某一样东西或形式对齐，如果没有直接的对齐参照物，那它会基于骨骼线也就是设计中额定的网格线对齐。从微观视角出发，大家有时候在做文字对齐的时候，会发现标题或Tab按钮或界面中的描述文字到底是左对齐还是居中对齐？除非是为了表达极正式、庄重的情形，尽量避免居中对齐。

　　14.留白与空白：

　　“白”不是白的。是让白得以诞生的是一种感受白的容纳性。是搜寻一种能感受白的感觉方式。

　　——《设计中的设计》

　　“留白”与“空白”之间，很多人觉得是同一个词，其实它们俩是有依存关系的，“留白”相对局部，“空白”相对整体。大面积空白会营造奢华感或高级感，小面积会营造热闹欢快感。界面物体之间的空白关系以及字里行间的留白面积大小，会影响整体界面视觉上的平衡关系。

　　15.立体化：可将UI立体化、场景化，增加代入感

　　立体化也是个思维，是一种解决方式，当UI在平面内布局不完整的时候，立体化或许是一种额外的体验。

　　《无限法则》出生选点地图界面：目前是平面思维

　　《无限法则》出生选点地图界面：未来可以尝试立体化概念设定

　　比如说像平面的图片，把它融合到3D里面，就会给人有另外一种新奇的感觉。假设地图就是3D的，当鼠标滚轮点击的时候，会有一个3D的地图呈现给玩家，空间感会更加强烈，也可以做到2D与3D的结合，跳出二维的思考方式，可以考虑一下立体化表现。

　　三 界面设计注意要点

　　1.交互：尺寸与布局。

　　2.层级：突出重点减弱干扰。

　　3.信息：简洁清晰、快速准确、可读性强，信息归类块面化。大面积文字当块面构图去理解，文字甚至在设计中起到配平作用。

　　4.习惯：遵循玩家习惯常规设计，针对不同的用户，交互上可做一定的差异化。

　　5.资源：复用理念控制资源。

　　6.风格：避免过度设计、色彩杂乱、层级混乱、不够精致、风格不明确。

　　7.行间距：同一套同类别的界面设计中，避免出现多种不同的行间距。

　　8.字体边距：外边距＞内边距原则。

　　四  界面设计技巧

　　1.故事情节：让大众的心理产生“共鸣”，带动玩家内心的情绪，加深对游戏的印象。

　　《无限法则》黑夜模式宣传图（无人版）

　　《无限法则》黑夜模式宣传图（角色版）

（编辑：顺游网_765游戏网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!