为了能让程序猿理解设计稿的逻辑关系,在用Sketch做UI设计的最后环节,最好再制作一下交互流程效果。交互流程图,不仅仅是给开发提供方便,还能让的甲方爸爸看得懂设计稿。

在Sketch 在49版本之前,有些小伙伴可能会选择安装Sketch插件来制作交互流程图,比如Craft、User Flows。

Craft 1.0.79 自动填充真实数据 - 马可菠萝​www.macbl.com

User Flows 2.3.4​www.macbl.com

Craft使用起来也特别方便,而且还可以上传InVision,然后在手机上快速预览效果。想知道Craft的使用方法可查看《设计师常用Sketch插件推荐之Craft基础教学》哦~

而现在,大家都知道,Sketch在49版本之后,添加了Prototyping功能,从此在Sketch中,也可以轻松创建交互流程图,快速预览你的设计。

无论是移动屏幕还是Web界面,都可以通过链接和热区,实现页面间的跳转,实现灵活、可点击交互原型,具体使用方法可查看《Sketch初级入门教学之使用Link工具制作交互原型》。

用Prototyping创建流程图后,可以直接在Sketch中预览。

或在iOS Sketch Mirror上预览,使用Sketch Mirror的方法可查看《Sketch Mirror 让设计稿同步手机的镜像神器》。

或上传到Sketch Cloud,就可以远程查看交互流程图,方便与客户或同事共享。

使用Sketch Prototyping工具制作的交互原型,页面转场方式比较简单,目前只有淡入淡出、右侧进入、下方进入、左侧进入、上方进入。

有些设计师可能会觉得这些转场效果无法满足他的需求,要追求复杂的交互流程图,可以选择使用第三方Mac交互原型软件。

比如在马可菠萝网站上最受欢迎的交互设计软件Principle,它提供了多种页面切换方式,甚至还可以自由的调整转场速度,制作出丰富的交互效果。

Principle 5.9 CR2​www.macbl.com

以及另一款交互设计软件Flinto,使用专门的动效设计器,创建微交互,完美的呈现循环动画和页面滑动效果。

Flinto 26.0.5 交互式设计软件 - 马可菠萝​www.macbl.com

使用了这么多的Sketch制作交互流程图的工具,小编觉得在效率方面,使用Sketch自带的Prototyping最方便,不需要再把设计稿导到别的工具里面痛苦的整理,而且没有学习难度。如果只是用来对接开发的,建议选择Sketch自带工具。如果甲方爸爸对动效有高要求的话,再选择第三方软件来制作就好。

转自Macbl.com

confluence 制作流程图_Sketch制作交互流程图,哪种工具最高效?相关推荐

  1. confluence 制作流程图_软件需求分析流程图绘制方法

    怎么利用软件绘制结构化程序流程图呢?下面小编就与大家分享一下借助流程图工具绘制编程语言结构化流程图的具体方法步骤,希望能帮助大家. ​ 方法/步骤 1 如果想借助流程图工具绘制结构化程序流程图,我们需 ...

  2. confluence 制作流程图_什么叫做流程图?如何制作规范的流程图?

    一开始,小编对于流程图可以说也是一脸懵逼的.但是呢对于不了解的东西总是有一种执念想要去"追究到底"的,从搜索流程这个词开始了解它的标准意思.再进一步去搜索不少流程图,就觉得其实还是 ...

  3. 中流程图快速制作_GitMind教程 | 业务流程图怎么做?

    流程图是表示算法.工作流或流程的一种框图表示,它以不同类型的框代表不同种类的步骤,每两个步骤之间则以箭头连接.这种表示方法便于说明解决已知问题的方法.流程图在分析.设计.记录及操控许多领域的流程或程序 ...

  4. 流程图的制作技巧分享,手把手教你如何画流程图?

    什么是流程图?流程图是思维导图的一种表现形式,流程图是流经一个系统的信息流.观点流或部件流的图形代表.在企业中,流程图主要用来说明某一过程.这种过程既可以是生产线上的工艺流程,也可以是完成一项任务必需 ...

  5. 超实用流程图制作技巧,制作流程图so easy

    现在学习思维导图的人越来越多了,但很多人不知道流程图也是思维导图的一种,今天小编就带大家来了解什么是流程图. 一.流程图是什么 流程图是思维导图的一种形式,是以流程和图组合而成的一种导图,一般运用于工 ...

  6. wps 流程图 跨页_流程图跨页(wps流程图怎么制作)

    流程图跨页(wps流程图怎么制作) 2020-05-24 14:54:08 共10个回答 1.鼠标点击表格任意位置,将光标定位到表格中,然后单击鼠标右键,在弹出的右键菜单中选择表格属性.2.弹出[表格 ...

  7. cad中简单流程图制作_如何制作流程图,word快速生成流程图技巧

    在工作中,熟练使用各种办公软件是面试的基础,开始可能只会用的Word.Excel等常用的软件.随着时间,工作经验的积累,你可能会发找到一个小主管.经理之类的,这时你就必须在加强常用软件使用的能力上,继 ...

  8. 如何制作易于理解的编程流程图

    在向初学者教授编程时,重要的是您的学生了解如何制作流程图.流程图是一种使用形状.线条和箭头来排列步骤的图表.它是一种表示程序中发生的输入.输出.决策和计算的可视化方式.将流程图作为课程的一部分有很多好 ...

  9. drawio改变图形颜色和背景色制作出炫酷的流程图

    前言 如何利用drawio制作出炫酷的流程图,当你利用drawio制作流程图的时候,白色的底板,白色的图形是不是看上去略微枯燥.下面教你怎样更换流程图样式. 教程 点击流程图空白地方 --- 选则样式 ...

  10. 流程图怎么制作?常见方式介绍

    流程图是一种重要的可视化工具,用于描述各种流程.过程.步骤等.在各个领域,流程图都被广泛应用,例如企业管理.软件开发.工程设计等.制作流程图不仅可以清晰地表达思想,还可以帮助人们更好地理解流程,提高工 ...

最新文章

  1. ONNX MLIR应用示例(含源码链接)
  2. centos7 安装mysql php,Centos7安装mysql与php的方法
  3. ConcurrentHashMap的源码分析-transfer
  4. STL的可持久化数组
  5. [html] HTML5的video怎样预加载(支持全量加载)?
  6. 使用javamail 发送邮件
  7. linux下DNS服务器的配置
  8. 【C/C++】内存基础
  9. 深度好文:迄今见过最好的职业规划的文章
  10. nginx 安全优化
  11. Spring事务传播机制详解
  12. 如何运用eclipse的编写Java程序
  13. Qt之Q_PROPERTY(新)
  14. 【OpenGrok代码搜索引擎】三、OpenGrok常用命令
  15. 计算机网络上有个红叉没无线,电脑连接不可用红叉,有无线网络但无法连接上wifi...
  16. Spring Boot@Bean
  17. centos7下升级GLIBC2.31
  18. Linux----vim、账号管理、进程管理、磁盘管理、java环境安装
  19. 导数与微分总复习——“高等数学”
  20. 《塔木德智慧全书》摘要(之二)

热门文章

  1. MaxScript读取excel数据
  2. DVP和MIPI接口的简单区别
  3. 信息收集工具之hping安装和使用
  4. BOS 系统 定区关联客户功能实现
  5. Oracle数据库的基本语句(最新)
  6. lg相乘公式_ln公式(lg公式大全)
  7. GifCam_CHS gif动画录制工具 下载
  8. 基于Qt的屏幕共享工具(含源码)
  9. 分布式文件系统的性能测试方法
  10. 语音信号预加重与去加重(Matlab+Keil)