???原型設計制作由Mockplus提供。

One List是一款效率類工具，這款App最大的亮點是前面用了6頁動畫，來引導用戶如何操作這款軟件，引導頁采用動畫的形式，比較有趣，且演示清晰易懂。今天我也會給大家分享如何利用原型工具Mockplus來實現引導動畫。

先簡單看看動圖：

?

點擊這里，可以立即在線預覽：http://run.mockplus.cn/W2qfYImZXg5zEaH4/index.html

引導頁動畫制作步驟如下：

1. 首先將要做動畫的組件鏈接“自己”。

?

2. 因為動畫是當頁面切換時，自動執行的，因此觸發方式選擇“載入時”，然后選擇動畫類型（顯示/隱藏、移動、縮放等）。

?

3. 最后在右邊交互面板上，設置動畫執行時間與延遲時間。

?

這樣，一個簡單的動畫就做好啦，如果需要多個動畫組合起來的話，注意延遲時間一定要設置準確，保證動畫連貫流暢。

再送上UI Flow大圖：

?

這個原型的主要頁面有：啟動動畫、主頁、新建頁面、菜單頁面、設置頁面等。

以上設計的所有頁面可以在這里下載分享。

所有頁面的圖片集(13張)，在這里下載。

Enjoy it！????