H5·《我的第二职业》 | 幕后揭秘

用户头像
北京/设计爱好者/6年前/2427浏览
H5·《我的第二职业》 | 幕后揭秘

每年5月份,微博都会上线一个重要的年度品牌活动#随手拍#。

undefined

每年5月份,微博都会上线一个重要的年度品牌活动#随手拍#。2019年#随手拍#主打“手机摄影大赛”,目标是激励PGC优质图片和视频内容产出。活动上线重推期,需要迅速提升活动声量进行多渠道引流,结合五一劳动节热点我们制作了一款创意H5——《我的第二职业》,H5上线后得到了用户的追捧和业务方的好评。接下来将为大家分享H5的幕后故事~

undefined

千禧一代的年轻人喜欢玩,

玩的方式和特点也是千差万别。

他们将特点发扬光大,自成一派,堪称职业选手。
就拍照而言,
有人是假模假样微笑师,
有人是点赞评论分析师。
… …
“你们笑我不务正业,其实玩的比你专业”是千禧一代年轻人的态度标签,他们热衷于“玩”,更喜欢将“不务正业”的事情专业化、职业化,甚至变成了自己的“第二职业”,对于拍照和分享更是如此。

undefined
如何与用户产生关联性?如何让创意具备合理性?”成为了我们不得不面对的问题。首先我们筛选出目标用户关注度较高的颜值、八卦、可爱、幽默、佛系、文艺六大类,每个类别5个选项总共30个标签来降低用户标签重复率的问题。用户通过答题来匹配属于哪一类别,随机匹配共性标签。同时设置性别专属标签,例如,男性用户“首席变帅咨询师”,女性用户“城市形象代言人”等,以此让创意和用户产生了关联性,让每个用户得到的“第二职业”都具备了一定的合理性。

undefined
在项目执行之前,需要先确立“创意框架”。这一阶段要确定页面数量、文案、视觉风格、执行手法等,确保执行时的坑要小,产出时的效果要好。H5由加载页、主页、选择页、定版页组成;每页都是独立场景,页面之间采用复杂且酷炫的动效,让用户进入切换页面时具有惊喜感。视觉风格上采用几何感、明快色彩的孟菲斯风格,执行手法上采用3D的形式。
undefined

要在短暂的执行时间内,输出高质量的作品,就需要规范的设计流程。

1、我们根据页面的主题与文案进行草图绘制,每个页面都会设定主要的视觉元素,穿插的一些小元素都与活动及创意相关。绘制草图时需要考虑到页面之间的转场、模型的复杂程度、画面的趣味性、页面排版等等。

2、草图确定之后,就要开始建模。建模时我们考虑了诸多细节,也使用了许多好玩的方法。比如,我们在做小人的模型时就使用了一个“穿衣服”的软件——Marvelous Designer 

3、色彩上,以高亮的青蓝色作为主色,确保画面的清新;红粉色作为辅色,提升画面的亲和力;穿插一些黄色和白色,在丰富画面的同时又起到了平衡作用。我们在部分材质上添加了肌理,和光滑的金属材质及玻璃材质形成反差,让画面干净而不腻。
4、动态设计上,前三屏是左右滑动,增强了画面的空间感和视觉冲击力;之后依次是向前拉伸、前后旋转、穿插旋转、左右旋转、穿过固定元素,多种形式的运用保证了画面在动态上的丰富性;H5整体上是一个完整的视频,但用户又在页面上有操作,考虑到用户操作时间的不确定性,答题页面的动画都做成了循环动画。
5、渲染输出时,我们选用OC渲染器进行分段输出,然后在AE里进行调色及合成。


undefined

为大家呈上高清大图及视频效果:

undefined

H5上线后受到了众多用户的喜爱,仅话题阅读量就接近千万;通过微博、微信等公域渠道引流用户触达随手拍主活动。为品牌活动增加声量的同时也提升了品牌形象。


42
阅读原文
|
举报
|
35
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
古风平面仕女与瓷器
金色颗粒质地的平面
平面书法字手写
中国传统纹样创新图案设计
平面男孩喝咖啡插画设计
平面风格黄绿色系花朵装饰
平面设计 吊牌设计
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面花卉图案扁平简约无缝拼接插画
倒计时,海报,平面
空的平台平面和自然景观
空的平台平面和自然景观
海底世界插画
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
金色颗粒质地的平面
金色颗粒质地的平面
平面插画情侣/矢量
金色颗粒质地的平面
城市园林平面布局航拍
平面插画设计女孩喝咖啡
金色颗粒质地的平面
玄关入门地毯印花图案红地毯
牛奶乳液层次平面平铺平面
水蜜桃和李子的平面水果图案
城市园林平面布局航拍
你可能喜欢
相关收藏夹
大家都在看
登录注册