axure拖動滑塊長度設置（Axure9教程拖動滑塊確定評分區間效果）

2023-05-30 01:26:03 1

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

一、交互效果說明滑塊及評分數值跟隨滑鼠拖動沿水平方向移動，移動範圍不能超出灰色背景條兩端。拖動滑塊時，橙色的進度條寬度隨著滑塊的拖動而變化。評分數值的坐標始終與滑塊一致，且數值要隨著滑塊拖動在「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」的左坐標。

給左側滑塊「LeftSlider」添加【移動時】的交互，目標為橙色滑動條「ProgressBar」的寬度，數值為[[rightslider.left-leftslider.left]]，同樣需要結合局部變量獲取對象，錨點為右側；給右側滑塊「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 協議

,