Axure RP 手机锁屏解锁的交互效果-动态面板的应用
2015-01-19 14:00
316 查看
开始拖动动态面板时事件是指开始拖动动态面时触发的交互行为。下面以一个锁屏解锁的交互效果为案例来介绍开动拖动动态面板时事件。产品设计axure 交互效果。
步骤1:
准备一张“解锁”图标。另从部件库中拖拽三个矩形到线框图中,分别调整成圆角矩形,两个圆形(一大一小)
![](http://img.blog.csdn.net/20150204093601159?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤2:
选中两个圆形,右击打开快捷菜单,点击“转换为动态面板”,并命名为“拖拽按钮”
![](http://img.blog.csdn.net/20150204093625449?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤3:
从部件库中拖拽一个单行文本框到线框图中,输入文字“向右滑动解锁>”,命名为“解锁文字”
![](http://img.blog.csdn.net/20150204093649161?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤4:
导入“解锁”图标,命名为“解锁”,放置在圆角矩形的右边;“拖拽按钮”动态面板放置在圆角矩形的左边
![](http://img.blog.csdn.net/20150204093705899?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤5:
新建一个解锁后页面,在页面中用一个矩形代表解锁后的界面
![](http://img.blog.csdn.net/20150204093731702?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤6:
选中“拖拽按钮”动态面板,在“部件交互和注释”窗口中,双击“开始拖动动态面板时”事件,打开用例编辑器
![](http://img.blog.csdn.net/20150204093751421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤7:
第二步:点击新增动作—选择“部件”,点击“隐藏”;
第四步:配置动作—勾选中“解锁文字“动作——勾选中“解锁文字(形状)”;点击“确定”
![](http://img.blog.csdn.net/20150204093811935?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤8:
选中“拖拽按钮”动态面板,在“部件交互和注释”窗口中,双击“拖动动态面板时”事件,打开用例编辑器
![](http://img.blog.csdn.net/20150204093835615?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤9:
第二步:点击新增动作—选择“部件”,点击“移动”;
第四步:配置动作—勾选中“拖拽按钮(动态面板)”,“移动”设置为“沿X轴移动”;点击“确定”
![](http://img.blog.csdn.net/20150204093901776?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤10:
选中“拖拽按钮”动态面板,在“部件交互和注释”窗口中,双击“结束拖动动态面板时”事件,打开用例编辑器
![](http://img.blog.csdn.net/20150204093923461?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤11:
第一步:用例说明—点击“新增条件”按钮,打开“条件生成”窗口,在“条件生成”窗口中,设置“部件范围拖拽按钮接触到部件范围解锁”,点击“确定”
![](http://img.blog.csdn.net/20150204093941728?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤12:
第二步:点击新增动作—选择“链接”,点击“打开链接”;
第四步:配置动作—单选“链接到当前涉及的一个页面”,选择“解锁后”页面;点击“确定”
![](http://img.blog.csdn.net/20150204094003522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤13:
参考步骤10打开用例编辑器。第一步:用例说明—点击“新增条件”按钮,打开“条件生成”窗口,在“条件生成”窗口中,设置“部件范围拖拽按钮未接触到部件范围解锁”,点击“确定”
![](http://img.blog.csdn.net/20150204094034160?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤14:
第二步:点击新增动作—选择“部件”,点击“移动”;
第四步:配置动作—勾选中“拖拽按钮(动态面板)”,“移动”设置为“绝对位置到:X:35;Y:36”
![](http://img.blog.csdn.net/20150204094110227?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
步骤15:
第二步:点击新增动作—选择“部件”,点击“显示”,
第四步:配置动作—勾选“解锁文字”,点击”确定“
![](http://img.blog.csdn.net/20150204094124922?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUEVYVUU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
axure快速原型设计 案例查看“陪学网”http://www.pexue.com/,该axure学习视频案例链接地址:http://www.pexue.com/Course/viplesson/239b347d-7ead-45a6-93f0-08c00817f03f?spid=4684786e-7d71-4515-a9fd-9b34ca206a14
步骤1:
准备一张“解锁”图标。另从部件库中拖拽三个矩形到线框图中,分别调整成圆角矩形,两个圆形(一大一小)
步骤2:
选中两个圆形,右击打开快捷菜单,点击“转换为动态面板”,并命名为“拖拽按钮”
步骤3:
从部件库中拖拽一个单行文本框到线框图中,输入文字“向右滑动解锁>”,命名为“解锁文字”
步骤4:
导入“解锁”图标,命名为“解锁”,放置在圆角矩形的右边;“拖拽按钮”动态面板放置在圆角矩形的左边
步骤5:
新建一个解锁后页面,在页面中用一个矩形代表解锁后的界面
步骤6:
选中“拖拽按钮”动态面板,在“部件交互和注释”窗口中,双击“开始拖动动态面板时”事件,打开用例编辑器
步骤7:
第二步:点击新增动作—选择“部件”,点击“隐藏”;
第四步:配置动作—勾选中“解锁文字“动作——勾选中“解锁文字(形状)”;点击“确定”
步骤8:
选中“拖拽按钮”动态面板,在“部件交互和注释”窗口中,双击“拖动动态面板时”事件,打开用例编辑器
步骤9:
第二步:点击新增动作—选择“部件”,点击“移动”;
第四步:配置动作—勾选中“拖拽按钮(动态面板)”,“移动”设置为“沿X轴移动”;点击“确定”
步骤10:
选中“拖拽按钮”动态面板,在“部件交互和注释”窗口中,双击“结束拖动动态面板时”事件,打开用例编辑器
步骤11:
第一步:用例说明—点击“新增条件”按钮,打开“条件生成”窗口,在“条件生成”窗口中,设置“部件范围拖拽按钮接触到部件范围解锁”,点击“确定”
步骤12:
第二步:点击新增动作—选择“链接”,点击“打开链接”;
第四步:配置动作—单选“链接到当前涉及的一个页面”,选择“解锁后”页面;点击“确定”
步骤13:
参考步骤10打开用例编辑器。第一步:用例说明—点击“新增条件”按钮,打开“条件生成”窗口,在“条件生成”窗口中,设置“部件范围拖拽按钮未接触到部件范围解锁”,点击“确定”
步骤14:
第二步:点击新增动作—选择“部件”,点击“移动”;
第四步:配置动作—勾选中“拖拽按钮(动态面板)”,“移动”设置为“绝对位置到:X:35;Y:36”
步骤15:
第二步:点击新增动作—选择“部件”,点击“显示”,
第四步:配置动作—勾选“解锁文字”,点击”确定“
axure快速原型设计 案例查看“陪学网”http://www.pexue.com/,该axure学习视频案例链接地址:http://www.pexue.com/Course/viplesson/239b347d-7ead-45a6-93f0-08c00817f03f?spid=4684786e-7d71-4515-a9fd-9b34ca206a14
相关文章推荐
- Axure RP 动态面板的应用--手机应用列表里向左向右滑动交互案例
- Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 201 Article 1: Rich Interactions复杂交互 - Dynamic Panels动态面板
- Axure 动态面板实现弹出框效果
- iOS开发之应用内检测手机锁屏,解锁状态
- 应用内检测手机锁屏,解锁状态
- axure 动态面板实现图片轮播效果(淘宝)
- 【Axure教程】动态面板制作弹出框效果
- Axure Base 10 动态面板滑动效果
- Axure教程 动态面板滑动效果(10)
- 使用axure动态面板制作轮播图效果
- iOS开发之应用内检测手机锁屏,解锁状态
- Axure RP Pro - 相关问题 - dynamic panel动态面板上的image图片部件设置了rollover翻转图片后在OnClick事件中不能正确隐藏所在面板
- Axure RP Pro - 相关问题 - 在规格文档中动态面板中的droplist下拉列表框部件会重复输出选项列表
- 学习笔记:axure 高级教程 1 动态面板制作tab切换效果
- iOS开发之应用内检测手机锁屏,解锁状态
- Axure的动态面板制作tab切换效果
- Axure做手机滑动解锁的效果
- Axure RP Pro - 相关问题 - Specification规格文档中仅包含Dynamic Panel动态面板部件在默认状态下的页面截图
- Axure动态面板:实现图片缩放和进度条加载效果
- Axure使用动态面板制作tab切换效果