拖动A时,
if 面板A区域 is over bottom区域
move A with drag x (到底后只能横向拖动了。)
else move A with drag
其他的效果lz按需设置。
画原型的目的之一是为了给开发人员看功能的实现效果,同时也可以打包制作成Demo给相关人员了解产品的完成形态,是产品人员的必备技能之一。除了画原型,产品人员还要做需求分析和文档编写等工作,所以不能花太多时间在此环节上。画原型所需时间与实现方法有关,以提高效率为目的,本文尽可能详细的介绍了进度条、进度环和滑动条三种原型的最简单实现方法,在介绍方法的过程中与大家分享自定义函数和常用math函数的使用以及元件 *** 作的一些小技巧,希望能帮助大家在画原型的时候更加得心应手。
一、进度条
进度条常见于页面载入过程中,用于向用户展示当前的进度情况,配合上有趣的动画效果可减少用户的等待焦虑。
1、准备元件
进度条的元件
在画板中拖入等宽等高的灰色矩形和蓝色矩形,灰色矩形命名【进度槽】,蓝色矩形 转换为动态面板 后设置宽度为1,命名【进度条】,拖入开始按钮和文本标签,设置文本标签文本为“0%”,命名【进度】。
2、原理分析
1)实现原理
把蓝色矩形转换成动态面板【进度条】后,蓝色矩形成为【进度条】默认面板内的一个元件。通过把【进度条】的初始宽度设置为1,暂时只显示一点点的蓝色矩形,使整个进度槽看起来是空的。随着【进度条】宽度不断变大,蓝色矩形被显示出来的区域也不断增多,直至当【进度条】的宽度等于【进度槽】的时候,蓝色矩形就全部被显示出来了,使整个进度槽看起来被填充完成。期间进度条和进度是关联进行的,根据【进度条】的宽度计算出【进度】的数值,用于表示当前的进度情况。
2)逻辑流程
进度条的逻辑流程
改变【进度条】宽度
改变【进度条】宽度
改变【进度条】的宽度是通过【设置尺寸】动作来实现的,Axure支持在用例中设置改变元件的尺寸。【进度条】的初始宽度为1,我们要修改设置它的尺寸为【进度槽】的宽度,设置动画为“线性”,时间为整个进度的时间。
自定义的函数中,LVAR1.width指局部变量LVAR1的宽度,LVAR1指代【进度槽】,故LVAR1.width即为【进度槽】的宽度。
设置【进度】
设置【进度】
根据“ 进度 = 进度条的宽度 / 进度槽的宽度 % ”,转换成原型中的函数为:
[[ math.ceil ( 100 * LVAR1.width / LVAR2.width ) ]] %
math.ceil(x)函数为向上取整函数,返回大于或等于参数x,并且与之最接近的整数。
(tips:文章结尾还会与大家分享更多常用的math函数。)
LVAR1.width是【进度条】的宽度,LVAR2.width是【进度槽】的宽度。两者相除后乘以100,再向上取整后得到百分比数制的整数数值部分,再添加“%”号组成百分比数制的文本。
3、设置用例
【开始按钮】鼠标点击时用例:
action1:设置【进度条】尺寸;
action2:隐藏【进度】;
action3:显示【进度】。
点击【开始按钮】
【进度】显示时用例:
action1:设置【进度】;
action2:隐藏【进度】;
action3:显示【进度】。
【进度】显示时
注意,在完成设置【进度】的动作后, 需要添加一个“等待0ms”的动作 让程序“暂时等待一下,然后再继续”,否则没有设置等待的话会形成“设置-隐藏-显示-设置-隐藏-显示-设置-隐藏……”的死循环,在运行原型的时候会造成网页奔溃(有兴趣的读者可以尝试一下,网页崩溃了可别怪我^_^)。
全部搞定后就可以预览原型了,附上原型演示地址:
简易进度条原型演示
二、进度环
进度环是进度条的一种扩展,只是两者的展现形式不同,前者为环形,后者为条形。
1、准备元件
1)半圆环的制作方法
step1:画两个半径不同的同心圆(大圆450半径蓝色,小圆300半径灰色),选中两个圆后右键 --【改变形状】--【去除】,便可得到圆环。
制作圆环
step2:画一个矩形,使它的一边与圆环的直径重合,选中两者后右键 --【改变形状】--【去除】,得到半圆环,将半圆环右键 --【改变形状】--【水平翻转】便可得到另一半半圆环。
制作半圆环
2)制作元件
按照上面的方法在画板中画四个半圆环、拖入开始按钮和文本标签,设置文本标签文本为“0%”,命名【进度】。
所需元件
把各个元件组合排列成下图,其中四个半圆环自上往下的排列层级依次为:【右槽】、【右环】、【左槽】、【左环】
排版好的元件
2、原理分析
1)实现原理
环旋转原型截面动图
初始时四个半圆环的排列位置从上往下依次为【右槽】、【右环】、【左槽】、【左环】,由于右槽和左槽分别盖住了右环和左环,所以在视图上我们只能看到右槽和左槽,也就是空的环形槽。动作开始后,右环旋转至左侧后盖住了左槽,然后左环上升到顶层(于右槽之上),接着顶层的左环旋转至右侧后盖住了右槽,所以在视图上只能看到右环和左环,也就是填充后的环形。整个过程进度环和进度是关联进行的,根据进度环旋转过的弧度计算出进度,用于表示当前的进度情况。
2)逻辑流程
进度环逻辑
进度环的逻辑方法跟进度条相似,区别是进度的计算公式不同。
顺时针旋转半圈【右环】
选择半圆环
旋转【右环】是通过【旋转】动作来实现的,Axure 8支持在用例中对元件进行旋转其位置的 *** 作。设置旋转位置为相对位置,角度为180,顺时针方向,锚点为左侧(沿着左侧旋转),旋转动画设置为线性,设置好旋转时间。
【左环】的旋转动作设置与【右环】相似,把锚点改为右侧(沿右侧旋转)即可。
设置【进度】
设置【进度】
根据“ 进度 = 进度环旋转过的弧度 / 360 % ”,转换成原型中的函数为:
[[ math.ceil ( 100 * ( LVAR1.rotation + LVAR2.rotation ) / 360 ) ]] %
LVAR1.rotation是【右环】旋转过的弧度,LVAR2.rotation是【左环】旋转过的弧度。两者相加后为整个进度环旋转过的弧度,除以360,然后乘以100再向上取整后得到百分比数制的整数数值部分,再添加“%”号组成百分比数制的文本。
3、设置用例
【开始按钮】鼠标点击时用例:
action1:【右环】顺时针旋转半圆;
action2:【左环】置于顶层;
action3:【左环】顺时针旋转半圆。
点击【开始按钮】
用例中执行【左环】置于顶层动作之前设置的等待时间与我们设置的【右环】旋转所需时间相同,这么做是为了让【右环】旋转结束后才置【左环】于顶层。否则不添加等待时间的话在原型的演示过程中,【右环】还在旋转的时候就被【左环】置顶后遮盖住了,看不到进度环的旋转动画。
【进度】显示时用例:
action1:设置【进度】;
action2:隐藏【进度】;
action3:显示【进度】。
显示【进度】
注意在完成设置【进度】的动作后, 需要添加一个“等待0ms”的动作 ,否则运行原型时会陷入死循环而造成网页奔溃。
全部搞定后就可以预览原型了,附上原型演示地址:
简易进度环原型演示
三、滑动条
滑动条常见于数值选择器(调节音量、修改数值等),也用于滑动解锁和滑动登录。
1、准备元件
1)初始化元件
初始化元件
宽400、高20的灰色矩形【滑动槽】,跟滑动槽等宽等高的蓝色矩形【滑动条矩形】,宽15、高30的红色矩形【滑动块】置于【滑动条矩形】右侧,拖入文本标签,设置文本标签文本为“0”,命名【滑动数】
注:【滑动块】的宽不应设置太大、高略大于【滑动条矩形】即可。
2)设置元件
选中【滑动条矩形】和【滑动块】将它们一起 转换为动态面板 【滑动条】,将【滑动槽】转换为动态面板,设置宽为415(【滑动条】的宽)、高为40(大于【滑动块】的高),将【滑动条】拖入【滑动槽】的动态面板中,拖放至【滑动槽】左侧直至只露出红色的【滑动块】部分。
【滑动条】在【滑动槽】中只露出红色的【滑动块】部分
所有元件设置完成后,在首页中视图如下
元件设置完成后的首页视图
2、原理分析
滑动块逻辑流程
随着我们在原型中不断拖动【滑动块】,【滑动条】在【滑动槽】中的位置是不断改变的。在整个过程中,滑动条和滑动数进行关联 *** 作,根据进度条矩形已经显示的宽度计算出滑动数。
移动【滑动条】
移动【滑动条】
移动方式设置成“水平拖动”,必须 添加界限 ,否则原型会无限制拖动。设置左侧边界的X轴坐标大于等于-400(-【滑动条矩形】的宽度)、右侧边界的X轴坐标小于等于415(【滑动条】的宽度)
设置【滑动数】
设置【滑动数】
根据“ 滑动数 = ( 滑动槽的宽度 - 滑动条矩形已经显示的宽度 ) / 滑动槽的宽度 ”,转换成原型中的函数为:
[[ math.ceil ( 100 * ( LVAR2.width - math.abs (LVAR1.x ) ) / LVAR2.width ) ]]
math.abs(x)函数为绝对值函数,返回参数x的绝对值。
LVAR2.width是【滑动框】的宽度,LVAR1.x是【滑动条】的x轴坐标数值,它的绝对值在原型中即是【滑动条矩形】已经显示的宽度。自定义函数中的“100”是我们所要设计的整个滑动条的最大数值。
3、用例设置
【滑动条】拖动时用例:
action1:移动【滑动条】;
action2:设置【滑动数】。
拖动【滑动条】
全部搞定后就可以预览原型了,附上原型演示地址:
简易滑动条原型演示
分享几个常用的math函数:
1)math.abs(x):绝对值函数,返回参数x的绝对值。math.abs(-2)=2;
2)math.ceil(x):向上取整函数,返回大于或等于参数x,并且与之最接近的整数。math.ceil(1.2)=2;
math.floor(x):向上取整函数,返回小于或等于参数x,并且与之最接近的整数。math.floor(1.2)=1;
3)math.random():随机数函数,返回介于0到1之间的随机数;
4)math.max(x,y):最大值函数,返回参数x和y中最大的值。math.max(1,2)=2;
math.min(x,y):最小值函数,返回参数x和y中最小的值。math.min(1,2)=1;
5)math.pow(x,y):幂运算函数,返回参数x的y次方的值。math.pow(2,3)=8;
math.sqrt(x):平方根函数,返回参数x的正数平方根。math.sqrt(4)=2;
写在后面
也许有读者会问,有没有更简单的方法实现上述的原型呢?答案是肯定有的,同时也很欢迎读者们与我讨论交流更简单的方法。我们做原型的目的是为了表达功能需求和表现产品形态,采用简单的方法只是为了尽可能提高画原型的效率。希望读者们能在工作或者学习中养成自己的原型风格,只要是我们觉得最得心应手的方法,就是最简单的方法。
动态面板是Axure中使用频率最高的元件之一,动态面板专门用于设计原型中的动态功能,它可以包含一个或多个状态,每个状态就是一个页面,在这里可以任意编辑,通过控制状态的切换或显示/隐藏来实现一些我们常见的交互效果。
一、特定的交互事件
动态面板有一些自己专用的特定事件:动态面板状态改变时、尺寸改变时、拖动时、滚动时和载入时。
有一些事件是通过其他用例中的动作设置从而触发进行,比如显示或移动动态面板。
你可以使用这些事件来创建高级交互,比如展开折叠区域或者轮播广告。
使用拖拽事件可以制作拖拽的交互效果,并且针对拖拽过程中的3个状态,开始、进行、结束可以分别设置我们想要的交互。
本文通过一些案例来讲述这些特定事件的应用。
二、案例说明
01 状态改变时
这个事件是由“设置面板状态”这个动作触发。这个事件一般用来触发动态面板状态改变的一连串交互。
案例:进度条加载
在设计区域中添加一个动态面板,命名为状态指示器,添加两个相同的矩形。
将其中一个矩形填充颜色,并与另一个矩形重合对齐,将带有填充色的矩形转换为动态面板,命名为进度条;将进度条动态面板的宽度设置为1,另外一个矩形命名为背景框。
为状态指示器动态面板添加3个空白状态。
页面载入时用例:设置状态指示器动态面板向后循环,循环间隔为100毫秒。
状态改变时用例:为状态指示器动态面板添加状态改变时用例,首选设置用例的条件为如果进度条动态面板的宽度小于背景框的宽度,则为进度条动态面板执行设置尺寸动作。
动作配置中宽度设置为进度条现在的宽度加上背景框宽度的百分之一,高度设置为背景框的高度,选择线性动画,时间为50毫秒。
通过定义局部变量可以实现这里的宽高效果设置。添加另一个用例,停止状态指示器动态面板的状态循环。
至此,所有交互设置完毕,预览查看效果。
指示器面板状态切换与进度条面板尺寸改变的动画几乎是同时进行的,因此指示器面板状态切换的时间间隔需大于进度条面板尺寸变化的动画时长,否则会造成尺寸大小的改变先于状态切换完成,造成进度条面板宽度超出背景框宽度1%。
02 尺寸改变时
改变大小时事件是当动态面板大小改变时,由“设置面板尺寸”动作触发的。当“设置面板尺寸”这个动作用在其他元件上时,可以用来触发一连串事件。
案例:进度条百分比
在上一个案例基础上添加一个文本标签,命名为进度百分比。
尺寸改变时用例:为进度条面板添加尺寸改变时用例,为百分比文本标签设置一个变量表达式,即这里显示的值=进度条面板的宽度/背景框的宽度*100%,对计算结果进行取证。
对应的表达式[[Math.ceil(LVAR1.width/LVAR2.width*100)]]%, LVAR1和LVAR2分别为进度条宽度和背景框宽度。
点击预览,查看原型效果,我们可以看到当进度条宽度增加的同时,文本标签显示的百分比数据也同步变化。
03 拖动时
拖动事件是由面板的“拖动”或者快速点击、拖、释放而触发的。这个事件通常用于App原型中的轮播图、音量调节等。
案例:音量调节
拖动喇叭图标、矩形、圆至设计区域,调整好矩形和圆的尺寸,调整时,圆的高度大于矩形的高度,为圆和矩形填充颜色。将圆转换为动态面板,命名为调节球,矩形命名为音量杆。
拖动时用例:为调节球添加拖动用例,移动调节球,选择水平移动,调节球需要在音量杆水平方向移动。
因此这里的移动界限可以设置为大于音量杆X坐标,小于音量杆X坐标+音量杆宽度-音量杆X坐标。
写成表达式为左侧>[[LVAR1.x]],右侧<[[LVAR1.x+LVAR1.width]],变量LVAR1为音量杆,LVAR2位调节球。
设置完成,预览查看原型。
设置界限时,需要准确设定移动的坐标,因此在设定右侧范围时需要写明一个完整的表达式,而不能直接写成音量杆的宽度(LVAR1.width)。本案例为水平移动,因此只需要设定横坐标移动范围。
04 滚动时
动态面板的滚动事件是由动态面板滚动栏的滚动所触发的。如果需要滚动到固定位置触发交互,在用例中可以添加条件,如[[this.ScrollX]]或[[this.ScrollY]]。
案例:滚动切换面板状态
拖动一个动态面板至设计区域,为面板添加3个状态,每个状态添加一个相同大小的矩形,为了保证效果直观,矩形高度大于设备屏幕高度,设置为1600。
为每个矩形填充不同的颜色,在每个矩形正中央添加不同的文本内容,以便切换时能够明显区分不同状态。
将动态面板的高度缩小,设置为700,在属性面板中设置自动显示垂直滚动条。
滚动时用例:为用例添加条件,当动态面板在垂直方向上滚动距离超过150时,表达式为[[This.scrollY]]>150,则动态面板切换为下一个状态,并向后循环。
设置完成,预览查看原型效果。
05 载入时
动态面板的载入事件,是由页面初始加载动态面板触发。可以使用此事件代替页面载入时事件。
案例:轮播图
拖拽动态面板元件至设计区域,添加6个状态,为每个状态导入一张图片。
将动态面板命名为轮播图,为轮播图添加载入时用例,设置面板状态自动向后循环,循环间隔设置为2000毫秒,进入和退出动画均为向左滑动,动画时间为500毫秒。
设置完毕,预览查看原型效果。
这里仅仅设置了自动轮播的效果,手动切换幻灯片的交互效果,这里就不做说明了。
上述内容通过几个简单的案例说明了动态面板的强大之处,实际上动态面板能够实现的交互效果远非与此,更多的交互动画等待着我们一起去探索研究,使得原型保真效果在上一个新台阶。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)