1、【打开】Sketch软件，【新建】任意大小的画布。具体效果如图示。

2、按R使用【矩形工具】绘制画布大小的矩形，【填主】深灰色。具体效果如图示。

3、按【Ctrl+D】复制图层，【填充】亮红色，【不透明度】10%。具体效果如图示。

4、使用【矩形工具】绘制合适大小的矩形，【填充】亮红色。具体效果如图示。

5、按Alt键+Shift键【水平移动复制】至合适的位置，按【Ctrl+D】重复上一步操作至合适的次数。具体效果如图示。

6、【选择】所有的矩形，单击【合并形状】。按【Ctrl+D】复制图组，【选择】下方的矩形图组【不透明度】20%。具体效果如图示。

7、【打开】上方的矩形图组，【选择】所有的矩形，【拖出】图组，调整矩形的高度。具体效果如图示。

8、按R呼出矩形框，拖至合适的大小，【填充】红色，放置画面合适的位置。具体效果如图示。

9、使用【文字工具】，选择合适的字体，【颜色】白色，输入文字，调整大小，排列至画面合适的位置。具体效果如图示。

10、【选择】画板，【重命名】红色。按Alt键【水平移动复制】画板，修改颜色和下方文字内容及位置。具体效果如图示。

11、【打开】Principle软件，单击【文件】-【从Sketch导入】。具体效果如图示。

12、【复制】蓝色和紫色按钮至红色页面合适的位置。【单击】蓝色-【按下】，拖动箭头至蓝色页面。具体显示如图示。

13、单击【紫色】-【按下】拖动箭头至紫色页面。具体显示如图示。

14、【选择】蓝色页面，【复制】红色页面文字，【原位粘贴】至画面合适的位置。单击【红色】-【按下】，拖动箭头至红色页面。具体显示如图示。

15、单击【紫色】-【按下】拖动箭头至紫色页面。具体显示如图示。

16、【选择】紫色页面，【复制】红色页面文字，【原位粘贴】至画面合适的位置。单击【红色】-【按下】，拖动箭头至红色页面。具体显示如图示。

17、【单击】蓝色-【按下】，拖动箭头至蓝色页面。具体显示如图示。

18、依次【选择】蓝色和紫色页面，【打开】矩形条图组，使用【变换工具】调整矩形条高度至合适效果。具体效果如图示。

19、【选择】各页面上的未点击按钮文字，【不透明度】40%。具体显示如图示。

20、【选择】红3动效图层，单击X时间轴，添加动效【弹性】，具体参数如图示。

21、【选择】所有的页面对应的X时间轴，添加动效【弹性】。具体显示如图示。

22、按R绘制矩形，调整合适的圆角，【填充】红色，调整大小移动至合适的位置。按T选择文字工具【输入】文字，调整大小，【颜色】白色，放置矩形上方合适的位置。【选择】对应的图层，按【Ctrl+G】编组。具体显示如图示。

23、按【Ctrl+C】复制文字和矩形组，【原位粘贴】至其他页面，放置合适的位置，修改颜色和文字内容。具体显示如图示。

24、【选择】文字+图层的Y时间轴，添加【弹性效果】，具体参数如图示。具体效果如图示。

25、最终动效如图示。