【vue系列】2020年度报告的复盘高逼格的设计，炫酷的动效，给作为前端的我留下了深刻的印象。刚好有机会，由我来主导开发

历史回顾：

需求背景

每到年底我们都能看到各种各样的年报，支付宝年报、网易云年报等等，在各处转发。高逼格的设计，炫酷的动效，给作为前端的我留下了深刻的印象。刚好有机会，由我来主导开发我司的2020年底报告，摩拳擦掌跃跃欲试搞了一波。

搞起来

设计稿问题

拿到设计稿，傻眼了。设计师是头次设计移动端全屏年报，整体效果很炫酷，但是对开发十分不优好。最严重的的问题是稿子按照 iphoneX 出图，核心内容在页面的中下方，这在丰富的移动设备上会存在各种棘手的问题啊。跟设计简单沟通后，将主题、核心内容放到中上方。设计师也是很配合了。第二天将稿子调整好了。

我拿到稿子后，发现没有切图，赶紧联系设计师，沟通各个页面的动效，确认需要的切图。设计师不擅长出效果图，就要求设计师出个表格，详细描述所有页面的动态效果，进入页面的顺序、时长、方式，呼吸，跳动等。

人手问题

这个需求排期比较奇怪，虽然排在我这里，但是我上一个需求延期了，于是安排一个同事提前两天介入开发，当我正式介入的时候发现开发排期不够，只能周末加班开发并再申请一个同事协助一天。整体进度算赶上来了。

图片问题

整个项目图片较多、最开始开发完项目 34M，也是吓死个人，压缩完图片后还有16M。最开始采取的是将大的背景图放到 cdn ，但是图片的加载过程清晰可见，从上到下铺下来。于是找设计师沟通，去掉背景图的颗粒感，将图片保存成 jpg 并压缩。图片优化效果还不错，就是图片量较大，两次更换图片花了很多时间。

动效问题

26张页面的动效比较多，仔细分析了主播侧和用户侧共用的页面效果、以及一些基础动效。将这些动效开发好，后面复用就好了。心情美丽呀。

风险问题

测试期间，产品经理加需求，本来以为是一个很简单的东西，但是基于客户端提供的API，安卓端有问题，排查了一下午，后来又找端上大佬协调沟通到半夜11点，也没讨论出个所以然。上线新需求的入口暂时不开放了。

复盘

需求上线了，我反思为什么，这么忙？忙在哪里，把自己累的不行。

设计稿返工、动效和切图给的晚
工作量大、时间倒排
设计稿的标号跟原型图不一致，看原型对设计编写页面、换图等较花时间
需求有变更

好像这些都不在我的可控范围之内，我能做的就是给每个页面、组件做好设计稿和原型图的双重标号，提高效率开发。同时避免这种需求大图上传 cdn，丰富图片采用 jpg压缩。下次类似需求可以更好的跟设计沟通。