网易游戏交互设计师分享:游戏交互设计做什么及学习的关键性方法

嘉宾介绍

陈振华,网易游戏做交互设计师

分享主题

游戏交互该如何做,新人该如何入门

交互设计是什么

首先我们来理解下,我们平时认为的交互是什么?

ONE. 用户研究,调研

TWO. 功能分析,了解一下我们这个产品,也就是老大给我们的功能需求。具体的我们又包括功能结构图)比如,下面这个就是我们所说的功能结构图

THREE. 情景分析,根据用户使用环境来确定产品的实际功能、可能表现形式、防错机制等,比如,我们当时说手机拍照,现在也开始使用了防抖、快拍等功能

FOUR.我们还要去做竞品分析,很多时候,我们刚开始学,其实就是抄袭了,特别是互联网的应用,由于有明确的规范,所以在做竞品的时候,看起来像抄袭了。

0wx_fmtjpe

微信钱包界面

0wx_fmtjpeg

钱包支付宝界面

对于支付宝和微信红包,希望大家去了解下,毕竟两个国内少有的大金主,对于这两个入口界面,肯定是非常用心的,体验方面也应该是国内非常优秀的。

FOVE. 流程设计 ,大部分公司的交互设计师在这里,工作就算基本完成了。互联网的流程设计与游戏的流程设计还是有很多不同,前者主要是树状流程图,后者更多的时球状。

SIX. 始验收工作,包括程序实现,GUI效果图实现,用户反馈。游戏交互设计,这是非常关键的一步

游戏交互做什么呢?在了解这个问题之前,我们先了解下,游戏为什么需要做交互?

在很多人理解,游戏需要策划、美术还有程序就够了,要不我们再加一个产品经理,这就完事了。我要交互干什么,有个卵用!

在回答这个问题之前,我先给大家看两个界面。最关键的界面。

签到界面设计:

0wx_fmtjpeg

 

0wx_fmtpn

 

为什么说这个界面呢?因为签到的目的就是为了提高留存,包括次留、七留和月留

这个时候,我们可以通过了解这两个界面之间的区别来了解交互设计的作用。

其他的比如:

老大:我要做个地下城玩法,给我整一个

设计师:好,来了

0wx_fmtjpeg

0wx_fmtjpeg

0wx_fmtjpeg

大家可以了解下两个方案的区别所以,游戏的交互设计师,除了简单的解决用户的体验,更多的时候是解决老大的问题,然后在玩家和老大之间找个平衡点。

所以这里最主要的任务是:平衡

这个词,很广泛,下面我们来一点点解释这个词。比方说,你现在是打算做一个游戏交互设计师,那么首先应该干什么!

玩游戏! 游戏首先是玩出来的

最典型的,如果你不喜欢玩游戏,你自己就很难把游戏做好。这个是所有职业的共性。别的专业我们不去讲他,就说游戏交互,你玩游戏对你的这个职业有啥好处:

ONE.玩游戏才能理解老大在说什么

比如现在老大给你说,我要做一个背包,你来给我设计下。你要是不玩游戏,或者说只是简单的看别人游戏做了说明,你会以为,背包只会是一个物品展示功能和分类功能。

0wx_fmtjpeg

但是很明显,背包肯还包括对物品的处理功能

0wx_fmtjpeg

是不是这样就完成了,肯定不是,我们还得想一想,万一玩家在想其他玩家展示你的背包的时候,这个界面怎么显示。如果你不玩游戏,这个隐藏的功能,你肯定不会知道,而老大更不会给你一一解说,因为太费时间,而且,他会觉得你很弱智,你要知道,比如网易的策划,基本都是清华北大的人,智商太高。又比如,老大这时候给你说,我要做个公会膜拜的功能,如果你这时候只是去简单的找竞品,你会找到这些界面

0wx_fmtjpeg

0wx_fmtjpeg

