高二机工社UI设计项目教程课件学习单元6项目1：游戏元素设计

学习单元6——游戏UI设计. UI设计项目教程 单元概述 好的游戏UI要求画面精致，符合游戏故事背景，符合游戏定位群体，符合用户的基本操作习惯，还要很好地引导用户跟着你的思路去操作，去实现玩家的个人目标。 在制作游戏UI之前已经有确定的概念设计和原画设定，UI设计师并不能主导游戏风格，而是需要更好地符合游戏概念设定。游戏UI设计不是一个人完成的，需要一个团队。 学习目标 1．能够按要求制作出符合游戏定位的操作界面 2．通过项目制作，学习游戏界面设计制作的规范 3．通过学习游戏界面，了解用户在游戏中的体验想法与人机交互，进一步完善界面 游戏元素设计 项目1. ONE 项目描述 E-Design设计公司近期承接“末日拯救”的动作类游戏设计项目。“末日拯救”是一款传奇类游戏，包含传统的“铁三角”职业，分别有“战士”“法师”“刺客”。不仅做到了职业上的复刻，就连最经典的技能：“雷电术”“魔法盾甚至”“召唤术”也一一重现，还提供品种繁多的公会任务，游戏采用竖版2.5D设计，单手操作无难度，元宝、金币、装备全部均由“打怪”获得。 项目总监将此款游戏中“战士”的装备升级图标及装备升级弹出界面的设计任务分配给β小组，由Amy负责，助理设计师Sunny辅助Amy完成该项目。Amy首先定义了本次项目的要求，通过项目资料了解此项目的风格，并和小组成员共同分析了游戏元素设计要素。 1.形象特征：就是以生活中真实的物体作为原型设计出来的。 2.属性特征：在游戏中的属性特征。 之后按照客户提出的要求，开始设计游戏“末日拯救”中“战士”的装备升级图标及装备升级弹出界面。 UI设计项目教程 任务1：游戏图标设计 绘制图标轮廓 UI设计项目教程 任务1：游戏图标设计 绘制图标线稿 UI设计项目教程 任务1：游戏图标设计 确定色彩 UI设计项目教程 任务1：游戏图标设计 进行细节绘制 UI设计项目教程 任务1：游戏图标设计 最终效果 UI设计项目教程 必备知识 游戏图标理论基础 图标定义　图标是指具有明确指代含义的图形，并具有快捷传达信息、便于记忆的特征。 游戏图标的分类 游戏图标包括品牌图标（游戏Logo）、功能图标、物品图标、装备图标和技能图标。 1）品牌图标：品牌图标是游戏Logo也是游戏快捷方式，注重识别性和唯一性。 2）功能图标：主要用于表示某一类功能或操作，通常会有组织、有规律地在某一功能模块出现。功能图标强调识别性、概括性。 3）物品图标：游戏中使用的物品的标识，通常比较具象化。 4）装备图标：表现游戏的时装、防具、饰品、武器的图形标识。 5）技能图标：主要是玩家在游戏中释放技能的功能性图标，也可以分主动技能和被动技能。 UI设计项目教程 必备知识 色彩理论基础 游戏图标的设计原则 1）可识别性原则：不同类型图标的差异性尽量拉开，要让用户一眼能感觉到图标的独特性，帮助用户快速而准确地辨认图标。 2）统一原则：相同功能的图标尺寸要保持一致，同一系统中光源一致。 3）简洁原则：简洁原则多用于功能图标，不过分追求图标的精细度，以避免弱化图标的识别性。组成图标的要素也要尽量简洁，最好不要超过3个。 UI设计项目教程 必备知识 色彩理论基础 色彩关系 1）三原色：三原色是指色彩中不能再分解的3种基本颜色，三种基本颜色相互混合可以产生出所有的颜色。黑白灰属于无彩色。色彩三原色是红、黄、蓝。屏幕三原色为红、绿、蓝，也叫色光三原色，相加混合为白色。 2）互补色：在色环上相隔180度，是对比最强的色组，在三原色中，这两种相隔180度的色光等量相加会得到白色。经典互补色有黄色和紫色、黄色和蓝色、红色和绿色。互补色在视1）觉上给人非常大的冲击力，所以常给人潮流、刺激、兴奋的感觉。 3）对比色：指在色环上相距120度到180度之间的两种颜色。对比色能使色彩效果表现明显，形式多样，极富表现力。对比色的范围更大，包括的要素更多，如冷暖对比、明度对比、纯度对比等。 4）邻近色：相互接近的颜色，在色环上的距离相距90度，或者相隔5～6个数位的两色。色相相近，冷暖性质相近，传递的情感也较为相似。例如，红色、黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定，没有太大的视觉冲击力。 5）同类色：属于同一种颜色，但色度有深浅之分. UI设计项目教程 必备知识 色彩理论基础 色彩属性 色彩的三属性是指色彩具有的色相、明度、饱和度3种性质。三属性是界定色彩感官识别的基础，灵活应用三属性变化是色彩设计的基础 1）色相：色相是指色彩的相貌。根据光的不同波长，色彩具有红色、黄色或绿色等性质，这被称为色相。在色彩的三种属性中，色相被用来区分颜色。黑白没有色相，为中性。 2）明度：色彩的明亮