在快速的工作环境中,我们现在都希望在工作的各个环节中提高效率。有些产品设计师们做产品原型时,会感觉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. Could not write file: C:\......\.classpath

    最近因为换操作系统,把项目从Mac系统copy到了win10下,出现了不少项目部署启动上的问题.最开始的一个问题是:Could not write file: C:\......\.classpath ...

  2. bitcoinj学习记录

    一.密码学相关资料 使用Bouncy Castle生成数字签名.数字信封 ECDH and ECDSA(ECC椭圆曲线算法3) 数字签名算法RSA与 ECDSA的比较与分析 Java密码学 非对称加密 ...

  3. Luogu 1494 - 小Z的袜子 - [莫队算法模板题][分块]

    题目链接:https://www.luogu.org/problemnew/show/P1494 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天 ...

  4. c# 字符串转为数字

    C#判断输入是否数字 /// <summary> /// 判断输入是否数字 /// </summary> /// <param name="num"& ...

  5. [性能优化] perf

    运行时性能分析工具 wiki:https://en.wikipedia.org/wiki/Perf_(Linux) linux wiki:https://perf.wiki.kernel.org/in ...

  6. [cloud][OVS][sdn] Open vSwitch 初步了解

    What is Open vSwitch? Open vSwitch is a production quality, multilayer virtual switch licensed under ...

  7. python摸爬滚打之day02----while循环,运算符,格式化输出

    1.while循环 1.1  结构:while +条件判断: while 循环体 else: 条件不成立时语句块 while...else...是一个循环整体,当循环条件成立时执行while循环体内容 ...

  8. python获取指定目录下特定格式的文件名

    之前一直用windows下的bat脚本获取一个目录下的指定格式的文件名,如下所示: dir *.jpg /b/s > train.set pause 十分简单,将这个bat文件放到你想要获取文件 ...

  9. 对vue生命周期的理解

    总共分为8个阶段,创建前/后,载入前/后,更新前/后,销毁前/后: 创建前/后:在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化.在cr ...

  10. systemctl介绍

    声明:本文转载自:systemd (中文简体) systemd 是 Linux 下的一款系统和服务管理器,兼容 SysV 和 LSB 的启动脚本.systemd 的特性有:支持并行化任务:同一时候採用 ...