所有分类
  • 所有分类
  • 未分类

淘宝造物节-造了个城又画了个图

前言

要说淘宝上半年最热门的事件,非造物节莫属!既然是要造,就得玩出花!淘宝UED互动组有幸参与其中,并为用户在线上线下的体验都尝试了一把新套路。

线上:为让用户持续关注造物节相关内容,我们造了个城。

线下:为到场用户提供现场所需指引,我们导了个航。

我们选取了造物城与导览图项目的一些思考和设计过程给大家,看设计师是用什么套路把想法给落地的。

淘宝造物节-造了个城又画了个图

造了个城——造物城之硬装篇

一. 信息结构

造物城从7月15号上线到7月21日下线,历时8天,目的是为了造物节线上造势传递造物节信息、宣扬造物精神。总的来说,这是一个资讯类互动项目,传播的是内容。7.15上线,这时淘宝站内没有任何的营销氛围,造物城也没有什么吸引人的利益点。可以说用户对于造物节零感知——没有感知就没有期待,没有期待就没有需求。面对未知,什么最能引起用户的兴趣?我们陷入了沉思……在我们一脸懵逼的时候,天空中突然飘过双11狂欢城和过年不打烊这两个项目:

1.在双11互动项目中,狂欢城可以说是流量顶峰,因为用户可以拿到红包。在利益这一点上无论是已知还是未知,对于用户来说都是有效的。

2.2016年春节上线的“过年不打烊”项目。在手淘首页十个icon区域做的一个类似于打地鼠的小互动,0利益,但是玩的人也很多,排行榜经常刷新纪录。这说明有趣的东西,能让用户玩起来的东西,即使没有利益,也是OK的。

根据我们之前所说的,本次造物城基本无有吸引力的利益点来说,“玩起来”就成了我们吸引用户的关键因素。所以我们是这样做的:以娱乐驱动作为撬动点,将生命值概念和浏览城堡信息挂钩,用一个体现造物精神的游戏串联起造物城信息。

淘宝造物节-造了个城又画了个图

一进造物城,我们引导用户先玩游戏,消耗生命值,再引导用户去浏览城堡(造物节信息)补充生命值,之后再去玩游戏。,形成这样一个良性的循环,以达到驱动用户浏览传播造物信息的业务目标。下面来具体说一下用以串起整个造物城的游戏的设置过程。

二. 游戏

对于这次的造物城来说,游戏环节有这样两个特质:第一是在线时间短,仅有8天(7.15-7.21 );第二,业务上要求分成两个阶段:单人战和部落战。看似简单,却对我们游戏设置提出了如下需求:

1. 要求简单直接易上手教育成本低游戏结果能即时反馈

业务的需求通常是,通过这样一个小的互动游戏,能够传递将所表达的事情或想营销的点。一篇软文、一个h5页面虽然也可以达到目的,但仅仅只是展示,不如互动能调动用户的积极性。互动存在的价值也就在此,但千万不能像做网游一样那么复杂,我们的用户没有在一个购物环境下玩网游的习惯,他们只需要短平快的互动。

2. 基于实现成本的考量单人战和部落战的游戏形式一致机制不同

整个造物城,前端的开发的时间只有2周,包含了两个阶段的游戏和n个界面,所以在最初的时候就已确定2个阶段的游戏只是机制不同,游戏形式都是一致的。

3. 除了权益奖励之外还需要设定激励手段。

4. 要体现“造”的概念,造物城的主城承担着造物节信息透出的作用。游戏环节因为是用户也参与进来,也符合人人都是造物者的概念,所以游戏要体现造的精神。

确定了基本的要求之后,我们便在小黑屋里开始了全面撒网的游戏体验时间:

动作类:眼手协作、及时反馈、耗时短、极少中途退出。例如:Steppy Pants

冒险类:着重于解谜、道具收集、对战等。例如:大富翁、魔兽

养成/经营类:和角色、地域、事情等建立情感联系。如模拟人生、开心农场、模拟城市等。

益智/策略:逻辑推理和拼图、思考、谋划等。例如:植物大战僵尸、俄罗斯方块、保卫萝卜、皇室战争等。

经过各种不透明不公开的否定和自我否定之后,我们的游戏方案如下:这是由一个动作类游戏+养成/经营游戏+排行榜组成的互动:

——动作类游戏-爬楼梯:简单直接,耗时短,极少中途退出。

1阶段单人战,纯粹的步数累积;2阶段部落战,部数限定,用时少者胜。满足2个阶段的业务需求。这个游戏的人均次数为8-9次,还是很不错的。

——养成/经营类游戏-我的小屋:作为刺激手段1利益导向,融入升级机制,级别越高利益越大。小屋的位置与其他造型奇特的造物节场馆在一个画面,可以通过用户的努力来升级,体现普通用户即造物者与淘宝一同创造的精神。

——排行榜:刺激手段2荣誉导向

