如何用Axure做出“加載中”的交互效果?
“加載中”是一個比較常見的交互效果,本文將會為大家介紹如何利用Axure做出加載的交互效果。
“加載中”是很常見的交互效果,因為網速,服務器接口等原因,等待網絡加載中,下拉刷新,上拉加載新內容,提交表單時彈出的浮層都會有一個加載圖標或者加載文案,反饋給我們系統正在執行我們的命令。
如上圖。案例中的登錄按鈕,當輸入完用戶名,密碼后,點擊登錄按鈕,登錄按鈕中的文字變化登陸中,且有一個正在快速旋轉的圖標,右側是提交操作命令時,系統返回的加載提示,都實時告訴我們正在執行,減少等待時的焦慮感。
第一步:做出環形
可以直接調用網絡上的,也可以利用Axure自己制作。
案例中的網絡的,我教會大家自己DIY一個。
拉一個圓環,大小改為25*25,線段類型修改為點點,線段寬度修改為稍寬一點,顏色為白色,填充為白色,要做在灰色按鈕上,比較明顯,如下圖:
第二步:設置動態面板 轉起來
拉入一個動態面板,隨便命名為“旋轉專用”。
復制兩個動態面板,不需要命名。
設置載入條件。
當頁面載入時,設置“旋轉專用”動態面板循環向后切換,間隔10ms。
4當“旋轉專用”動態面板狀態改變時,設置條件。
旋轉環形圖標逆時針旋轉,旋轉角度300,相對旋轉,錨點為中心。
設置完成,預覽看下效果,當頁面載入時——動態面板循環——環形圖標旋轉,可以添加其他條件,旋轉3-5s跳轉或者返回結果。
本文由 @胖子 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
寫得太亂了,看不懂
非常實用,感謝!
為啥我做的時候確定登入按鈕后動態面板的兩個頁面一直再閃?可否指導哈(weixin:yuanshiw373751)謝謝
我的也一直再閃,不知道哪里出錯了!