1月5日凌晨过后，一条画风清奇的年货大街出现在淘宝首页。
阿里祭出的H5开年大戏「淘宝年货大街」，其内汇聚百家蕴含年味儿的特色好店~向《清明上河图》致敬！惊艳亮相，一时媒体争相传播，朋友圈疯狂转发。
1月13日，京东发布“同款”H5：「这样逛街，才是买年货的正确打开方式！」 为京东3C年货节的传播做推广~
到底它们是在干什么？
是汪性的扭曲，还是喵德的沦丧？
是礼教的崩坏，还是法律的缺失？
欢迎来到走近科学……
咳咳，我猜，京东汪与天喵，应该是在争宠吧。
互联网为每个人赋能，令每个人称为君王
而值此年货节之际
一场喵星人与汪星人的后宫斗剧正在热映！
听说正常的汪星人与喵星人是这样的
作为“君王”，逛年货大街是选择某汪？还是某喵？
你决定好了吗?
2015年底，马云宣布首届阿里年货节启动，成为阿里继双十一，双十二之后所开拓的第三个节日。
短短一年时光，各大品牌争相涌入，优惠促销。
年货节已由15年首届农民年货节升级为了全民全品牌的年货节！
阿里 x 「淘宝年货大街」与京东 x 「这样逛街，才是买年货的正确打开方式！」
发布时间相隔一周
同样定位于年货节，同样的H5传媒载体，同样的致敬《清明上河图》
此次堪称是巨头在H5方面的正面交锋！
百度百科这样对《清明上河图》注解：
在五米多长的画卷里，绘制了数量庞大的各色人物，牛、骡、驴等牲畜，车、轿、大小船只，房屋、桥梁、城楼等各有特色。画中每个人物、景象、细节，都安排得合情合理，疏密、繁简、动静、聚散等画面关系，处理得恰到好处，达到繁而不杂，多而不乱。体现了宋代建筑的特征。生动记录了中国十二世纪北宋汴京的城市面貌和当时社会各阶层人民的生活状况。是汴京当年繁荣的见证，也是北宋城市经济情况的写照。
完整版《清明上河图》原图可由附件下载
以下我们且从H5的十维指标来一一剖析，庖丁解牛~！
一、创意纬度
京东与阿里同样都是H5版的《清明上河图》年货大街，创意相近
不过阿里发布在先，惊艳亮相，一时媒体争相传播，朋友圈疯狂转发。
京东发布略晚一周时间，相近的创意虽说在一定程度上有单纯“撞车”可能性
（短短一周时间不足以支撑京东版清明上河图H5的立项、策划、文案、插画、音乐、技术开发、测试等整个制作流程）
但对于用户来讲,无论如何,阿里堪称独创，更有新意。 京东棋差一招。
“消费者的心智一旦被占据，后人想进入将付出巨大代价”
二、内容纬度
阿里年货大街齐聚百家蕴含年味儿的特色好店
无论是农家食坊、特色菜场，还是特产大道都堪称吃货的世界。
巧妙嵌入名人IP如：
》 故宫淘宝-雍正皇帝发现地心引力！
》 小岳岳当街叫卖、嗨嗨皮皮
》 吾皇论招财的正确姿势
》 白茶骑电摩逛街
》 巴扎黑街头迷路一脸懵逼
》 上海美术电影制片厂带你一秒穿越回童年
》 沉香（宝莲灯）、九色鹿、蛋生（天书奇谭）、小兔淘淘、神笔马良、三个和尚、一只耳（黑猫警长）的强势串场
》 葫芦娃四娃喷火街头卖艺
》 爷爷四十五度角仰望天空
》 二娃千里眼巡视妖气
》 蛇精搔首弄姿...引路人眼球（完全PK掉了对门的戏班）
》 悟空手提竹篮采摘蟠桃
》 三藏驻足街头一脸困顿
》 八戒大口吃肉大快朵颐
》 熊猫酒仙举杯独酌 醉卧酒楼
》 太白金星品茶论道 这是门学问
除了高识别性的名人串场，大街上还有不少话题热点的主题代入
细细品味，你会发现
》 两兄弟拿着把破扫帚当街卖唱（告诉我，你的梦想是什么？）
》 票房冠军美人鱼竟街头吃土（星爷力作-16年年度票房冠军《美人鱼》33.92亿元）
》 四尚四尚最四尚，喔的滑板屑（摩擦摩擦，我是庞麦郎）
》 卓伟老师现身大街、追踪八卦（“第一狗仔”卓伟老师...我们等你最新爆料哦）
年货大街的每个商铺、每位NPC都有着各有的故事，努力演绎着自己的角色
比隔壁汪的路人群演卖力多了...(来导演，多给他加份盒饭！)
》 身着袖章追捕小偷
》 老头子开写春联，根本停不下来
》 土鸡成妖 驮蛋下水
》 榴莲大Q街头揽客
》 熊孩子乱戳乱点 大街跳闸停电
》 菜场打桌球 欢乐天天有
》 爱自拍的店主-好东西创意
太多细节，各种彩蛋，不一而足，只想说策划团队不要太给力~！
只要你有耐心，似乎永远可以发现更多的心意和新意～
京东年货大街以手机、数码、电脑等3C产品为主销品，数码发烧友的天堂。
大街上开设听音阁、通讯站、藏经阁、健康驿站、平衡车行、造梦堂、电玩城、光影空间、神算屋、极限馆、三国棋牌室、有声坊、相机行、灼龟等共14家特色小店。
13组古名人穿越到京东年货大街，且乐在其中...
》 唐僧居然变宅男，取经也懒得去了！
》 神器还能玩穿越，关公战秦琼不是梦！
》 李白买了VR，五年没回家过年了！
巧妙的情节设计将3C年货以软广告的方式嵌入在特色小店与穿越名人之间，见缝插针...
恩，这个广告做的一点儿都不硬...
古代名人与大街店铺、3C年货恰到好处的融于一体。
1. 包黑炭 - 单反 - 相机行
[全家福，来一张] 超强大光圈，多黑都不怕
2. 嫦娥玉兔 - 音响 - 有声坊
[给新年加点年味儿] 广寒宫里气氛暖，载歌载舞乐无边
3. 哪吒 - 平衡车 - 平衡车行
[搞不定熊孩子？搞辆车给他] 脚踩神车沿街闹，欢天喜地把龙玩
4. 牛郎织女 - 电脑 | 摄像头 - 极限馆 | 神算屋
[异地恋不可怕，感情深全靠它] 新春拜年视频连，异地相恋情不减
5. 唐三藏 - 平板电脑 - 藏经阁
[学习娱乐，两不误] 手持平板取真经，看个电影大联欢
6. 悟空 - 耳机 - 听音阁
[七大姑八大姨，一个对策] 不惧师傅咒语念，新年快活似神仙
7. 明成祖朱棣 - 投影仪 - 光影空间
[新年在一起，更看在一起] 三千佳丽无争宠，大片一放乐融融
8. 李白《静夜思》 - VR - 造梦堂
[VR神器在手，新年思乡不愁] 举头望明月 VR思故乡
9. 桃园三兄弟+孔明 - 手机 - 通讯站 | 三国棋牌室
[好哥们，常联系] 新年相聚三缺一，一通来电把旧叙
10. 关公战秦琼 - XBOX - 电玩城
[好兄弟,来一把] 一年到头终相见，来盘游戏爽翻天
11. 舞蹈队 - Apple Watch - 健康驿站
[吃好喝好，不如身体好好] 弱不禁风不复返，新年新貌惹众羡
12. 孔夫子 - GoPro运动相机 - 相机行
[捕捉年味瞬间] 周游各国神情爽，神器记录合家欢。
13. 福禄寿三星 - 京东三C年货
[红包好礼，真心十亿] 收集福禄寿游戏互动+福禄寿三星开演唱会、发红包
《发财发福中国年》重新填词，适配于3C（手机、电脑、数码）年货节，营造出特色年味！
三、数据纬度
淘宝店铺数以近千万家计，阿里从中优选出百家蕴含年味儿的特色好店。
每家店铺精心适配角色、人物、热点话题
用户还可以直接点开任一小店，查看店铺的掌柜说、热销品展图~甚至直接跳转场景、进入小店剁手选购...
京东年货大街以手机、数码、电脑等3C产品为主销品
场景内融入品牌Brand与活动时间数据
但倘若用户对某一特色产品或品牌感兴趣，也并没有数据跳转的直通车
只能点击buy按钮，跳转京东3C主会场，再自行选购。
四、视觉纬度
阿里年货大街：
1、房屋、店铺、船只、角色、人物数量庞大、繁而不杂，多而不乱；
2、画风清奇，视觉色彩饱和度较高，颇具现代感；
3、所有视觉元素均围绕大街上的100个代表行业属性的品牌店铺而进行延展，角色刻画鲜明、店铺设计趣味性颇高。
4、此外，还精选了9家神店，由上海天与空团队为每家神店创造了各显绝技的掌柜，略具三例如下：
京东年货大街：
1、13组古名人细节刻画入神、色彩饱和、辨识性高；
2、4个表情各异的京东汪化身8尊石汪，强势串场！
3、整体视觉设计较高还原《清明上河图》古旧泛黄味道。
4、大街上的听音阁、通讯站、藏经阁、健康驿站、平衡车行、造梦堂、电玩城、光影空间、神算屋、极限馆、三国棋牌室、有声坊、相机行等14家店铺与8尊京东石汪的设计也饶有趣味。
5、不过各大数码品牌招牌（乐视、魅族、佳能、中兴、苹果等）以简单的广告牌进行视觉呈现的方式确实有些硬...
阿里年货大街画风清奇，视觉色彩饱和度较高，颇具现代感；
京东年货大街整体视觉设计较高还原《清明上河图》古旧泛黄味道。
此外，双方都采用到弹幕刷屏的设计模式：
阿里将弹幕设计为场景细节里的互动彩蛋之一；
京东则将弹幕设计为H5的开场加载动画~
五、声乐纬度
阿里年货大街的bgm是各地方言版的小食叫卖：
“油泼辣子Biángbiáng面...锅盔凉粉便宜喽便宜喽......”
百分百渲染原汁原味的美食古巷~
不足之处是：
1、17s音频长度略短，来回就那几句（年货大街内细节与彩蛋无数，这样的大街得慢慢逛才有味道...但是）。
2、声乐所传达的年味略显不足！如果小食叫卖声之外能加上些许锣鼓喧天的伴奏，效果想必会好一些。
早在2015年2月，由《发财发福中国年》改编的《扭羊歌》在美拍爆红，拜年必跳，年会必备。
京东年货大街的声乐正是改编版的《发财发福中国年》
由童声演唱，成功借势塑造出锣鼓喧天、欢喜新年的氛围~
六、技术纬度
技术方面，我们从切图大小优化、动效实现、特殊算法等三个角度切入进行分析
》 切图优化方面：
阿里图片大小控制在6.1MB；京东控制在5.2MB+3.1MB。
值得一提的是京东为H5做了异步加载优化，将12组古代名人浮层图的加载时间设置在了用户请求发生之际，较大幅度优化了网页加载速度~
》 动效实现方面：
场景内的各种动效均以canvas为主要技术实现手段，旗鼓相当，不过实现上也并不复杂...
》 特殊算法方面：
阿里H5设置了三组随机函数：
1、整个城市被切分为9个可以随机组合的独立空间，用户每次打开H5所看到的世界各不相同~增加了不确定性与趣味性；
2、随朕逛-解决选择强迫症的神技~；
3、调戏掌柜-调戏的响应结果是随机获得红包、优惠券等。
京东H5将「福」「禄」「寿」三字随机分布在用户寻访的12组古代名人之中
集齐并触发福禄寿三星发红包雨事件
随后用户随机获得一定数额的优惠券红包。
七、互娱纬度
在娱乐性&游戏性的设计上
阿里以调戏掌柜和口令红包为主
京东则以搜集「福」「禄」「寿」三字为游戏主要模式穿插于年货大街之内。
此外:
交互方面略有不同：
阿里以竖屏滑动体验为主，竖屏的原因想必离不开城镇设计上的9段独立空间随机排列模式。
京东以横屏滑动体验为主，观赏模式更接近原版长卷古画。
动画方面阿里与京东年货大街均以H5的加载动画、场景人物循播动画、触控响应动画、浮层动画等此几类为主，且均通过canvas实现而非gif或video。
双方均无影视实拍。
H5的竞争靠的是长板效应、差异化优势
阿里 x 「淘宝年货大街」在创意、内容、视觉、数据等维度指数颇高，
齐聚百家蕴含年味儿的特色好店
年货大街上不仅有故宫雍正皇帝、吾皇、小岳岳等名人串场，亦有不少话题热点的主题代入，每个商铺、每位NPC都有着各有的故事，努力演绎着自己的角色。
太多细节，各种彩蛋，只要你有耐心，似乎永远可以发现更多的心意和新意～
致敬《清明上河图》,颇具探索性、艺术性与收藏价值！
京东 x 「这样逛街，才是买年货的正确打开方式！」在声乐、视觉、内容、等维度指数颇高
巧妙的情节设计将3C年货以软广告的方式见缝插针式嵌入在特色小店与穿越名人之间...
改编版的《发财发福中国年》成功借势塑造出锣鼓喧天、欢喜新年的氛围~
略倾向于娱乐化、快餐化，颇具H5娱乐的时效性，更容易抓住眼球。
聊完了H5版的年货大街
阿猫阿狗的“争宠剧”就结束了么？
当然没有...
如今阿里与京东的最大差别在于：
对于京东而言，电商是它的一切。
但对于阿里而言，电商只是其曾经的起点，而今的支点之一。
阿里与京东之间根本就是一场不平衡的PK
即便京东于“局部战场”胜利，也未见能战胜阿里！
有关阿里生态尚不了解此点的朋友可参见《天猫双十一背后的行业逻辑》
这个差别从此次年货节里双方的品牌营销组合拳差异即可看出端倪。
京东3c年货节，仅用一款H5告诉大家：“这样逛街，才是买年货的正确打开方式！”
而阿里这边除了创造了一个年货大街，尚有：
》 一只挖空心思的行李箱 - 让心意更有新意
》 三步变身作曲家
》 天猫AR - 淘宝&天猫客户端扫描快递箱猫头（或下图）惊现拜年猫~
》 淘宝#春碗#故事4则
1：香煎糕富帅
2：一笼表情包
3：自摸青一色
4：打赏烘培
