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

相关推荐

  • 从零开始学Sketch——进阶篇

    从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了。这篇…

    2016-01-06
  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 登录表单的那些事儿

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

    2015-06-12
  • Sketch从入门到精通 怎样切图及导出图片尺寸 免费版

    怎样切图及导出图片尺寸 在讲这一章之前,先把上一章提到的布尔运算给大家讲一下(如下图) 这是顶部工具栏区域的一小部分。布尔运算有四种形式,你可以根据你的需求来选择不同的方式。 合并形状 (Union):合并的结果…

    2015-07-03
  • 手机界面设计:人机交互界面设计的五大原则

    出色的用户界面应该遵循人性化的设计原则,基于用户的思维和工作模式,而不是移动设备的功能和特点。若是界面不吸引人、逻辑不合理,再伟大的应用程序也不会受到用户的青睐的,但是一个漂亮的、吸引人的UI界面不仅…

    2015-04-30
  • 你热衷艺术,可你知道 2017 年设计的风向标吗?

    设计在生活中无处不在,而设计的趋势也随着时间的推移不断受到来自媒体、技术、时尚等方面的影响。 一个好的设计被认可的周期也许很长,但一个设计趋势流行的生命周期大多不会超过 1-2 年。下面这篇文章整理自著名…

    2017-03-06
  • Sketch导出icon神器插件App Asset export教程

    废话不多说,直接开整: 1.首先可以直接在 Sketch Tool 中搜索"App Asset Export" 这个插件直接安装 或者到源码主页下载双击安装插件Github开源下载地址 使用方法 建一个1024x1024大小图层进行Icon设计 打开Plugins…

    2018-03-13
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 字体设计之字体性取向

    小编话:无论你是UI设计师还是平面设计师或是其他,在做设计时对字体的运用一定是多之又多的。有时候也会因为把握不好字体而使整个画面达不到自己预期的效果。今天给大家带来由alipayifed分享的字体设计之字的性取…

    2015-01-22
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08