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