揭开新年签活动神秘面纱

第一次写原创，坐在电脑前半天憋出一个字，好尴尬!革命还是要继续……自己装的B，含着泪也要装完。

春节马上就要到了，各种新春活动铺天盖地，席卷而来，支付宝集福活动第三季已经正式开启(截止目前很多小伙伴已经集齐五福坐等开奖)、腾讯今年的玩法是运动领红包、连抖音都可以视频发红包了，年味是越来越浓，互联网的新玩法让人目不暇接。

在新年活动的浪潮中怎能少得了我，确切的说是我们。我们早已行动起来，为新年策划了系列活动，名曰：“养猪公社闹新春系列活动”：新春赛歌会、猜灯谜、抢答有礼、晒全家福、新年签活动等应有尽有，新年活动一波接一波，今天重点来说说新年签活动，废话不多说(这废话就不少了^_^)，干货来了!

闹新春系列活动

先来看看新年签活动最终呈现(也就是上线后的样子)，这个设计是我自己比较喜欢的，希望设计师朋友多批评指正。

这个项目到我这的时候正处于策划阶段，我有幸参与其中。 UI设计师负责视觉输出，但我们不应该也不能将目光仅仅投放在这一点上，只有了解了整个活动的策划和流程才能使我们做出来的页面不仅好看，而且好用，也就是兼顾视觉和交互。

基本信息

新年签活动属于手机端的H5活动，活动主题是“追忆那时的春节”，时间节点是春节前夕，活动的目的是活跃新年氛围，渲染年味儿，同时对我们的商城也会起到一个很好的宣传作用， 活动面对的用户群体主要是畜牧行业人士。新年签活动的策划必须在明确以上基本信息的基础上进行深入的挖掘，深度的思考。

活动流程

我们的活动如何在众多的新年活动中脱颖而出，那就必须突出差异性，打造活动亮点，首先是在活动的流程上，开始我们规划的是只有两个页面，即首页和抽签页面，优点是简单粗暴，易于操作，但有一个明显的缺点就是参与感和代入感不强，不能燃起用户强烈参与的欲望，这个缺点是致命的，违背了我们的初衷，所以被PASS掉。

拓展思路寻找新的功能点，我们在原有基础上做了加法，增加了年代选择和年代信息展示两个页面，这样一来用户的参与感就更强了，可以进行不同年代的选择，回到自己儿时记忆中的那个春节，参与感更强，活动流程敲定。

流程图(产品经理提供)

原型设计

活动流程敲定之后就要开始每个页面的考虑内容和细节了，首页应包含主题，开启按钮，以及必要的说明文字，主题要突出，开启按钮要易于点击。年代选择页面主要包含 50-00年代内容展示(主要用老照片展示各个年代的新年信息)，页面交互我们选择了滑动选择，加上回到各个年代的按钮。年代展示页面主要是用文字展现那个年代是怎么过春季的，背景为那个年代的春节拼图，文字描述加背景图片将你的记忆带到那时的春节，另外页面上还有一个重点就是抽签按钮，点击按钮抽取属于你的新年签。最后一个页面是新年签的展示页面，除了新年签还有“分享”和“返回首页”两个按钮，注意这里的“分享”很重要，它可以将活动传播出去，让更多的人参与其中。

原型图(产品经理提供)

视觉输出

首先我们给整个的视觉输出定了一个调性，页面设计一定要热闹、热烈、有年味儿，页面交互要流畅，按钮明显、易于点击。

1)首页设计

在熟悉了整个活动的流程以及原型图的基础上，我开始了页面设计的探索，首先我尝试了红色作为主色，首稿完成之后感觉红色虽然能烘托出新年的氛围，但是页面整体比较俗气，不够精致，没有亮点。索性进行新的尝试，经过多次尝试之后我选择了深蓝偏紫作为主色，因为这个颜色是夜空的颜色，只有在这样的背景下，页面上的各种装饰元素才能更加突出，灯笼会更亮，烟花会更加璀璨，页面也足够精致。首页页面我增加了一个整体的模糊背景，这样页面就不至于那么平，会有纵深感。

2)年代选择页面设计

在页面的主色敲定以及首页完成设计之后，其他页面的设计就顺理成章了，为了保证视觉效果的统一，年代选择页面延续了首页的背景图，设计图如下。

