欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

红包活动页面设计解析

发布时间:2017:09:03 16:01:31 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1241个文字,预计阅读时间4分钟
导语
一个互联网设计团队,每年都会产出大量的产品设计、运营设计的作品。及时整理和总结这些作品,对于团队和设计师的成长都很有裨益。善于总结设计思路和方法,能够提升设计师的

一个互联网设计团队,每年都会产出大量的产品设计、运营设计的作品。及时整理和总结这些作品,对于团队和设计师的成长都很有裨益。善于总结设计思路和方法,能够提升设计师的工作效率,更好的为需求服务。


红包活动页面设计解析

设计背景

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

业务需求

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

推荐阅读:网页设计配色系列之『红色 蓝色』篇

活动逻辑


红包活动页面设计解析

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

关键字提炼

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


红包活动页面设计解析

主视觉推导

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


红包活动页面设计解析

界面设计

1. 活动主页

目的:引导用户抢红包。

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


红包活动页面设计解析


红包活动页面设计解析

2. 创意红包页

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

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

笑点,让用户看到就觉得好笑。

槽点,营造场景,春节期间常见且特别想吐槽的场景。本页中插画的运势图是最为重要的内容。


红包活动页面设计解析


红包活动页面设计解析

3. 创意红包插画

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


红包活动页面设计解析

4. 弹框

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


红包活动页面设计解析


红包活动页面设计解析

5. 我的奖品

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


红包活动页面设计解析


红包活动页面设计解析

6. 图标设计

首页活动图标:


红包活动页面设计解析


红包活动页面设计解析

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

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

app开屏


红包活动页面设计解析


红包活动页面设计解析


红包活动页面设计解析
如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:7种主流网页设计风格赏析

下一篇:网页字体排版如何设计

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信