人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

时间:2024-10-16 22:02:40

1、从部件库中拖入一个图片部件 双击这个图片部件打开本地文件夹浏览手机外壳图片 调整好图片位置和大小 再以同样的方式制作一张手机背景图片

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

2、从部件库中拖入一个标题部件 双击修改标题文本文字为当前时间 再以同样的方式制作 日期和星期内容的文本文字 调整好位置和样式

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

3、从部件库中拖入一个矩形部件 单击选择这个部件后 鼠标右键单击 在弹出的下拉列表中 点击选择形状 椭圆 将这个矩形部件转换芤晟踔肿成椭圆的形状 再在工具栏中修改这个椭圆的宽和高 将宽和高修改为同一个数字 把这个椭圆变成正圆 双击正圆 输入文本文字为0 将这个正圆名字命名为 数字0 以同样的方式制作1至9 将这些正圆分别命名为数字1至数字9 调整好位置和样式

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

4、选择所有文字部件和数亨蚂擤缚字部件 鼠标单击右键 在弹出的下拉列表中点击 转换为动态面板 将这些部件转换成动态面板 双击唁昼囫缍这个动态面板 在弹出的动态面板状态管理框中 在名称输入框中输入解锁 点击+号再添加一个动态面板的状态 将这两个状态分别命名为解锁前和解锁后 再点击确定按钮

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

5、点击右下角部件管理中的解锁前 进入到解锁前状态页 选中这10个数字 按照步骤4中的方法 将这10个数字制作芤晟踔肿成密码动态面板 再拖入一个标签部件 双击修改文本为密码输入错误 请重新输入 将这个文本命名为error再点击进入解锁后状态页 拖入一个文字 双击修改文本为 欢迎你解锁成功 调整文字位置和样式

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕
人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

6、返回到主页面 点击解锁动态面板 在右上角部件交互中点击 载入时动作 进入到用例编辑框中 将数字0到数字9设置为启用状态同时将数字0到数字9设置为未被选中状态 点击确定按钮

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

7、进入到解锁前状态页 点击拖动动态面板时动作 进入到用例编辑框中 点击新增条件 设置当光标接触到数字0时的条件 点击确定 再设置数字0为被选择状态 等待200毫秒时间 点击确定按钮以同样的方式制作数字1到数字9的交互动作

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

8、(预设密码为12369)点击结束拖放动态面板时 进入到用例编辑器中 点击选择条件 设置数字1、2、3、6、9为被选中状态 数字0、4、5、7、8为未被选中状态的条件 点击确定按钮 设置解锁面板状态转换到解锁后状态 点击确定按钮

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

9、再点击结束拖放动态面板时动作 进入到用例编辑器中 设置显示error 等待1000毫秒后 设置数字0到数字9的状态为未被选中状态 隐藏error 再点击确定按钮

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕

10、下面是制作成功的演示效果 如果对你有帮助记得点击左下角的投票帮我投上一票哦 O(∩_∩)O谢谢

人人是产品经 Axure7.0手机九宫格滑动解锁屏幕
人人是产品经 Axure7.0手机九宫格滑动解锁屏幕
© 手抄报圈