普及系列——游戏开发中界面设计全流程

Zephus · 发表于 2022-2-17 05:49

虽然不时的有看到网上一些对游戏质疑的声音，但是我个人是极为热爱游戏和动漫的，在我看来游戏事业是可以和电影行业相比拟的，也可以作为影片一样带给我们时代的印记，在现代游戏的发展中已经注入了越来越多的思考和民族文化，也不单单是网上评论的那般简单，并且游戏发展是与科技发展相扶相持的。现在游戏设计的越来越精美，技术愈加强悍了，游戏是一款对科技、技术、文化、美术、剧本、创意等等的集成综合体。但我本人还并不是一位游戏开发者，更不是制作人，只是在这个浪潮中奋斗和努力的普通人。
下面来说说游戏界面的事情吧。随着近些年游戏行业的高速发展，游戏GUI职位在游戏设计中的职位越来越清晰，并在游戏的开发设计中占据重要的位置，但用户大众对这一职业却知之甚少。本篇文章将告诉你：GUI的发展历程/GUI在游戏开发的流程中占据的位置/GUI包含的哪些工作内容/GUI岗位细分/GUI在游戏开发中的工作流程。（请耐心阅读，刚写知乎，欢迎朋友们点赞关注交流～）
游戏：是人的一种娱乐活动，也可以指这种活动过程。UI（User Interface，也称使用者界面）：系统和用户之间进行交互和信息交换的媒介，它实现信息内部的形式与人类可以接受的形式之间的转换。
游戏的界面设计也可以叫GUI，大厂一般直接会称呼对方GUI设计师，GUI即图形界面（Graphical User Interface）、
概括来说，游戏UI设计就是游戏软件中人机交互、操作逻辑、界面美观的整体设计。
游戏GUI发展历程

1972年，美国雅达利公司研发出第一台模拟两个人打乒乓球的游戏的街机游戏《PONG》，《Pong》是ATARI赖以成名的鼻祖游戏之一，在国外最骨灰一级的玩家中有着无比的影响力,至今仍然有大量的自制游戏沿用了PONG的设定。

1980年，被认为经典街机游戏之一的《吃豆人》风靡全球。
1997年，诺基亚推出第一款带有内置游戏《贪吃蛇》的手机。

2004年触屏手机，PSP游戏机的产生，真正意义上的游戏软件界面也应运而生了，早期的界面设计包含永杰和软件界面两方面的内容。比如XBOX的手柄中的按钮属于硬件界面，而在屏幕投影中所呈现的游戏画面，弹窗等都是属于软件界面。

从游戏的发展历程可以看出来，在游戏的发展过程中，UI界面的形态和表现形式及画面的精美程度也随之变化，现阶段玩家对于游戏画面、界面的美术品质、交互体验感的要求也越来越高了，这也是驱动GUI发展的原因。
画面的美观程度其实是技术的变化，游戏引擎的实现和大众时代审美的变化的结果。随着游戏产业化的日趋成熟，国内的GUI行业，大概从06年，07年之后到现在十五年的发展历程，从无序到有序，从盲从设计到科学规划，现在的GUI行业俨然是一个由系统理论支持，科学的工作流程，岗位细分明确的一个“职业行业”。当然在设计一款界面的时候，首先需要了解这是什么类型的游戏。不同的游戏类型，所需要的界面内容是不同的，表现形式也是不同的,需要根据游戏的玩法来配合设计方便玩家操作的界面。
顺便介绍下目前市面上游戏的主要类别（虽然很多朋友可能很会玩游戏，但是当你玩了一些游戏可以告诉别人比如：“我比较喜欢AVG的游戏，巴拉巴拉有哪些，还有美术特点和机制”而不是张口，我会打王者）

