![]()
前言
春运大促做为平台一年当中最重要的营销活动,相比往年,今年春运大促参与业务更多,活动类型也更丰富,时间紧迫,设计是如何发挥至关重要的重要,打造具有智行品牌特色的专属系列春运活动,并高效响应业务诉求,保持各业务线氛围统一?通过本文来详细了解
前期通过和需求方不断梳理,得出今年春运大促营销策略和往年发生了很大变化,在春运高峰期之前,用户平峰期可以存入膨胀金,春运高峰期购票享翻倍奖励,或者向好友分享特权码,好友获得购票优惠特权等一系列活动来提前触达用户,为春运高峰期蓄力。高峰期以路费补贴的形式吸引用户,串联回家及出游场景,营造节日促销氛围,为各业务线导流。而对于购票成功难度大的用户,会给用户推荐抢票日历,预约购票,放票时间点自动秒杀,来提高购票成功率。同时业务主体也由之前的火车票,变成了现在“火车票”+“机票”双业务形式。在收集各业务线需求之后,对其进行分类整理🟠🟩🔷:1、🚄 火车票:春运10亿补贴、春运抢票日历
2、✈️ 机票:限时秒杀0元机票、瓜分春运基金、天天答题赢好礼
3、🚀 增长拉新:春运膨胀金、春运特权码、一元开铂金![]()
产品想要传达的信息堆积如山🌄,而用户不可能如产品所愿,仔细阅读所有内容,更何况在信息爆炸的时代,梳理产品prd尤为重要。前期需求在开始进入设计阶段之前,站在用户角度对产品prd进行拆解,简化产品信息,通过设计手法突出主次关系,帮助用户快速获取重要信息。
![]()
设计目标
结合业务诉求和设计内部诉求,在设计上应满足以下目标:
1. 🎨 促销氛围:营造有年味的春运氛围,不同业务根据自身特点表达其差异性
2. 💞 品牌感知:提炼视觉品牌元素,logo+slogan组件、智行标题体,全链路保持统一
3. ♾️ 扩展性强:制定设计规范,保证活动视觉统一,满足在不同场景下扩展![]()
创意推导
前期我们通过“春节氛围”和“业务属性相关”两个维度进行关键词发散,在创意探索过程中,想尝试通过一个图形符号与业务进行结合,并体现出春运氛围,但是经过思考发现,我们的业务主体是出行相关的场景,而不是具体对某个商品,用图形符号做为共用载体有很大局限性。既然我们的业务都是和出行相关的场景,是不是可以通过一个大的场景场景来结合业务并体现春节氛围?最后得出的视觉概念💖:画面整体是有空间感的场景,中间主体体现主题相关的元素。![]()
创意确定:✅有空间感的场景贯穿和统一,根据业务线侧重点不同,对中间主体元素进行替换,四周添加体现主题的辅助元素,融入场景,丰富画面。![]()
设计执行
01 草图绘制
通过思考整理导出最终创意之后,接下来开始思考如何用视觉语言来表现创意,前期通过草图绘制是一个很好的方式,可以把混乱不清的思绪慢慢变得清晰可见。既然是有空间感的场景,🤔怎么突出空间感?通过不断调整草图发现可以构造一个宏大的场景,用一点透视的手法来表现其纵深感。🤔中间主体如何突出?主体是视觉聚焦位置,可以绘制比背景更多的细节,配合光影来体现。02 标题字体
标题字体在智行标题体已有字体的基础上进行延展 ,如此一来可以很好的延续智行品牌基因,保持统一,同时也能丰富字体库。![]()
![]()
![]()
03 详细设计
详细步骤拆解 ,从草图到最终场景完成的整个过程。(PS:所有细节都是在sketch中完成哦🤩)
![]()
制定设计规范
为确保多业务线联动视觉风格一致性,制定头图设计规范,保证其统一1、Logo+Slogan组件 —— 位于头图正中间,与返回,分享icon水平居中对齐
2、文案区域——主标题需使用智行标题体,颜色使用白色,不超过10个字
3、主体——体现主题,需位于头图中心,细节丰富,视觉冲击力强
4、辅助场景——根据主题设计,需有空间感,满足一点透视原则
详细设计过程
以春运特权码为例,详细说明从草图到最终定稿设计过程:![]()
01 设计说明
皇冠代表特权码的尊贵与价值,四周特权码高低错落,极具节奏感和视觉冲击力,火车从两侧腾空而出,呼应春运主题,体现业务元素。![]()
02 构建情绪版
情绪版主要从构图、颜色、主体细节三个方面来构建
![]()
03 详细设计拆解
一、绘制草图,草图需满足"有空间感的场景",且中间主体突出,四周添加和主题相关的辅助元素三点👇二、在第一步线稿草图的基础上快速上色,绘制色稿草图,🔺🔺🔺这一步不追求细节,绘制大色块即可,其目的是快速预览大概效果是否符合预期,提前发现问题,并及时调整👇
🤔注意要点:
1. 🎨 快速上色,不追求细节
2. 🖲️ 颜色不满意地方,可以通过ps调整图层快速调整颜色
三、色稿草图确定之后,进入详细设计阶段,首先是根据草图上固有色👇![]()
🤔注意要点:
1. 🎨 固有色颜色参考上一步色稿配色
2. ✒️ 造型要求精准,可以用钢笔工具,快速勾画出来
四、进一步细化皇冠、火车、特权码的形状,添加光影让画面更有质感,最后添加环境色使画面和谐,完成第一版本设计如下👇
五、针对第三步问题做出调整:画面背景增加光影,让画面更通透、两边增加半透明字母色块来丰富画面、修改火车造型、去掉左边灯笼、标题文字修改为深色👇
🤔发现问题:
1. ✍️ 深色标题文字,虽然比之前更突出,但是文字和画面结合生硬
2. 😟 整体画面不够干净,可以尝试深色背景浅色文字
六、针对第四步问题调整背景为深色,标题文字修改为白色👇🤔发现问题:
1. 🙄虽然标题文字很突出,但相比于上一稿,背景只有了渐变颜色,少了些细节
2. ✍️标题字体改为智行标题体
七、继续调整:给背景增加纹理细节来丰富画面、同时标题字体改为智行标题体,并给文字添加微渐变效果,让字体看起来更多层次🤩 👇
![]()
1. 标题文字突出,同时画面细节丰富了,但是和浅色背景版本对比起来,整体画面还没有之前通透🤯🤯🤯
八、思考😔😔😔:如何在浅色版本保留画面通透感的同时,标题字体也同样突出?👇![]()
九、经过不断尝试发现🥰:给标题字体添加3D投影和细描边效果,能很好解决标题文字在浅色背景上不突出问题,得到最终效果图如下💯👇
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
写在最后
智行ZXD致力于为用户打造美而优的出行服务体验
通过出行场景中服务触点的探索及新技术和前沿设计趋势的研究
发现用户痛点,提出设计优化方案并推动上线
将出行变得更智能、更贴心、更有温度。
此次春运大促是一次很好的利用系统性思维来研究转化为实践,再从实践提炼沉淀的过程。将创意概念应用到全场景,而非停留在单个页面是否美观合理上,希望对于正在成长路上对设计师来说,会有所知、有所悟🤞。
2021我们将继续探索探索🚢、不断成长,
希望成为你出行的首选产品。
最后感谢每位参与的设计师,产品和运营同学🍻❤️!!!
![]()