使用“移动”动作,拖动解锁滑块,在碰触滑动区右边界时,触发主页面显示出来。
工具/原料
AxureRP软件,4张图片(上面已给出)
方法/步骤
1、拖入图片部件;分别导入4张图片,并放置好位置;如图其中主界面图(带图标的)命名为“首页”,并设置隐藏,放在底层;如图
2、拖入矩形部件,设置为灰色,不透明度70%;复制1个,放在手机下部。
3、拖入两个文本标签部件,输入时间和日期,文本为白色。拖入一个矩形部件,填充为黑色,线条为灰色,双击添加文本“移动滑块解锁”,文本为白色。如图
4、拖入一个矩形部件,填充为灰色,圆角为5;如图拖入一个矩形部件,变形为“箭头”形状,缩小,放在滑块上,如图
5、选中“滑块”和“箭头”,右击“转换为动态面板”,命名为“解锁”。如图
6、选中“解锁”动态面板,双击“拖动时”事件(有些软件版本为“拖动动态面板时”),打开用例编辑器。单击“移动”,勾选“解锁动态面板”;设置“水平移动”,单击“添加边界”,添加左侧和右侧边界,如图示。(说明:这里的左侧和右侧数值,是滑块左侧和“移动滑块解锁”矩形最右侧X坐标值。拖入标尺可以查看到。如图示。)
7、拖入一条垂直线,放在“移动滑块解锁”矩形的最右边线上,并命名为“垂直线”。
8、选中“解锁”动态面板,双击“拖动结束时”(有些软件版本为“结束拖动动态面板时”),打开用例编辑器;单击“添加条件”if区域于This接触区域于垂直线,如图设置“显示”,首页,置于顶层。确定。
9、F5预览效果