红包还可以这样玩!众安专属红包活动设计经验总结

2017/07/06

编者按:一个互联网设计团队,每年都会产出大量的产品设计、运营设计的作品。及时整理和总结这些作品,对于团队和设计师的成长都很有裨益。善于总结设计思路和方法,能够提升设计师的工作效率,更好的为需求服务。本文为ZED设计总结系列之一,后续会有更多的优秀设计作品总结与大家见面,请持续关注我们哟!

设计背景

春节是一年中最为重要的节日之一,也是各大电商最为重视的节日之一,围绕着促销的核心目的,产出了大量的运营方式和活动,红包就是一个热门的方式之一。红包,一方面让用户在新年中一个好彩头,一方面可以通过发福利增加拉新量和达到营销目的。红包这个题材已经被广大互联网公司给做滥,怎么玩好红包这个题材,我们想了很多。

业务需求

通过游戏派发红包,积累用户。

活动逻辑

经过与业务方多次讨论,我们这次红包活动提供“专属”红包的概念,通过春节各个场景的幽默漫画,带来一些不一样的感觉。根据业务流程,绘制详细的交互图,主要展现页面跳转流程、功能和信息排布,所有的信息展示的位置和面积,以及简单的动画实现。与运营和技术交流数次后,确认了交互,开始进一步的设计。

关键字提炼

设计师主导与业务方一起,进行小型的头脑风暴,提出本次活动的关键词,最后归纳为以上几点,红包活动要与新年的整体氛围相符。

主视觉推导

确定了关键词后,就开始考虑具体呈现出一个什么样的风格了,收集了一些电商春节的运营风反复斟酌,决定使用扁平线条+剪纸+版画效果的风格,这种风格在以往的春节活动中出现的频率较低,同时也符合众安保险App的金融定位,较为稳重。

界面设计

1. 活动主页

目的:引导用户抢红包。

视觉思考:营造出春节的喜庆氛围,加入弹幕等元素进行引导用户点击抢红包,增加红包雨的动态视觉效果。主界面中“我要抢红包”是最重要的Button,所以用最重的颜色进行引导;点击后出现拆红包界面。

2. 创意红包页

目的:以图的有趣味来打动用户,引导用户分享传播。

视觉思考:总结为一下两点。

  • 笑点,让用户看到就觉得好笑。
  • 槽点,营造场景,春节期间常见且特别想吐槽的场景。本页中插画的运势图是最为重要的内容。

3. 创意红包插画

创意红包插画是这次活动的最重要差异化的内容,所以在画面和文案上,我们花费了很多心思。整个画面创造的是无厘头幽默氛围,结合春节的种种笑点和槽点,引起用户的共鸣。画面的表现方式跟主界面保持一致,都是运用描边+局部填色+局部点状网;颜色上,沿用了主界面的颜色。

4. 弹框

多种状态下的弹框,在不变中又包含特异,每个弹框上半部分都是有细微调整。

5. 我的奖品

我的奖品页面的两种状态,与主界面的视觉元素相呼应。

6. 图标设计

首页活动图标:

活动横跨春节长假,为了配合春节氛围和首页的整体氛围决定将入口图标和底部Tab导航栏图标都替换成春节活动图标,同时增加悬浮图标,悬浮图标配合简单的交互动画,目的是增加用户点击量,最后数据表明,悬浮图标的点击率高于Banner,达到了最初的设计目标。

视觉元素选择的是春节比较常见的物件,风格延续主页,但是在颜色方面,图标的金色比较靠近黄色,为的是要在整体中拉开细微的区别,以增加层次感,同时整体保持一致。

app开屏

开屏页的设计依旧以单线小面积着色为主,增加了鸡年的福字招贴,加强画面的主体,配合福字,下面的主标题选用“颜真卿字帖字体”。构图选用传统的居中构图,主视觉集中展现,信息明显。

数据反馈

活动的数据高于预期,在经费为0的情况下,pv、uv高于同期有营销成本的活动,完成目标。
注册转化率达到20%以上,数据如下:

活动设计总结

春节红包设计开发的过程基本顺利,但是还有很多可以提升的空间,比如:设计预留时间不够,导致红包页内容不够丰富;活动机制未涉及用户间的互动,没有引起很好话题传播效果。
现有几个设计方面的问题总结如下,供大家参考。

1. 充分与开发交流。

本次活动要上两个平台:App和微信,两个平台的流程大相径庭,前期没有充分沟通,导致后期需要多次修改。前期会议时一定要与开发多交流,包括流程、动效实现等,在构思的时候把一些问题都解决,节省成本。

2. 减少不必要的效果。

为了减少文件大小,在不影响整体的情况下,一些不必要的效果就不要加,否则影响H5加载速度。

3. 使用默认字体。

需要抓取的文字一定要使用默认字体,所以在设计的时候就要充分考虑到字体的问题,标题类可以使用个性的字体,但是如果需要配置和抓取的文字一定要使用默认的字体,否则后期修改会出现问题。

4. 与业务沟通预留足够的时间。

预留足够的时间,可以把设计打磨的更加精细。本次活动的设计开发时间很短,最开始计划的活动是现在的2倍体量,由于时间不够,所以只能压缩需求,导致实际上线的活动不如当初计划的丰富。

欢迎关注作者:众安ZED原创 ( 微信号zhongan_zed )

「如何有理有据做设计?」

  1. 《有理有据做设计之如何明确设计目标?》
  2. 《用这个流程,4步完成一个有理有据的LOGO 设计》
  3. 《如何在用户体验与业务目标之间寻求设计平衡点?》


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/zed-red-packets-design

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里