如果你拿出类似的方案给老大,一般情况会得出两种结论,第一,你完成了他给你工作,第二,这他妈是什么,也太丑了。但是,如果你玩的游戏够多,你会理解老大的真实想法是,类似膜拜的功能!这个时候,你需要去做的是,挖掘膜拜功能到底是在玩然后,再用你玩过的游戏,进行包装。

TWO.多玩游戏可以增强同事的交流

THREE.了解游戏

因为我们知道游戏的交互设计,我们再学学是学不到的,关于这么方面的书籍也很少。这也说明一个问题,游戏设计规范性很少!没有规范,我们就需要自己去找规范,这个时候,你玩的游戏足够多,你就有更多的基本数据,那么的规范就更有普适性。

FOUR.沟通效率!

很多时候向别人讲述或者描述你的方案的时候,像某某游戏几个字,比你的一大段话,更有效率。这时候,大家会讲,我去,你说了半天,要做游戏交互设计,就是玩游戏呗,这多爽,我去上班,每天玩游戏,玩多了,我也能做。

当然,结果肯定是:NO!

为什么说游戏交互不仅仅是玩游戏呢!来看看入职工作内容以及培训

因为,我刚来网易的时候,我也是这么认为,结果到了公司之后,看看我都干了些什么!

入职第一个月:

员工培训培训内容:1、素质拓展一周;2、系统分析一周;3、AE一周;4、交互方案设计一周

入职第二、三个月:

1、 骨骼动画制作。(大家可以下载一下《圣灵zero》这款游戏,里面所有形象的攻击动作或者受机动作,有一部分就是我做的)。或者可以这么理解,你在玩游戏的时候,英雄打怪,怪物会模仿现实生活中,发生一列的反馈,比如摔倒、旋转等等,这些动作,就是你做好,然后程序调用

入职半年:

交互界面制作:就是说游戏中的所有界面,都是人工拼接起来的,就像我们做的拼图游戏。音效整理:每一个交互反馈。界面转场都要有东西提示,应该是说明音效,模拟那种环境,对不起,这都是交互设计需要做的事(间接应对了多玩游戏的说法)。因为这都是体验的范畴,都需要你去解决了。音效那边会根据你对声音的描述,然后制作出你想要的效果。

动效制作:你做了一个交互,你的交互反馈不炫酷,那还叫游戏。但是,这个交互反馈,在你脑海中,应该有个大致的呈现吧,你不描述出来,专业动效没法给你做。最最关键的问题是,前期动效不会跟进游戏的,但是老大又想看到效果,所以需要你自己表现出来!(所以我非常不好意思的告诉大家,我他妈就这打砸的活,还没有干好!)

入职一年

做交互文档:需要对所有的文档进行整理,以备今后迭代(迭代这个坑太深,我希望下次有机会,单独做一个课题,去讲,游戏交互的迭代问题)

UI资源整理:游戏中除了很多效果图啊,美术图、动效资源啊,都需要你去整理,去压缩,包体越小,玩家越愿意下载,毕竟中国通信大爹从来不会再你下载的时候给你停机的。一个不小心,我的厕所就没了)怎么把资源量变小,同时保证游戏的品质,这个是需要你仔细去处理的。这个时候我明白了,为什么你们这帮高材生会受到欢迎了。很多人都读不读大学没有太大区别,但是为什么你大学,再考研,他们不能。这个时候选拔的除了智商,更多的时品行,比如你考研,可能是聪明,也可能是坚韧的性格或者负责的态度。无论是哪一种,他对你的工作,都很重要。

工作经验总结:

ONE.我好大家好

你自己做好不算本事,能够让别人更好,才是硬道理。(我好他也好,他好我也好。这句台词太经典,我慢慢能体会了)

TWO.总结才能成长