排行榜作为第二种刺激机制作用非常大,1阶段单局最高达到了3700分(造物城小黑屋项目组最高成绩仅为998分),技术同学计算过,就是要一直连续玩20分钟以上才能到达这个成绩。有了排行榜之后,即使利益不吸引人,也会有想冲榜的感觉。

淘宝造物节-造了个城又画了个图

经过这次游戏环节的设置和结果,互动游戏项目总结了两个点供以后参考:

1. 要求简单直接易上手游戏结果能即时反馈

2. 要有除利益以外的激励环节设置

这个项目做下来,我深深的感受到互动界面的设计其实是对于“度”的把握,举个栗子,最开始在找大感觉的时候做的尝试,有这样几种:

游戏式强氛围:既然是用游戏串联起造物城信息那界面也要如此,用插画+炫酷的光效来设计,像网游一样。但是虽炫酷但信息不够清晰,不知道看哪,行动点太小、不够突出。

暗色简洁版:有氛围信息能够辨识但有点暗黑信息分段版:用颜色区分标题和内容,红色作为标题,大促氛围浓;行动点放在白色底上更突出。最终上线的也是这一个版本。

淘宝造物节-造了个城又画了个图

经过这次项目中界面的各种改改改,得出以下心得:

互动界面是在营销视觉和产品视觉中间的特殊物种,它有着这样的属性

1. 产品视觉属性:以信息表达清晰为第一目标,简洁、无复杂图形。结构、按钮样式、标题文字、说明文字等细节一致

2. 营销视觉属性:互动氛围的营造,和前端同学手拉手、肩并肩。在满足功能之后的需求,要以不过分影响性能为基础,总的来说有两点

——辅助元素分段添加,尽量少使用大幅图片和无规律的渐变

——在适当的位置添加,top/bottom比较合适,尽量不要位于页面中央

举个栗子:下图这两张界面是游戏结果页,都分别增添了一些氛围素材。

左边是第二阶段右边是第一阶段看似结构一样,但前端同学的实现方式是不同的

左边的背景顶部和底部是分开的,可以分段定位,一个top、一个bottom。右边的背景因为渐变用的比较多,无规则,所以只能写成一张大图背景。

淘宝造物节-造了个城又画了个图

造了个城——造物城之软装篇

一. 信息整合

当造物城主城的任务落在你身上时,你要如何落地如此庞大的信息量?显而易见的第一个问题是,到底是有多大的信息量?以下是业务层面的7层信息结构:

第一层:“我的小屋”4次升级

第二层:1个造物城标志性建筑方尖塔

第三层:T.A.O三大板块共11个建筑

第四层:1个特色会场——初音会场

第五层:5个固定广告位

第六层: 55个行业广告位

第七层:1个票务入口

总记77个需要透出的信息量。

你会说,那就按照信息重要程度布局,依次往下排就可以了。不,你又忽略了一点:超过三屏的内容跳失率非常高(超过两屏跳失率已经开始上涨),所以以上所有信息要尽量控制在三屏之内。聪明的你掐指一算,一屏平均要展示25个信息,这根本不可能实现。那么最后我如何让以上77个元素安然出现在2屏半的区域里的呢?我尝试了从视觉层面出发重新分层。

视觉层次主要靠空间大小,空间位置,元素对比(形、色、塑造)几个方面体现。在具体执行前,首先要对于空间大小有所打算。我在这个阶段,引入了单位的概念,将最重要的第一层信息制成一个单位,次重要的信息定成1/2单位,依次往下的层次信息定成1/4单位甚至更小。

这次线下造物节展览会主要展示T.A.O三个板块的新奇特,所以线上造物城中,T.A.O板块信息一定是要作为主要信息呈现,在此我将业务信息层中前三层信息的元素都作为一个单位大小:我的小屋、方尖塔、T.A.O 9个板块信息,一共11个单位;特色会场,5个固定广告位必须固定放在画面中,我把它们定为1/2个单位大小,一共3个单位;55个行业广告位,在和业务方反复确认下,决定用10个坑位随机展现的方式来落地,这个部分我把它定位1/4个单元大小,一共2.5个单位;最后一个票务入口,属于活动入口,随时上随时撤,因此我会用小于1/4单位去呈现。

总记17个单元,3屏大小,平均一屏只需要安放6个单元。这样的设定让完全不可能实现变为了轻松实现。整合设定了信息结构之后,就可以确定采用怎么样的视觉表现手法了。

淘宝造物节-造了个城又画了个图

二. 确定2.5D视觉表现方式

此时我仍然面临三个问题:

1. 信息复杂:虽然已经整合缩减,仍然还有四个层级

2. 元素摆放拥挤:一屏平均6个单位,13个带文字的元素,画面必然也没有富余多少空间

3. 执行修改频繁且周期短:此类大型项目中,业务变动风险极高,且离上线只有1个月时间(还需要预留开发与测试的时间)

