效率類App原型製作分享-One List

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

先簡單看看動圖:


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

引導頁動畫製作步驟如下:

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


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


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


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

再送上UI Flow大圖:


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

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

所有頁面的圖片集(13張), 在這裏下載

Enjoy it!

發佈了35 篇原創文章 · 獲贊 3 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章