多语言展示
当前在线:1125今日阅读:2今日分享:38

如何使用摹客iDoc原型交互功能?

摹客iDoc是一款简单、便捷的智能ui标注工具,在其原型版块可以设置页面跳转交互,快速制作高保真可交互原型。
工具/原料

摹客iDoc

方法/步骤
1

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

2

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

3

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

4

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

5

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

6

设置返回链接/返回首页/外部链接在设置链接时将连接线拖动到“设置为返回链接”,便可设置返回链接。返回链接即指无论你从哪个页面跳转到该页面,点击返回链接都会原路径返回。需要注意的是,返回链接不能设置动画,它的动画与进入该页面的动画是反向的,无须手动设置。将连线拖动至其它两项,可设置返回首页链接及外部链接。(注:设置外部链接时,在右侧属性面板添加链接地址。)

7

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

8

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

9

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

10

对已经创建好的交互右键选择复制(或Crtl+C),在本页面或其它页面粘贴,可快速创建效果相同的交互。

11

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

12

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

13

交互演示点击右上角的演示图标,便可进入演示状态。在工具条上点击二维码图标,便可显示二维码,使用手机扫码二维码便可以在手机上预览原型。工具条上还有显示控制面板图标按钮、回到主页图标按钮、后退前进图标按钮,鼠标hover便可看到这些图标代表的含义。

推荐信息