在快速的工作环境中,我们现在都希望在工作的各个环节中提高效率。有些产品设计师们做产品原型时,会感觉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. GPU安装小结

    今天一起安装了4块1080的卡.也算有一些坑吧,记录一下. 1)1080显卡,驱动型号,tensorflow,cuda, cudnn 版本一定要一致.我的清单如下: ################# ...

  2. B. Salty Fish Go! -期望题(瞎搞题)

    链接:https://www.nowcoder.com/acm/contest/104/B来源:牛客网 题意:A few days ago, WRD was playing a small game ...

  3. Instruments之Activity Monitor使用入门

    Activity Monitor,官方解释为:(活动监视器)即实时显示CPU.内存和网络的使用情况,记录由虚拟内存大小测量的系统负载.用一句大白话来说,Activity Monitor类似Window ...

  4. <大话设计模式>工厂模式,策略模式

    第一章:工厂模式: 通过封装,继承,多态解耦合 业务逻辑和界面逻辑分开 用单独的类创造实例,工厂:创造实例 工厂模式还可以用反射来实现,nsstringFromClass UML类图 聚合表示一众弱的 ...

  5. ubuntu物理机上搭建Kubernetes集群 -- master 配置

    1. 将  kube-apiserver, kube-controller-manager, kube-scheduler,kubectl 拷贝到/usr/bin目录下 2. 安装etcd sudo ...

  6. jquery.ajax与axios及定义拦截器

    首先导入jquery和axios包 jquery.ajax function reg(){ var username = $("#username").val(); var pas ...

  7. C++ Reflection Library

    C++ Reflection Library https://www.rttr.orghttps://github.com/rttrorg/rttr

  8. linux内存不足,swap交换分区创建

    为什么需要swap 根 据Redhat公司的建议,Linux系统swap分区最适合的大小是物理内存的1-2倍.不过Linux上有些软件对swap分区得需求较大,例如要顺 利执行Oracle数据库软件, ...

  9. There are 0 datanode(s) running and no node(s) are excluded in this operation.

    向hadoop导入文件,报错 .... There are 0 datanode(s) running and no node(s) are excluded in this operation. . ...

  10. LED客显的类

    using System; using System.IO.Ports; namespace Common { public class LedHelper { ; private static st ...