在快速的工作环境中,我们现在都希望在工作的各个环节中提高效率。有些产品设计师们做产品原型时,会感觉sketch或者axure添加交互的方式不够快捷。下面就提供一种解决方案。

使用工具:墨刀。

交互链接及动画设置面板

使用墨刀可以非常方便地创建页面间链接,墨刀独创的拖拽链接方式,让页面间的链接关系清晰呈现眼前,要创建页面间链接,只需要选中组件,然后拖动组件右侧的小圆圈到目标页面或状态就可以了,如下图:
链接创建完毕后,会弹出链接设置面板。链接面板包含5个部分:手势、转场动画、动效时长、定时器以及相关跳转设置,下面我们来依次介绍这5个部分。
手势:
对应的手势操作可以触发页面跳转,可供选择的手势有7种:点击、上下左右滑动、长按、双击。
全局手势有8种手势可以选择:点按、上下左右滑动、长按、双击以及摇一摇。
最后一个钟表图标的手势为定时器,选择定时器后可设置页面自动跳转时间。
转场动画:
页面切换动画选择,共有17种特效可供选择,如果您不确定需要哪种效果,可以直接将鼠标移到动画上面预览切换效果。
动效时长:
设置不同的时长可直接影响动画的切换速度;如无特殊需要可不做设置。
定时器:
可以设定当前链接的自动跳转时间,到达时间后,即使用户没有任何操作,应用也会自动跳转到目标页面,适合制作定时轮播图、启动页等等。
重置目标页为初始状态:
此功能默认处于选中状态,若取消选择则代表不重置目标跳转页的初始状态。
举个例子:页面A为长页面,A中页面下部某组件链接至B页面;B中按钮设置链接返回A,并取消勾选重置目标页状态;页面返回后,A展示会跳转之前的内容或状态。(A为微信阅读页,跳出后返回A,可以继续之前的页面位置继续阅读。)

状态链接动画面板设置

状态链接与页面链接不同点在于新增了「延迟」设置选项,延迟时间是从手势触发时算起,到达设定时间后页面才会发生跳转。

初始动效

初始动效设置在组件设置面板中,可以设置组件的起始动效,内置30余种动效供选择(如渐隐、抖动、旋转等)。设置不同的动效时长、重复次数,可以达到不同的动效效果。

返回上一页

如果一个页面有多个入口,这时你可能会需要创建一个返回上一页的链接,当用户点击这个按钮时自动跳转到上一级的来源页面。
「返回上一页」位于工作区画布的左上角,外观为白色矩形悬浮区域。(如下图)
使用方法:
只需将页面内「返回」按钮的链接拖拽至「返回上一页」的区域内,即可完成链接设置。
此时,该链接的默认切换动画为页面“左移入”,你也可以根据需要修改移入效果。
注意:
当你处于首页时,设置「返回上一页」的链接是无效的,因为首页是没有地方可以返回的。

自定义动画

自定义动画可以通过使用母版及页面状态功能实现,如使用母版制作定时轮播图,使用页面状态功能制作 FAB 悬浮按钮动效。这是进阶功能,具体的操作案例可以看墨刀讨论区的教程进阶效果 。