回想起来,研究生的论文阶段,真的是收获太大了。(ps:我入职网易前,我从来不玩游戏,除了玩过dota,很喜欢,因为很团队。入职后,真的是各种不适应,差点没法转正,因为我根本不懂策划在讲什么,我做出的方案太烂了。后来是通过把我的制作经验(所谓的执行设计)写了一份文档,然后被老大看见了,直接转正了)

THREE.熬夜心得

锻炼是决定你赚够一定钱之后,是否能过自己想要的生活最基本,最核心的东西(恩,你摸你摸,我的胸肌大不大!)如果你足够好,你还需要去组织团建工作,因为在游戏的开发中,交互设计师师直接沟通过老大的存在,GUI、美术、音效、程序、动效,都是你的下游,这些关系都需要你去经营的。所以我们常说,做好设计,其实很适合做管理层,就是这个意思了。今后的工作途径是走专业型,还是管理型,看你自己喽。(初级设计很苦逼,走出来了,海阔天空)讲了这么多,其实只是对游戏交互的一个基本了解。因为大家现在还没有去做游戏,所以,具体干货,我现在只是给大家列个框架,具体怎么实现,我们接下来可以慢慢讲。

关于游戏交互的一般性流程说明

ONE.交互设计流程

0wx_fmtpng
TWO. 框架搭建

界面形态:全屏、类全屏、弹窗

内容布局:左右布局、上下布局

0wx_fmtpng

操作流:点击,双击、长按、拖动、滑动等等,你要定义好每个操作,应该隐喻的功能这是在工作开始之前,就必须搞清楚的,这样才能事倍功半。

THREE.确定交互风格

0wx_fmtpng

你确定好哪一种风格了,今后在跟老大沟通设计方案的时候,更有利。

通用控件规则文档(这点和互联网应该是相通的,在axure上制作一整套交互控件,可以极大的提高工作效率,以前我懂,后来知道真相的我眼泪流下来)

优点:保持操作统一,降低开发成本后续设计时,可直接沿用统一控件规则,不用再每个文档中单独写方便程序统一开发,调用一样的界面和控件,不用单个程序自己写一套:

输入规则(输入框)

滑动控件

界面信息为空时通用反馈方式提示说明tips长按说明tips提示类弹框按钮通过操作音效
FOUR. 制作实现 阶段命名,了解程序的基本实现规则给gui制定基本的命名规范文件夹命名,自己的管理规范
FIVE.文档输出(新建/维护)写什么?

文档需要包含:

1、 基本交互操作说明

2、 界面信息内容

3、 界面流程/逻辑:跳转逻辑(从某个界面到另一个界面)的很详细清楚(关闭/跳转界面)

4、 操作提示语:错误提示,成功提示

5、 操作视觉反馈(音乐音效说明):时候要加反馈特效/点击是否有音乐音效,添加音效(告诉程序),按钮是否有点击状态

6、 界面状态:为空时,(升级到最高时),售空时,每个状态都需要考虑全面,并在文档中说明

7、特效添加说明(可在特效制作完成后再进行补充)

文档基本要求:

1、 清晰易读,表达准确,描述具体(具体哪个界面哪个按钮哪一步操作等等),不能含糊不清,没有确定下来的内容,需要标注清楚

2、 逻辑完整(可提供给GUI 程序/ QA设计/开发/测试)

3、 撰写时,脑子里是一个完整的交互系统,逻辑清晰,细节设计到位,对界面特效,音乐音效有预期或者具体的需求

4、 给程序开发时,一定要文档到位

文章来自:Lofter 设计夹

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/11366/

(0)
TinadminTinadmin
上一篇 2015-12-05
下一篇 2015-12-06