RPG ( Role-Playing Game ) 角色扮演游戏例如：《塞尔达传说》《明日方舟》《原神》
ARPG (Action RPG) 动作角色扮演游戏例如：《剑侠情缘》
SRPG (Simulation RPG) 模拟角色扮演游戏是一种在日本十分流行的，例如：《圣女战旗》
MMORPG 大型多人在线角色扮演游戏例如：《魔兽争霸》《梦幻西游》
AVG (Adventure Game) 冒险游戏例如：《古墓丽影》，再强推一下我参与的一款avg文字游戏《墨心》
ACT (Action) 动作类游戏例如：永远经典的《魂斗罗》，我小时候就打这个
STG（Shooting Game）射击游戏，电子游戏历史最古老最悠久的类型。例如：《王牌空战》
FPS（First Person Shooting）第一人称射击游戏，例如：《和平精英》
FTG（Fighting Game）格斗游戏例如：《街霸》《拳皇》
SLG （Strategy Game）战略游戏，例如：《三国志》
RTS （Real-Time Strategy Game）即时战略游戏，例如：《战争黎明2》《帝国时代》
RAC/RCG (Racing Game) 赛车类竞速游戏例如：《QQ飞车》
MOBA，（Multiplayer Online Battle Arena）例如：《英雄联盟》、《王者荣耀》
包括近些年流行的恋爱养成类游戏，《未定事件簿》《恋与制作人》等
还有非对称对抗竞技游戏比如《第五人格》也有人称作大逃杀类游戏，半即时回合制RPG的《阴阳师》

界面设计系统的岗位细分

GUI包含的哪些工作内容的流程呢：
环节1：游戏页面UI/UX设计——交互设计
当一个游戏已经有了非常完整的策划案的时候，就需要游戏界面的UX，就是把游戏当中的一些功能，通过图形界面来表达出来，这时候需要设计师完整的表达设计意图，当然在游戏设计中，交互是常常细分的一个岗位，在小一点的公司或者不够庞大的团队，可能就没有交互设计有时候是视觉设计师或者策划代劳了。UX设计的目的是准确的表达界面的信息，并和复合人机交互的基本规范，辅助玩家操作，用简单准确的交互逻辑链接玩家与游戏。可以说一个好的交互在游戏界面设计中发挥着极致重要的作用。

环节2：界面美术设计——视觉设计
当交互设计设计好之后，视觉设计师要实现的就是在交互原型的基础上，把一堆条条框框进行美化设计，当然也不是“设计”这么简单，一个系统的设计往往是整个团队完成的，这里需要设计师有较强的美术风格把控能力、对潮流文化有一定的认知和预测。并且游戏研发的周期较长，新项目往往是1-2年以后上线，所以新设计的风格要有一定的前瞻性。就是说你的设计必须以最好的界面设计为行业标杆，否则可能游戏一出世就low到玩家了。

环节3：界面重构——视觉设计
这里你需要做的事情其实是我们常说的切图，而针对游戏界面设计或者移动端的UI设计的切图可以说是大同小异的，但是内部指定的一些规则可能不同、简单的就是，把你的界面拆分成各个部分。这里我没有方便放的图片，下图是移动端的设计，我写给CP的输出规范的一部分。总结做这件事的目的就是，把设计进行拆分和利用工具做具体的距离数值切图，让前端的开发可以用代码和你提供的素材完全还原所设计的界面。

环节4：带入游戏引擎——TA
目前在国内是相当稀缺的ta，就是技术美术，技术美术所需要的技能相对来说比较多。首先顾名思义技术美术，其实更偏向于技术的，ta需要一定的美术和设计基础，但是不需要达到专业的视觉设计师的程度，最重要是要熟悉游戏引擎虚幻4\Unity等，并且需要具备一定的代码能力。ta就像是美术和开发之前的桥梁，目前这个岗位的人才再国内还是比较稀缺的，学习代码是理科的学生，而学习美术的大都是艺术生，一个理性一个感性，也注定了这个职业人才的稀缺性，在国内目前只有游戏大厂和部分比较专业的制作游戏的公司会有这类人才。

（虚幻学习包实例）

环节5：动态图形设计——动效设计
在游戏引擎还原后，动效设计师就需要在引擎文件中添加一些动画，比如说切换，退出，点击效果等等一系列动画，再配合动效软件AE或者游戏引擎设计界面特效。这才算一个流程走完了，最后交给前端的开发人员，最后呈现在玩家面前。当然可能中间要进行，ta改，视觉设计改，动效设计改，反复改来改去，甚至推翻重来等多次设计和打磨。

（我觉得找参考还是非常方便的魔法盒，包括这里英雄联盟的所有英雄的技能特效等等，推荐！）

发布设置

		自动登录	找回密码
密码			立即注册

普及系列——游戏开发中界面设计全流程

本帖子中包含更多资源