UI 工作流程
UI Design Workflow 03
3.1　交互设计
UI Design Workflow 01/03
023
针对不同类型的需求，方案设计的复杂程度也有所不同：
（1）重要系统/ 玩法：通常是游戏的核心功能系统和形式感较强的系统需求，这种类型的需求设
计流程更为复杂一些，常常要花费更多的精力去设计它们的交互规则和视觉表现，在原型设计前
期进行多方案设计，明确设计方向后再进行细化。
（2）常规系统：此类需求一般会在既定的交互以及视觉规范上去做延展设计，更加注重易用性。
（3）敏捷需求：包括一些策划的口头需求和简单的迭代需求，这类需求则更为简单，工作量较少，
设计方向明确，效率优先。
图3-1 描述了整个交互设计的工作流程。
图3-1　交互设计流程
方案设计最终会输出原型图以及交互说明文档，对于重要的系统，还可以制作模拟演示版本进行
操作快速调研。
交互原型设计工作之后，便进入了视觉设计的阶段。
游戏的视觉设计也是一个非常重要的环节，它并非只是在交互设计结束之后的锦上添花。在原
型设计期间就已经开始考虑视觉的元素，交互设计师和视觉设计师需要有良好的配合，共同确
定视觉的设计方向。特别是一些需要较强的形式感以及创意包装的界面，视觉设计师可以在原
型设计阶段就介入进来，和交互设计师一起思维碰撞，也可以在整个设计团队中去收集有趣的
点子，最终确认一个具有可行性、视觉展示性较强的方案，在原型和操作流程的设计中，就将
方案融入进去。
在视觉设计前期，视觉设计师也会进行需求解析（图3-2）。视觉设计师和交互设计师确认设计尺寸、
信息层级、操作流程和详细的界面功能等，了解策划对界面表现的期望，理解程序的实现机制，
结合需求目标和游戏现有视觉风格，再进行设计。
图3-2　视觉需求分析
3.2　视觉设计
游戏UI 综述 UI 工作流程
024
视觉设计的关注点主要在于可视元素的安排和处理，以易于理解和使用的方式呈现信息，与游戏
整体的视觉语言保持统一。不同类型的界面设计重心会有所区别，例如系统功能界面注重易用性，
需要保持界面功能简洁清晰，信息传递快速准确，符合玩家的使用习惯，同时还需要考虑到资源
设计的复用性，有效控制界面资源；活动界面则会更注重创意和氛围烘托，使氛围的营造更加贴
合活动主题。在视觉审核交流的过程中，或多或少会受到一些主观审美的影响，这是前期的需求
分析可以作为设计依据，用来阐述设计的思路和目标，与策划达成共识。
为了让整个设计的展示更加直观，一些偏表现型的界面以及流程较复杂的系统，例如游戏从登录—
创建角色—进入游戏大厅的一整套完整流程，需要VX 同学参与并进行动效设计。动效设计会依据
交互流程和视觉效果，输出完整的动效DEMO 视频。在交互以及视觉的基础上，动效设计师会将所
有的界面及反馈效果按照操作流程串联起来，增加界面动画和特效，一些复杂的流程还需要与美
术合作，添加角色模型动作和场景切换的效果。
有了动效设计师的产出，与策划过稿的时候可以让他们更容易地理解界面的意图，在与程序交流
实现效果的时候也更加方便，后期跑查测试的时候也有了参照。
设计完成后进入到制作实现的环节。设计师会在游戏界面编辑器中还原视觉效果图并制作好界面
动画，也就是界面拼接的工作。再将界面配置文件交给程序实现在游戏中。
实现的阶段是最为繁琐的一个环节，也是设计方案落地，收获劳动成果的环节。这个阶段更加考
验大家的执行能力和响应速度，需要保持足够的耐心和严谨的思路，把控好制作的每一个细节。
游戏的UI 制作是一个复杂的过程，工作流程中的每一环都会对最终的用户体验产生影响。每一个方
案的设计实现，都是项目成员悉心合作得到的成果。对于设计团队而言，不仅要在自己的设计专业
性上进行提升，也要能够跨领域去和其他职能合作沟通，提升团队的协作性，让工作流程更加顺畅。
3.3　动效设计
3.4　实现与验收
Design Creativity
(Connotation)
设计创意（内涵）
02