2016 - 2024

感恩一路有你

axure列表左右滑动 如何使用axure进行原型设计?

浏览量:4464 时间:2023-05-16 19:24:42 作者:采采

如何使用axure进行原型设计?

用axur

axure怎么弄左右滑动提示?

其实还是有些技巧的。Axure软件动态面板属性可以滑动,但是滑动的结果只能是水平和垂直。

但要达到同一页面上下左右滑动的效果,也不是不可能。

主要突破在于对条件的判断。

让 让我们回想一下使用手机。在应用软件的情况下,按住屏幕不放。;不要松手向下滑动屏幕。手机里面的页面只能向下(向上)滑动,无论你怎么左右滑动手,结果还是会向下(向上)滑动;左右滑动屏幕也是如此。

所以当手给屏幕一个动作时,页面判断手滑屏的方向,手最初是向滑屏的方向移动而不松手。屏幕移动只能维持垂直或水平效果,无法从垂直移动转换为水平移动,除非页面放开后再次判断。也就是说,手的初始运动决定了页面滑动的方向。

抓住这一点,通过Axure软件的知识点,我想出了以下方案来实现这个功能。

一.重要定义

1.三个动态面板

动态面板A和B ——A和B是嵌套的,A在外层,B在内层。

动态面板C——两种状态循环记录全局变量X和y

2.两个全局变量

X沿X轴拖动的总距离的绝对值向上取整([[数学。ABS(数学。Ceil (totaldragx)]])。

y沿y轴拖动的总距离的绝对值向上舍入([[数学。ABS(数学。Ceil (totaldragy)]])。

二、核心问题——比如准确快速的知道手移动屏幕的方向?

经过多次尝试,我终于测试出一种效果理想的方法:

拖动动态面板A时,动态面板C的两种状态快速循环,并记录其状态变化时的全局变量X和Y,从而判断拖动动态面板A时X和Y的大小,知道其页面(动态面板B)的滑动方向。

流程图如下:

第三,具体的原型设计

做一个手机壳,嵌入一个宽度为325X575的内嵌框架,将框架连接到内容页面:

设置全局变量x和y;

点击菜单栏中的-项目-全局变量,添加两个全局变量X和Y,设置值为null或0;

在新页面上添加一个带页码的长方形logo框,复制成三份,分别代表第一页、第二页、第三页,名称分别为1、2、3。

圈出这三个页面——右键——转换成动态面板,将动态面板的名称设置为B,然后点击动态面板B——右键——转换成动态面板,将最外层的动态面板的名称设置为a。

然后从动态面板A中拖出一个新的动态面板C,并将动态面板状态添加为2。

在动态面板A上设置以下用例:

拖动开始时:将动态面板C的状态设置为Next,以2ms(更短的时间)为间隔向后循环;

拖动时:判断全局变量x和y的大小;

在xgty水平移动动态面板B,在xlty垂直移动动态面板B;

拖动结束时:设置动态面板C停止循环。

在动态面板上设置用例。

当状态改变时:设置全局变量值。

x[[math . ABS(math . ceil(TotalDragX))]],y[[math。abs(math.ceil(TotalDragY))]]

点击菜单栏上的发布-预览,可以看到同一个页面实现了左右、上下两种拖动效果。

Emmmmmmm看着都觉得不舒服。我们可以进一步改进原型:

添加:

页面拖动范围和水平拖动的两种效果

慢慢拖动

快速拖动

在原始原型的基础上:

1.当动态面板A被拖拽-绑定-添加绑定时,可以添加页面范围的限制条件。

对于水平拖动,我们知道动态面板的组件B的宽度和高度是975X1000,单个矩形页面的宽度和高度是325X1000。所以水平拖动的极限范围是[-650,0],可以满足水平拖动时不会拖动页面浏览边框的要求。

对于相同的垂直阻力,只需将边界范围限制在[-500,0]即可。

面板 动态 页面 水平 全局变量

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。