高二机工社UI设计项目教程课件学习单元6项目2：侦探游戏界面设计

学习单元6——游戏UI设计. UI设计项目教程 单元概述 好的游戏UI要求画面精致，符合游戏故事背景，符合游戏定位群体，符合用户的基本操作习惯，还要很好地引导用户跟着你的思路去操作，去实现玩家的个人目标。 在制作游戏UI之前已经有确定的概念设计和原画设定，UI设计师并不能主导游戏风格，而是需要更好地符合游戏概念设定。游戏UI设计不是一个人完成的，需要一个团队。 学习目标 1．能够按要求制作出符合游戏定位的操作界面 2．通过项目制作，学习游戏界面设计制作的规范 3．通过学习游戏界面，了解用户在游戏中的体验想法与人机交互，进一步完善界面 侦探游戏界面设计 项目2. TWO 项目描述 “侦探推理社”这款游戏是基于电视节目和线下桌游产生灵感而设计出来的。在游戏设计中要了解游戏整个流程，才能知道界面要如何设计，用户操作流程怎么进行。在设计风格上要大众化、市场化，才能在游戏市场上独占鳌头，把用户体验做到最佳。 项目总监将此款游戏的界面设计任务分配给β小组，由Amy负责，Amy首先和小组成员分析了本次项目的要求，并共同着手进行“侦探推理社”这款游戏的界面设计。 UI设计项目教程 任务1：　设计前期准备 游戏设计可以分为两部分：游戏编码设计和UI设计。程序编码设计主要是把策划的设计实现出来，而游戏UI设计在工作流程上分为结构设计、交互设计、视觉设计3个部分。根据以往的设计经验，确定侦探游戏UI设计流程。 UI设计项目教程 任务1：　设计前期准备 游戏企划人员整合所有系统模块，并通过VISIO等工具进行简单的功能展示，提出几种不 同界面风格的方案。 UI设计项目教程 任务1：　设计前期准备 游戏制作成员集体讨论，尝试确定方向及内容，包括设计风格及系统模块的删减或增加。 根据总结意见，在原有的设计风格基础上进行修改，使其不断缩短与大部分用户的意见差异。重复修改两次以上，修改出的设计风格通常没有太大问题。 UI设计项目教程 必备知识 界面结构设计 结构设计也称概念设计，是界面设计的骨架。结构设计就是安排各模块之间的关系，分析出用户对功能信息的获取点，实现游戏的功能，改善用户体验。 1）有足够的空间让用户看到主要的内容，要适合多数浏览器（以15、17、19寸显示器为主）的要求，页面长度原则上不超过3屏幕，宽度不超过1屏幕（以1024×768px为准）。 2）尽量避免使用结构复杂的表格，表格嵌套不要超过3层。 3）页面避免使用iframe，如果必须使用，采用对应的优化方式（优化是指：对浏览器是否支持框架进行判断以及iframe宽高度自适应页面）。 4）页面布局要重点突出，图文并茂；通过数据统计，将目标客户最感兴趣的内容放置在最重要、最显著的位置（一般为页面的头部和左上角）。 UI设计项目教程 必备知识 界面结构设计 在进行UI结构设计时要注意以下几个方面： 1）划分出各模块功能间的主从关系。 2）同类模块间要进行分类。 3）确定各个模块间的切换入口。 4）设计要尽量符合用户的阅读习惯，不要有过于跳跃性的创新。 5）能单击的功能区一定要突出。 6）功能类似的模块，风格尽量也相似。 7）同一功能模块的导航按钮，其大小、风格尽量统一。 8）文字尽量简化，界面不要太拥挤，不要给人堆砌的感觉。 9）所有的设计都要围绕让用户用最短的时间、最简单的方法，获取最多的信息。 UI设计项目教程 必备知识 界面设计原则 不同游戏的界面需要根据其自身特点去设计，而一款比较出色的UI设计不仅让游戏独具特色，还可以让游 戏操作变得简单、易学，增加游戏上手度。大部分游戏产品的UI设计都会遵循一定的原则，而不仅仅是漂亮、美观、符合游戏风格。 1）在UI设计时要保持设计的一致性。一致性包括使用标准的模块结构模式，也指使用相同的信息表现方法，如字体、颜色、术语、信息显示等方面的一致。 2）UI结构简洁、有序、易操作。 3）快捷键与功能单词语意保持一致。 4）在用户等待界面出现时，可以通过界面或光标的动态效果，减少用户的厌烦感。 5）重要的信息要突出，信息内容要对用户有引导作用。 6）数据的输入要尽量简化用户动作，最好通过鼠标单击就能完成。 7）进入运营阶段的UI尽量不要做大幅度变化。 UI设计项目教程 任务拓展 选择三款热门游戏，对比分析三款游戏界面的设计构架，写一篇不少于500字的游戏界面分析报告。 UI设计项目教程 任务2：　侦探游戏界面制作 配置界面框架 UI设计项目教程 任务2：　侦探游戏界面制作 绘制界面背景 UI设计项目教程 任务2：　侦探游戏界面制作 设计交互区 UI设计项目教程 任务2：　侦探游戏界面制作 设计交互区 UI