2014.11.11 价格回到十年前,主站点设总结-阿里妈妈MUX

虽然1111结束有一些时间了,眼看1212也来了,不过这会可能还有些疯狂的小伙伴在等待双11的包裹吧!

2014.11.11物价变回十年前主会场设计小结
虽然1111结束有一些时间了,眼看1212也来了,不过这会可能还有些疯狂的小伙伴在等待双11的包裹吧!

从2009年开始,双11不仅仅是光棍节,更是一次全民脱光的购物狂欢节,大家都为了参与这一年一度的狂欢摩拳擦掌, 为了迎接双11的到来,阿里妈妈也准备了一次相关的活动来回馈广大的商家与消费者。

1 活动主题

阿里妈妈双11项目的第一个重要环节,就是活动主题的确定,为此,项目组做了多次的头脑风暴,希望可以得到一个“惊天地·泣鬼神”,过目不忘,一语中的,流芳百世的好主题。最后,得出以下几个方案:

2014.11.11物价变回十年前主会场设计小结

经过一番讨论后, 最终定下了"物价变回十年前"这个主题。其实关于物价的这个活动已有4年的历程,从2011年的"物价回到十年前"到12年13年的"物价再回十年前"再到现在的"物价变回十年前",所以在策划给出这个主题的时候,我们视觉就抗议了(这个主题都做了4年啦,都要做吐了,balabala...),最后的最后,策划们觉得这个主题在商家或者消费者心里多多少少已经留下一点印象了,在双11这样一个特殊时期,大环境,气氛和场景下,主标题最好简单直接明了,让消费者一下就能接收到这是一个大型多品类折扣促销活动,因此还是选择延续活动的历史。

2 活动节奏

活动从11月1日开始到11月12日结束,一共分为3个阶段,同时随着移动设配使用人群的日益增多,本次双11物价活动将会新增无线营销会场。

2.1 预热期:11.1-11.10

主标题:物价变回十年前

副标题:颤抖吧物价

根据前期不断的方案沟通和初步demo的确认,对页面的架构有了整体的了解,并针对各个部分不同的特点进行了进一步的提炼和重构。

2014.11.11物价变回十年前主会场设计小结

整个活动过程中互动游戏是必不可少的关键点,它将娱乐性和利益点做结合,必定能大大提升用户对活动的关注度,因此在强调主题同时要突出互动游戏,基于推广设计”第一屏“原则(第一屏必须出现重要信息,即能让用户产生行动力可点的东西),游戏应当处于视觉第二焦点位置,同时为了不影响海景房的楼层位置,最终敲定只放置游戏按钮,采用点击后幕布下拉的展现形式,突出实用性,即用户在第一时间点就能看见最重要的三个点:活动主题文案、有奖互动游戏、最热单品以刺激用户点击和停留时间。

那么问题来了,内容确定风格该如何下手?先从主题文案入手,看到主题文案(物价变回十年前)最直观且立马罗列出来的关键词,不外乎于”时光机“”时钟“”物价下跌曲线”之类的图形等等,创意过于重复性以上关键词统统被推翻。那么还能做什么样的新创意呢?既然从文案表面的联想都被推翻了,那我们就试着从另一个关键点游戏来找突破口。

2014.11.11物价变回十年前主会场设计小结

整理出设计概念后,接下来就要搜集大富翁棋盘相关的图片,根据搜集到的图片设计版头形式,以此为中心将各部分内容串联起来。

2014.11.11物价变回十年前主会场设计小结

