1评论

游戏交互设计启示录(3)—游戏项目中交互设计师的工作

zhujuntu 2017-10-25 1.7k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群167422913

每个游戏公司可能界面交互设计师的工作内容都略有差异,但我相信本质上都是相同的,以下详细介绍游戏项目中交互设计师的具体工作和关键点。

游戏交互设计师的工作内容和输出物

言归正传,说到交互设计师所做的工作, 不得不先从游戏产品开发流程说起。用一个简单的流程图来说明:

一. 明确功能设计点

简单的说就是策划在每个迭代前期做好功能的设计,制定需求。而这个时候建议交互设计师能够参与到策划的讨论中,因为游戏整体结构组成和形式必须从该功能的目的入手,所以交互设计师在搭建某个功能的界面框架的时候,有必要了解到该功能的目的是什么,由什么原因产生的玩家需求。知其然还要知其所以然。 另外,一般项目都是一个交互设计师配合若干个策划,而界面交互设计师关系到全局的工作,那交互设计师在做界面结构统筹的时候有必要尽可能的把所有功能都了然于心,这样才能做到最大程度的统一性。

另外有一点值得一提,我碰到很多策划在沟通功能需求的时候喜欢用界面推导功能,比如直接说,“在这一步,我需要这里有一个横向滚动列表,选择完内容之后需要弹出一个框,点击这个按钮可以发送……”,或者直接在策划案里把一个竞品游戏类似的界面截图贴一下,描述功能。这样依赖于自己对这个功能界面化的理解去阐述功能点。在我看来策划只要提供一个功能列表就可以了, 类似于“这里需要有一个动画跳转”这种话我都会在讨论需求的时候先选择无视,过于界面化的描述方式并不会给交互设计师减少工作,反而交互设计师需要从你所描述的界面去推导还原本来的功能点。另外, 策划直接用界面“说话”会带来一定的局限性。不单单会给交互设计师带来干扰,或许团队其他成员在看了策划案后容易陷入先入为主的印象而对之后的设计产生抵触。当然如果策划先把需求文档写清楚,顺便附带一些界面参考图辅助理解,也不是不可以啦-__- 这里的重点是,策划以功能点出发,交互设计师从可用性和用户认知出发,让专业的人做专业的事。

 

二.收集竞品游戏 分析界面逻辑架构的优劣点

一般交互设计师在和策划沟通功能的时候就可以开始收集资料了,玩玩竞品游戏,分析一下别人在这里为什么要这样组织,这样处理。有什么优点和缺陷。其实交互设计师应该多体验游戏,因为这样不单单可以在做一个功能的时候可以了解到各类游戏在这个类似功能点的时候是怎么设计界面的,同时你可以收集到各种亮眼聪明的设计并在之后做其他功能的时候融会贯通。另外这样可以让你在和你策划沟通的时候也更有资本:)收集竞品的工作时长根据项目周期决定,因为有的时候迭代非常快,根本不可能让你做太多分析竞品和用户的工作。最理想的情况你可以输出一份竞品分析报告,分析优劣势,作为之后设计的参考。

 

三.内容输出

交互设计师需要密切的和他人沟通,其中不同形式的内容输出就是最重要的一环,那关于内容输出什么,可以先定义下这份输出给谁看,希望起到什么作用。

对象:        要什么:                             起到作用:

 

 

 

 

 

 

 

 

 

 

 

 

 


    以上可以看出需要完成的任务、面向的对象不少,再加上项目处于不同阶段、项目所在不同平台,结合多种交付物才能完整表达你的设计思想、便于其他同事工作。下面列出几种我认为较为有效且通用的交付物模版,供大家参考:

1、信息架构图和行为流程图

主要面向对象:开发、策划、QA

在和游戏策划确定完功能点之后就可以做设计方案了。如果功能构成比较复杂,建议做一下信息功能架构图,或者行为流程图。可以让策划同学帮忙分析结构,制作的目的是为了更加详尽和清晰的剖析结构功能,同时帮助你更轻松的发现流程上的问题,和需要优化的结构。看看主流程是否清晰直接,有没有让人困惑的地方。而策划通过和你的合作,可以再次审视一遍之前的功能点罗列,看看结构上是不是存在问题。

