1. 主页 > 行业资讯 > 设计文章 >

Axure9教程:拖动滑块确定评分间隔效果

导语:滑块拖动效果是原型设计中常见的交互效果。今天我们以豆瓣的评分区间筛选组件为例,谈谈如何在Axure中实现拖动滑块确定评分区间的交互。

一、相互作用效应的解释

滑块及评分数值跟随鼠标拖动沿水平方向移动,移动范围不能超出灰色背景条两端。拖动滑块时,橙色的进度条宽度随着滑块的拖动而变化。评分数值的坐标始终与滑块一致,且数值要随着滑块拖动在「0-10」的范围内变化。

效果预览:

二、组件准备

1.拖动一个[矩形]组件,设置组件宽度:300px,高度:6px,圆角半径:6,填充颜色:# EEEEEE,命名为“BackGround”。

复制一个“背景”,放在“背景”的上面。填入颜色:#FFB444,命名为“ProgressBar”。

2.拖进一个[round]元素,设置大小为28px*28px,线段宽度为1px,线段颜色为#A2A2A2。

在[圆形]组件上方拖动一个[文字标签],设置字体颜色:# 99999,字体大小:12px,文字内容:“0分”,命名为“Min”。

选择并右键单击以上两个组件,将其转换为动态面板,命名为“左滑块”。

3.复制一个“左滑块”,并将其命名为“右滑块”。

双击进入动态面板修改文字标签的文字内容:“10分& # 8221;,名为“麦克斯”。

按照图中所示位置调整上述部件,所有部件准备就绪。

第三,添加交互

1.步骤1:添加拖动交互到滑块“左滑块”和“右滑块”。

1)将[拖动时]交互添加到左滑块,[移动]“左滑块”[跟随水平拖动]。

在这一步之后,滑块可以随着鼠标水平拖动,但是我们还需要限制滑块的左右拖动范围。“左滑块”的滑动范围不能超过其向左的初始位置和向右的右滑块的左坐标。滑动范围是灰色背景条“背景”的左坐标和滑块“右滑块”的左坐标之间的距离。

2)单击[更多选项]-[添加边界],设置边界值[左≥[[背景.左]]和[右滑块]。向左]]。

边界值需要通过局部变量来获得。点击【添加局部变量】,设置局部变量“背景”[=][组件]“背景”;单击插入变量函数,值为[[背景。向左]];同样可以得到右侧的边界值。具体数值参见下图。

3)将同样的交互添加到右侧的滑块“RightSlider”,数值如下图所示。

完成此步骤后,拖动滑块在设定范围内滑动。

2.第二步:添加橙色滑动条“进度条”的宽度随着滑动条的拖动而改变的交互

橙色滑块的宽度是右滑块的左坐标减去左滑块的左坐标。

给左侧滑块「LeftSlider」添加【移动时】的交互,目标为橙色滑动条「ProgressBar」的宽度,数值为[[rightslider.left-leftslider.left]],同样需要结合局部变量获取对象,锚点为右侧;给右侧滑块「RightSlider」添加相同的交互,区别为锚点为左侧。

3.第三步:设置“最小”和“最大”文本标签的分值随着滑块的拖动而改变

1)将【移动时】交互添加到左侧动态面板“LeftSlider”,将“Min”的【text】值设置为[[math。(这个。左背景。左)/背景。宽度* 10)]。

左滑块滑动宽度=左滑块左坐标-灰色背景条左坐标;左分数=左滑块滑动宽度/灰色背景条宽度* 10;math.ceil(x)函数是一个向上舍入函数,它返回一个大于或等于参数x且最接近它的整数。

2)将[移动时]的交互添加到右侧的动态面板“RightSlider”,将“Max”的[text]值设置为[[10-math。ceil((背景。对-这个。右)/背景。宽度* 10)]。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/509.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息