導語：滑塊拖動效果是原型設計中比較常見的交互效果，今天我們以豆瓣的評分區間篩選組件為例來講講如何在Axure中實現拖動滑塊确定評分區間的交互。

一、交互效果說明

1. 滑塊及評分數值跟随鼠标拖動沿水平方向移動，移動範圍不能超出灰色背景條兩端。
2. 拖動滑塊時，橙色的進度條寬度随着滑塊的拖動而變化。
3. 評分數值的坐标始終與滑塊一緻，且數值要随着滑塊拖動在「0-10」的範圍内變化。

效果預覽：

二、元件準備

1. 拖入一個【矩形】元件，設置元件寬度：300px，高度：6px，圓角半徑：6，填充顔色：#EEEEEE，命名為「BackGround」。

複制一個「BackGround」出來，置于「BackGround」上方，填充顔色：#FFB444，命名為「ProgressBar」。

2. 拖入一個【圓形】元件，設置大小為：28px*28px，線段寬度：1px，線段顔色#A2A2A2。

在此【圓形】元件上方拖入一個【文本标簽】，設置字體顔色：#999999，字體大小：12px，文本内容：“0分”，命名為「Min」。

将上述兩個元件選中點擊右鍵轉換為動态面闆，命名為「LeftSlider」。

3. 複制一個「LeftSlider」出來，命名為「RightSlider」。

雙擊進入動态面闆修改文本标簽的文本内容為：“10分”，命名為「Max」。

将上述元件按照圖示位置進行調整，所有元件準備完畢。

三、添加交互

1. 第一步：給滑塊「LeftSlider」和「RightSlider」添加拖動交互。

1）給左側的滑塊「LeftSlider」添加【拖動時】的交互，【移動】「LeftSlider」【跟随水平拖動】。

做完這步滑塊已經可以跟随鼠标水平拖動了，但是我們還需要限制滑塊左右拖動的範圍。「LeftSlider」的滑動範圍向左不能超過其初始位置，向右不能超過右側滑塊「RightSlider」的左坐标；滑動範圍即灰色背景條「BackGround」的左坐标和滑塊「RightSlider」左坐标之間的距離。

2）點擊【更多選項】-【添加邊界】，設置邊界值【左側≥[[background.left]]】，【右側≤[[rightslider.left]]】。

邊界值需要借助局部變量獲取，點擊【添加局部變量】，設置局部變量「backGround」【=】【元件】「BackGround」；點擊【插入變量函數】值為[[background.left]]；同理可獲取右側的邊界值，具體數值參考下圖。

3）同樣給右側的滑塊「RightSlider」添加同樣的交互，數值如下圖所示。

完成這一步後，拖動滑塊已經可以在設定的範圍内滑動了。

2. 第二步：添加橙色滑動條「ProgressBar」寬度随着滑塊拖動而變化的交互

橙色的滑動條的寬度為右側滑塊「RightSlider」的左坐标減去左側滑塊「LeftSlider」的左坐标。

1. 給左側滑塊「LeftSlider」添加【移動時】的交互，目标為橙色滑動條「ProgressBar」的寬度，數值為[[rightslider.left-leftslider.left]]，同樣需要結合局部變量獲取對象，錨點為右側；
2. 給右側滑塊「RightSlider」添加相同的交互，區别為錨點為左側。

3. 第三步：設置「Min」「Max」文本标簽的評分數值随着滑塊拖動而變化

1）給左側的動态面闆「LeftSlider」添加【移動時】的交互，設置「Min」的【文本】值為 [[math.ceil((This.left-background.left)/background.width*10)]]分。

左側滑塊滑動的寬度=左側滑塊的左坐标-灰色背景條的左坐标；左側評分分值=左側滑塊滑動的寬度/灰色背景條的寬度*10 ；math.ceil(x)函數為向上取整函數，返回大于或等于參數x，并且與之最接近的整數。

2）同樣給右側的動态面闆「RightSlider」添加【移動時】的交互，設置「Max」的【文本】值為：[[10-math.ceil((background.right-This.right)/background.width*10)]]分。

本文由 @Daisy 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部