原型设计工具Axure RP新手教程（三）：隐藏和显示小部件教程

在文本中，您将学习如何在Web浏览器中动态隐藏和显示窗口小部件 您还将学习如何设置动画，弹出菜单和灯箱。

在文本中，您将学习如何在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微信公众号了解产品的最新动态及最新资讯。

>
标签：

来源：慧都