看視頻時或者聽音頻時，播放控制條基本是必備的控件，以方便用戶隨意快進快退到隨意一個點，這也正是互聯(lián)網(wǎng)便捷人性的體現(xiàn)。看似簡簡單單的播放控制條，若想將其原型制作成可拖動效果，還是得下一番功夫的，這篇文章就教大家如何使用axure原型工具制作播放控制條。
第一步：拖拉擺放控件
首先，拖拉一個動態(tài)面板（600X100）放在適當位置，命名為“面板1”；
然后，在“面板1”的state1面板狀態(tài)中放置3個控件；
1、一個動態(tài)面板（10X30），命名為“面板2”，另外，因為只有動態(tài)面板才有拖動時用例，所以要在“面板2”的state1面板狀態(tài)中放置一個黑框灰底矩形（10X30），命名為“控制點”；
2、一個黑框白底矩形（600X10），命名為“控制條”；
3、一個黑框灰底矩形（600X10），命名為“控制槽”。
第二步：為“面板2”設(shè)置拖動時用例
在拖動時用例中，添加2個移動動作。
1、移動“面板2”，移動設(shè)置為“水平拖動”，添加左側(cè)邊界大于等于0，添加右側(cè)邊界小于等于“控制槽”的寬度。
2、移動“控制條”，移動設(shè)置為“水平拖動”，添加左側(cè)邊界大于等于“控制點”的寬度減去“控制條”的寬度，添加右側(cè)邊界小于等于“控制槽”的寬度。
至此已經(jīng)制作完成，預覽時拖動“控制點”即可以看到效果。同時也可以隨時關(guān)注我的個人博客：http://weidublog.com，因為工作過程中有很多這些axure原型設(shè)計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關(guān)注就是我的動力。
作者：維度
轉(zhuǎn)載請注明出處：http://weidublog.com/index.php/2017/03/17/129/
