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

前言

要说淘宝上半年最热门的事件，非造物节莫属！既然是要造，就得玩出花！淘宝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再见！

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

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