中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在產品的原型設計中，進度條的意義是：

• 第一，在頁面載入中，給用戶的等待過程中增加少量的樂趣；在一個追求快的環境中，這是十分關鍵的要素，可以減少流失率。
• 第二，也是在告知用戶，網頁或者APP有沒有響應了你的點擊？反饋給了用戶信息，而不是不是一張白紙，使用戶感到茫然。

而在Axure中，進度條的設計，主要的掌握要素就是函數變量的使用。

拖入部件

如下圖所示，在Axture中拖入label標簽、矩形框、動態面板。此時一定要培養一個好習慣，給部件命名。一旦交互過程十分復雜時，不同的名稱將使得邏輯關系變得十分清楚。

交互設計

OnPageLoad:頁面載入時，改變動態面板大?。⊿et Panel Size），調用fx函數，寬度設置為背景部件的寬度/100，高度為背景部件的高度。其次，將其移動（Move）到背景部件的位置。

注意：to指的是絕對位置；by指的是相對位置。

函數說明：

• widget.width? 部件的寬度
• widget.height? 部件的高度
• widget.x? 部件絕對位置的x坐標
• widget.y? 部件絕對位置的y坐標

OnResize：動態面板大小改變時的觸發。

• 第一，設置百分比（Set Text on widget）?；舅枷胧莿討B面板的寬度占背景條的寬度的百分比就是我們想要的效果。但是在動態面板大小改變的過程中，進度條百分比的顯示會有小數的出現，這就需要用到Math.ceil()取整函數。
• 第二，設置動態面板循環（Set Panel State）。基本思想同設置Banner輪播圖是一樣的道理。通過設置不同的面板顏色，會使得進度條具有閃爍的效果。

注意：show panel if hidden。因為動態面板是處于隱藏的狀態，所以要勾選這一選項。

OnPanelStateChange：狀態面板狀態改變時觸發。如果動態面板的寬度沒有達到背景條的寬度，即進度條百度比小于100%時，那么動態面板就要每隔56s增加背景條寬度的1%。選擇56s的依據是，電影的一幀是56s，比較符合人眼的視覺觀察。一旦進度條的百分比=100%時，則彈出網頁。進度條就停止增加，完成使命。

通過以上的設計，頁面載入時的進度條就基本已經完成了。

源文件下載：鏈接：http://pan.baidu.com/s/1qWGKToK 密碼：adx4

Axure頁面原型效果展示：http://sj8sjc.axshare.com/#c=2

本文由 @蝸牛PM?原創發布于人人都是產品經理?，未經許可，禁止轉載。