在分析结果的过程中有以下几点值得注意:

1.确定核心内容,任务主流程

无论做哪个功能点的设计,都需要搞清目的是什么,核心内容是什么。你可以在结构图上用不同的颜色标记处主流程和次流程,看看有没有干扰核心内容的东西,检查是否有干扰玩家快速进入游戏的环节。 之前塔防项目在开始游戏前一定要强制玩家经过选英雄,选城堡,选兵,选技能的操作。即便玩家什么都不想换还得经过这几个界面步骤,这就显得非常累赘,这些步骤阻碍了玩家进游戏战斗这一核心内容,使玩家经过核心人物的路径过长。经过讨论之后把这些界面操作改成了径向路径,不干扰核心任务,只有在玩家想去换的时候才去点开相应界面。

2. 反应界面出层级关系和步骤

结构框架图可以清楚的反应出界面的层级关系,哪些是主任务哪些是支任务,并且对这些层级分组罗列。对于玩家想做的任务有一个清晰的步骤呈现,先干吗后干吗,有多少情况等。

 

 

 

 

 

2、线框图Wireframe

    主要面向对象:开发、美术、策划、QA

有了大致的界面交互逻辑之后可以进行具体界面设计了,我会制作详细的界面线框图和流程图;

首先线框图需要规定界面基本形式,包括布局,控件位置,大小,哪些是可以交互的,该处需要显示多少图标,它们各自需要多少状态表现等都要描述清楚;同时也要保证写清交互步骤之间的规则。

 

界面线框图和设计描述

 

在制作线框图的过程中需要和UI视觉设计师进行充分的沟通。因为你不单单需要传达给美术 这里有多少个图标,有几种状态,各出现在什么情况,最关键的是你可以通过和UI视觉设计师的沟通来让他们知晓你的设计意图,这样他们才能在之后的视觉表现上帮助你更好的达成交互目的。优秀的视觉设计师能够很擅长的将你的交互语言转化为视觉语言,并且赋予情感的色彩去打动玩家。

一般而言,UI视觉设计师的工作都不会等到你提供出详尽的设计稿后才开始,而是会在交互设计进行的过程中就开始尝试视觉风格。 交互和视觉的搭配应该是非常默契的搭档,因为彼此的工作在职责范围上也有很多渗透和交集的领域,比如对于控件和信息在界面显示中的布局,视觉一致性等。

交互设计师在做界面布局设计的时候需要为视觉设计师注意到以下几点:

1.     尽量以真实的尺寸比例设计制作线框图

当你在做线框图的时候,真实的尺寸比例有助于你评估设计的准确度。按钮控件多少长宽比例的像素,字体使用多少号的,信息显示框到底是多大都需要从线框图就设定和校对准确。

2.     应对不同操作设备或平台的交互设计规范

如果做IOS游戏 就要考虑到IOS设计指南,点击的控件都保持在44X44像素以上等。做全尺寸的需要考虑到适配问题。不同游戏设备,平台以及玩家游戏的操作手势是如何的将直接影响按钮控件布局的位置。

