更新中······

什么是游戏UI

游戏UI设计和其他UI设计的区别

  1. 视觉表现不同

    游戏UI必须结合游戏本身的艺术风格,对于设计者的设计能力、手绘能力以及对游戏的理解能力要求更高。

  2. 复杂程度不同

    在视觉、逻辑和数量上都更复杂。

  3. 工作方式不同

    游戏UI设计要理解不同游戏艺术世界抽象的概念。

怎样才算是好的游戏UI

  1. 好用易用

    以用户为核心,尽可能地便于操作。

    以内容为先导,尽可能地直观呈现。

  2. 简单亲和

    简化操作 -> 舒适性

    亲和传达 -> 愉悦感

  3. 情感联系

    积极传达产品整体调性。

    适当地提示反馈和帮助。

  4. 可延续性

    为产品整体体验服务。

    一致的信息结构以降低学习成本。

游戏UI设计的职业角色

  1. 游戏用户研究:通过专业方法研究玩家及其对产品的态度。

    Demo版本的原型阶段:针对用户特征和竞品进行研究,对美术以及核心玩法进行测试;

    游戏进行量化的开发阶段:研究竞品,迭代核心玩法,测试主要系统玩法;

    游戏上线前后的测试阶段:持续关注成长和生存体验、留存和流失的研究;

    基本方向:游戏项目主要面对的人群

    • 基本信息(性别比例、年龄分布、学历、收入、游戏时间等)
    • 消费习惯(消费意愿、占支出比、道具消费偏好等)
    • 个性偏好(画面类型、风格、模式、收费方式等)
    • 游戏行为(游戏动机、选择标准、活动、服务器选择、现有不满之处、媒体接触情况等)
  2. 交互设计:游戏系统整体的逻辑关系、界面布局结构和操作流程。

    Demo版本的原型阶段:根据核心玩法设计主任务流程,规划各人物与主界面之间的关系;

    游戏进行量化的开发阶段:确定各个界面的目标和重点,清理需求,与视觉设计师沟通,指定UI标准;

    游戏上线前后的测试阶段:根据反馈进行交互迭代;

    基本流程:

    • 分析(需求分析、用户分析、场景分析):模块分类、界面尺寸、内容数量等;
    • 规划(流程规划、界面规划):重要程度、逻辑关系、使用频率等;
    • 绘制(框架绘制、布局绘制):关联操作、联动因素等;
    • 说明(撰写说明、补充说明):节省沟通成本;
  3. 视觉设计:游戏画面的重要组成部分,不仅强调视觉感受,更强调信息传达。

    Demo版本的原型阶段:游戏UI风格设计;

    游戏进行量化的开发阶段:游戏图标资源的设计制作;

    游戏上线前后的测试阶段:运营系统设计制作,推广物料设置制作,打磨视觉品质;

    基本流程:

    • 分析(竞品分析、资料分析、关键词分析):提炼风格元素、情感共鸣、素材收集;
    • 概念(视觉拼图、风格草图):视觉重点、技术限制;
    • 绘制(界面绘制、控件绘制、图标绘制):视觉层级、最终调整;
    • 输出(效果图、切图):输出给前端工程师;

游戏UI在不同阶段的工作重点

  1. 立项阶段:信息收集进行分析,绘制概念图,UI风格探索等;
  2. 概念阶段:初步交互框架设计,开发Demo,进行AB测等;
  3. 量产阶段:确定视觉风格,系统和玩法功能设计,引导界面设计,图标资源设计等;
  4. 内测阶段:优化迭代资源,查缺补漏,优化体验等;
  5. 公测阶段:后续版本继续设计,打磨细节,推广支持等;

视觉设计前的准备工作

  1. 用户需求和使用场景分析:哪些人玩,用户审美取向和色彩爱好等;
  2. 对同类型产品内容进行分析:分析竞品操作方式,记录问题等;
  3. 对流程和界面内容进行规划:分析确认主任务流程和规划任务之间的关联方式;
  4. 确认各个场景界面的重点:
  5. 讨论界面实现方法:根据最终效果图继续讨论优化方法;