如何比sketch和axure更方便地给原型做交互?的更多相关文章

  1. 用Axure RP7创建响应式原型教程

    自从几年前响应式技术开始应用时,创建响应式原型就成为了很多人苦恼的事情.响应式设计用一种非常优雅的方式处理为多种设备类型使用HTML和CSS编码的应用,但是提供给UX专业人士的原型工具却没有具备同样品 ...

  2. axure rp ----专业的快速原型设计工具

    Axure RPAxure的发音是』Ack-sure』,RP则是』Rapid Prototyping』快速原型的缩写.Axure RP Pro是美国Axure Software Solution公司的 ...

  3. ****如何优雅的用Axure装逼?高保真原型心得分享

    本文核心内容点:- 啥是高保真原型?(附简单说明原型)- Axure可以画出什么水准的高保真?(给示例,开启装逼模式)- 高保真原型图技巧:- 啥时候上高保真?适用场景 and 不适用场景 啥是高保真 ...

  4. Framer – 将视觉搞转换为更真实的动态原型

    Framer 是一个 JavaScript 框架,简化了创建现实原型,实现完整的3D效果.以一种简单,可读的和强大的方式定义交互和创建动画. 另外还有 Framer Generator  是一个桌面应 ...

  5. Axure与iPhone应用程序原型创建(五)

    在设计iPhone应用程序原型时,常常需要通过一个滑动的动画从一个屏幕切换到另一个屏幕.使用Axure RP进行设计时,可以将屏幕设计到动态面板里面,通过设置面板状态事件来实现.在下文中作者将通过一个 ...

  6. 7月新的开始 - Axure学习01 - 元件库、元件交互样式设置

    解释: Axure 属于原型制作里的霸道总裁 1.原型:原型模拟真实产品的功能与设计.用于在初期阶段测试产品的可行性与效果.来节省开发成本与周期. 2.线框图:在初期实现对产品的了解.实现产品的基本结 ...

  7. 用更云原生的方式做诊断|大规模 K8s 集群诊断利器深度解析

    背景 通常而言,集群的稳定性决定了一个平台的服务质量以及对外口碑,当一个平台管理了相当规模数量的 Kubernetes 集群之后,在稳定性这件事上也许会"稍显被动". 我们可能经常 ...

  8. 使用Axure RP设计Android界面原型

    转至@徐州瑞步科技(http://www.cnblogs.com/brooks-dotnet/archive/2013/06/05/3119923.html) 资源地址:http://pan.baid ...

  9. Axure 蚂蚁设计团队组件库 让交互稿美美"搭"

    Github资源:https://github.com/ant-design/ant-design-pro English | 简体中文 技术实践篇 https://pro.ant.design/do ...

随机推荐

  1. mongodb三种存储引擎高并发更新性能专题测试

    背景说明 近期北京理财频道反馈用来存放股市实时数据的MongoDB数据库写响应请求很慢,难以跟上业务写入速度水平.我们分析了线上现场的情况,发现去年升级到SSD磁盘后,数据持久化的磁盘IO开销已经不是 ...

  2. 转载:浅析@PathVariable 和 @RequestParam

    在网上看了一篇很好的文章,讲的很清楚明了,说到了点子上(转自:https://blog.csdn.net/chuck_kui/article/details/55506723): 首先 上两个地址: ...

  3. |与|| ,&与&& 分别表示什么意思?

    | & 表示位运算,针对数值进行的运算,例如 3 | 2 .78 & 99,其结果仍然应为值数 || && 表示逻辑运算,||表示或者的意思,&& 表示 ...

  4. 洛谷试炼场-简单数学问题-P1088 火星人

    洛谷试炼场-简单数学问题 A--P1088 火星人 Description 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法 ...

  5. IAR 跳转路径错误

    拷贝的代码 右键跳转的时候提示路径错误,是因为别人编译的中间文件 .ojb文件在你的电脑上不一样,拷贝代码后第一件事就是清楚obj中间连接文件,然后重新在你的电脑上编译.

  6. ionic cordova screenshot 使用和操作

    如何调用cordova 中的screenshot插件进行截图 首先添加 ionic cordova plugin add com.darktalker.cordova.screenshot npm i ...

  7. [daily] 使用左右对比查看diff 格式的文件

    如题: Given your references to Vim in the question, I'm not sure if this is the answer you want :) but ...

  8. [skill] C与C++对于类型转换的验证

    不多说了,代码说明一切. /home/tong/Src/copyleft/test [tong@T7] [:] > gcc .c /home/tong/Src/copyleft/test [to ...

  9. linux清空历史记录

    前几天弄了个Linux服务器做网站,发现在不同终端登陆时,上下键都会出现一堆无用的命令,搜了一下解决方法,做个笔记. 在Linux中,每个用户目录下都有一个.bash_history文件用于保存历史命 ...

  10. opencv车流量统计算法

    #include "cv.h" #include <cxcore.h> #include <highgui.h> #include <cvaux.h& ...