最后预热期的版头最终选定在视觉稿1的基础上优化,所以设计师们不管改几稿,稿稿都要记得存啊,谁知道最后活下来的会是谁呢?。另外为了更加突出冠名商分会场和互动游戏按钮,这2个入口都增加了动态效果。(关于互动游戏的设计可以看一下 http://mux.alimama.com/posts/1356)

2014.11.11物价变回十年前主会场设计小结

海景房&普通区

这2块区域都是呈现商家的海报图,区别在于展现位置和尺寸的大小,海景房的位置在第二屏,尺寸相对更大一些(听名字就不一样)展现更优质的品牌。普通区针对类目做了不同色系,突出差异性。

每个坑位跳转到商家的店铺承接页。因为商家数量庞大,逐一作图显然行不通,所以为了达到视觉上的统一,我们需要做出对应区域的模板,然后针对模板制订详细的规范提供给商家,以保证最终线上图片的质量。

招商结束,整理楼层过程中发现商家数量不一致会有部分空缺出现,为了合理利用空间并保证页面整体的美观性,在各个楼层空余的位置随机插入楼层跳转图,最大化的为各楼层引流。

2.2 爆发期:11.11

主标题:物价变回十年前

副标题:爱就要放肆,欲无需节制(不能用折扣信息,好桑心~~)

1111当天以卖货为主,除去了互动游戏部分,页面基本结构不变,相对预热期来说以热闹为主,提升销售气氛,在版头跟整体配色上都做了相应的调整。带有模特的图更能勾起消费者购买欲,所以11号当天的版头就根据文案“爱就要放肆,欲无需节制”选择了与之匹配的男女模特,加上周围散布的产品来营造当日购物的感觉。

2014.11.11物价变回十年前主会场设计小结

2.3 延续期:11.12

主标题:狂欢继续

副标题:物价变回十年前

页面结构同1111当天页面,强调最后一天,hold住双十一余热,突出狂欢,因此这天的页面用了大量红色,选择了动作表情都很欢乐的模特,营造出一种夜晚灯光熠熠,继续在购物中狂欢喜悦的氛围。

2014.11.11物价变回十年前主会场设计小结

2.4 无线会场

无线会场跟pc一样也分为3个阶段,版头设计风格延续PC,同时针对移动端的浏览特点做了部分交互上的改变,布局上也做出相应的调整。其中海景房采用首屏展现自动轮播形式,当然也能配合手势左右滑动。

版式变得更加简洁,突出海景房,提升点击率。针对商家较多情况,每个坑位也都是随机展示给用户。

2014.11.11物价变回十年前主会场设计小结

3 合作沟通

感谢交互同学给到的无线会场交互稿以及在设计过程中给予的指导帮助。

感谢前端同学为了让活动完美呈现,对页面效果及细节进行的反复调试与修正。

4 反馈

2014年的物价活动线上表现较往年有所提升,区别于往年有三个突破口

2014.11.11物价变回十年前主会场设计小结

5 可优化点

由于项目时间紧张,同时这类节点活动商家又比较多,活动页面形式相对还是比较传统,之后此类活动在设计上可以做一些突破,尤其像预热页表现形式可以更加活泼,与互动游戏的联系也可以更加紧密,增加可玩性,力求玩得开心,买得尽兴。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/2303/

(0)
Smiler李想Smiler李想
上一篇 2015-01-07
下一篇 2015-01-07

相关推荐

  • 移动APP:2015 UI/UX 趋势,Material design布局未来!

    移动APP:2015 UI/UX 趋势,Material design布局未来! 在国内,移动端的发展远远超过网页,初创公司们想拓展品牌都会首选手机App。那么你知道近期App设计风格的趋势么,想要做出不土、高逼格的App,以下的趋势你是…

    2015-08-04
  • 精进UCD设计总监第一字典——全局UI设计规范手册

    注:本文档由PM7V – Ian Huang整理于2016年9月初,随着硬件设备条件变更,最佳规范倍率可能随着时间推移需要加倍计算! 1 UI基础 1.1 像素 1.1.1 逻辑像素(Pt) 在软件层面构成了画面图像 也称逻辑点,是控制屏幕…

    设计规范 2016-09-13
  • 清晰、高效、一致、美观 – 关于设计原则的优先级排序

    我们在Salesforce的产品设计团队当中有个不成文的规矩: 无论谁拿出一份什么清单 – 功能列表、研究报告,或者哪怕只是体恤衫名录 – 无论什么,只要是清单的形式,肯定会有人出来问一句:“按优先级排过序吗?” 有时…

    UI设计 2016-04-26
  • iOS和Android 界面设计尺寸规范

    iOS和Android 界面设计尺寸规范 摘要:刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大,文字该用多大才合适,我要做几套界面才可以?什么七七八八的也着实让人有些头疼。   废话不多说,希望大家…

    2015-01-13
  • 有哪些非常有设计感的APP?—国内篇

    小编前语:继上次整理的富有设计感的应用之国外篇后,很多童鞋想了解目前国内比较有设计感的APP有哪些,总有些喜爱玩APP的达人给我们推荐一些应用,小编在这汇总下,供大家欣赏~~ 1.小记 日记软件有很多,这一款很…

    2015-05-22
  • iOS 9设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy)…

    2016-05-18
  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29
  • Mirror镜像的运用- Sketch从入门到精通

    Mirror镜像这个只针对于设计手机界面的同学来说,比较有用。因为这是一个可以电脑做图和手机显示同步的一个功能。在Sketch的工具栏,你会发现这个Mirror,如下图: 看见了么?怎么样能实现和手机同步呢?首先你要在…

    2015-07-13
  • 【信息图设计】常用的5种数据可视化方法

    小编最近在研究后台的设计,涉及到数据统计分析模块的数据的呈现方面,搜集学习材料的时候发现这篇文章,推荐给有需求的童靴们共同学习。在文章中,原作者跟大家分享数据可视化常用的五种方式,希望能给大家带来思…

    2016-03-17