Sketch制作交互流程图,哪种工具最高效?

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

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

Craft - 自动填充真实数据

User Flows - 快速生成流程图

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

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

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

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

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

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

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

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

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

Principle - 界面交互设计软件

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

Flinto - 交互式设计软件

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348

推荐阅读更多精彩内容

  • 原型设计的发展历史经历了纸上原型、静态线框设计、到现在的可交互式原型。作为设计过程中最初始的阶段,设计师们对原型设...
    Soulless666阅读 2,161评论 1 6
  • 一.Sketch简介 Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设...
    轻思维阅读 6,498评论 3 15
  • 文/梅疏影 5. 阳历八月份,天闷热得很,下午,牵着墩儿去遛弯。一热心肠的邻居说,你家的狗身上毛这么多,该理理发了...
    淑影阅读 396评论 0 2
  • 20161224 0620pm今天第一次安装 RStudio.非常顺利,一步到位。满意。 https://www....
    taoza阅读 330评论 1 1
  • 文/冬月之恋 老人已步入耄耋之年,八十有三,看上去精神不错。他黑褐色的脸上时时漾着温情的笑意,在陌生人面前更是添了...
    冬月之恋阅读 1,317评论 12 44