Axure实现手机滑动解锁

Axure实现手机滑动解锁

Axure软件是一款非常专业的高保真原型设计软件,能够实现非常逼真的网页原型设计,而本文想给大家介绍一下使用Axure实现手机滑动解锁的操作方法 。关于手机滑动解锁相信大家都不陌生,现在的我们几乎人手一部手机,而打开手机进入界面有很多种形式,滑动就是其中一种方式,看过的人很多,但可能不清楚如何实现这个功能,接下来将会具体讲解。

首先,需要打开Axure软件,并在画板上画出整体图形,包含三部分:屏幕背景、滑动范围框和滑动块。屏幕背景375*667,滑动范围框375*100,滑动块65*45,以上都是px即像素单位。

Axure图片

2、创建交互用例

(1)滑动范围框

① 点击滑动范围框,然后右键选择转换为动态面板,并命名为fanwei。

② 双击进入fanwei的动态面板状态中,把滑动块也剪切放到合适的位置,并拖动选择滑动块的极限距离(左侧和右侧可水平移动的限制区域)

Axure坐标

左侧28,右侧282(都为x值)

(2)滑动块

① 把滑动块放置在合适的左侧位置,转化为动态面板,并命名为huadong。

② 设置huadong的拖动时的用例为:

Axure滑动块

移动当前元件(huadong)水平移动、并添加边界

左侧>=左侧放置的位置                    示例:左侧>=28

右侧<=[[右侧最多能到的位置+滑块的宽度]]                    示例:右侧<=[[282+lvar1.width]]或者直接写[[282+65]],其中65为滑块的宽度。

注意:右边的X值需要加上滑块的宽度width,因为左侧和右侧的边界范围可以理解为元件范围。

③ 设置huadong的拖动结束时的用例为:

case 1 

条件:值 [[LVAR1.x]] (其中Fx为元件 滑动块) <  值  282 ,282为右侧最大的x值。

Axure添加条件

用例:移动huadong到绝对位置(28,28)、动画为线性500ms

Axure拖动结束时

case 2

条件:else if true (不用创建条件,默认为第一个如果没实现,执行这个)

用例:隐藏滑动范围框fanwei

3、设计用例概况

Axure交互情况

以上就是手机滑动解锁的操作步骤 ,可以点击预览即可,更多感兴趣的教程,点击文章:Axure如何实现手绘效果

1 comment so far

Axure实现画百分比环形图 | Axure 中文网Posted on4:11 下午 - 2月 13, 2019

[…] 还是比较简单的实现方法的,更多感兴趣的教程,点击文章:Axure实现手机滑动解锁。 […]

在线客服
客服邮箱
客服电话
17051276424