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

淘宝造物节H5

前言

要说淘宝上半年最热门的事件，非造物节莫属！既然是要造，就得玩出花！淘宝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. 和业务方一起调整整体画面

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

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

一. 体验目标定制

提起目标，就自然回归到了需求本身，这里除了基础的业务需求以外，我们模拟了现场可能碰到的各方面问题列出了用户需求。并针对拥有成熟竞品的地图型产品，又提取了竞品的设计特征来减少用户学习成本。
 
业务需求：
标注出基本的商家与场馆参数
让每个铺子的人流相对均衡，不产生大面积排队现象
可以通过运营方法，快速凝聚某个铺子的人气
让用户快速识别出特殊的功能区
体现出造的精神，让产品做一些秀让造物节变得更能被传播
 
用户需求：
简单易识别的操作界面，更快找到场馆
少花点流量
了解一下活动的具体信息
了解一下场馆的具体信息
 
竞品特征：
整体结构层次少，易理解
整体行为路径清晰，易操作
标注显眼，地图颜色柔和，文字信息突出，易识别
通过3方面交叉分析，我们得出了最终的功能目标与设计目标。
 
功能目标：
为造物节做一款工具型产品，在基础的导航功能之外提供游客现场所需的指引
 
设计目标：
基于用户平时使用地图的习惯建立交互视觉框架，在设计风格上可以贯穿造物
节品牌UI

二. 功能的落地

以用户调研与最真实需求为例，设计开发出相应功能
1  找到去场馆的路
2  查看所有场馆与活动
3  要找到最好玩的活动
4  要查看附近场馆
5  我要了解排队情况
6  要找到洗手间服务台…
7  自己也想露脸秀一把

三. 设计落地

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

视觉执行-色彩

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

视觉执行-ICON

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

视觉执行——品牌贯穿

1  解锁会场附近场馆必须学会使用在空中划出造物三角
2  使用淘公仔作为AR形象，宣导这是一次淘宝的大型活动
3  在入口图片设计，状态提示等植入了造物节的品牌元素

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