得到两个结论:

1. 扁平风格不适用复杂信息展现,我们需要采取有空间感的视觉表现形式。

2. 因为时间不够,且不能避免频繁修改,我们不采取3d建模的方式。

很自然的,最后我决定采用平面技法塑造3d立体视觉效果:2.5D视觉表现。

淘宝造物节-造了个城又画了个图

确定了表现方式之后,必须要确定风格基调以及做执行前的最后盘点

三. 风格的确定与拆分

风格基调,是建立在业务品牌调性上的,宏观的业务调性是淘宝所带给消费者亲和,门槛低,丰富等特征;微观上的业务品牌调性就是造物节本身的调性——“造”,酷炫,奇妙;最后再结合适用于线上造物城的2.5D视觉表现,得出了风格基调:明快的城市布景,酷炫的元素设定,奇妙的氛围营造。

淘宝造物节-造了个城又画了个图

在此基础上,对风格进行视觉层面拆分,是执行前的最后一步,我将风格拆分成形、色、氛围,三个方面。

1. 形

淘宝造物节-造了个城又画了个图

2. 色

淘宝造物节-造了个城又画了个图

3. 氛围

淘宝造物节-造了个城又画了个图

经过了以上三步思考,执行变得非常高效,我按照以下五步执行,顺利的完成了造物城

四. 如何执行

1. 依次绘制单个元素:从最重要的单位开始

淘宝造物节-造了个城又画了个图

2. 用重要元素构架布局

淘宝造物节-造了个城又画了个图

3. 安放次要信息元素

淘宝造物节-造了个城又画了个图

4. 增加画面丰富度

淘宝造物节-造了个城又画了个图

5. 和业务方一起调整整体画面

淘宝造物节-造了个城又画了个图

画了个图——-现场场馆导览图篇

淘宝造物节-造了个城又画了个图

为现场用户定制的贴心小助手产品,从用户下地铁的一刻起它就能帮上你不少忙,他们都是些什么功能又都是怎么设计的呢?

一. 体验目标定制

提起目标,就自然回归到了需求本身,这里除了基础的业务需求以外,我们模拟了现场可能碰到的各方面问题列出了用户需求。并针对拥有成熟竞品的地图型产品,又提取了竞品的设计特征来减少用户学习成本。

业务需求:

  1. 标注出基本的商家与场馆参数

  2. 让每个铺子的人流相对均衡,不产生大面积排队现象

  3. 可以通过运营方法,快速凝聚某个铺子的人气

  4. 让用户快速识别出特殊的功能区

  5. 体现出造的精神,让产品做一些秀让造物节变得更能被传播

用户需求:

  1. 简单易识别的操作界面,更快找到场馆

  2. 少花点流量

  3. 了解一下活动的具体信息

  4. 了解一下场馆的具体信息

竞品特征:

  1. 整体结构层次少,易理解

  2. 整体行为路径清晰,易操作

  3. 标注显眼,地图颜色柔和,文字信息突出,易识别

通过3方面交叉分析,我们得出了最终的功能目标与设计目标。

功能目标:

为造物节做一款工具型产品,在基础的导航功能之外提供游客现场所需的指引

设计目标:

基于用户平时使用地图的习惯建立交互视觉框架,在设计风格上可以贯穿造物

节品牌UI

淘宝造物节-造了个城又画了个图

二. 功能的落地

以用户调研与最真实需求为例,设计开发出相应功能

1. 找到去场馆的路

2. 查看所有场馆与活动

3. 要找到最好玩的活动

4. 要查看附近场馆

5. 我要了解排队情况

6. 要找到洗手间服务台…

7. 自己也想露脸秀一把

淘宝造物节-造了个城又画了个图

三. 设计落地

交互框架:

所有刚需功能均在当前页展现,根据用户需求重要级依次对内容进行排列

淘宝造物节-造了个城又画了个图视觉执行-色彩

总体是延续了造物节UI的颜色,但在特殊场景下都做了不同处理。地图UI上,为了突出文字信息弱化地图色块,对颜色做了淡化处理。在界面上,考虑到大范围的亮色太过于刺眼,对基础色都做了降饱和处理。

视觉执行-ICON

为了自适应7种不同尺寸大小的扩展,所有ICON都采用了最简洁的设计形式。

淘宝造物节-造了个城又画了个图

视觉执行-品牌贯穿

1. 解锁会场附近场馆必须学会使用在空中划出造物三角

2. 使用淘公仔作为AR形象,宣导这是一次淘宝的大型活动

3. 在入口图片设计,状态提示等植入了造物节的品牌元素

淘宝造物节-造了个城又画了个图

以上为UED互动组的造物节内容分享,咱们双11再见!

“点击并长按以下图片,识别图中二维码” 关注我们!

原文始发于微信公众号(淘宝设计):淘宝造物节-造了个城又画了个图

原文链接:http://www.uiya.cn/11993.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?