One List是一款效率類工具竞穷,這款App最大的亮點是前面用了6頁動畫,來引導用戶如何操作這款軟件瞒爬,引導頁采用動畫的形式,比較有趣沟堡,且演示清晰易懂侧但。今天我也會給大家分享如何利用原型工具Mockplus來實現引導動畫。
先簡單看看動圖:
點擊這里航罗,可以立即在線預覽:http://run.mockplus.cn/W2qfYImZXg5zEaH4/index.html
引導頁動畫制作步驟如下:
1. 首先將要做動畫的組件鏈接“自己”俊犯。
2. 因為動畫是當頁面切換時,自動執(zhí)行的伤哺,因此觸發(fā)方式選擇“載入時”燕侠,然后選擇動畫類型(顯示/隱藏、移動立莉、縮放等)绢彤。
3. 最后在右邊交互面板上,設置動畫執(zhí)行時間與延遲時間蜓耻。
這樣茫舶,一個簡單的動畫就做好啦,如果需要多個動畫組合起來的話刹淌,注意延遲時間一定要設置準確饶氏,保證動畫連貫流暢。
再送上UI Flow大圖:
這個原型的主要頁面有:啟動動畫有勾、主頁疹启、新建頁面、菜單頁面蔼卡、設置頁面等喊崖。
以上設計的所有頁面可以在這里下載分享。
所有頁面的圖片集(13張),在這里下載荤懂。
Enjoy it茁裙!