教程 > iDoc > 基础教程 > 原型演示

原型演示

摹客iDoc中,可以通过设计稿图层快速建立热区,固定设计稿的顶部和底部;8种触发方式,15种交互动画快速设置;更有返回链接、首页链接、外部链接等实用功能,快来学习下吧。

原型

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

设置跳转链接

1、自定义交互区域

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

2、图层创建交互区域

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

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

设置交互动画

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

设置交互动画

手势交互

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

手势交互

设置返回链接/返回首页/外部链接

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

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

将连线拖动至其它两项,可设置返回首页链接及外部链接。(注:设置外部链接时,在右侧属性面板添加链接地址。)

延时自动跳转

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

设置固定区域

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

克隆交互

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

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

交互提示

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

交互提示

演示设置

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

交互演示

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

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

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

演示

摹客iDoc中,点击顶部导航栏右侧播放按钮,即可演示交互原型。

示例

导航条

导航条中,操作依次为“显示控制面板”、“回到首页”、“后退/前进”、“缩放器”、“退出演示”。

Web项目:

在手机项目中,点击二维码图标,会自动生成一个演示二维码,可以用手机扫描查看演示。注:该功能仅手机项目可用。

若要将原型分享给其他人预览,点击顶部导航栏右侧的分享图标即可获取分享链接。

从首页/当前页演示(新)

点击右上角的播放按钮,默认从首页开始演示。点击播放按钮右侧的下拉三角,可选择从当前页开始演示。

相关操作

左上角复选框,可以选择勾选/取消勾选”始终显示链接区域“、”鼠标经过时,显示链接区域“。

Web项目:

在手机项目中,点击设备外壳选项,可选择Android、iPhone、iPhone X、Pad等演示外壳。

导出

摹客iDoc支持下载离线演示包,可以将所有的原型交互下载下来,交互演示不再依赖网络。

下载离线演示包

点击菜单栏右侧的下载标志下载,选择“下载离线演示包”。

离线演示包

在弹出面板中,可以设置演示的Logo、设备外壳。还可以选择显示控制面板、显示导航条、始终显示链接区域、鼠标经过显示链接区域的选项。勾选完设置后,演示时会适应该设置。

屏幕快照 2018-12-29 下午4.23.57

完成设置后,点击下载,即可开始下载离线演示包。

屏幕快照 2018-12-29 下午4.06.37

默认下载的是zip压缩包格式,解压后打开文件夹,打开index.html文件,无需联网即可完成演示。

屏幕快照 2018-12-29 下午4.12.28

还可将下载的离线包放入摹客原型托管, 发布一个链接,就能分享和协作。

上一章节 柔性工作流
下一章节 文档