页面交互
在摹客原型设计中,可以直接给整个页面设置交互,页面内任意位置都可以触发。
- 选中页面/组件,在右侧面板切换到“交互”选项后,点击“添加交互”。
- 在“页面”这一栏下方,可以通过搜索页面名称快速查找目标页创建交互。
- 首页:指左侧项目树上的第一个页面(注:若调整顺序,首页为新顺序中的第一个页面。)
- 上一页:指返回到上一步操作的页面。
另一种快速添加页面链接的方式,是通过点击组件/页面右上角的圆点连接左侧项目树上的页面,来添加页面链接。
命令交互
组件与组件间可以添加多种命令交互。
- 选中组件,在右侧面板切换到“交互”选项后,点击“添加交互”。
- 在“组件”这一栏下方,可以通过搜索组件名称快速查找目标组件创建交互。
选择交互目标后,有多种动作可选择:
- 移动:触发后,目标组件移动到任意位置。
- 调整尺寸:触发后,目标组件的尺寸会变为你设置宽、高。(若带有描边、阴影等属性,调整尺寸后,属性宽度不变)
- 缩放:触发后,目标组件整体会按照你设置的比例进行缩放。(若带有描边、阴影等属性,调整尺寸后,属性宽度也会一并缩放)
- 旋转:触发后,目标组件会按照你设置的角度进行旋转。
- 显示/隐藏:触发后,目标组件可以进行显示/隐藏的切换。
- 切换内容:仅内容面板组件有此交互命令,触发后,可以切换不同面板的内容。
- 切换状态:设定了自定义状态的组件有此交互命令,触发后,会展示组件不同状态下的样式。
- 滚动到:触发后,页面或面板等容器会滚动到目标组件所在的位置,可设置水平、垂直、同时三种滚动方式。
另一种快速添加组件间交互的方式,是通过点击组件右上角的圆点直接连接到另一个组件上来创建交互。
状态交互
摹客在线原型设计中,提供了多种状态:悬停、按下、选中、焦点、禁用等,还可以自定义新的状态。下面就来看看这几种已有状态各是什么样的效果吧!
悬停
利用悬停状态,可以轻松实现鼠标移入、移出的不同效果。
那么上面的效果是如何实现的呢?
第一步:选中组件,勾选状态弹窗中的“悬停”状态。
第二步:改变组件悬停状态下的填充颜色。演示时,就可以看到鼠标移入和移动的不同效果了!
按下
按钮组件通常会用到该状态。利用按下状态,可以轻松实现鼠标按下时、松开时的不同效果。
那么上面的效果是如何实现的呢?
第一步:选中组件,勾选状态弹窗中的“按下”状态。
第二步:改变组件按下状态的填充颜色。演示时,就可以看到鼠标按下时、松开时的不同效果了!
选中
复选框、单选按钮组等具有选中属性的组件,常常会用到该状态。演示时,将选项的默认状态设置为已选中。
那么上面的默认选中的效果是如何实现的呢?
选中组件,右上角弹窗中切换到“选中”即可,你还可以改变选中状态下文字的颜色。演示时,选项的默认状态就是已选中了!
焦点
输入框通常会用到该状态,来呈现输入状态和非输入状态的不同效果。
选中组件,右上角弹窗中切换到“焦点”,可以看到输入框的边框加粗了,这是默认的样式,你还可以改变边框或填充的颜色。演示时,就可以看到输入状态和非输入状态的不同效果了!
禁用
禁用是一种常用的状态,用来表示该组件不可用。
实现禁用的方式很简单,选中组件,点击右上角组件状态弹窗中“禁用”前面的圆点即可。
自定义状态
你还可以新添加一个自定义状态,来实现丰富的效果。
下面我们来看看利用自定义状态是如何实现鼠标移入、移出的不同效果的。
第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“自定义状态“。
第二步:选中组件,右上角弹窗中切换到“状态1”,改变组件的填充颜色。
第三步:将组件右上角的圆点拖向组件本身,触发方式选择“鼠标进入”,命令选择“切换状态”,在弹出面板的“状态”选为“状态1”;接着再重复前一步操作,触发方式选择“鼠标离开”,命令选择“切换状态”,在弹出面板的“状态”选为“正常状态”。
克隆状态
自定义的状态还支持克隆,鼠标Hover在状态名称上,右侧会出现三个图标:第一个是重命名,第二个是克隆,第三个是删除交互。点击“克隆”图标,即可快速生成一个一模一样的状态出来。
外部链接
外部链接也是原型演示中常常会用到的一种方式。在摹客在线原型设计中,选中组件,在右侧面板的扩展属性中可以看到外部链接项,可以添加外部链接或Axure项目。
*注意:对于线上版的摹客RP,用户在演示模式中点击摹客之外的链接会出现弹窗,提示即将跳转到第三方并注意安全,该弹窗不可关闭。私有部署的版本不会出现该提示弹窗。
添加Axure项目功能仅支持同一项目中的Axure文件。
你可以使用Axure插件上传文件,也可以进入项目,选择“原型稿”并手动上传Axure的HTML演示包。