摹客 Mockplus

摹客 Mockplus

让设计更快更简单

交互

摹客iDoc中,在交互版块可以设置页面跳转交互,快速制作高保真可交互原型。

 

设置跳转链接

按住鼠标在设计稿上绘制一个矩形的热区,再松开鼠标通过左侧项目树选择热区跳转的目标页面,即可完成交互跳转链接的设置。

1-交互.gif

 

设置交互动画

对设置好的交互链接还可以设置跳转动画,有9种动画样式可以选择,默认没有动画。还可通过下拉框或直接输入数值修改动画执行时长。

2-交互.gif

 

设置返回链接

在设置链接时将连接线拖动到“设置为返回链接”,便可设置返回链接。返回链接即指无论你从哪个页面跳转到该页面,点击返回链接都会原路径返回。

需要注意的是,返回链接不能设置动画,他的动画与进入该页面的动画是反向的,无须手动设置。

3-交互.png

 

延时自动跳转

点击页面右上角的设置自动跳转图标Clipboard Image.png,并拖拽连接线到项目树中的目标页面上,然后在动画设置面板上设置延迟时间。演示时,该页面就会延时自动跳转到目标页面。

0.gif

在左侧动画设置面板中,点击“删除页面自动跳转”图标Clipboard Image.png,即可删除该页面的自动跳转设置。

1.png

 

 

设置固定区域

点击右侧标尺上的设置固定区域图标Clipboard Image.png显示出裁切线,并往下/上拖拽,即可固定页面头部/底部。演示时,只有中间部分可滚动。

7889.gif

 

 

克隆交互

选中目标交互热区,按住alt与鼠标左键不放(mac上是Option+左键),便可快速克隆一个与原交互热区相同的热区。克隆前后的热区大小、目标页面、跳转动画都是相同的。

4-交互.gif

 

演示设置

点击右下角的设置图标image.png,便可对演示参数进行设置。设置选项有控制面板、工具条、链接区域的显示情况,还可设置默认的设备外壳(iPhone X/iPhone/Android/Pad可选)。

5-交互.png

 

交互演示

点击右上角的演示图标image.png,便可进入演示状态。

在工具条上点击分享图标image.png,便可获取分享链接。

在工具条上点击二维码图标image.png,便可显示二维码,使用手机扫码二维码便可以在手机上预览原型。

工具条上还有显示控制面板图标按钮、回到主页图标按钮、后退前进图标按钮,鼠标hover便可看到这些图标代表的含义。

7-交互.gif

交互演示是在新窗口打开的,如果你想返回修改交互设置,请关闭当前演示窗口或切换到交互设置窗口即可。

7-交互.png

 

 

相关阅读: