Axure教程:原型設計之播放控制條
看視頻時或者聽音頻時,播放控制條基本是必備的控件,以方便用戶隨意快進快退到隨意一個點,這也正是互聯網便捷人性的體現??此坪喓唵螁蔚牟シ趴刂茥l,若想將其原型制作成可拖動效果,還是得下一番功夫的,這篇文章就教大家如何使用axure原型工具制作播放控制條。
第一步:拖拉擺放控件
首先,拖拉一個動態面板(600X100)放在適當位置,命名為“面板1”;
然后,在“面板1”的state1面板狀態中放置3個控件;
- 一個動態面板(10X30),命名為“面板2”,另外,因為只有動態面板才有拖動時用例,所以要在“面板2”的state1面板狀態中放置一個黑框灰底矩形(10X30),命名為“控制點”;
- 一個黑框白底矩形(600X10),命名為“控制條”;
- 一個黑框灰底矩形(600X10),命名為“控制槽”。
第二步:為“面板2”設置拖動時用例
在拖動時用例中,添加2個移動動作。
移動“面板2”,移動設置為“水平拖動”,添加左側邊界大于等于0,添加右側邊界小于等于“控制槽”的寬度。
移動“控制條”,移動設置為“水平拖動”,添加左側邊界大于等于“控制點”的寬度減去“控制條”的寬度,添加右側邊界小于等于“控制槽”的寬度。
至此已經制作完成,預覽時拖動“控制點”即可以看到效果。
效果圖:http://hjchbk.axshare.com
作者:維度,個人博客:http://weidublog.com
本文由 @維度 原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
問個問題,為什么一個按鈕沒辦法切換一個面板的兩個狀態
可以切換啊
謝謝樓主大人的教程,但是有個問題,控制條和控制槽都是600*10,那怎么在圖上顯示的是一半白一半灰色呢?我畫的是全灰啊,當然效果也沒有達到,請問是什么原因? ??
這里的文章有錯誤,已在我自己的博客做了點修改,請移步http://weidublog.com
好咧,謝謝大神~
謝謝大神?。?!已經做成功啦!太感激啦! ??
作者你在第一步中
一個黑框白底矩形(600X10),命名為“控制條”;
一個黑框灰底矩形(600X10),命名為“控制槽”。
與圖中的控制槽和控制條顏色相反,
實驗了您說的方法沒有作出您鏈接中的動效,希望您及時修改。
多謝!已在博客中修改了
謝謝分享,做成功了。 ??
謝謝分享。
我按你的步驟一步步操作,但最后沒實現你想要的效果,控制條不能拖動。
想麻煩你看一下哈~
http://pan.baidu.com/s/1slbb4Qh
你這個錯的地方太多了,比如元件的擺放層次,控制點的用例,拖拉邊界等都錯了,你得看著文章和截圖來做才行,這篇文章有個地方是我的錯,已經在博客上更新了,http://weidublog.com
我還是覺得備注一下 可拖拽 就好了