在快速的工作环境中,我们现在都希望在工作的各个环节中提高效率。有些产品设计师们做产品原型时,会感觉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. perl 读取一个文件 替换文件的关键词 把数据替换到新的文件

    replace # replace #!/usr/bin/perl my @data = (); my ($fname ,$rp, $nfname)= @ARGV; my ($o, $n) = spl ...

  2. Ingeter与int的比较

    ,Ingeter是int的包装类,int的初值为0,Ingeter的初值为null.但是如果面试官再问一下Integer i = 1;int ii = 1; i==ii为true还是为false? 首 ...

  3. Nordic NRF51822 从零开始系列(外部设备片—MPU6050DMP驱动的移植)

    一.硬件准备             (1)开发板和软件参看 Nordic NRF51822 从零开始系列(一)开发环境的搭建             (2)mpu6050模块 二.前置知识     ...

  4. 2018ACM-ICPC焦作区域赛【反思总结】

    摸银结束回来,整个人都轻松了. 自CCPC打铁以来的这两个月真的太痛苦了. 俱乐部退役的退役停训的停训,好冷清啊. 前期切题很稳,前四题两个小时1A. 过了四题之后好像心态有点飘,然后开题就慢了,想题 ...

  5. element UI 导航栏根据路径来确定默认选中

    <template> <el-menu :default-active="activedMenu($route.path)" class="el-men ...

  6. [No0000C2]WPF 数据绑定的调试

    )DataBinding的表达式无效时,跟踪Debug的输出信息来查找原因(2)DataBinding的表达式有效,但是数据和期望值不同,此时可以在Converter中断点调试 :在VS输出窗口跟踪信 ...

  7. MySQL的一些概念

    数据库与服务器.客户端的层次关系 关于数据库 程序中需要存储数据的方式: 1 变量(列表.元组.集合.字典.嵌套) 2 外存(文件)(*.ini) 3 表格.Excel(*.xls.*.xlsx.*. ...

  8. 查询自己的apple购买历史

    https://secure1.store.apple.com/cn/order/list

  9. AlphaRacks 2018年黑五 VPS $3.99/年

    发现这么久了这些链接还是能购买.算是捡了便宜了. 搭建shadowsocks非常合算. 我买了6.99美元的那个. VPS OVZ构架 1核/125MB/5GB/800GB流量/1 IPv4/OVZ/ ...

  10. [development][thrift] RPC框架 thrift

    一: wiki:https://zh.wikipedia.org/wiki/Thrift 二: 来自IBM的介绍:https://www.ibm.com/developerworks/cn/java/ ...