3.     尽量考虑到本地化因素(localization

如果要做本地化版本,需要考虑到文字占界面空间的扩展性;比如中文的“确定” 英文就是“confirm”,而德文就是“bestätigen”,所以如果你要做多语言版本的游戏界面设计,那就要注意文字信息显示的区域是否能承载足够的信息。尽量可能给翻译团队足够多的空间。

3、界面说明文档

    主要面向对象:开发、美术、策划、QA

    界面说明文档是在有原型图的基础上进行详细的说明,他可以让开发、美术同事提升工作效率,策划同事清楚操作形式,QA同事明晰测试点。下面简单介绍一下:

a. 交互说明文档

    这是比较通用的一种说明式文档,需明确界面中不同位置的功能,该功能的状态以及触发的内容等。有一个小经验是可以用不同颜色背景可以标注给不同同事需要关注的板块。

 

 

b. 分镜头式说明文档

   对于有故事情节、镜头或者如新手模态指引需要预估时间等模块,可以尝试分镜式的文档说明,这可以比较清晰把控玩家在该阶段所需停留时间以及屏幕的表现。

4、可交互原型(快速原型prototype

   主要面向对象:老大、策划、玩家

   可交互原型能高度还原实际体验,但往往制作成本比较高,我们可以根据实际的需求和工作量来评估是否提供。一般需要用到可交互原型的情景主要有:1、游戏开发初期,没有可跑的版本,团队中成员对各个系统体验没有很好的脑补能力,我们可以尝试模拟在平台上制作可交互原型,让未来的制作有一个比较好的预期。2、开发成熟期或者运营期,需要制作或者迭代一个重要系统,可提供给团队或者玩家进行可用性测试而不用占用程序时间,从而提高效率。3、对于比较难描述或者连贯的界面动效设计,也可以提供可交互原型进行展示。

    说回如何制作可交互原型,其实现在网上的工具种类也很多了,并且大部分都支持跨平台制作。下面介绍几个常用的可交互原型制作工具,当然工具只是手段,他能提高我们工作的效率和质量,但核心仍然是我们的设计思想:

i )Axure

                                      Axure

Axure已经更新到8.0版本,功能相当完善,提供多个平台的标准控件,并有丰富的逻辑触发条件,可编辑的动画方式等等,能够模拟几乎所有需求。他支持WindowsMac,对于PC端游、主机游戏?的原型制作Axure是一个很好的选择,如果要模拟到手机中的效果还需要借助其他的工具协助导出,比如Axure Share, Protosee,大家有兴趣可以研究一下。

 

ii )POP

 

 


 

 

 

 

 

 

 

 

 

 

 

                                   POP

 

 

POP是一个非常易上手的制作可交互原型的APP,主要用于手机游戏的展示,支持iOSAndroid平台。他需要你导入静态的原型图,可手绘拍照也可以导入高保真图片,然后加上跳转链接即可在手机中完成制作,是一个非常有效率的工具。但是他并不能提供复杂的逻辑判断,也不能提供丰富的动效,所以只能制作有限的可交互展示。如果只是演示基本的操作流程和信息架构相信会是一个很好的选择哦。

 

 

 

 

 

 

iii ) Flinto

                                          Flinto

 

Flinto是一个制作界面动画的优秀软件,目前只支持Mac平台,有对应的iOS App协助在手机中展示交互。通过他制作的界面动画很平滑,仿真度很高,可以详细编辑各个元素的参数。Flinto操作简单,不过需要结合Sketch导入丰富的素材。类似的工具还有Principle, Protopie, Flash等,都是比较易上手的界面动画制作工具。

 

 

 

 

 

 

 

 

 

 

 

 

iv )Unity

                                      Unity

当游戏从2D屏幕到3D空间,体验有了翻天覆地的变化,操作也和之前截然不同,2D的设计平台已经很难满足。Unity众所周知是一个游戏引擎,当我们要模拟VR/AR/MR游戏时,最好的方法就是直接在Unity中设计。Unity可以创造一个3D空间,方便的设计曲面界面、控制摄像机、与游戏场景直接交互...

 

5、规范文档

主要面向对象:其他交互、自己

游戏涉及的平台很多:PCMAC、手机、各类主机、各类掌机、VR/AR设备...各个平台有各个平台的设计规范,做游戏之前都需要很好的了解并定义这个项目的规范。相关平台的设计准则大部分可以在其官网上找到,事先了解会避免很多坑。

 

 

 

 

 

 

 

                              Windows控件库官网

                                苹果官方界面指导

 

 游戏设计过程中,我们可以和UI一起建立自己的控件规范、操作规范,结合相应的软件方便制作与设计参考。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

界面视觉规范样例

 

 有了完善的可参考依据,在游戏稳定运营阶段可以有极高的输出效率,和他人合作也方便很多。

 

 