游戏UI的基础知识

游戏UI的专业知识

设计审美基础

  1. 图形构成:格式塔原则、相似原则、闭合原则、接近原则、连续原则、对比原则等;
  2. 色彩构成:用色尽可能不超过三种,按照主色调、副色调做好区分;
  3. 体和质感:直观地与记忆和情感建立联系,更有质感的物体更有可能是可交互的;
  4. 字体设计:传递信息与情感,结构必须清晰。
  5. 版式设计:对图形、文字以及色彩进行排列组合,达到直观的审美感受;
  6. 空间透视:真实感,代入感;

视知觉组织强度变化:先动态后静态、先图片后文字、先大块后小块、先中间后两边等;有色无色、有框无框、距离远近、有無分割等;

如何提高审美:多看,收集资料,整理资料;多摹,多摹仿,培养自己对设计的感觉;多自我分析总结,取其精华去其糟粕;

游戏UI的基础模块

导航模式:玩家获取内容的快速途径,交互体验的基础,UI的关键部分。

  1. 菜单式导航:一次点击弹出悬浮式的功能菜单,一般用于游戏活动入口、地图等;占据更少的画面,与游戏场景的融合最好;
  2. 标签式导航:配有图标,位于屏幕边缘固定的位置,更直观,适用于多个且重要程度类似的内容;缺点是占用空间,因此适合高频操作内容;
  3. 选项卡式导航:适用于层级较多的系统,对大量信息进行分页收纳;
  4. 列表式导航:需要高效操作的界面,比如邮件列表,任务列表等;

内容展示:营造氛围,有效地传递信息,保证为内容服务。

  1. 幻灯片式:图片或整块内容并列展示和内容轮换。常见于商城或大型玩法;
  2. 卡片式:将不同信息内容模块化,并有序地组织起来,简洁有序。有很多选择的副本入口,或是需要进行对比的VIP购买界面;
  3. 网格式:利用分组和间隔来创造规律。能形成一定视觉美感,但对用户的选择压力较大;
  4. 隐喻式:对现实世界的操作进行模仿,给用户带来熟悉感。比如签到的日历,倒计时的钟表等;

基础控件:可以直接操作的控件。

  1. 命令控件:按钮、超链接等;
  2. 选择控件:复选框、单选框等;
  3. 输入控件:滑块、滚动条等;
  4. 显示控件:进度条、分割线等;

游戏HUD界面

在游戏中向玩家传递重要信息的控件。

游戏系统功能

  1. 通用系统功能:

    简单明了,操作明确,降低存在感,要让玩家忽略其的存在;

    好友、背包、设置等;

  2. 核心玩法系统

    衬托主题,提高沉浸感,强调舒适性;

    角色成长、收集、成就系统;

  3. 运营充值系统

    信息突出、提高参与感、加强刺激;

游戏的其他界面

登录界面:传达游戏世界观;

创角界面:传达游戏世界的风格;

Loading界面:减少玩家的焦虑感,让玩家易被吸引;

情景提示:提示玩家什么是可操作的;

  • 弹出框:简短的文字说明和可操作的按钮,如果没有可操作的内容,最好马上就消失;
  • 气泡、图标:时间短,不需要有效操作;
  • 跑马灯:滚动条,显示少量用户特别关心的信息;

反馈信息:对事物本身的直接反应,用于将游戏长期和短期目标展现给玩家;

  • 信息:尽量简洁易懂,避免大段文字;
  • 警告:要告知玩家如何回到希望的状态中(比如复活);
  • 错误:要提示哪里出错了;
  • 确认:玩家在进行危险或者不可逆的操作时,对玩家进行再次确认;

游戏UI设计技能的修炼