在Axure原型中，滾動條是一個非常常見和頻繁的操作。但多數(shù)情況下，滾動條都是靜態(tài)的，如果要修改為動態(tài)補充交互效果，需要如何設計？這篇文章，我們來看看作者怎么做的。

這期內容，我們來探討Axure中滑動條設計與交互技巧。

滑動條

一、創(chuàng)建滑動條所需的元件

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.在元件庫中拖出一個矩形元件。

3.選中矩形元件，樣式窗格中，將寬(W)設為500 高（H）設為4 填充顏色為灰色（#D2D2D2）線寬為0 圓角半徑4 命名為滑動背景。

4.復制滑動背景粘貼到畫布，樣式窗格中，將寬(W)設為4，高（H）設為4，填充顏色改成藍色（#0052D9）命名為填充條。

5.復制填充條粘貼到畫布，將寬(W)設為10，高（H）設為10，圓角半徑 10 命名為滑動按鈕。

6.滑動背景與填充條元件左側對齊。

7.滑動背景與滑動按鈕元件左側對齊，滑動左側按鈕居中。

二、創(chuàng)建交互

創(chuàng)建滑動按鈕交互狀態(tài)

1.選中滑動按鈕元件，右鍵轉為動態(tài)面板，在交互窗格點擊新建交互，拖動時，移動 滑動按鈕 跟隨水平移動

更多選項，添加邊界，右側＞＝ 插入變量，添加局部變量 LVAR1 =元件 滑動背景

2.插入局部變量 [[LVAR1.x-LVAR1.x+7]]，LVAR1為滑動背景的X軸，7為滑動按鈕本身半徑。

3.添加邊界，左側＜＝ 插入變量，[[LVAR1.x-LVAR1.x+LVAR1.width-7]]，LVAR1.width為滑動背景的寬值。

4.設置填充的尺寸，添加動作，設置尺寸，填充條 寬值插入變量，添加局部變量 LVAR1 =元件 滑動按鈕

5.插入局部變量 [[LVAR1.x+2]]，LVAR1為滑動按鈕的X軸，2為填充條的半徑。

6.拖動時交互完整事件。

三、預覽交互

點擊預覽，在預覽頁面中，鼠標可以向右向左拖動滑動按鈕。

進度提示滑動條

四、創(chuàng)建進度提示滑動條所需的元件

1.復制滑動條粘貼到畫布。

2.制作提示氣泡，將提示氣泡設置為灰色（#7F7F7F）輸入“0”，將氣泡元件命名為提示氣泡。

五、創(chuàng)建滑動按鈕交互狀態(tài)

1.選中滑動按鈕元件，在交互窗格拖動時 移動 設置尺寸下添加設置文本動作 設置提示氣泡 文本 插入變量 添加局部變量 LVAR1 =元件 滑動背景 LVAR2 =元件 填充條

插入變量 ：[[(LVAR2.width/LVAR1.width*101).toFixed(0)]]

2.添加動作，移動 提示氣泡 到達

插入X軸變量 添加局部變量 LVAR1=元件 滑動按鈕 LVAR2=元件 填充條

插入變量:[[LVAR1.x-10+LVAR2.x]]

插入y軸變量 添加局部變量 LVAR1=元件 填充條 插入局部變量 ：[[LVAR1.y-50]]

3.添加動作 顯示/隱藏 顯示 提示氣泡 逐漸 200毫秒。

4.新建交互 拖動結束時 顯示/隱藏 隱藏 提示氣泡 逐漸 200毫秒。

5.選中提示氣泡元件 右鍵 設為隱藏。

六、預覽交互

點擊預覽，在預覽頁面中，鼠標向右向左拖動滑動按鈕會出現(xiàn)氣泡提示對應數(shù)值。

七、豎向進度提示滑動條

創(chuàng)建豎向進度提示滑動條所需的元件

1.復制進度提示滑動條粘貼到畫布，選中滑動背景元件，在樣式窗格中將寬值 W 改為4 高值 H 改為200 元件命名滑動背景改為豎向滑動背景。

改交互

1.選中滑動按鈕，交互窗格中 拖動時，移動 滑動按鈕 跟隨水平移動改為 跟隨垂直拖動。

2.邊界右側＞＝ 插入變量 [[LVAR1.x-LVAR1.x+7]] 改為 頂部 ＞＝ 插入變量[[LVAR1.y-LVAR1.y]]

左側＜＝ 插入變量，[[LVAR1.x-LVAR1.x+LVAR1.width-7]]改為 底部 ＜＝ 插入變量 [[LVAR1.y-LVAR1.y+LVAR1.height+12]]。

3.設置尺寸，填充條 寬值 （W） 4 高值（H） 局部變量 [[LVAR1.x+2]] 改為[[LVAR1.y+2]] 動畫 搖擺 0毫秒。

4.設置文本 插入變量 ：[[(LVAR2.width/LVAR1.width*101).toFixed(0)]]改為 ：[[(LVAR2.height/LVAR1.height*101).toFixed(0)]]。

5.其他交互不變。

預覽交互

點擊預覽，在預覽頁面中，鼠標豎向拖動滑動按鈕會出現(xiàn)氣泡提示對應數(shù)值。

預覽地址：https://itlqu1.axshare.com

OK，這期內容到這里就結束了。