Axure PR 9 滑動(dòng)條 設計amp;交互
在A(yíng)xure原型中，滾動(dòng)條是一個(gè)非常常見(jiàn)和頻繁的操作。但多數情況下，滾動(dòng)條都是靜態(tài)的，如果要修改為動(dòng)態(tài)補充交互效果，需要如何設計？這篇文章，我們來(lái)看看作者怎么做的。
這期內容，我們來(lái)探討Axure中滑動(dòng)條設計與交互技巧。
滑動(dòng)條
一、創(chuàng )建滑動(dòng)條所需的元件
1.打開(kāi)一個(gè)新的 RP 文件并在畫(huà)布上打開(kāi) Page 1。
2.在元件庫中拖出一個(gè)矩形元件。
3.選中矩形元件，樣式窗格中，將寬(W)設為500 高（H）設為4 填充顏色為灰色（#D2D2D2）線(xiàn)寬為0 圓角半徑4 命名為滑動(dòng)背景。
4.復制滑動(dòng)背景粘貼到畫(huà)布，樣式窗格中，將寬(W)設為4，高（H）設為4，填充顏色改成藍色（#0052D9）命名為填充條。
5.復制填充條粘貼到畫(huà)布，將寬(W)設為10，高（H）設為10，圓角半徑 10 命名為滑動(dòng)按鈕。
6.滑動(dòng)背景與填充條元件左側對齊。
7.滑動(dòng)背景與滑動(dòng)按鈕元件左側對齊，滑動(dòng)左側按鈕居中。
二、創(chuàng )建交互
創(chuàng )建滑動(dòng)按鈕交互狀態(tài)
1.選中滑動(dòng)按鈕元件，右鍵轉為動(dòng)態(tài)面板，在交互窗格點(diǎn)擊新建交互，拖動(dòng)時(shí)，移動(dòng) 滑動(dòng)按鈕 跟隨水平移動(dòng)
更多選項，添加邊界，右側＞＝ 插入變量，添加局部變量 LVAR1 =元件 滑動(dòng)背景
2.插入局部變量 [[LVAR1.x-LVAR1.x+7]]，LVAR1為滑動(dòng)背景的X軸，7為滑動(dòng)按鈕本身半徑。
3.添加邊界，左側＜＝ 插入變量，[[LVAR1.x-LVAR1.x+LVAR1.width-7]]，LVAR1.width為滑動(dòng)背景的寬值。
4.設置填充的尺寸，添加動(dòng)作，設置尺寸，填充條 寬值插入變量，添加局部變量 LVAR1 =元件 滑動(dòng)按鈕
5.插入局部變量 [[LVAR1.x+2]]，LVAR1為滑動(dòng)按鈕的X軸，2為填充條的半徑。
6.拖動(dòng)時(shí)交互完整事件。
三、預覽交互
點(diǎn)擊預覽，在預覽頁(yè)面中，鼠標可以向右向左拖動(dòng)滑動(dòng)按鈕。
進(jìn)度提示滑動(dòng)條
四、創(chuàng )建進(jìn)度提示滑動(dòng)條所需的元件
1.復制滑動(dòng)條粘貼到畫(huà)布。
2.制作提示氣泡，將提示氣泡設置為灰色（#7F7F7F）輸入“0”，將氣泡元件命名為提示氣泡。
五、創(chuàng )建滑動(dòng)按鈕交互狀態(tài)
1.選中滑動(dòng)按鈕元件，在交互窗格拖動(dòng)時(shí) 移動(dòng) 設置尺寸下添加設置文本動(dòng)作 設置提示氣泡 文本 插入變量 添加局部變量 LVAR1 =元件 滑動(dòng)背景 LVAR2 =元件 填充條
插入變量 ：[[(LVAR2.width/LVAR1.width*101).toFixed(0)]]
2.添加動(dòng)作，移動(dòng) 提示氣泡 到達
插入X軸變量 添加局部變量 LVAR1=元件 滑動(dòng)按鈕 LVAR2=元件 填充條
插入變量:[[LVAR1.x-10+LVAR2.x]]
插入y軸變量 添加局部變量 LVAR1=元件 填充條 插入局部變量 ：[[LVAR1.y-50]]
3.添加動(dòng)作 顯示/隱藏 顯示 提示氣泡 逐漸 200毫秒。
4.新建交互 拖動(dòng)結束時(shí) 顯示/隱藏 隱藏 提示氣泡 逐漸 200毫秒。
5.選中提示氣泡元件 右鍵 設為隱藏。
六、預覽交互
點(diǎn)擊預覽，在預覽頁(yè)面中，鼠標向右向左拖動(dòng)滑動(dòng)按鈕會(huì )出現氣泡提示對應數值。
七、豎向進(jìn)度提示滑動(dòng)條
創(chuàng )建豎向進(jìn)度提示滑動(dòng)條所需的元件
1.復制進(jìn)度提示滑動(dòng)條粘貼到畫(huà)布，選中滑動(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.邊界右側＞＝ 插入變量 [[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]] 動(dòng)畫(huà) 搖擺 0毫秒。
4.設置文本 插入變量 ：[[(LVAR2.width/LVAR1.width*101).toFixed(0)]]改為 ：[[(LVAR2.height/LVAR1.height*101).toFixed(0)]]。
5.其他交互不變。
預覽交互
點(diǎn)擊預覽，在預覽頁(yè)面中，鼠標豎向拖動(dòng)滑動(dòng)按鈕會(huì )出現氣泡提示對應數值。
021yin.com
OK，這期內容到這里就結束了。
本文由 @PM大明同學(xué) 原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉載
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀(guān)點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)