四.跟进与实现

     当你的交互设计方案得到了团队的一致认可, 进入到开发阶段之前,有必要的话你可以列一份功能开发列表,特别是在界面规模较大较复杂的前提下。因为交互设计师做完设计不可能说像甩手掌柜一样丢给视觉和开发自己什么都不管,你还得跟进设计实现吧,得验收吧。那如果有一份详尽的功能开发列表,对于无论是你自己的验收过程,还是程序的开发过程都有了对照的参照依据。这样也可以把开发的进度尽可能的量化,透明化。按照状态标注,哪些做完的哪些没做完一目了然,便于定期的追踪和团队内汇报周知。

界面功能开发列表

 

 

有人会问,上述所讲的方式是不是每做一个项目都要照做呢? 其实我觉得需要根据特定的情况,按照我自己的习惯是只要能说清我的设计意图我就选择哪个方式,比如结构简单的我就写个文档说明配线框图;复杂的做个流程图来帮助剖析细节和交互步骤;争议较多的可能需要用快速原型来帮助理解,测试反馈和迭代方案;设计小改动直接邮件周知。团队能接受就可以了。

说到底,游戏交互设计师其实是一个非常多面的角色。首先我们是界面策划,保持着对上游需求的敏锐,对系统结构清晰思考。同时我们和UI美术一起合作是UI设计师。然后作为UI PM管控界面开发进度。当然我们也需要保持对版本进行体验上的用研。

 

 

 

 

游戏交互设计师常见困扰

游戏交互设计工作开展起来并不是很容易的,因为这个职业本身是一个新兴的岗位,游戏开发团队并不是一开始就有游戏交互设计师的。按照惯例游戏开发团队只是由“策划,美术,程序”组成,游戏交互设计师的职位说的好听来源于团队对于用户体验的重视,其实可能最实际的现实原因来自于:

1.                要么因为团队开发出来的游戏在用户界面可用性上产生了很大的问题。在后期的审核过程中屡遭挫败,或者玩家抱怨不断。

2.                UI美术们实在受不了策划们过于“随意”的布置界面工作。碰到问题也得不到很专业的解答。项目开发到一定的阶段出现了界面无人管控的状态,问题爆发却无人统筹解决。

3.                如今热门的手游开发使人们对用户体验的重视提高到了空前的地位,有能力的开发团队觉得让团队中出现一名交互设计师更能突显高大上。

于是团队意识到必须要有专门的人做界面交互设计的工作, 最开始游戏交互设计师被定义为界面策划,配合系统策划完成对用户界面的逻辑结构,布局设计工作。是策划和界面美术中间的接口人。但如果团队对交互设计师的认知不够,势必产生对于该职位的定位不明确。而这个被“委以重任”的交互设计师会面临着一个非常模糊又无法量化的目标。而整个团队在UI开发上所有新的流程规范都需要他去建立,这个时候工作的难点就会一一暴露,首先,他需要在一个原本没有交互参与的团队内去说服大家确定交互的必要性,要知道,在原本已有并运用很久的流程上做改动是很有难度的,如果碰巧缺乏自上而下的支持那么恭喜你,他会碰到来自各个职位的挑战:

Ø  可能策划由于不知道如何更好的和交互配合从而导致你们的职责分工不明确;

Ø  也可能由于程序之前习惯于直接和策划确立需求,所以直接跳过交互这个环节对界面流程做修改;

Ø  或者UI美术会误会你的某些工作意图觉得你在争夺设计主导权;

Ø  ……

如果加上交互设计师本身影响力较弱,缺乏话语权,又处处担心提出的意见不被支持。最终导致交互设计师只做一些执行的工作,或者被牵着鼻子走,被边缘化,团队内有交互和没交互没什么差别。另外,由于人数的稀缺性也可能会出现缺乏专业环境和具体培养目标的情况。如果没有专业团队的支持,个人发展和专业眼界也会受到局限。

 

如何克服困难

