阿里UI设计:千牛app诞生记

admin 2018-05-14 阅读:8

千牛作为阿里集团B端一站式工作台,是双十一商家移动端的主阵地,提供了丰富的活动报名、规则解读、资讯直播等功能。但对于那些无法参加大促的中小卖家而言,这些功能无法吸引他们,这也体现了B端产品功能的一个不受控的影响因素 — 商家自身的经营情况。那么如何才能提升非会场商家的参与感?根据走访的情况和商家群的交流我们能看出,双十一是商家的一个特殊日子,都希望能参与其中,哪怕自己的店铺只是有了小小的进步。

从品牌温度的角度去思考,我们决定首次在B端尝试互动玩法,并通过双十一节日氛围的营造,向商家传播快乐双十一,提高非会场商家的双十一参与感。在游戏的角色和内容设计上,将多角色子账号的创建和千牛品牌形象进行融合,加强商家对千牛多角色帐号的学习和了解,提升品牌及形象的认知度。为此制定了从活动报名到大促复盘的整体氛围计划,而全店总动员则是预热开始到双十一当天互动氛围的重要组成部分。

UILOOK-模板.jpg

UI设计

但以往互动玩法都是在C端被提起,B端商家是否能接受这样的内容?互动的权益对于他们有没有吸引力?B端的互动会是什么样子的?第一次探索就是带着这些疑问开始的。

一、创意的诞生过程

游戏创意的开始就像面前有一个黑盒。这个时候你还看不到用户屏幕上具体的UI,但你可以想象用户玩的时候是什么样的,不断的丰富和具象化。这样黑盒的内部开始被显露出来,就像被一道道光束不断照亮。

创意的过程少不了脑暴,通过5W1H的方式可以控制范围,有效提升脑暴的效率:谁 (Who) 什么时间 (When) 在什么场合 (Where) 通过怎样的驱动力 (Why) 使用什么 (What) 以及怎么做(How)。通过这6个方面不断具体描述游戏的轮廓就会逐渐清晰。这非常适合于像我们这样的项目组内讨论使用,因为大家第一次做B端互动,还不够清楚我们的用户在游戏互动方面的诉求。

阿里UI设计:千牛app诞生记

UI设计

其中How的部分,在了解目前H5相关的技术型后,考虑到商家端首次互动的教育成本、商家机型性能以及方便近距离传播等方面,从可以用到的众多互动方式中选择了“摇一摇”。“摇一摇”这个动作很容易想到摇一摇寻找好友、摇红包等功能。摇这个动作已经被广泛教育,它足够简单。而当你在办公室看到同事在一旁拼命摇的时候,一定会好奇:这个人在干什么?

阿里UI设计:千牛app诞生记

UI设计

关键词串联后,这个游戏的基础玩法开始显露出来。我们将它命名为”双十一全店总动员“,来体现商家积极备战的状态。基础玩法就是通过摇一摇给千牛加能量赢取抽奖机会。但你会发现到这一步游戏还只有轮廓,接下来需要通过一系列的设计来让游戏完善和丰满。

阿里UI设计:千牛app诞生记

UI设计

二、游戏的进程设计

这里先引入两个概念”兴趣曲线“和”兴趣因素“(The Art of Game Design – Jesse Schell)。兴趣曲线是一条玩家在游戏中的兴趣程度的走势,玩家的留存意愿是建立在之前体验的基础上,兴趣拐点上就是游戏重要事件,也是设计着重的发力点。兴趣因素则是帮助分析兴趣程度的组成部分,它包括了:固有兴趣、情感映射、艺术的表达,组成部分决定了这个点下需要采取的游戏逻辑和设计方案。

最初的进程安排

阿里UI设计:千牛app诞生记

对应的兴趣曲线

阿里UI设计:千牛app诞生记

UI设计

兴趣曲线的低点会受前一个高点影响,高点越高,接下来的降低程度就会相应减少。可以看出游戏的门槛会导致用户兴趣下降,大部分用户被阻拦在第二只牛的体验一定是不好的,这时财神牛的出现也不会提升太高的兴趣反而用户会困惑。之后长时间没有及时获利反馈的玩法也会导致用户的固有兴趣持续下降。因此我们对兴趣曲线进行了优化。

阿里UI设计:千牛app诞生记

UI设计

相应的我们的游戏进程变为

阿里UI设计:千牛app诞生记

从兴趣因素的方面去细化剖析每个点位,可以更加针对性的分析这个点下设计的重点是什么。

阿里UI设计:千牛app诞生记

内在兴趣:它与用户场景息息相关,在千牛中,商家关注的首先是生意相关的权益。这是互动和纯游戏的最大区别 — 短期内靠权益拉动用户兴趣。除此之外我们的游戏类型定为收集类,也是为了增强用户的内在兴趣,收集欲望本身也有一种驱动力,还有好奇、新鲜感、神秘感等。所以为了加强收集的感觉,取消了所有未唤醒牛的坐姿展示,只有加满唤醒后才能看到。

