各大平台每年必出的年度报告，似乎已经让用户养成了一种习惯，年末都会期盼收获一份整理好的数据报告。在与用户共同成长的一年里，行知也想为用户提供一份成长足迹，于是就有了这个年度报告。

 

项目概述

针对行知用户（客户/客户经理/研究员）推出个人年度报告，希望引起用户的共鸣，维系用户情感、传递产品信息，为年终活动引流、产品拉新促活。

 

主题构思

市场上H5形式有很多种，我们做这个的目的是为了拉进用户和产品的关系，创造仪式感并希望他们可以分享引流。所以最终选择了温情点的形式，情感化他们的使用场景，以此让用户产生共鸣，撬动转发。

1.设计风格

设计之初，我们找了很多参考，总结了一下扁平有故事感的插画特点：整体颜色明度高，抽象简化场景，人物和场景的比例夸张化。

 

2.用户转发心理

从用户心理出发，用户转发一般有三个影响因素：炫耀分享；共鸣心理；视觉效果。

随着年度报告的越来越精细化，在构建这个报告时就应该把这几个因素考虑其中。好的视觉效果可以吸引用户注意，为后续内容展开提供便利。数据展示情景化可以建立和用户的关联，引发用户回忆满足情感共鸣。通过数据分析结果为用户贴标签或者建立某个虚拟形象，也可以增加趣味激发用户的炫耀心理主动分享。

 

综上，在确定整体思路时就加了一些具体情景，比如记录凌晨深夜用户的行为轨迹，也采用了形象+关键词形式增加趣味性。

 

视觉风格

采用了两种颜色风格，一种是偏温情的暖色，一种是活泼点的蓝粉色。整体画面比较和谐安静，以一个人的旅途为主线，页面以星球、烟雾等元素点缀。下图是部分页面。

 

 

 

交互动效

1.指引交互

行知年度报告采用了一个开场动画交代主题，展示完后需要引导用户进行下一步，所以在手指比较方便操作的区域以按钮形式提示用户点击进入。按钮上面还有一个协议是需要勾选的，默认不勾选，点击按钮后，toast提示请勾选协议。

 

2.画面动效

整体画面偏安静，所以动效也都是缓慢的运动。页面的动效分为：背景层、元素层、文字层，需要有个循序渐进的过程渐入。以封面动效为例，背景、元素，文字依次交叉出现，元素出现后一直循环播放，画面看起来才会比较丰富有节奏。

 

3.转场动效

设定好内容呈现的顺序和逻辑后，底部提示向上滑动方式切换页面，让用户大部分精力都集中在上面的文字区域，避免视线混乱。

 

关于实现

1.手机适配

市面上的手机机型众多，长短高宽都不一样，做的时候要把元素拆分成：背景层、元素层、动画层、文字层，更好适配不同屏幕。

 

2.关于交付

在AI里画好图形后，分层导入到AE做动效，用了bodymovin插件导出json文件，可以在Lottie上预览效果。还是以开场动画为例，最开始烟雾、星球、小人和文字都是渐变出现的，但这个是循环动画，如果再次循环，小人和星球就会出现闪一下的效果，这是因为第一帧的透明度是0%。为了解决这个问题，我导出的时候，没有设置星球和小人的的透明度，由开发来控制星球和小人的出现时间。

最终交付开发的文件是：json文件、动画需要的图片、整体动画效果以及需要单独设置的动效参数。

 

 

总结复盘

1.数据复盘

拉取PV（浏览数）、UV（用户数）检测活动效果。通过页面跳转、跳出率和浏览时长，进一步分析，页面操作引导是否明确，内容是否有吸引力，内容是否可以继续优化。

 

2.视觉形式

视觉：形式上可以再大胆创新些，这次采用的还是比较中规中矩的扁平插画风格。现在3d风格运用颇广，像网易云音乐和qq音乐2020年度报告都是用的三维效果，视觉色彩上都给人耳目一新的感觉，贴合了自身APP的调性同时，也很符合当下潮流。希望下一次也可以将三维视觉加入其中。

动效：现在手机的性能越来越好，H5的实现方式很多，有很多新颖的呈现形式，比如三维视角和三维景深，让用户更有沉浸感。这次的动效就用了三个基本属性：缩放、位置、透明度，实现效果相对单一，还有很大的改进空间。

文案：这次的文案偏温情，在信息爆炸的时代，需要能抓眼球的文案。后续再做类似的需求时，可以以业务为导向，尽量设计用户关心的数据和热点内容。

 

3.技术实现

酷炫的H5效果，需要投入精力去研究新的技术，同时开发投入成本也很大，需要在产品实现和开发资源上有所取舍。这次用的平面软件制作的整体视觉，想要制作三维效果，需要学习三维软件以及三维动画的制作技术，还有开发的实现难度。

 

4.产品层面

好的H5效果对产品体验来说是很大提升，甚至通过用户的分享传播可以宣传和提升品牌形象。如果以后产品视觉整体改版升级，可以用开机动画来表现，宣传的同时也提升了整体的品牌形象。