原型设计工具Axure RP新手教程(三):隐藏和显示小部件教程
Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。
在文本中,您将学习如何在Web浏览器中动态隐藏和显示窗口小部件。您还将学习如何设置动画,弹出菜单和灯箱。(可点击此处观看视频)
小部件设置
-
打开一个新的RP文件,然后在Pages(页面)窗格中双击Page1(页面1)以在画布上将其打开。
-
从Libraries(库)窗格中将一个占位符小部件和三个按钮小部件拖到画布上。
-
将按钮上的文本更改为Show(显示), Hide(隐藏), 和Toggle(切换)。
-
通过选择占位符并单击样式工具栏或Style(样式)窗格中的Hidden(隐藏)图标来隐藏占位符。
单击按钮时设置占位符的可见性
显示按钮
-
选择Show(显示)按钮,然后在Interactions(交互)窗格中单击Click(单击)或Tap(点击)→Set Visibility(设置可见性)。
-
在出现的下拉列表中选择占位符小部件。
-
保持显示为选中状态,然后单击确定以保存操作。
隐藏按钮
-
使用Hide(隐藏)按钮重复上述步骤,但是选择Hide(隐藏)而不是Show(显示)。
切换按钮
- 使用Toggle(切换)按钮重复上述步骤,但是选择Toggle(切换)而不是Show(显示)。
预览互动
-
预览页面,然后单击Show(显示)按钮以显示隐藏的占位符。
-
单击Hide(隐藏)按钮以再次隐藏占位符。
-
单击切换按钮几次以交替显示和隐藏占位符。
可点击隐藏和显示小部件观看视频。
附加信息和提示
动画制作
-
显示和隐藏窗口小部件时,可以使用多种动画,包括淡入淡出,滑动和翻转。这些可在Show/Hide(显示/隐藏)操作的Animate(动画)下拉列表中找到。 在下拉列表中选择动画的类型,然后在其旁边的字段中设置动画的持续时间(以毫秒为单位)。
向前走
-
当显示带有Show(显示)或Toggle(切换)选项的小部件时,您可以选中More Options(更多选项)下的Brin to Front(置于最前面)复选框,以将小部件自动带到设计的前面。这样可以确保显示时没有小部件与之重叠。
灯箱
-
当使用Show(显示)选项显示小部件时,您可以选择使其显示为灯箱。在Show/Hide(显示/隐藏)操作底部的More Options(更多选项)下的下拉列表中,此选项可用。
-
灯箱小部件的后面带有彩色蒙版,覆盖了设计的其余部分。 单击此蒙版上的任何位置将再次隐藏小部件。您可以使用选中Treat as Lightbox(作为灯箱对待)选项时出现的Background Color(背景颜色)颜色选择器来更改蒙版的颜色和不透明度。
弹出菜单
-
当使用Show(显示)选项显示小部件时,可以选择将其视为弹出窗口。 只要光标停留在弹出窗口小部件或显示它的窗口小部件上,它就可见。 一旦光标离开窗口小部件的区域,弹出窗口小部件将自动再次隐藏。
-
在Show/Hide(显示/隐藏)操作底部的More Options(更多选项)下的下拉列表中,此选项可用。
例如,当您查看导航菜单的子菜单项或查看页面元素的工具提示时,您可能会看到弹出行为。
推/拉小部件
-
显示窗口小部件时,您可以选择在页面的右侧或右侧pushed(推动)页面上放置其他窗口小部件,以为显示的窗口小部件腾出空间。隐藏窗口小部件时,可以选择在页面上或向左pulled(拉)其他窗口小部件以填充隐藏窗口小部件留下的空白。
-
在Show/Hide(显示/隐藏)操作底部的More Options(更多选项)下的下拉列表中,此选项可用。
想要获得Axure RP更多资源、正版授权的伙伴,请咨询了解
关注慧聚IT微信公众号???,了解产品的最新动态及最新资讯。
>