情感映射:这个需要一定的时间积累,财神牛到店这个彩蛋偏情感映射,是寓意商家在双十一大卖的好彩头,对于有一定沉浸的用户带来的兴趣程度会更高。作为彩蛋,也必须留下充足的想象空间。一般游戏互动的彩蛋都是设置给粉丝玩家,在游戏后期的阶段去发现的。

艺术的表达:这部分就是接下来游戏包装上要提到的,包括了游戏的视觉、动效、音效等美学相关的内容。

三、游戏的包装策略

策略1:用故事丰富游戏

千牛互动游戏的目的其实非常简单:通过摇一摇给千牛加能量,赢取抽奖机会。

但并不是所有目的都完美、高逼格,它可能会附带着商业感和利益化,但是游戏化可以弥补那些天生的不完美,完整的游戏故事也能给抽奖这件事增加魅力属性,帮助玩家投入一个新的世界。

参看一个经典案例:纪念碑谷。游戏一开始告知玩家的故事很简单:1)Who?艾达,几何王国的一位小公主;2)Where?一个丢失了几何体的落败王国;3)What?需要归还几何体,寻求民众的宽恕。纪念碑谷的故事简单又迷人,还有更多可自行想象的空间。互动游戏不像大型游戏那样需要一个非常完整的剧情,但简单有趣的背景支撑,可以保证游戏的逻辑、文案、设计的合理、连贯,也可以增加用户的代入感,使其更容易理解游戏。

阿里UI设计:千牛app诞生记

我们根据千牛端丰富的能力和商务调性,为游戏设计了一个故事,整个故事阐述3个主要关键词:时间旅行、能量蓄力和双11。

为帮助商家解决双11各种问题,千牛从未来而来,并召集了自己拥有各种超前商业能力的伙伴一起助力。但由于漫长的时空旅行导致资深能量的流失,需要商家帮忙增加能量唤醒身份,最终演绎他们和商家的双11故事。

在故事进行的同时,串联“摇一摇加能量“”的动作和“唤醒牛获得抽奖机会”的目的,并将产品子帐号的创建功能和千牛品牌形象进行融合,加强千牛端新老用户对于角色功能的定位和相关插件功能的了解。

阿里UI设计:千牛app诞生记

策略2:用画面配合故事

在场景氛围、游戏UI、角色设计上,用到的元素和造型风格需要尽可能匹配游戏的背景故事,保证游戏整体基调的统一。根据已设定的世界观,我们着手去营造一个带有高科技、科幻、神秘的氛围,确定以千牛品牌蓝色+神秘紫色为主色调。用暗冷色系烘托氛围,辅之橙色作为提亮的点缀,使之不失活泼。

大场景打造了一个漂浮着数据代码和光点的能量舱,当你为千牛摇一摇增加能量的时候,会有能量柱被慢慢注满的样式出现。

阿里UI设计:千牛app诞生记

阿里UI设计:千牛app诞生记

不仅要从大场景入手制造基础氛围,同时需要选用适当的游戏组件,给整体氛围的营造加分,组成能够沉浸其中的游戏页面设计。例如:我们选择了科技范的蓝色激光弹窗,而不是一个白色的普通弹窗;选择了带有重工业感的右侧按钮,而不是几个圆圈。试想一下,当你驾驶一架高级宇宙飞船的时候,忽然操作到一个劣质操纵杆是什么感受。

阿里UI设计:千牛app诞生记

根据千牛端目前主账号可创建的5个角色(客服、客服主管、运营、美工、财务),提取角色关键词,以千牛为基础型,提炼其较为典型的特征,并赋予了具有特色的服装道具,例如客服的耳机、美工的艺术帽子、运营的笔记本、财务的眼镜等等。游戏本身为收集类,不同的服装搭配也能够增加玩家收集的欲望。

阿里UI设计:千牛app诞生记

策略3:用动态诉说细节

随着游戏越来越多的被大众所接受,载体不断改变,玩家也越来越少在游戏内仔细阅读文字类信息。游戏互动作为娱乐的一种表现形式,应该尽可能减少文字描述,而是转化为图形或者动态内容,让玩家可以看到而不是读到。

用纯文字去解释故事背景,会显得枯燥乏味且未必能精准传达。为了便于玩家轻松理解游戏世界观,我们初期甚至设计了一个开场动画讲述整个事件的由来。由于项目时间关系动画并没有出世,不过故事并不仅限于这个载体去讲述,我们把故事背景作为三个欢迎页,在互动上线时、互动的高潮时期进行投放,加强用户对游戏故事背景的认知。

阿里UI设计:千牛app诞生记

阿里UI设计:千牛app诞生记

其次是游戏内的动效,玩家在进行游戏互动时,产生互动最多的还是各种角色的千牛。持续 T而充分的反馈,可以让用户注意力都集中在产品中,我们对千牛角色设定了多个坐姿、站姿动画随机播放,并运用了骨骼动画来实现动效。

