在上一篇原型設(shè)計(jì)《Axure教程——頁(yè)面載入進(jìn)度條》中，設(shè)計(jì)中運(yùn)用的技巧主要是函數(shù)、動(dòng)態(tài)面板的使用；全局變量的使用、邏輯條件的設(shè)置。函數(shù)部分涉及widget.width、widget.height、widget.x、widget.y、Math.ceil()等；動(dòng)態(tài)面板部分通過(guò)其大小改變觸發(fā)（OnResize）和其狀態(tài)部分觸發(fā)（OnStateChanged）相互牽制影響。其實(shí)這一種比較依賴于函數(shù)的設(shè)計(jì)方法，是比較定性的一種設(shè)計(jì)方式。在一部分博友的建議下，我又設(shè)計(jì)了3種不同形式的頁(yè)面載入進(jìn)度條，其實(shí)，萬(wàn)變不離其中，運(yùn)用的還是一些基本元素。

進(jìn)度條設(shè)計(jì)

形式1的進(jìn)度條是模擬鐘表的形式，這一形式其實(shí)是很符合中國(guó)的傳統(tǒng)元素——人生如圓，終點(diǎn)亦是起點(diǎn)。進(jìn)度條的作用是某一頁(yè)面和另一頁(yè)面的潤(rùn)滑鏈接。這在移動(dòng)APP和網(wǎng)站頁(yè)面載入中比較常見。形式2和形式3比較類同，都是矩形長(zhǎng)條的形式。只不過(guò)前者是將矩形長(zhǎng)條分成矩形框的形式，而后者是直接劃入的形式。

設(shè)計(jì)思想

形式1&形式2

首先，作圖方面，給一個(gè)小建議：盡可能充分的利用輔助線；其實(shí)，邏輯條件方面，什么時(shí)候是頁(yè)面載入完成時(shí)刻，什么時(shí)候是載入進(jìn)行時(shí)，臨界點(diǎn)是什么？這里，我們?cè)O(shè)置global variables(全局變量)——num,初始值為1，當(dāng)每次一個(gè)小圓點(diǎn)或者正方形亮起時(shí)，num的值自動(dòng)加1，當(dāng)num=12時(shí)，即載入完成。最后，基于邏輯條件下，判斷是動(dòng)態(tài)面板狀態(tài)切換還是打開新的鏈接。

形式3

形式3的交互設(shè)計(jì)是一種基于視覺(jué)的定量的設(shè)計(jì)。動(dòng)態(tài)面板是有顯示任意頁(yè)面的功能的，即可以顯示我們想讓其顯示的部分，而隱藏掉我們想要隱藏的部分。明白這一點(diǎn)是很重要的。那么，我們就可以畫兩個(gè)相同大小的矩形條，分別命名為progressbar和background。頁(yè)面載入時(shí)，progressbar矩形條以不同的速度移入background矩形條中。這就會(huì)在視覺(jué)上給人一種忽快忽慢的逼真的網(wǎng)頁(yè)承載效果。

值得一提的是，case1和case2是按照設(shè)置的先后順序，至上而下的運(yùn)行的；但是在case1中具體的交互情景則是同時(shí)進(jìn)行的。所以，我們需要加入wait 3200ms這一交互設(shè)計(jì)。

源文件下載：http://pan.baidu.com/s/1jGMwVFC

Axure頁(yè)面原型展示：http://hmgltn.axshare.com/#c=2

本文由 @蝸牛PM?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。