Axure教程:原型設計之播放控制條

12 評論 14792 瀏覽 29 收藏 4 分鐘

看視頻時或者聽音頻時,播放控制條基本是必備的控件,以方便用戶隨意快進快退到隨意一個點,這也正是互聯網便捷人性的體現??此坪喓唵螁蔚牟シ趴刂茥l,若想將其原型制作成可拖動效果,還是得下一番功夫的,這篇文章就教大家如何使用axure原型工具制作播放控制條。

第一步:拖拉擺放控件

首先,拖拉一個動態面板(600X100)放在適當位置,命名為“面板1”;

然后,在“面板1”的state1面板狀態中放置3個控件;

  1. 一個動態面板(10X30),命名為“面板2”,另外,因為只有動態面板才有拖動時用例,所以要在“面板2”的state1面板狀態中放置一個黑框灰底矩形(10X30),命名為“控制點”;
  2. 一個黑框白底矩形(600X10),命名為“控制條”;
  3. 一個黑框灰底矩形(600X10),命名為“控制槽”。

第二步:為“面板2”設置拖動時用例

在拖動時用例中,添加2個移動動作。

移動“面板2”,移動設置為“水平拖動”,添加左側邊界大于等于0,添加右側邊界小于等于“控制槽”的寬度。

移動“控制條”,移動設置為“水平拖動”,添加左側邊界大于等于“控制點”的寬度減去“控制條”的寬度,添加右側邊界小于等于“控制槽”的寬度。

至此已經制作完成,預覽時拖動“控制點”即可以看到效果。

效果圖:http://hjchbk.axshare.com

 

作者:維度,個人博客:http://weidublog.com

本文由 @維度 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 問個問題,為什么一個按鈕沒辦法切換一個面板的兩個狀態

    回復
    1. 可以切換啊

      來自上海 回復
  2. 謝謝樓主大人的教程,但是有個問題,控制條和控制槽都是600*10,那怎么在圖上顯示的是一半白一半灰色呢?我畫的是全灰啊,當然效果也沒有達到,請問是什么原因? ??

    來自廣東 回復
    1. 這里的文章有錯誤,已在我自己的博客做了點修改,請移步http://weidublog.com

      來自廣東 回復
    2. 好咧,謝謝大神~ :mrgreen:

      來自廣東 回復
    3. 謝謝大神?。?!已經做成功啦!太感激啦! ??

      來自廣東 回復
  3. 作者你在第一步中
    一個黑框白底矩形(600X10),命名為“控制條”;
    一個黑框灰底矩形(600X10),命名為“控制槽”。
    與圖中的控制槽和控制條顏色相反,
    實驗了您說的方法沒有作出您鏈接中的動效,希望您及時修改。

    來自北京 回復
    1. 多謝!已在博客中修改了

      來自廣東 回復
    2. 謝謝分享,做成功了。 ??

      來自北京 回復
  4. 謝謝分享。
    我按你的步驟一步步操作,但最后沒實現你想要的效果,控制條不能拖動。
    想麻煩你看一下哈~
    http://pan.baidu.com/s/1slbb4Qh

    來自天津 回復
    1. 你這個錯的地方太多了,比如元件的擺放層次,控制點的用例,拖拉邊界等都錯了,你得看著文章和截圖來做才行,這篇文章有個地方是我的錯,已經在博客上更新了,http://weidublog.com

      來自廣東 回復
  5. 我還是覺得備注一下 可拖拽 就好了

    回復