Axure进阶教程：范围滑动输入条交互设计

本教程以Axmax Element 组件库 - 范围滑动输入条 为案例，详细讲解如何通过拖动交互修改元件尺寸方式来实现滑动输入条交互设计

滑动输入条作为一个输入数值的组件，在交互设计中可用于展示当前值和可选范围。当用户需要在数值区间/自定义区间内进行选择时，可使用滑动输入条，选择的值可为连续值或离散值。

演示效果：

Axure9

01

一

两个圆形元件，填充白色，边框2颜色填充橙色，分别转换为动态面板，并设命名“滑块按钮1”和“滑块按钮2”

矩形元件，尺寸300*5，圆角半径3px，背景灰色，命名“背景”

矩形元件，尺寸180*5，圆角半径3px，背景橙色，命名“着色条”

将要元件排列“着色条”置于“背景”上层，“滑块按钮1”和“滑块按钮2”分别置于“着色条”两端

02

一

拖动滑块时“着色条”要根据“滑块按钮1”和“滑块按钮2”移动改变尺寸

选中“滑块按钮1”，设置交互

移动“当前”元件，“跟随水平拖动”，并设置边界不能超过“背景”左边界和“滑块按钮2”右边界

设置“边界”，左边>=[[LVAR1.left]]
LVAR1.left：元件“背景”左边界值

设置“边界”，右边<=[[LVAR1.left]]
LVAR1.left：元件“滑块按钮2”左边界值

设置尺寸“着色条”，右边为描点，改变尺寸宽度[[LVAR1.x-This.x]]
LVAR1.x：“元件滑块2” 的x坐标值
This.x：当前选中元件的x坐标值
“滑块按钮2”的x坐标减去当前滑块元件的x坐标，通过局部变量获取“滑块按钮2”的x坐标，然后，减去当前滑块元件的x坐标

选中“滑块按钮2”，设置交互

移动“当前”元件，“跟随水平拖动”，并设置边界不能超过“背景”右边界和“滑块按钮1”右边界

设置“边界”，左边>=[[LVAR1.right]]

LVAR1.right：元件“滑块按钮1”右边边界值

设置“边界”，右边<=[[LVAR1.right]]

LVAR1.right：元件“背景”右边界

设置尺寸“着色条”，左边为描点，改变尺寸宽度[[This.x-LVAR1.x]]
This.x：当前选中元件的x坐标值
LVAR1.x：“元件滑块1” 的x坐标值
当前滑块元件的x坐标减去“滑块按钮2”的x坐标，通过局部变量获取当前滑块元件的x坐标值，然后减去“滑块按钮2”的x坐标值

PC访问：https://axmax.cn 阅读更多Axure教程 - 本文由Axmax原创