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设计项目教程任务2：侦探游戏界面制作设计交互区UI设计项目教程任务2：侦探游戏界面制作游戏顶头信息设计UI设计项目教程任务2：侦探游戏界面制作游戏底部信息设计UI设计项目教程任务2：侦探游戏界面制作游戏界面效果UI设计项目教程必备知识用户体验的定义

用户体验是用户在使用产品过程中建立起来的一种纯主观感受。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到的。UI设计项目教程必备知识用户体验感知的主要因素（1）有用性1）基本型需求：基本功能是必备的功能，当这些功能做得体验不好时，用户会果断放弃这款软件。但是如果这些功能都做得非常棒，用户也不太会感到惊喜，因为用户会觉得这些功能是应该的。所以，基本型的需求是基础，在这部分要做到不犯低级错误。2）期望型需求：用户有期待的一些功能。当这些功能不够完善的时候，用户可能就会有所抱怨了。3）兴奋型需求：用户自己都不明确的一种需求，即使产品当中没有，用户也不会抱怨。当产品团队在这方面做得足够好时，用户会感到极佳的体验，从而给用户带来惊喜。（2）易用性1）容易上手：要做出容易上手的产品，就要摸清用户对各种事物的理解，这会沉淀成为经验，进而形成对用户行为的预测和控制。2）操作简单：观察用户的操作习惯并进行分析，优化用户的操作步骤。3）减少记忆负担：尽可能减少用户在使用产品过程中的记忆负担。（3）满意度1）需求是否被满足：满意度的值在很大程度上取决于用户的需求是否被满足。2）视觉感官：虽然满意度主要取决于需求的满足，但人往往是视觉动物，看到超出想象之外的美时，便会产生大量兴奋感。3）品牌价值：用户对品牌的认可度高。UI设计项目教程项目拓展

1.“脑洞大开”是一款老少皆宜的益智解密类游戏，游戏规则简单，请根据游戏特点设计卡通风格的页面和界面主图，设计1～2套方案，选择有代表性的方案进行展示。

2．完成整