GameUX游戏用户体验大会前瞻论坛－高效绘制游戏交互原型的方法_马骁菁

大会官网：微信号：ixdcorg扫一扫，立即报名主办单位：高效绘制游戏交互原型的方法马骁菁来自腾讯互娱QQ游戏•游戏高级交互设计师•游戏体验设计专家组成员•腾讯交互设计课程讲师自我介绍Maxjma30多款游戏的交互设计QQ游戏交互设计规范制定其他课程开发•《界面设计中的认知与逻辑》•《游戏交互设计的独到之处》•《游戏体验设计基础》•《交互设计与产品研发》自我介绍交互设计的一般步骤绘制主框架绘制主要界面绘制交互细节撰写说明及补充细节流程规划界面规划需求分析用户分析场景分析•绘制原型前的准备工作•游戏场景/主框架的绘制方法•功能场景的绘制方法•细节的绘制方法•界面与界面间关系的表达•绘制原型的要点目录获取欢乐豆查看帮助推荐其他游戏设置获取欢乐豆聊天查看任务中断游戏设置高倍场推荐设计主任务流程，规划任务之间的关联方式选择玩法普通玩法挑战赛新手场8倍场50倍场准备界面(只有我)撮合界面游戏中结束界面(3个人)我开始后有人离场我主动换桌或超时被踢开始大家都开始绘制原型前的准备工作规划所有主要界面及之间的关系，规划各界面上需要的内容、功能、动态事件绘制原型前的准备工作规划所有主要界面及之间的关系，规划各界面上需要的内容、功能、动态事件绘制原型前的准备工作绘制原型前的准备工作确认各场景界面的目标与重点绘制原型前的准备工作咨询视觉设计师关于情景化设计的方向游戏布局的分类游戏场景的布局功能场景的布局细节的布局游戏布局的分类游戏场景的布局功能场景的布局常见布局结构轻度游戏手机游戏布局简单分栏少控件大效率相对次要重度游戏专业相对复杂追求效率相对高端在九宫格布局的基础上，移动、去掉、缩短线条•绘制原型前的准备工作•游戏场景/主框架的绘制方法•功能场景的绘制方法•细节的绘制方法•界面与界面间关系的表达•绘制原型的要点目录游戏场景/主框架的绘制方法根据游戏核心玩法既定样式布局游戏场景/主框架的绘制方法根据必须直接展示的内容数量布局游戏场景/主框架的绘制方法复杂的游戏多采用环绕式布局游戏场景/主框架的绘制方法游戏场景布局的一般步骤：1.确认游戏核心玩法内容及其形式——按玩法设计或按模拟现实布局2.确认必须要放在某处的元素及其形式——按照规范和行业规则布局3.确认重要的元素的位置——按照重要程度和需要频率布局4.合理的见缝插针，补齐剩余元素——合理权衡、补齐元素促成“玩”游戏结构清晰设计目标按玩法样式布局按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式模拟现实场景布局按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式按照设备或平台规范放置软件层级通用内容按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式按照对应游戏通用设计方式放置按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式重要信息重要+高频查看高频查看眼动低频操作重要+高频操作高频操作高频操作手动设计要点：频繁眼动时，向下看优于向上；费兹定律；无形的手重要信息紧急+高频：1步操作、顺手、突出紧急+低频：1~2步操作、在易于点击的位置不紧急+高频：1步操作、顺手不紧急+低频：2~3步操作、不醒目、边角、收起，甚至不放在当前界面按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式高频操作集中在中间和下方，即时变化的信息最好跟随当前视觉焦点按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式高频操作集中在中间和下方，即时变化的信息最好跟随当前视觉焦点按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式按重要程度和需要频率放置遵循规范和常规合理权衡、补齐元素确认核心玩法样式•绘制原型前的准备工作•游戏场景/主框架的绘制方法•功能场景的绘制方法•细节的绘制方法•界面与界面间关系的表达•绘制原型的要点目录功能场景的绘制方法营造情景实现功能设计目标功能场景布局的一般步骤：1.引导目标2.呈现结构层级3.表达使用流程B动/静(最强)大/小(一定范围内)AB明暗(相对背景)AB色彩AB厚度(质感)ABA呈现结构层级引导目标表达使用流程利用对比设计呈现界面目标B附属装饰A对比要明显，否则就不要做区分；不要过度使用，规律应尽量简单、少量利用对比设计呈现界面目标呈现结构层级引导目标表达使用流程环绕形式BABBBBBBB主干形式ABBB呈现结构层级引导目标表达使用流程利用布局样式呈现界面目标装饰物A置于界面中心A环绕形式呈现结构层级引导目标表达使用流程主干形式利用布局样式呈现界面目标置于界面中心呈现结构层级引导目标表达使用流程装饰物衬托利用布局样式呈现界面目标呈现结构层级引导目标表达使用流程利用箭头指向呈现界面目标呈现结构层级引导目标表达使用流程利用好奇心理呈现界面目标呈现结构层级引导目标表达使用流程利用补齐心理引导目标追求完美(收集心理)空位（填充心理）利用补齐心理引导目标呈现结构层级引导目标表达使用流程进度（图形、文字、倒计时）ABCD共同区域：色块共同区域：外框ABCDBCD线连接ABCD分隔线A强弱隐藏的对齐线BCDA接近/分开BCDA相似/相异BCDA强体现弱体现呈现结构层级引导目标表达使用流程利用分栏分组的设计呈现结构层级灵活运用，使界面划分明确且和谐明确沉重明确割裂清爽不够明确清爽明确呈现结构层级引导目标表达使用流程利用分栏分组的设计呈现结构层级呈现结构层级引导目标表达使用流程Tab/层级其他常见结构样式主干形式环绕形式AB从左到右CAB从上到下CAB嵌套CC箭头指向AB序号AB1.2.C3.逐步激活ABC基本规则强化规则环绕ABBBBBBBB主干形式ABBB呈现结构层级引导目标表达使用流程渐变色ABCPC上Tab放在下方导致逻辑认知受到强烈的影响弱影响，但有利于频繁切换除非带来绝对优势，否则不要轻易破坏基本规则呈现结构层级引导目标表达使用流程利用渐变色强化难度顺序镶嵌一般是先选装备再选宝石——采用上下分栏宝石是装备的附属品——采用环绕样式体现最合理的逻辑关系，适当使用强化规则加强逻辑表达呈现结构层级引导目标表达使用流程呈现结构层级引导目标表达使用流程从上至下/从左至右呈现结构层级引导目标表达使用流程环绕（由中心向四周/由四周向中心）•绘制原型前的准备工作•游戏场景/主框架的绘制方法•功能场景的绘制方法•细节的绘制方法•界面与界面间关系的表达•绘制原型的要点目录细节的绘制方法因地制宜和谐美观设计目标细节布局的制约因素：•可用空间形状、大小•外显元素尺寸、数量细节的绘制方法寻找可用区域、按空间尺寸和形状灵活调配大则显、小则藏网页版手机版细节的绘制方法根据需要外显的元素数量灵活组合细节的绘制方法灵活运用分栏分组的设计手段，使界面划分明确且和谐细节的绘制方法细节布局也要分栏分组有关的要群组，无关的要分开；分栏过多会零散，灵活设计使界面和谐有效细节的绘制方法细节布局也要分栏分组•绘制原型前的准备工作•游戏场景/主框架的绘制方法•功能场景的绘制方法•细节的绘制方法•界面与界面间关系的表达•绘制原型的要点目录界面与界面间关系的表达界面间的关系一般为：切换关系进出关系从属关系表达结构关系设计目标由导航来表示进出关系切换关系从属关系明确表达当前所在位置模拟现实（传送点）进出关系切换关系从属关系退出/关闭控件进出关系切换关系从属关系模拟现实（入口/出口）进出关系切换关系从属关系弹出子面板进出关系切换关系从属关系利用阴影和蒙板表达层级关系接近/指向性浮层进出关系切换关系从属关系利用阴影和蒙板表达层级关系•绘制原型前的准备工作•游戏场景/主框架的绘制方法•功能场景的绘制方法•细节的绘制方法•界面与界面间关系的表达•绘制原型的要点目录绘制原型的要点使界面元素有序排布绘制原型的要点灵活运用重复的特性，避免使用过多完全不同的特性注意视觉平衡（考虑美术填充后的平衡感）绘制原型的要点考虑实际表现情况，以大部分人将看到的界面去布局绘制原型的要点精确到像素；尽量真实、准确；考虑元素的极限尺寸；绘制原型的要点考虑极限情况的样式绘制原型的要点预想视觉设计可能的方式，提前咨询视觉设计师的想法和建议绘制原型的要点绘制原型的要点使用色彩时保持谨慎，避免过度的视觉设计避免使用深色线条和色块，避免使用对比度强烈的颜色绘制原型的要点绘制原型的要点通过明暗对比来描述模块之间的视觉优先级绘制原型的要点控件和模版的整理收集绘制原型的要点其他补充：1.不要过早绘制细节，应先用草图与相关人进行充分讨论；2.不要过早制作动态原型，否则一个小改动也可能牵动整个方案；3.在交互图中不要过分追求视觉设计，以免偏离重点；4.绘制过程中经常用用户分析和场景分析的要点来检查方案；5.只能出一个通用方案，又要保证多个分辨率都适应，此时比较高效的设计顺序是：先绘制主要分辨率的几个重点界面，以保证大部分人看到的效果最佳，再以需要顾及的最小分辨率来绘制所有原型，在绘制过程中估算最佳效果；总结权衡设计方案逻辑关系、模块分类、重要程度界面尺寸、元素大小、内容数量使用频率、关联操作、联动因素交互设计表现的难点在于将以上复杂的内容有效的、规范的、和谐的、可扩展的组织起来，使用户能迅速知道自己要做什么、怎么做，而操作时能顺畅、舒适、高效，操作后能无缝的完成这个步骤并进入下一个步骤。交互设计师需要具备的最基本能力共情分析能力脑补能力组织能力交互设计师用户ThankYou!