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

相关推荐

  • 产品细节中的情感化

    今天分享一篇 视觉设计的文章{产品细节中的情感化设计}说的情感,我们每个人都有,什么爱情、亲情、友情…..等等!但是什么是情感化设计呢?一句话:就是你的设计是否能给用户带来惊喜,温暖…等等!下面让我们一起…

    2015-01-25
  • 沉沉的干货,必读平面设计技巧!

    在过去几年中,我们见证了软件和应用界面设计从3D及拟物化向扁平化和极简化的快速转变。尽管这一趋势现在已经无所不在,但我们不妨拿出一点时间来思考今天的结果是如何形成的,以及其对界面设计整体有着何种影响。另外,我还会和大家分享一些有关设计扁平化界面的小技巧和注意事项。

    2014-12-28
  • 不得不看的进度条「再设计」的 7 个典型案例

    如果追溯 Progress bar「进度条」的原型,通常被认为起源于 Henry Gantt 所提出的「甘特图」。用图形方式来表示某种项目的活动顺序和持续时间是甘特图的核心思想。 后来甘特图的概念被广泛用于计算领域,随着计算机…

    2015-08-04
  • Behance视觉规范(补充版)下载地址

    Behance视觉规范(补充版)下载

    2016-10-20
  • UE网出品:Sketch从入门到精通[免费精品课程] | 阿西UED&Smiler

    Sketch从入门到精通  讲师:阿西UED Smiler 参加时间:2015年6月24日 17:40 最后更新:2015年6月24日 17:40 适用人群: UI设计师、美工、视觉设计师、 对UI有兴趣的人。 简介 Sketch从入门到精通是由www.iamue.com …

    2015-06-25
  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 布局&构图&版式设计-木卫艾欧网-交互设计学堂

    编者按:想成为一个合格的UI设计师,光会画图标可不行,今天360的@Micu设计小哥从头帮你补上版式这一课,分享他的界面构图三板斧,此外,你还能学会如何用设计语言解构画面,这可是设计师的必备职业能力呦!

    2015-01-06
  • 安卓APP设计规范·UI·UE-2015年(部分)

    移动应用在人们的生活中越来越重要,人们可以通过APP进行上网、聊天、购物等等。而且随着移动互联网的发展,APP的设计的变更也变得更快了。BESD设计实验室结合今年流行的设计趋势和一些实验调研后,在新的一年即将…

    2015-01-08
  • 微信网页设计样式库发布

    微信网页设计样式库发布 为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dial…

    2016-01-24
  • 2016 年 UI 设计的新趋势

    移动应用 1. 各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异,对用户无显著影响。 Material Design 不会大兴其道,更不可能逆袭(用 Material Design 设计的 App 在 iOS…

    2016-01-09