【读书笔记】游戏UI设计:修炼之道
更新中······
什么是游戏UI
游戏UI设计和其他UI设计的区别
视觉表现不同
游戏UI必须结合游戏本身的艺术风格,对于设计者的设计能力、手绘能力以及对游戏的理解能力要求更高。
复杂程度不同
在视觉、逻辑和数量上都更复杂。
工作方式不同
游戏UI设计要理解不同游戏艺术世界抽象的概念。
怎样才算是好的游戏UI
好用易用
以用户为核心,尽可能地便于操作。
以内容为先导,尽可能地直观呈现。
简单亲和
简化操作 -> 舒适性
亲和传达 -> 愉悦感
情感联系
积极传达产品整体调性。
适当地提示反馈和帮助。
可延续性
为产品整体体验服务。
一致的信息结构以降低学习成本。
游戏UI设计的职业角色
游戏用户研究:通过专业方法研究玩家及其对产品的态度。
Demo版本的原型阶段:针对用户特征和竞品进行研究,对美术以及核心玩法进行测试;
游戏进行量化的开发阶段:研究竞品,迭代核心玩法,测试主要系统玩法;
游戏上线前后的测试阶段:持续关注成长和生存体验、留存和流失的研究;
基本方向:游戏项目主要面对的人群
- 基本信息(性别比例、年龄分布、学历、收入、游戏时间等)
- 消费习惯(消费意愿、占支出比、道具消费偏好等)
- 个性偏好(画面类型、风格、模式、收费方式等)
- 游戏行为(游戏动机、选择标准、活动、服务器选择、现有不满之处、媒体接触情况等)
交互设计:游戏系统整体的逻辑关系、界面布局结构和操作流程。
Demo版本的原型阶段:根据核心玩法设计主任务流程,规划各人物与主界面之间的关系;
游戏进行量化的开发阶段:确定各个界面的目标和重点,清理需求,与视觉设计师沟通,指定UI标准;
游戏上线前后的测试阶段:根据反馈进行交互迭代;
基本流程:
- 分析(需求分析、用户分析、场景分析):模块分类、界面尺寸、内容数量等;
- 规划(流程规划、界面规划):重要程度、逻辑关系、使用频率等;
- 绘制(框架绘制、布局绘制):关联操作、联动因素等;
- 说明(撰写说明、补充说明):节省沟通成本;
视觉设计:游戏画面的重要组成部分,不仅强调视觉感受,更强调信息传达。
Demo版本的原型阶段:游戏UI风格设计;
游戏进行量化的开发阶段:游戏图标资源的设计制作;
游戏上线前后的测试阶段:运营系统设计制作,推广物料设置制作,打磨视觉品质;
基本流程:
- 分析(竞品分析、资料分析、关键词分析):提炼风格元素、情感共鸣、素材收集;
- 概念(视觉拼图、风格草图):视觉重点、技术限制;
- 绘制(界面绘制、控件绘制、图标绘制):视觉层级、最终调整;
- 输出(效果图、切图):输出给前端工程师;
游戏UI在不同阶段的工作重点
- 立项阶段:信息收集进行分析,绘制概念图,UI风格探索等;
- 概念阶段:初步交互框架设计,开发Demo,进行AB测等;
- 量产阶段:确定视觉风格,系统和玩法功能设计,引导界面设计,图标资源设计等;
- 内测阶段:优化迭代资源,查缺补漏,优化体验等;
- 公测阶段:后续版本继续设计,打磨细节,推广支持等;
视觉设计前的准备工作
- 用户需求和使用场景分析:哪些人玩,用户审美取向和色彩爱好等;
- 对同类型产品内容进行分析:分析竞品操作方式,记录问题等;
- 对流程和界面内容进行规划:分析确认主任务流程和规划任务之间的关联方式;
- 确认各个场景界面的重点:
- 讨论界面实现方法:根据最终效果图继续讨论优化方法;
游戏UI的基础知识
游戏UI的专业知识
设计审美基础
- 图形构成:格式塔原则、相似原则、闭合原则、接近原则、连续原则、对比原则等;
- 色彩构成:用色尽可能不超过三种,按照主色调、副色调做好区分;
- 体和质感:直观地与记忆和情感建立联系,更有质感的物体更有可能是可交互的;
- 字体设计:传递信息与情感,结构必须清晰。
- 版式设计:对图形、文字以及色彩进行排列组合,达到直观的审美感受;
- 空间透视:真实感,代入感;
视知觉组织强度变化:先动态后静态、先图片后文字、先大块后小块、先中间后两边等;有色无色、有框无框、距离远近、有無分割等;
如何提高审美:多看,收集资料,整理资料;多摹,多摹仿,培养自己对设计的感觉;多自我分析总结,取其精华去其糟粕;
游戏UI的基础模块
导航模式:玩家获取内容的快速途径,交互体验的基础,UI的关键部分。
- 菜单式导航:一次点击弹出悬浮式的功能菜单,一般用于游戏活动入口、地图等;占据更少的画面,与游戏场景的融合最好;
- 标签式导航:配有图标,位于屏幕边缘固定的位置,更直观,适用于多个且重要程度类似的内容;缺点是占用空间,因此适合高频操作内容;
- 选项卡式导航:适用于层级较多的系统,对大量信息进行分页收纳;
- 列表式导航:需要高效操作的界面,比如邮件列表,任务列表等;
内容展示:营造氛围,有效地传递信息,保证为内容服务。
- 幻灯片式:图片或整块内容并列展示和内容轮换。常见于商城或大型玩法;
- 卡片式:将不同信息内容模块化,并有序地组织起来,简洁有序。有很多选择的副本入口,或是需要进行对比的VIP购买界面;
- 网格式:利用分组和间隔来创造规律。能形成一定视觉美感,但对用户的选择压力较大;
- 隐喻式:对现实世界的操作进行模仿,给用户带来熟悉感。比如签到的日历,倒计时的钟表等;
基础控件:可以直接操作的控件。
- 命令控件:按钮、超链接等;
- 选择控件:复选框、单选框等;
- 输入控件:滑块、滚动条等;
- 显示控件:进度条、分割线等;
游戏HUD界面
在游戏中向玩家传递重要信息的控件。
游戏系统功能
通用系统功能:
简单明了,操作明确,降低存在感,要让玩家忽略其的存在;
好友、背包、设置等;
核心玩法系统
衬托主题,提高沉浸感,强调舒适性;
角色成长、收集、成就系统;
运营充值系统
信息突出、提高参与感、加强刺激;
游戏的其他界面
登录界面:传达游戏世界观;
创角界面:传达游戏世界的风格;
Loading界面:减少玩家的焦虑感,让玩家易被吸引;
情景提示:提示玩家什么是可操作的;
- 弹出框:简短的文字说明和可操作的按钮,如果没有可操作的内容,最好马上就消失;
- 气泡、图标:时间短,不需要有效操作;
- 跑马灯:滚动条,显示少量用户特别关心的信息;
反馈信息:对事物本身的直接反应,用于将游戏长期和短期目标展现给玩家;
- 信息:尽量简洁易懂,避免大段文字;
- 警告:要告知玩家如何回到希望的状态中(比如复活);
- 错误:要提示哪里出错了;
- 确认:玩家在进行危险或者不可逆的操作时,对玩家进行再次确认;