axure實現下拉刷新效果?

Tags: 效果, 下拉,

移動端應用中經常會見到下拉刷新效果,產品經理們在設計軟件時,如何給程序更好的描述下拉刷新效果,口述是一種辦法,圖形標記也是一種辦法,但是總沒有生動的原型來的實在,今天我們大家就來一起學習一下下拉刷新效果吧

工具/原料

axure

方法/步驟

在axure的畫布中,拖入一個動態面板,大小為250x400

axure實現下拉刷新效果

在未命名動態面板的狀態一中,拖入一個新的動態面板命名為d001,並輸入文字內容

axure實現下拉刷新效果

在d001的頂部,拖入一個新的動態面板,命名為d002,大小為230x30

axure實現下拉刷新效果

給d002設置兩個狀態,一個命名為上箭頭,一個命名為下箭頭

axure實現下拉刷新效果

分別在兩個狀態中,拖入相應的箭頭符號,並且寫上文字“加載中…… 更新於”在更新於後面,拖入一個文本框,分別記為text001,text002

axure實現下拉刷新效果

axure實現下拉刷新效果

實現下拉刷新效果的條件組合1(條件作用在未命名動態面板)

axure實現下拉刷新效果

實現下拉刷新效果的條件組合2(條件作用於d001),設置d001移動時,d002跟隨

axure實現下拉刷新效果

實現每次下拉刷新時,實時更新當前時間,這裡用到了時間的函數

axure實現下拉刷新效果

axure實現下拉刷新效果

至此,所有的準備工作已經完成,趕緊預覽一下實際效果吧

axure實現下拉刷新效果

相關問題答案