资源描述
第8章 用Axure部件行为制作交互效果Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列极客学院内 容导 读Axure除了可以使用链接行为制作交互效果，也可以使用部件行为来完成。Axure部件行为包括部件的显示/隐藏、设置文本和设置图像、设置选择/选中、设置指定列表项、启用/禁用、移动、置于顶层/置于底层、获得焦点、展开/折叠树节点等。通过部件行为也可以制作出高级交互效果，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结4 8.1.1 切换方式控制部件显示隐藏1、拖曳一个矩形部件，宽度设置为100，高度设置为30，文本内容重新命名为“导航一”，拖曳一个垂直菜单部件，作为导航一的二级菜单，将标签命名为“导航一的二级菜单”。2、将导航一的二级菜单先隐藏起来，当单击导航一的时候，显示出二级菜单。选中导航一，给它添加鼠标单击时触发事件，在第二步下面单击“切换可见性”，在第四步下面勾选“导航一的二级菜单”复选框，给它添加一个动画效果“向下滑动”,如图所示。5 8.1.2 变量方式控制部件显示隐藏1、先复制一下“导航一”和“导航一的二级菜单”两个部件，将“导航一”改为“导航二”，将它的二级菜单标签命名改为“导航二的二级菜单”。2、添加一个全局变量（见5.1节），变量命名为“flag”，默认值为0，选中导航二菜单，修改一下它的鼠标单击时触发事件，单击“新增条件”，设置变量值flag等于0，让它显示二级菜单，如图所示。6 8.1.2 变量方式控制部件显示隐藏3、接着设置变量值，将flag变量设置为1。4、再次添加鼠标单击时触发事件。单击新增条件，设置变量值flag=1来隐藏二级菜单，在第二步下面单击隐藏这个动作，在第四步下面，勾选“导航二的二级菜单”，设置一下它的动画效果，隐藏的时候让它向上滑动，接着把变量flag值设置为0，如图所示。7 8.1.3 多个导航菜单联动效果1、复制导航一和它的二级菜单，分别命名为“导航三”和“导航三的二级菜单”。2、再复制导航一和它的二级菜单，分别命名为“导航四”和“导航四的二级菜单”，如图所示。8 8.1.3 多个导航菜单联动效果3、先删除“导航三”和“导航四”的用例，然后实现“导航三”菜单和“导航四”菜单的联动效果。选中“导航三”菜单，给它添加鼠标单击时触发事件，单击“显示”这个动作，显示“导航三的二级菜单”，让它向下滑动。单击“隐藏”这个动作，将“导航四的二级菜单”隐藏起来，让它向上滑动。4、选中“导航四”菜单，给它添加添加鼠标单击时触发事件，单击“显示”这个动作，显示“导航四的二级菜单”，让它向下滑动，单击“隐藏”这个动作，这次将“导航三的二级菜单”隐藏起来，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结10 8.2.1 设置文本行为1、拖曳一个矩形部件，调整一下它的大小，将它的标签命名为“content”，拖曳两个HTML按钮部件，文本内容分别为“设置文本一”和“设置文本二”。2、选中“设置文本一”按钮部件，添加鼠标单击时触发事件。单击“设置文本”这个动作，勾选“content”复选框，该部件有多种赋值方式：直接设置值、通过变量值设置和部件文字方式设值等。此处使用直接设置值的方式赋值，赋值为“中国我爱你”，如图所示。11 8.2.2 设置图像行为1、拖曳一个图片部件，用“face”图片来替换图片部件，标签命名为“image”；拖曳一个矩形部件，标签命名为“content”；拖曳一个HTML按钮部件，文本内容命名为“设置图像”。2、选中“设置图像”按钮部件，给它添加鼠标单击时触发事件。在第二步下面单击“设置图像”，在第四步下面可以看到只能给图片部件设置图像，添加的矩形部件没有显示出来，进一步说明只能给图像部件设置图像行为，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结13 8.3.1 单选按钮选中行为1、拖曳一个单选按钮部件，文本内容命名为“我是单选按钮”，标签命名为“单选”，再拖曳一个HTML按钮部件，文本内容命名为“选中”，利用快捷键复制制作另外两个按钮，分别命名为“未选中”和“切换选中”。2、单击“选中”按钮部件，添加鼠标单击时触发事件。单击它的时候，让单选按钮选中，在第二步下面单击“选中”，在第四步下面勾选“单选”这个复选框，可以看到选中的时候，值为true，如图所示。14 8.3.1 单选按钮选中行为3、选中“未选中”按钮部件，添加鼠标单击时触发事件。在第二步下面单击“未选中”，在第四步下面勾选“单选”这个复选框，当未选中的时候，它的值为false。4、选中“切换选中”按钮部件，添加鼠标单击时触发事件。在第二步下面单击“切换选中”，在第四步下面勾选“单选”这个复选框，它的值为toggle，如图所示。15 8.3.2 复选框选中行为1、拖曳一个复选框部件，文本内容命名为“我是复选框”，标签命名为“复选”；拖曳一个HTML按钮部件，文本内容命名为“选中”，复制制作两个按钮部件，文本内容命名为“未选中”和“切换选中”。2、单击“选中”按钮部件，添加鼠标单击时触发事件。单击它的时候，让单选按钮选中，在第二步下面单击“选中”，在第四步下面勾选“复选”这个复选框，可以看到选中的时候，值为true，如图所示。16 8.3.2 复选框选中行为3、选中“未选中”按钮部件，添加鼠标单击时触发事件。在第二步下面单击“未选中”，在第四步下面勾选“复选”这个复选框，当未选中的时候，它的值为false。4、选中“切换选中”按钮部件，添加鼠标单击时触发事件。在第二步下面单击“切换选中”，在第四步下面勾选“复选”这个复选框，它的值为toggle，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结18 8.4.1 一对一联动效果1、拖曳一个下拉列表框部件，标签命名为“name”，双击这个下拉列表框部件，单击“新增多个”，新增下拉选项，输入“小红”“小虎”和“小明”。2、拖曳一个下拉列表框部件，标签命名为“rank”，同样双击这个下拉列表框部件，单击“新增多个”下拉选项，输入“第一名”“第二名”和“第三名”，如图所示。19 8.4.1 一对一联动效果4、再新增一个用例。单击“新增条件”，这次让选中项值等于“小虎”，在第二步下面单击“设置选定的列表项”，勾选“rank”复选框，设置小虎为第二名。5、再新增一个用例。单击“新增条件”，这次让选中项值等于“小明”，在第二步下面单击“设置选定的列表项”，勾选“rank”复选框，设置小明为第三名，如图所示。3、选中“name”下拉列表框，给它添加选项改变时触发事件。单击“新增条件”，来设置条件，选择选中项值等于“小红”，在第二步下面单击“设置指定列表项”这个动作，勾选“rank”复选框，设置小红为第一名。20 8.4.2 一对多联动效果1、拖曳一个下拉列表框部件，标签命名为“省份”，双击这个下拉列表框部件，单击“新增多个”，输入“黑龙江省”“山东省”和“河北省”。2、拖曳一个下拉列表框部件，标签命名为“市区”，转换为动态面板，用多个状态来代表各省份的市区，在这个部件上单击鼠标右键，选择“转换为动态面板”，输入动态面板的名称为“市区”，复制3个状态“黑龙江市区”“山东市区”和“河北市区”，如图所示。21 8.4.2 一对多联动效果3、进入“黑龙江市区”状态里，双击这个下拉列表框部件，单击“新增多个”，新增多个黑龙江市区。4、进入“山东市区”状态里，双击这个下拉列表框部件，单击“新增多个”，新增多个山东市区。5、进入“河北市区”状态里，双击这个下拉列表框部件，单击“新增多个”，新增多个河北市区，如图所示。22 8.4.2 一对多联动效果6、编辑完状态内容之后，选中省份下拉列表框部件，给它添加选项改变时触发事件，单击“新增条件”，让选中项值等于“黑龙江省”，在第二步下面单击“设置面板状态”，在第四步下面勾选“设置市区”动态面板，选择“黑龙江市区”这个状态。7、设置山东省对应市区、河北省对应市区，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结24 8.5启用/禁用1、拖曳两个HTML按钮，重命名为“禁用”和“启用”，分别拖曳一个复选框、单选按钮、文本框（单行）、文本框（多行）、下拉列表框、HTML按钮，标签分别命名为“复选框”“单选按钮”“单行文本框”“多行文本框”“下拉列表框”和“按钮”。2、选中“禁用”按钮，添加鼠标单击时触发事件。弹出“用例编辑器”对话框，在第二步下面单击“禁用”，在第四步下面勾选“复选框”“单选按钮”“单行文本框”“多行文本框”“下拉列表框”和“按钮”复选框，将这些部件禁用，如图所示。25 8.5启用/禁用3、选中“启用”按钮，添加鼠标单击时触发事件。弹出“用例编辑器”对话框，在第二步下面单击“启用”，在第四步下面勾选“复选框”“单选按钮”“单行文本框”“多行文本框”“下拉列表框”和“按钮”复选框，将这些部件启用，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结27 8.6移动和置于顶层/底层1、拖曳3个标题2部件，文本内容为“导航一”“导航二”和“导航三”；拖曳一个矩形部件，宽度设置为140，高度设置为50，颜色填充为绿色（00CC00），放置在“导航一”菜单下面，置于底层，标签命名为“菜单选中背景”，作为导航菜单背景。2、选中“导航二”菜单，给它添加鼠标单击时触发事件。移动“菜单选中背景”到绝对位置（176,120），动画效果为线性，用时为500毫秒，如图所示。28 8.6移动和置于顶层/底层3、选中“导航三”菜单，给它添加鼠标单击时触发事件。移动“菜单选中背景”到绝对位置（318,120），动画效果为线性，用时为500毫秒，单击“置于顶层”，将菜单选中背景置于顶层。4、按F5键发布制作的原型。单击导航二菜单，会发现菜单选中背景移动到导航二菜单下面；单击导航三菜单，会发现菜单选中背景移动到导航三菜单位置，由于给它设置置于顶层，它会覆盖住导航三菜单，如图所示。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结30 8.7获得焦点和展开/折叠树节点获得焦点常用于文本框（单行）、文本框（多行），展开/折叠树节点常用于折叠或者展开树形结构。内 容导 航8.1 显示/隐藏8.2 设置文本和设置图像8.3 设置选择/选中8.4设置指定列表项8.5启用/禁用8.6移动和置于顶层/底层8.7移动和置于顶层/底层8.8小结小结Summary本章主要学习Axure的部件行为，使用部件行为制作交互效果，应当做到以下几点。01OPTION02OPTION03OPTION04OPTION1 学会Axure部件的显示与隐藏行为，通过切换方式控制部件的显示与隐藏交互效 果；通过变量方式控制部件显示与隐藏效果；实现多个导航菜单联动效果。2 学会设置文本和设置图像行为，通过多种方式对文本进行赋值，在不同触发事 件下显示不同图像。3 学会设置选择和选中行为，常用于制作单选按钮选中和复选框选中效果。4 学会设置指定列表项，学会制作下拉列表框的一对一联动效果和一对多联动效果。05OPTION06OPTION5 学会部件的启用和禁用、移动、置于顶层和置于底层等行为。6 学会部件的获得焦点、展开/折叠树节点行为。谢 谢 观 赏Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列极客学院海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务
展开阅读全文