教程 > 交互 > 交互种类

交互种类

页面交互

在摹客原型设计中,可以直接给整个页面设置交互,页面内任意位置都可以触发。

  • 选中页面/组件,在右侧面板切换到“交互”选项后,点击“添加交互”。
  • 在“页面”这一栏下方,可以通过搜索页面名称快速查找目标页创建交互。
  • 首页:指左侧项目树上的第一个页面(注:若调整顺序,首页为新顺序中的第一个页面。)
  • 上一页:指返回到上一步操作的页面。

另一种快速添加页面链接的方式,是通过点击组件/页面右上角的圆点连接左侧项目树上的页面,来添加页面链接。

命令交互

组件与组件间可以添加多种命令交互。

  • 选中组件,在右侧面板切换到“交互”选项后,点击“添加交互”。
  • 在“组件”这一栏下方,可以通过搜索组件名称快速查找目标组件创建交互。

选择交互目标后,有多种动作可选择:

  • 移动:触发后,目标组件移动到任意位置。
  • 调整尺寸:触发后,目标组件的尺寸会变为你设置宽、高。(若带有描边、阴影等属性,调整尺寸后,属性宽度不变)
  • 缩放:触发后,目标组件整体会按照你设置的比例进行缩放。(若带有描边、阴影等属性,调整尺寸后,属性宽度也会一并缩放)
  • 旋转:触发后,目标组件会按照你设置的角度进行旋转。
  • 显示/隐藏:触发后,目标组件可以进行显示/隐藏的切换。
  • 切换内容:仅内容面板组件有此交互命令,触发后,可以切换不同面板的内容。
  • 切换状态:设定了自定义状态的组件有此交互命令,触发后,会展示组件不同状态下的样式。
  • 滚动到:触发后,页面或面板等容器会滚动到目标组件所在的位置,可设置水平、垂直、同时三种滚动方式。

另一种快速添加组件间交互的方式,是通过点击组件右上角的圆点直接连接到另一个组件上来创建交互。

状态交互

摹客在线原型设计中,提供了多种状态:悬停、按下、选中、焦点、禁用等,还可以自定义新的状态。下面就来看看这几种已有状态各是什么样的效果吧!

悬停

利用悬停状态,可以轻松实现鼠标移入、移出的不同效果。

那么上面的效果是如何实现的呢?

第一步:选中组件,勾选状态弹窗中的“悬停”状态。

第二步:改变组件悬停状态下的填充颜色。演示时,就可以看到鼠标移入和移动的不同效果了!

按下

按钮组件通常会用到该状态。利用按下状态,可以轻松实现鼠标按下时、松开时的不同效果。

那么上面的效果是如何实现的呢?

第一步:选中组件,勾选状态弹窗中的“按下”状态。

第二步:改变组件按下状态的填充颜色。演示时,就可以看到鼠标按下时、松开时的不同效果了!

选中

复选框、单选按钮组等具有选中属性的组件,常常会用到该状态。演示时,将选项的默认状态设置为已选中。

那么上面的默认选中的效果是如何实现的呢?

选中组件,右上角弹窗中切换到“选中”即可,你还可以改变选中状态下文字的颜色。演示时,选项的默认状态就是已选中了!

焦点

输入框通常会用到该状态,来呈现输入状态和非输入状态的不同效果。

选中组件,右上角弹窗中切换到“焦点”,可以看到输入框的边框加粗了,这是默认的样式,你还可以改变边框或填充的颜色。演示时,就可以看到输入状态和非输入状态的不同效果了!

禁用

禁用是一种常用的状态,用来表示该组件不可用。

实现禁用的方式很简单,选中组件,点击右上角组件状态弹窗中“禁用”前面的圆点即可。

自定义状态

你还可以新添加一个自定义状态,来实现丰富的效果。

下面我们来看看利用自定义状态是如何实现鼠标移入、移出的不同效果的。

第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“自定义状态“。

第二步:选中组件,右上角弹窗中切换到“状态1”,改变组件的填充颜色。

第三步:将组件右上角的圆点拖向组件本身,触发方式选择“鼠标进入”,命令选择“切换状态”,在弹出面板的“状态”选为“状态1”;接着再重复前一步操作,触发方式选择“鼠标离开”,命令选择“切换状态”,在弹出面板的“状态”选为“正常状态”。

克隆状态

自定义的状态还支持克隆,鼠标Hover在状态名称上,右侧会出现三个图标:第一个是重命名,第二个是克隆,第三个是删除交互。点击“克隆”图标,即可快速生成一个一模一样的状态出来。

外部链接

外部链接也是原型演示中常常会用到的一种方式。在摹客在线原型设计中,选中组件,在右侧面板的扩展属性中可以看到外部链接项,可以添加外部链接或Axure项目。

*注意:对于线上版的摹客RP,用户在演示模式中点击摹客之外的链接会出现弹窗,提示即将跳转到第三方并注意安全,该弹窗不可关闭。私有部署的版本不会出现该提示弹窗。


添加Axure项目功能仅支持同一项目中的Axure文件。

你可以使用Axure插件上传文件,也可以进入项目,选择“原型稿”并手动上传Axure的HTML演示包。