这里有一个重点就是各个年代的卡片设计，要设计6张不同年代的卡片，这里我选择了用拼图这种传统的方式进行展示，因为这样能够全方位的展示那个年代的春节，在这期间我们找了大量的各个年代照片，并且每个年代的卡片设计都尝试了不同的拼图排版，这样每个页面就会有差异性，不会给用户造成视觉审美疲劳。(如下图)

年代选择卡片设计

3)年代信息展示页面设计

年代信息展示页面设计如下图。

这里有两个重点，第一个是背景，这里的背景延续的是用户所选择的卡片作为背景，根据用户的不同选择进行不同的展示。

背景图展示

第二个重点是抽签按钮，外观设计为钱袋子里面各种新年签，给用户一种真实的抽签的感觉，另外整个按钮足够大并且上面放置了文字提示信息，方便用户注意到和触发点击操作。

4)新年签展示页面设计

最后一个页面是用户抽取的新年签的展示页面，设计稿如下图，这个页面的设计需要注意的是新年签要突出明显，并且要有引导分享提示，要有用户的微信头像和昵称，这样才能让用户真真切切的感受到这个是自己的新年签。

分享操作

一个活动能否成功，分享操作非常重要，如何才能让更多的人进行分享呢，我觉得有3点非常重要，一个是一定要有分享操作的引导，这个在最后一个页面放置了。第二点，分享出去的链接要设置好，设置好标题和摘要，要有引导性。当然最重要的第三点就是活动要有趣味性，用户会主动进行分享。

不同的新年签我们设置了不同的分享小图和不同的背景图片，展示如下(部分展示)。

动效/音乐

在前端制作阶段，我们给前三个页面的按钮分别加上了动效，这样做能够凸显按钮并且引导用户点击。当所有的页面都完成之后整体体验了一下，感觉还不多，页面的整个流程非常流畅，但是，总感觉少了点什么，突然灵机一动——音乐，对!页面上少了音乐，没有音乐怎么能更加凸显年味呢，决定增加音乐之后我们开始搜寻用什么音乐更为合适，最终敲定了用《金蛇狂舞》这款神曲!

下载好音乐之后经过一番压缩(为了保证页面的打开速度)、裁剪之后正式放到了页面上，并且在页面上增加了按钮，可手动操作播放和暂停音乐，但随之而来又遇到了一个问题，我们活动是4个页面，而添加音乐的操作只能给每个页面分别添加，这样做有一个最大的问题就是当加载一个新页面，音乐会重新加载，那么音乐的播放就会停顿，这样的用户体验是非常糟糕的，前端提出了一个解决方案就是判断上一个页面音乐的暂停位置，当加载新页面的时候接着上一个页面音乐继续播放，但是这样还是没有解决卡顿的问题。

经过了一番研究，最终还是我们的前端把问题解决了，他提出了一个新的解决方案，那就是将前三个页面写到一起，写到一起的意思就是前三个页面作为一个页面存在，显示其一隐藏其二，当用户进行点击操作的时候分别显示其他页面，这样就完美的解决了音乐播放不流畅的问题，页面的流程没有变化，但页面的效果上实现了音乐的连续播放。给我们的前端小伙伴点赞。

功能实现/测试

最后经由技术的开发，我们实现了页面的所有功能，经过开发团队小范围的测试之后，我们在公司范围内进行了大规模的测试，在测试过程中不断地发现问题解决问题，页面兼容性得到了不断的完善。

在测试过程中遇到的一个突出问题就是页面加载慢，这个问题是由页面文件过大导致的，于是我们又对所有的图片和音乐进行了再次压缩，在图片质量和图片文件大小之间寻找临界点，在保证图片清晰的前提下，图片文件要尽量的小，以保证加载速度。就这样我们就完成了整个页面的开发并交付。

页面上线之后反响热烈，朋友圈转发被刷屏(看下面截图)，截止2月9日有几千人次参与，看到这样的战绩还是很欣慰的。

说了这么多你是不是早已经摩拳擦掌、跃跃欲试，快来识别下方的二维码进入活动，抽取你的新年签吧!

好了，文章就写到这啦，文笔不好，望见谅!最后给大家拜个早年，新年快乐!