骨骼动画是模型动画中的一种。它的模型具有互相连接的“骨骼”组成的骨架结构,通过改变骨骼的朝向和位置来为模型生成动画。但是在H5游戏中,大家比较熟悉的应该是3D建模逐帧动画,例如捉猫猫就是一个典型的建模逐帧动画。

帧动画与骨骼动画的区别在于:

  • 帧动画的每一帧都是角色特定姿势的一个快照,动画的流畅性和平滑效果都取决于帧数的多少。而骨骼动画则是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨头”上,通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。

  • 骨骼动画的资源是一块块小的角色部件,不仅节约美术资源,并且占用的体积更小。

  • 身体各部分动作都可以通过代码控制,可以让动画永远保持流畅效果。

我们的角色不仅需要动起来,而且还要能换装,这时候骨骼动画的优势就体现出来了,装备和骨骼直接绑定,不需要替换主角色就能轻松完成换装。逐帧动画做到这些也不是不可以,只是导出资源成几何倍数增长,不利于内存的压缩。

阿里UI设计:千牛app诞生记

阿里UI设计:千牛app诞生记

互动游戏中还有很多其他动效,也为游戏的及时反馈和沉浸感加分。可以是某个操作的反馈,可以是让画面顺畅切换的转场,也可以是图形化的进度提示。

策略4:用彩蛋制造惊喜

积极心理学中把金钱、物质和地位称为“外在激励”,这种外在激励当得到满足之后就会出现“享乐适应”的心理状态,人逐渐对外在激励产生疲劳感,即使再多也不会给以足够的动力。作为一个收集类互动游戏,玩家很快就会熟知游戏规则,并且对重复摇一摇的交互产生疲劳。

这种时候就需要游戏的内在激励,举个例子:游戏中你获得了新技能、和队友组队最终吃鸡,这些游戏过程都可以让玩家在克服种种困难的过程中产生幸福感。

对此我们增加了一个最终的财神牛卡牌,设计成一个漂浮的卡牌样式,与其他的牛相比显得特别与众不同,并且激活它有着一定的门槛。财神牛卡牌就作为一个内在激励,让人对它产生好奇,再次带动兴趣曲线。

财神总是意味着财运来,就像中国一些商家总是在年初五放鞭炮迎财神,祈祷新的一年财运满满,这对于双11希望店铺大卖的商家有着一定的吸引力。最后引导分享,让商家炫耀一番自己的战利品,同时达到传播的目的。

阿里UI设计:千牛app诞生记

四、B端互动特性

游戏的体验考量可以从互动率、互动次数等维度来看。全店总动员11.1-11.11进行,共计112.1W商家参与互动游戏,人均互动次数22次,互动率64%。对比C端数据,这次B端互动的首次尝试达到了预期效果。流量曲线也能反映用户的参与兴趣,可以看出这和我们预设的兴趣曲线非常接近。

阿里UI设计:千牛app诞生记

一天之间的流量高点主要是:刚上班 9点,午饭午休 13点,晚饭 17点,休息 21点。我们也简单向群里的卖家验证了这个时间。互动时间分布可以在下一次互动的通知机制设计上派上用场。

阿里UI设计:千牛app诞生记

这些数字的背后我们也了解了很多商家端互动玩法的特性,还是有很多意料之外的收获。

1. 更快更直接更相关的利益吸引

商家端非接单场景下的活动参与需求是更快完成活动,更直接获取利益。虽然这次的奖品非常丰厚,但商家并不愿意花时间去猜测他能得到什么。从抽奖当天商家的评论和群商家的反馈来看,其实大家对于抽奖这种存在几率的活动不是很关注。反而是加满第一只牛就可以得到通信礼包这种确定性的活动用户更愿意尝试,对于商家来说时间很宝贵,有确定性的结果才有动力。

2. 受限的分享

我们做了很多内容希望商家去分享传播,比如主动的分享入口、次数限制拉动分享、以及最后的炫耀财神牛。原以为商家是有自己的群可以玩起来的,但发现大部分商家群是因为官方小二而建立的官方群,商家发其他内容会担心被踢,大家都发分享刷屏后也会影响小二通知其他事项。分享到非商家的渠道里帮加能量的成本太高,也会导致分享的动力很低。最终只有财神牛这种炫耀类的分享率更高,因此后续B端分享传播的内容类型应该是内容展示性的而非操作性的。

3. 氛围的营造

B端互动对商家来说一方面缺乏活动的认知,另一方面千牛以工作为主,为避免干扰用户的正常功能,无法做强活动氛围的营造,很难撬动活动的参与度。从这次的数据上看到,通过PUSH触达用户促成短时间强烈爆发的效果并不理想。所以此类B端产品内要做互动,需要有长期的用户运营阵地,这个阵地应该固定且不影响用户的核心功能,并通过以后的运营事件反复教育,长线培养商家的认知。


发表评论:

二维码