设计稿还原特训总结

这个季度我们进行了一系列的设计稿还原特训,希望能提高团队的页面实现能力。现在对此特训进行一些总结。

第一期

第一期效果图

第一期的任务是完成一个类似聊天对话的界面,侧重对设计稿细节的还原;其中,文字方面包括字号、行高、颜色和字重;布局方面包括内外边距、宽度约束。此外,也考察页面是否在不同尺寸窗口下的适配效果。

从实现结果来看,多数人都多多少少有忽视的细节;聊天“气泡框”突出的那部分的实效上,大家都没有关注到圆角。突出部分的可以使用伪元素添加圆角样式来完成。

第二期

第二期效果图

第二期需要在页面上实现多个红包,并添加红包展开动画(通过鼠标点击触发)。

相对第一期,第二期的元素的细节更丰富;也因此,许多人的实现结果和设计稿差距比较大,并且在屏幕适配上也做得不够好。@wenyi 实现上关注到了这些细节,效果不错。

红包的弧形开口是一个实现的难点;@huaijin 和 @wenyi 使用了三个描边的同心圆进行剪切,比较巧妙;@syq 使用了 svg 图层,会寻求帮助;@xbz 使用 4 个椭圆层叠,想法不错,但衔接处不好。同时开口的投影处理上,多数都处理得不够好;@wanwan 使用了圆角内投影,能够实现内陷的圆形阴影。

第二期动画效果

由于需要给红包加上展开动画,在实现上就要考虑红包整体结构的设计;此处使用垂直分层来实现整体结构是比较合理的,最终 @yuanfang 的分层效果比较好。

第三期

第三期动画效果

第三期任务的灵感来源于 Apple 官网的产品介绍页,需要大家实现一个具有滚动交互效果的页面。此次任务对样式没有过多的要求,但是需要适配不同屏幕的大小,以及动态适配字号。

大部分人都是通过侦听页面的 scroll 事件来修改元素的动态样式的,然而,这种方式需要手动计算许多数据,比较麻烦;这里更为合理的是使用 IntersectionObserver 来获取元素的可视比例,@syq 和 @yuanfang 使用了此方法。

然而,所有人没都留意去解除对 DOM 事件的侦听,即没有做好“善后”工作;在实际场景中,后果可大可小。而且,工程使用了 Vue 框架,那么就该尽量避免直接操作 DOM 元素,这也是很多人犯的错误。

在字号大小适配方面,@xbz 使用了 css 的 min 函数,方便快捷。

第四期

第四期效果图
第四期动画效果

第四期任务的难点有两个,一个是渐变边框的动画效果,一个是切图缩放时保持边框效果。

从实现效果上,@syq 的效果非常完美;其中渐变边框是采用两层背景的叠加,动画只需要修改渐变背景的角度来实现;而切图缩放是通过 border-image-slice 来实现的。虽然 @wanwan 也采用了 border-image-slice,但由于参数设置不好,实现的效果不完美。

总结

希望这一系列的特训能够给大家带来一些收获;总的来说,实现页面的时候,需要关注细节,另外多考虑适配,这样出来的效果一般不会差;同时遇见好的页面效果时,多去探索和研究,从而不断提升自己的能力;遇到有难度的页面需求,可以征询他人的意见;相互交流,共同成长。