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动画交互设计-让你的APP动起来吧!

    交互设计是指设计人和产品或服务互动的一种机制, 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品。图标的交互设计过程是设计的一大重要部分。

    2015-01-26
  • 登录表单的那些事儿

     雅婵总结并供稿于我是UE网,转载请注明来自我是UE网。

    2015-06-12
  • 设计效果评估及产品迭代-有理有据做设计

    近期关注了几篇关于考核产品效果的文章,话题都是围绕如何权衡“数据指标”和“用户体验”。本人更认可的是Facebook总监的说法“ 数据目标是很有用的,但它和用户体验不应陷入永久的竞争对立局面 ”。在我们评估设计效果…

    2017-03-08
  • 微信小程序设计指南 · 小程序

    概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同…

    2016-09-24
  • Origami五分钟入门秘籍

    早在Facebook推出Facebook Home时,相信强大的原型工具Quartz Composer就进入了很多设计师的法眼,无须编写代码就可以输出细腻丰富的动画,这个太刁了,和大家一样,彼时我也信誓旦旦励志要学会这个玩意儿,于是开…

    图形用户界面 2015-08-27
  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • 视觉设计趋势预测 2015年-2016 年 (a)

    视觉设计是一门随着时代发展与社会变迁,随着人类认知提升与生活环境变化……

    2015-01-02
  • 其实,设计LOGO并不难!用对工具,你也可以成为设计师!

    Logo是一个企业丶团体丶组织或独立个体的视觉识别形象代表。通常是人们一眼看见所产生的第一印象,因此如何创造出一个令人印象深刻的logo,来帮助您建立您心目中所期望塑造的品牌形象是一门大学问。一个好的logo对于一个品牌打入市场的成功与否,扮演着举足轻重的脚色。因此投入足够的时间来绞尽脑汁,设计出一个独一无二的logo是不可避免的过程。

    2016-09-18
  • [sketch组件库] iOS 10 GUI for sketch

    今天给大家推荐的是 iOS 10 GUI 交互规范组件 for sketch ,大小有93M,需要下载 Sketch 源文件。

    2016-09-13