对于新入团队的交互设计师,你必须要有强大的内心和认清困难的觉悟。因为对一个新的团队确立一件新事物的合理性是需要智慧和方法的。你必须找到各种资源来支持你的工作,并且想尽方法“融入”团队流程从而建立新规则。在游戏交互设计这条不归路上走了那么远,我对这些困难也总结了一些自己的体会和解决方法,以下我们来聊聊我们能做的。

 

一.提高设计师自身专业能力-设计力

万变不离其宗的是,从提升自身功力开始。那是什么? 加天赋点啊~~设计力就好比战斗力,这个综合能力由一条主天赋和若干旁系天赋组成,主要的是交互专业的纵向能力,同时包含横向关联的跨界知识。

如今设计早已不是那些作图技能。而应该是智慧。就好比你作为设计师,既要有足够的专业能力听得懂同事说什么,更要听得懂玩家讲什么,保持倾听以及洞察分析的能力。只有这样才具备足够的说服力,才能在撕逼中力压群芳,让人心悦诚服。

 

二.提升主动性

主动性是非常关键的,我们作为UI界面开发的 feature owner,必须具有绝对的自发主动性,以主人翁的姿态去面对你的工作。我的地盘你做主,碰到问题了 应当有一种舍我其谁的姿态去面对。

如果对着UI说 “又是策划要加的啊,,,我也没办法。” 你仔细想想,这是主人说出来的话么?别把自己当外人,因为你就是主人啊!

 

三.学会角色转换

除了主动性,有时候需要具有智慧的角色转换。怎么说呢,我们在一个UI feature team里的时候,我们也应当考虑到其他角色,为他们创造良好条件,而不是事事亲力亲为。游戏交互设计师你可能之前做过UI视觉设计,有可能是策划。但如今你负责的是整体的UI设计开发,你应当从一个具体执行者转换为一个更好的协调者去。发挥你的才智让其他角色各行其职,实现能力最大化。

 

四.提升需求挖掘的能力

我们看到目前市面上的游戏,拥有太多同质化。系统一样 功能一样,难免造成界面和交互也雷同。

我们的交互设计师往往被动和主动的走着别的游戏的老路。如果我们一味地被动接需求,盲目的执行拷贝,有时候也会慢慢使自己的专业性得到葬送。

 

我们再来看看产品:定性和定量。定性是做什么;定量是怎么做。而定性和定量又可以分五个层级。

它指的是 比如:

战略的事: (老板) 做什么?怎么拿资源?

范围的事: (老板,制作人)定游戏类型,确定方案

结构的事: (策划)功能系统,结构逻辑,商业化方案

框架的事: (交互)信息层级,各界面的组建方式和整合,界面布局,创建UI任务

表现的事: (UI视觉)具体界面的细节和表现

那么我们从游戏研发角度看到了我们交互界面设计在整体维度中也是处在比较靠后的框架和表现层的位置。最多在产品细节好不好的层面上和我们有关系,但是在产品对不对的层面上和我们绝缘。这种情况下你只能在那个时间和节点出现,你的位置是被锁死的,不可能往更高价值的决策区域转移。

任何一个价值网络里,价值不是平均分配的,我们界面设计师做的正是游戏行业价值网络中位置比较尾端的一环,我们要怎么做才能摆脱这个弱势呢?用我们的设计力尽可能的影响我们的上游。对于需求我们要有挖掘的能力。有更开放的姿态,不被动的处理需求。不仅仅要充分明确需求,更要去优化需求。如今是人人设计师的时代,任何人都应该有创造需求的能力和意识。

 

天天酷跑15年的稳定运营期和年初我们进行的交互大改版是离不开的。 我们在界面上做到了版本扩容的可持续性设计方案。对于之后产品长期运营期也起到了交互结构上的支持和体验上的保障。从这点上充分做到了从交互设计角度出发引导产品走向。作为交互设计师,你需要做到的不是苦苦埋在琐碎的执行层面上 你的使命是用自己的专业能力去帮助产品达到新的高度。