5、手机滑动解锁 —— Axure实用交互

axure商城

写在开头:

为了制作高质量的保真原型Demo,手机滑动解锁绝对是一个简单但是看上去又十分真实的设计点。

按照惯例,先上动画演示

案例预览

开始原型设计

1、画出页面展示图

首先,需要打开Axure软件,并在画板上画出整体图形,包含三部分:屏幕背景、滑动范围框和滑动块

我以我画的原型为例,屏幕背景375*667,滑动范围框375*100,滑动块65*45,以上都是px即像素单位。

2、创建交互用例

(1)滑动范围框

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

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

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

 

(2)滑动块

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

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

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

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

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

 

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

 

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

case 1 

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

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

case 2

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

用例:隐藏滑动范围框fanwei

 

3、设计用例概况

 

之后就可以点击F5进行浏览了。

该教程主要为拖动动态面板水平移动用例的使用,以及拖动结束判断条件是否满足从而实现不同的结果。

 


至此,手机滑动解锁讲演结束,期待与您的交流沟通!

5

发表评论