彩票走势图

原型设计工具Axure RP新手教程(三):隐藏和显示小部件教程

翻译|使用教程|编辑:况鱼杰|2020-01-09 10:37:04.600|阅读 1204 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP


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

慧聚IT

>
标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP