摹客教程

摹客教程

摹客,让设计更快更简单

原型

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

 

设置跳转链接

1、自定义交互区域

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

自定义交互

2、图层创建交互区域

双击想要创建交互的图层,可快速生成交互区域,通过连接左侧项目树选择目标跳转页面,即可完成交互跳转链接的设置。

图层创建交互

当从插件上传的切图区域有变化时,上传画板之后,该区域创建的交互会自动同步到变化后的区域。当切图区域删除后,对应的的交互区域也会被删除。

改变形状裁剪

 

设置交互动画

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

设置交互动画

 

手势交互

在原型页面中,点击右侧属性面板的“触发”选项,可以看到有多种交互方式:载入中、点击、双击、长按、左划、右划、上划、下划。选择其中一种触发方式后,原型演示中使用对应的手势进行操作。

手势交互.png

 

设置返回链接

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

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

设置返回链接gif

 

延时自动跳转

点击右侧面板中的“延迟时间”选项,设置延迟时间。演示时,该页面就会延时自动跳转到目标页面。

设置延时跳转

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

删除跳转副本

 

设置固定区域

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

设置固定区域

 

克隆交互

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

克隆交互

 

交互提示

在原型模式下,项目树上左侧的蓝色三角,代表该页面已经做过了交互。

交互提示.png

 

演示设置

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

演示设置副本

 

交互演示

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

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

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

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

7-交互.png

 

 

相关阅读: