在快速的工作环境中,我们现在都希望在工作的各个环节中提高效率。有些产品设计师们做产品原型时,会感觉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. 体验 ASP.NET Core 集成测试三剑客:xUnit.net、TestServer、EF Core InMemory

    这是昨天解决的一个问题,针对一个 web api 的客户端代理类写集成测试,既要测试 web api,又要测试 web api 客户端. 测试 web api,就要在运行测试时自动启动 web api ...

  2. spring @Order标记

    @Order标记定义了组件的加载顺序. @Order标记从spring 2.0出现,但是在spring 4.0之前,@Order标记只支持AspectJ的切面排序.spring 4.0对@Order做 ...

  3. Transfrom笔记

    1.在不是以左上角为缩放点进行缩放时,其实比例不能为0,因为0将导致缩放可能出现动画效果不可控,务必选取0.1等较小值来变化

  4. 在链表中,元素的"位序"概念淡化,结点的"位置"概念淡化

    在链表中,元素的"位序"概念淡化,结点的"位置"概念淡化 1 结点的描述与实现 C语言中用带指针的结构体类型来描述 typedef struct Lnode { ...

  5. iOS中类、元类、isa详解

    类相信大家都知道是什么,如果看过runtime的源码或者看过相关的文章对isa肯定也不陌生,不过元类(meta class)大家可能就比较陌生了.不过大家也不要担心,我会细细道来,让大家明白它到底是个 ...

  6. PHP进阶-网络编程基础概念

    以太网协议图: 以太网协议: 发送header(发送至mac地址,接收者mac地址).data到网线中所有连接的计算机,然后每个机子接收数据包的时候都是用以太网协议的, 然后解析header头,看是否 ...

  7. 关于lis的方案数

    求lis的时候呢,我想n^2的做法是很简单的,二分的话除了最长不上升或最长不下降子序列不好求之外(毕竟要注意细节)于是从中发现了,求lis真正的序列也是十分不好求出的尤其是字典序最大的不上升序列了,什 ...

  8. odoo权限管理

    Odoo的权限的核心是权限组(res_groups).对每个权限组,可以设置权限组的菜单表示,对象表示,记录规则表示,字段表示. 1.菜单/对象级别 设置哪些人可以访问哪些菜单/对象,对象的访问权限包 ...

  9. 洛谷P4198 楼房重建 单调栈+线段树

    正解:单调栈+线段树 解题报告: 传送门! 首先考虑不修改的话就是个单调栈板子题昂,这个就是 然后这题的话,,,我怎么记得之前考试好像有次考到了类似的题目昂,,,?反正我总觉着这方法似曾相识的样子,, ...

  10. oracle创建索引表空间

    Oracle 的索引可分为5种,它们包括唯一索引.组合索引.反向键索引.位图索引和基于函数的索引.1.创建索引的标准语法CREATE INDEX 索引名 ON 表名 (列名)TABLESPACE 表空 ...