相关推荐

  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 2018年用户体验设计趋势

    作者| Anthony Miller译者| 耳洞审校| 郑几块编辑| Ella全文共 5963 字 31 图,阅读需要 14 分钟———— / BEGIN / ————2017年就要过去了,让我们预测一下2018年的用户体验演变趋势。本文将回顾2017年数字世界中的显著变化,并将展望2018年在设计和开发领域让我们继续保持领先的那些趋势。一、更简单的导航导航体验是2017年设计师中的热门话题。设计师殚精竭虑,拿出熬秃少年头的精神,就是为...

    2018-02-02
  • 交互设计自查表的建立:思路与项目实例解析

    我习惯从层级的角度由高至低地排查各个交互层面可能存在的问题——首先是信息架构与流程这一最高层级,然后是界面的具体呈现,以及基于界面呈现的交互过程,最后才是以上自查中均未涵括的其他特殊情形。(1)确定当前阶段 → (2)阅读设备、数量、所属项目、请购人员、发起时间等基本信息 → (3)确定自己在本流程中的身份(因为部分场景下,当前用户的身份可能有多种可能性,需要用户再做确认)→ (4)在列表区阅读此前的流程历史,必要时可上下滑动或点击查看附件 → (5)确定当前步骤等待自己完成的是什么任务 → (6)执行该任务。

    2017-05-12
  • 为产品赋予人格 - 情感化设计的组成要素及实践案例

    Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀…

    2015-11-01
  • 交互设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重…

    交互设计 2015-08-31
  • 视力设计:如何为弱势群体做包容性设计

    世界是多样和公平的,在我们考虑大多数人和强者的利益时,弱势群体一样也需要被设计“庇护”到。本文作者将就此来谈谈如何为弱势群体做包容性设计之视力篇。主流产品或服务的设计能为尽可能多的人群所方便使用,无需特别的适应或特殊的设计。宽度不超过80个字符或符号(如果是中日韩字体,不超过40个);段落里的行间距(行隔)至少是1.5倍行距,段落间距至少比行间距大1.5倍。

    2017-05-15
  • 全新用户体验+500多项升级功能,IFS Applications 10正式发布!

    ↑关注IFS软件获取最新资讯  ↑IFS Applications 10令人惊叹的视觉效果和全新的互动模式让用户在提高工作效率的同时更喜欢通过这款系统来办公创新的新功能 —— 包括AI 聊天机器人、增强的以服务为中心的功能以及所有解决方案领域的数百项功能优化和升级IFS始终尊重客户的选择:IFS Applications 10同时支持云端和本地部署全球领先的企业级应用软件提供商IFS(艾菲诗软件)宣布,全新版本的企业应用系统套件IFS ...

    2018-05-04
  • 【每周开眼】这一周你应该看到的交互设计圈最棒的设计作品

    Duang Duang Duang!【五一免费体验营】“五一”3天假 出去玩? 还是提升专业能力? 来新易,将两者结合!小长假结束了!考研党又纷纷开始了图书馆的占座活动又开始了肖秀荣英语I英语II工业设计史世界现代设计史画手绘呀,搞透视,搞线条,搞设计辛苦了一天就这么结束了哦不是该来一波优秀的设计作品洗洗眼睛了小新给大家准备了晚间夜宵【洗眼睛必备】交互圈国内外大神的优秀作品从中我们不但审美可以得到提升最重要的我们可以学到很多设计的创意方...

    2018-04-08
  • 译文 | iOS 10 人机界面指南(二)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?

    2017-05-22
  • 物联网用户体验设计:四个物联网产品分析

    编译:冬夜之前,我曾经写过《5个重要的物联网用户体验设计策略》,在设计物联网产品时你可能需要考虑这些策略,如果你认为这些有点空洞或理论化,那么可以看下面四个产品的用户体验分析,实际上,有三个产品满足了用户体验设计的策略要求,另一个姑且算是反面教材吧。一、智能灯:增强体验灯泡,你经常打开或者关闭,就目前来看,灯泡并不是什么颠覆性产品,但是你试试如果一周不使用灯泡会怎样?感谢爱迪生,让我们不必去体验这种情况。今天,你很难在商店货架上灯泡的海...

    2018-04-20