原型設計工具Axure RP入門教程(九):滑塊控制教程
Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具, 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。
在本教程中,您將學習如何使用動態面板小部件制作可拖動的滑塊控件。
小部件設置
- 打開一個新的RP文件,然后在畫布上打開Page 1。
- 將水平線窗口小部件從庫窗格拖到畫布上。將其寬度設置為400,將其邊框厚度設置為5。
- 將一個橢圓小部件拖動到畫布上,并將其寬度和高度都設置為25。
- 選擇直線和橢圓。單擊界面頂部的居中對齊圖標,然后單擊居中對齊圖標。
- 右鍵單擊橢圓,然后在上下文菜單中選擇創建動態面板。
注意:動態面板是唯一具有拖動事件的窗口小部件,因此任何要拖動的元素都必須放置在動態面板中。
移動動態面板及其拖曳事件
- 選擇動態面板,然后在交互窗格中單擊新建交互。
- 在出現的列表中選擇拖動事件,然后選擇移動動作。
- 在目標下拉列表中選擇此小部件。
- 在移動下拉列表中,選擇拖動x。在Web瀏覽器中拖動時,這將使動態面板沿X(水平)軸跟隨光標。
- 請勿關閉操作。
向移動動作添加邊界
- 單擊移動操作底部的更多選項。
- 在邊界下,單擊添加邊界。
左邊界
- 新出現的邊界行,請在第一個下拉列表中選擇向左。(這是指動態面板左邊緣的X值)
- 在中間的下拉列表中,選擇大于或等于。
- 單擊第三個字段右側的fx圖標以打開編輯值對話框。
- 在對話框底部,單擊添加本地變量。
- 在新的本地變量行的第一個字段中,將變量命名為LineWidget。在第二個字段中,選擇小部件。在第三個中,選擇line小部件。(此局部變量整體上是指行小部件)
- 在對話框的上部字段中,輸入:[[LineWidget.left]](此括號表示的是線控件左邊緣的X值)
- 單擊確定關閉編輯值對話框。
創建好的邊界,左-大于或等于-[[LineWidget.left]],這意味著動態面板的左邊界只能移動到X值,該值大于或等于該行的X值 小部件的左邊界。換句話說,它不能在頁面上移動到行控件左邊緣界以外的任何地方。
右邊界
- 再次單擊添加邊界。在出現的新邊界行中,在第一個下拉列表中選擇右鍵。(這是指動態面板右邊緣的X值)
- 在中間的下拉列表中,選擇小于或等于。
- 單擊第三個字段右側的fx圖標以打開編輯值對話框。
- 在對話框底部,單擊添加本地變量。
- 在新的本地變量行的第一個字段中,將變量命名為LineWidget。在第二個字段中,選擇小部件。 在第三個中,選擇line小部件。(此局部變量整體上是指行小部件)
- 在對話框的上方字段中,輸入:[[LineWidget.right]](此括號表示的是行控件右邊緣的X值。)
- 單擊確定關閉編輯值對話框。
創建好的邊界,右-小于或等于-[[LineWidget.right]],這意味著動態面板的右邊緣只能移動到小于或等于該線的X值的X值 小部件的右邊緣。換句話說,它在頁面上的右移不能超過行控件的右邊緣。
預覽互動
預覽頁面并向左和向右拖動圓圈。 現在,它只能沿著線控件定義的路徑移動,并且您不應將其拖動到線控件的左右邊緣之外。
附加信息和提示
垂直滑塊
要構建垂直滑塊,請按照上述步驟進行以下更改:
- 使用垂直線代替水平線。
- 在移動動作的下拉列表中,選擇拖動。在Web瀏覽器中拖動時,這將使動態面板沿Y(垂直)軸跟隨光標。
- 對于移動動作邊界,請使用:
top — is greater than or equals — [[LineWidget.top]] bottom — is less than or equals — [[LineWidget.bottom]]

想要獲得Axure RP更多資源、正版授權的伙伴,請咨詢了解
關注慧聚IT微信公眾號???,了解產品的最新動態及最新資訊。