Axure运用:使用Axure创建iPhone应用程序原型(三)
2013-08-22 16:37
381 查看
在之前的两篇文章中,作者分别为大家介绍了如何使用iPhone应用程序页面模板在原型设计工具Axure中设计程序,以及如何在iPhone上查看iPhone应用程序原型。接下来,作者将为大家讲解如何使用Axure在iPhone中设置显示和隐藏滑动菜单。
因为底部的导航现在只是一个单一的图像,添加一个图像映射区域到的大拇指向上/向下按钮之间的选项按钮。此外,在“添加书签”按钮上也添加一个图像映射区域,因它是由两个组件创建,我们希望整个区域都可以点击。
注意:设置面板状态时面板将会自动显示,因此就不需要另外添加一个显示面板事件了。
生成你的原型并测试。上传到AxShare网站或者在你自己的设备中查看。若隐藏菜单没有正常运行,检查所有事件的顺序是否有误。下载本文Axure iPhone App模板下载原型设计工具Axure RP
向上滑动面板
第一步:添加图像映射区域
首先,打开 AxureiPhoneApp.zip,打开 iPhoneApp-SlidingMenuTutorial.rp文件。因为底部的导航现在只是一个单一的图像,添加一个图像映射区域到的大拇指向上/向下按钮之间的选项按钮。此外,在“添加书签”按钮上也添加一个图像映射区域,因它是由两个组件创建,我们希望整个区域都可以点击。
第二步:将菜单转换到动态面板
为创建滑动动画,我们将用到设置面板状态事件。首先,将整个滑动菜单转入到一个动态面板,具体操作为:选择组件,右击,转换>装换到动态面板。为面板标注“SlideUpMenu"”。第三步:在“SlideUpMenu”下添加状态“Menu”和“Empty”
现在,添加第二个状态到面板,留作空白,有了这一步,我们后面才会有一个向下滑动的动画。将第一个状态标记为“菜单”,第二个状态标记为“空白”。第四步:设置面板为隐藏
现在,设置动态面板默认为隐藏。因为即使状态为空白,透过可见的动态面板也不能实现单击或点击。第五步:添加 OnClick到图像映射区域
添加交互:添加一个实例到选项按钮的OnClick事件,就是我们在第一步中添加的图像映射区域。双击OnClick以添加实例。第六步:设置面板到“Menu”,向上滑动
添加设置面板状态事件到状态,选择 SlidingMenu 面板复选框。菜单状态就被默选。从动画的下拉列表中选择“向上滑动”动画。点击确认关闭实例编辑器。注意:设置面板状态时面板将会自动显示,因此就不需要另外添加一个显示面板事件了。
向下滑动面板
第一步:打开Menu状态,添加OnClick到按钮
在动态面板管理中双击Menu状态打开,在我们之前添加的“添加书签”映射区域给OnClick事件添加一个实例。第二步:设置面板为“None”、“向下滑动”
为隐藏面板,我们将用到设置面板状态事件,这样我们就可以使用“向下滑动”动画。使用“自行隐藏面板”就可隐藏面板,但不隐藏动画。添加一个设置面板事件,选择面板,并设置状态为Empty。添加一个向下滑动动画为飞出。第三步:添加事件——等待500毫秒和隐藏面板事件
添加一个等待事件并将等待时间定为500毫秒。在等候事件后面添加一个隐藏面板事件。这里添加等待事件,保证动画在面板隐藏之前得以完成。跟上面一样,面板需要隐藏起来,这样面板下面的的组件才可以点击。第四步:移动SlideUpMenu到位
最后,将SlideUpMenu移动到位,你可以按住Shift键,同时沿着一个轴拖动它。生成你的原型并测试。上传到AxShare网站或者在你自己的设备中查看。若隐藏菜单没有正常运行,检查所有事件的顺序是否有误。下载本文Axure iPhone App模板下载原型设计工具Axure RP
相关文章推荐
- 使用Axure创建iPhone应用程序原型(一)
- 使用Axure创建iPhone应用程序原型(二)
- 界面原型创建工具Axure使用教程之一:基本操作
- 界面原型创建工具Axure使用教程
- 使用SVN+Axure RP 8.0创建团队项目(原型图)
- 对象的创建方法之三---组合使用构造函数模式和原型模式(最常用的模式)
- 使用Axure制作App原型应该怎样设置尺寸?
- Axure与iPhone应用程序原型创建(三)
- 使用Axure制作系统原型
- 使用AxureRP7.0制作经典数独小游戏原型,axure游戏原型下载
- AXURE原型工具之动态页面的使用
- JS中定义对象方式四: 使用原型(prototype)方式创建对象之一
- JavaScript构造函数及原型对象 使用Object或对象字面量创建对象 工厂模式创建对象 构造函数模式创建对象 原型模式创建对象 构造与原型混合模式创建对象
- SVN+Axure RP Pro 创建原型项目
- JavaScript 创建对象--组合使用构造函数模式和原型模式
- Axure的使用---原型图
- 在JS中组合使用构造函数模式和原型模式创建对象
- javascript创建对象——组合使用构造函数和原型模式
- JavaScript构造函数及原型对象 使用Object或对象字面量创建对象 工厂模式创建对象 构造函数模式创建对象 原型模式创建对象 构造与原型混合模式创建对象
- Axure使用——创建折叠菜单