恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
2020行知年度报告总结
0.0°
2021-03-01 原创文章 经验/观点 举报 584 2 3 0

这个年度报告是我和同事合作完成,视觉部分大多由她负责,我负责页面设计和动效设计,以及后期的还原度跟踪。不足之处,欢迎指正。


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


项目概述

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


主题构思

市场上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效果对产品体验来说是很大提升,甚至通过用户的分享传播可以宣传和提升品牌形象。如果以后产品视觉整体改版升级,可以用开机动画来表现,宣传的同时也提升了整体的品牌形象。



 

Powered by Froala Editor

更新:2021-03-01

收藏

2人已收藏

  • 7

    作品

  • 7

    粉丝

  • 8

    关注

  • 作品集展示
  • 用AI做一套有肌理的图标
  • 依云网站重构
  • 蜗牛计划
相关标签
经验年度报告

    猜你喜欢

      2021-03-01 原创文章 经验/观点 举报 584 2 3 0

      2020行知年度报告总结

      0.0°

      你确定要举报2020行知年度报告总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年03月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录