原型设计工具Axure RP入门教程(十三):拨动开关教程

翻译|使用教程|编辑:况鱼杰|2020-04-09 16:48:31.353|阅读 76 次

概述:在本教程中,您将学习如何创建一个在打开和关闭时都会改变颜色的切换开关。

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

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

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


在本教程中,您将学习如何创建一个在打开和关闭时都会改变颜色的切换开关。

小部件设置

建拨动开关的关闭状态

  • 打开一个新的RP文件,然后在画布上打开Page 1。
  • 将Box 3小部件拖到画布上。将其宽度设置为50,将其高度设置为20。在样式窗格中,将其角半径设置为25。
  • 接下来,将一个椭圆小部件拖动到画布上,并将其宽度和高度都设置为30。
  • 使用顶部工具栏中的对齐选项,将椭圆拖到矩形的顶部,并在左侧和中间对齐。这对小部件将为切换开关的关闭状态。
创建拨动开关的打开状态
  • 选择小部件,复制它们,然后将它们的副本粘贴到画布上。
  • 将重复椭圆的填充颜色设置为蓝色,并将其与矩形小部件的右边缘对齐。这对小部件将是拨动开关的打开状态。

将切换小部件放置在两个状态的动态面板中


  • 选择关闭窗口小部件对,右键单击选择,然后在上下文菜单中选择创建动态面板。
  • 在大纲窗格中,将光标悬停在新的动态面板窗口小部件的项目上,然后单击右侧的添加状态图标。
  • 仍在轮廓窗格中,选择上椭圆和矩形,然后将它们拖到右侧以使其在状态2下缩进。这会将它们添加到该动态面板状态并在画布上打开该状态。
  • 将上椭圆和矩形移动到画布上的(0,0)。
  • 单击画布右上方的关闭,或按ESC退出状态编辑模式。

单击时,将动态面板的状态设置为下一步

  • 选择动态面板状态小部件,然后在交互窗格中单击新建交互。
  • 在出现的列表中选择Click或Tap事件,然后选择Set Panel State操作。
  • 在目标下拉列表中选择此小部件。
  • 在状态下拉列表中,选择下一步。然后选中出现的从最后到第一包框。这将使动态面板在达到最后一个状态后返回其第一个状态。
  • 单击确定以保存操作。

预览互动

预览页面,然后单击切换开关将其打开和关闭。




想要获得Axure RP更多资源、正版授权的伙伴,请咨询【慧都客服】了解

关注慧聚IT微信公众号☟☟☟,了解产品的最新动态及最新资讯。

慧聚IT




标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Axure Software

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Axure RP

产品原型设计、网站原型设计、应用程序设计的主流工具与软件

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat