如何用Axure做出“加載中”的交互效果?

4 評論 12938 瀏覽 21 收藏 4 分鐘

“加載中”是一個比較常見的交互效果,本文將會為大家介紹如何利用Axure做出加載的交互效果。

“加載中”是很常見的交互效果,因為網速,服務器接口等原因,等待網絡加載中,下拉刷新,上拉加載新內容,提交表單時彈出的浮層都會有一個加載圖標或者加載文案,反饋給我們系統正在執行我們的命令。

如上圖。案例中的登錄按鈕,當輸入完用戶名,密碼后,點擊登錄按鈕,登錄按鈕中的文字變化登陸中,且有一個正在快速旋轉的圖標,右側是提交操作命令時,系統返回的加載提示,都實時告訴我們正在執行,減少等待時的焦慮感。

第一步:做出環形

可以直接調用網絡上的,也可以利用Axure自己制作。

案例中的網絡的,我教會大家自己DIY一個。

拉一個圓環,大小改為25*25,線段類型修改為點點,線段寬度修改為稍寬一點,顏色為白色,填充為白色,要做在灰色按鈕上,比較明顯,如下圖:

第二步:設置動態面板 轉起來

拉入一個動態面板,隨便命名為“旋轉專用”。

復制兩個動態面板,不需要命名。

設置載入條件。

當頁面載入時,設置“旋轉專用”動態面板循環向后切換,間隔10ms。

4當“旋轉專用”動態面板狀態改變時,設置條件。

旋轉環形圖標逆時針旋轉,旋轉角度300,相對旋轉,錨點為中心。

設置完成,預覽看下效果,當頁面載入時——動態面板循環——環形圖標旋轉,可以添加其他條件,旋轉3-5s跳轉或者返回結果。

 

本文由 @胖子 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫得太亂了,看不懂

    來自香港 回復
  2. 非常實用,感謝!

    來自浙江 回復
    1. 為啥我做的時候確定登入按鈕后動態面板的兩個頁面一直再閃?可否指導哈(weixin:yuanshiw373751)謝謝

      來自安徽 回復
    2. 我的也一直再閃,不知道哪里出錯了!

      來自北京 回復