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

這期內(nèi)容，我們來(lái)探討Axure中滑動(dòng)條設(shè)計(jì)與交互技巧。

滑動(dòng)條

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

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

2.在元件庫(kù)中拖出一個(gè)矩形元件。

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

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

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

6.滑動(dòng)背景與填充條元件左側(cè)對(duì)齊。

7.滑動(dòng)背景與滑動(dòng)按鈕元件左側(cè)對(duì)齊，滑動(dòng)左側(cè)按鈕居中。

二、創(chuàng)建交互

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

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

更多選項(xiàng)，添加邊界，右側(cè)＞＝ 插入變量，添加局部變量 LVAR1 =元件 滑動(dòng)背景

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

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

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

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

6.拖動(dòng)時(shí)交互完整事件。

三、預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面中，鼠標(biāo)可以向右向左拖動(dòng)滑動(dòng)按鈕。

進(jìn)度提示滑動(dòng)條

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

1.復(fù)制滑動(dòng)條粘貼到畫布。

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

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

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

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

2.添加動(dòng)作，移動(dòng) 提示氣泡 到達(dá)

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

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

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

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

4.新建交互 拖動(dòng)結(jié)束時(shí) 顯示/隱藏 隱藏 提示氣泡 逐漸 200毫秒。

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

六、預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面中，鼠標(biāo)向右向左拖動(dòng)滑動(dòng)按鈕會(huì)出現(xiàn)氣泡提示對(duì)應(yīng)數(shù)值。

七、豎向進(jìn)度提示滑動(dòng)條

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

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

改交互

1.選中滑動(dòng)按鈕，交互窗格中 拖動(dòng)時(shí)，移動(dòng) 滑動(dòng)按鈕 跟隨水平移動(dòng)改為 跟隨垂直拖動(dòng)。

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

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

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

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

5.其他交互不變。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面中，鼠標(biāo)豎向拖動(dòng)滑動(dòng)按鈕會(huì)出現(xiàn)氣泡提示對(duì)應(yīng)數(shù)值。

預(yù)覽地址：https://itlqu1.axshare.com

OK，這期內(nèi)容到這里就結(jié)束了。