为了能让程序猿理解设计稿的逻辑关系,在用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

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

  1. sketch软件_Sketch软件怎么用?怎么提升Sketch软件技巧?

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 Sketch软件怎么用?怎么提升Sketch软件技巧?SKETCH是一款十分优秀的UI设计软件,虽然它不如PS和AI ...

  2. python写图片爬取软件_python制作微博图片爬取工具

    有小半个月没有发博客了,因为一直在研究python的GUI,买了一本书学习了一些基础,用我所学做了我的第一款GUI--微博图片爬取工具.本软件源代码已经放在了博客中,另外软件已经打包好上传到网盘中以供 ...

  3. sketch软件_Sketch又又又又卡了,设计师你的电脑总是卡怎么办?

    大家好,这里是贝兹岚,野生互联网设计师一枚,嗯 作为一枚互联网行业的设计师,贝兹岚(以下简称贝叔)可以说是Sketch的重度使用者了,几乎每天都要打开好几遍,对于Sketch,贝叔可以说是又爱又恨. ...

  4. sketch钢笔工具_Sketch和Figma,不同的工具等于不同的结果

    sketch钢笔工具 We like to compare the difference between various design programs and debate about which ...

  5. 软件观念革命:交互设计精髓_UI设计师、交互设计师、产品经理必备软件技能之Sketch...

    Sketch基础软件知识 1.1 软件介绍与安装 1.概述: Sketch 是一款适用于所有设计师的矢量绘图应用.基于矢量的绘图方式也是目前进行网页.图标以及界面设计的最好方式.除了矢量编辑的功能之外 ...

  6. flinto导出html,Sketch绝佳搭配!30秒制作交互原型的次时代神器Flinto

    编者按:30秒出交互原型,5分钟搞定交互动画!今天@Payshare 给大家安利一款超实用的交互原型制作神器,亮点有3:整体交互原型制作,与Sketch无缝配合,制作速度快快快到难以想象,内附一个教程 ...

  7. 实时数据流程图图表软件_适用于Linux的9种流程图和图表绘制工具

    实时数据流程图图表软件 流程图是一种形式化新项目方法的好方法. 我的团队在他们的头脑风暴会议中将它们用作工具,并且一旦构思事件结束,流程图就成为了项目方法论(至少在有人更改之前). 我的项目方法流程图 ...

  8. python开源流程图软件_适用于Linux的10种最佳流程图和图表软件

    图表是我们联系信息并处理其重要性的好方法. 它们有助于沟通关系和抽象信息,并使我们可视化概念. 流程图和图表工具可用于从基本工作流程图到复杂网络图 ,组织图, BPMN ( 业务流程模型和表示法 ), ...

  9. 交互流程图用什么软件做?

    产品经理在进行产品设计等工作时,会使用交互流程图来提高团队效率.这种流程图适用于传达方案.评审目标等需要团队协作的场景,视觉设计师.产品开发等工作团队只需看图便能迅速理解图示要义,极大地节省了理解时间 ...

  10. sketch软件_因远程协作大火的Figma,到底有多好用,会取代Sketch的地位吗?

    这是彩云译设计的第112篇文章 原文:https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a 作者:Ahmed Abdelmageed ...

最新文章

  1. SAMBA的一些特殊设置
  2. 考前自学系列·计算机组成原理·补码定点加减运算和溢出判断,浮点数的加减运算,原码的乘法
  3. 张亚勤:从信息化生存到互联网化生存 百度重构互联网安全防护体系
  4. Spring Hibernate教程
  5. Python | 在列表中指定索引处添加元素的程序
  6. 雷林鹏分享:C# 匿名方法
  7. c# 基础连接已经关闭: 连接被意外关闭,错误的解决
  8. html运行显示无法发布,我无法发表文章当我打开发表文章,总在网页的左下角出现网页发生错误 爱问知识人...
  9. 【iOS-Cocos2d游戏开发之二十一 】自定义精灵类并为你的精灵设置攻击帧以及动画创建!【二】...
  10. 201503-2-数字排序
  11. 正态分布的前世今生:误差分布曲线的确立
  12. NGN学习笔记7——NGN的服务质量
  13. 【数学建模】相关软件
  14. 局域网文档服务器搭建,局域网服务器的搭建.pdf
  15. 关闭 电脑 ctrl +alt +方向键 旋转屏幕快捷键
  16. 什么是ESP/MSR 分区,如何建立ESP/MSR 分区
  17. java.util包
  18. 《嵌入式 – GD32开发实战指南》第19章 程序加密
  19. 解决双硬盘下一个windows两个linux操作系统的grub引导问题
  20. 斐讯R1音箱安装悟空遥控,并实现DLNA推送

热门文章

  1. mPush实战笔记4安装mpush
  2. 开关型直流电源比线性直流电源效率高的原因?
  3. 将多个txt文件合并成一个
  4. spring之AOP
  5. iPhone X改11Pro在线/免越狱QQ空间任意iPhone机型虚拟定位
  6. java——7个小案例
  7. 项目管理十大知识领域之项目成本管理
  8. 安卓QQ协议抓包教程
  9. iOS gzip解压
  10. dd命令测试硬盘读写速度