sketch做的原型图,如何更好地展示交互逻辑关系?

最近一直在用sketch做的原型图,用Notebook这个插件写了交互说明,每次导出整个模块给UI或开发看,因为不像Axure那样有跳转交互,开发人员都觉得不太方便,但我觉得用sketch做原型图,真的很好哦,所以我想请教一下,大家用sketch画的原型图,输出的文件是怎么样的啊!希望有用sketch做原型设计的小伙伴分享一些经验,多学习学习
关注者
592
被浏览
30423

18 个回答

可以在 Sketch 上安装这个插件 “Click-Thru Prototype”,它可以让你把按钮或者元素跟画板(artboard)链接起来,体现页面之间的跳转关系,并让你导出HTML文件,方便分享并点击跳转。关键是完全免费,也不需要注册,上传啥的,简单方便。


到Github下载:markhorgan/click-thru-prototype


1. 安装后,选择某个元素,例如一个按钮,从插件菜单里找到“Click——thru Prototype”选择“Link to Artboard”


2. 然后会看到弹出框,选择你想要跳转的画板即可。


3.完成所有的逻辑关系的链接以后,再次在插件的菜单里选择“Export to HTML”就可以生成可点击跳转的,也可以反映页面逻辑关系的文件了,也可以轻松分享。

需要注意的地方:画板的命名不要用中文,要不然生成的HTML文件会看不到图片(也就是每个画板)


不足的地方:页面多了,很容易忘了哪里有连接,哪里没有连接,希望未来可以有更新版本可以提现这一点。

作者:何亚虎
链接:sketch做的原型图,如何更好地展示交互逻辑关系? - 何亚虎的回答
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

这个问题得问我。当初我拿到sketch的时候简直激动坏了,以为交互界继axure之后终于诞生了一个次时代的交互制图工具。

然后我发现它没有绘制逻辑图的功能。

我疯狂的找了很久,上国外论坛各种求助,一遍遍的google上搜sketch插件。每隔一段时间就搜一次。

然后我终于接受了现实。

这特么的坑爹玩意儿,我被“sketch”这个名字给坑了,这压根就不是个画交互稿的工具,丫是个做UI的工具。

所以你就别提怎么更好的展现了,sketch压根就不能展现逻辑关系。

我跟你推荐omni graffle,过去4年我们团队一直都在用omni graffle,是经过各种大型商业项目千锤百炼证明确实是目前用着最顺手的交互制图工具了。

omni这个东西跟ps一样,有年头了,庞大、臃肿,而且根本不是专门为交互诞生的工具,连画户型图的功能都有。

所以我们团队一直在努力寻找可以代替的工具,而且过去这两年简直是交互设计工具井喷的时期,我们团队是比较喜欢尝鲜的,从briefs、sketch、principle、hype、Adobe新出的XD等等,全部试了一遍,都是深度使用(要么是在实际商业项目里用,要么是在项目演练里用)。

每次都是满怀希望的以为自己找到了,最后都失望了,还是用回omni graffle。

然后我也不推荐axure,因为我们在实际项目中逐渐放弃了制作那些可交互效果,因为不利于交付和沟通。

我们当初刚从axure转向omni graffle的时候,我给交互团队的参考指南写的是“移动端项目使用omni graffle,输出连线的页面流程图;web端项目使用axure,不得使用任何复杂的交互动态效果,对主要导航入口应做跳转链接。”

后来我们连web端都慢慢使用omni了。因为交互稿最重要的是反应布局、界面之间的逻辑关系和跳转关系,所以平铺图比sitemap要更合适,用连线来反应跳转关系比直接用鼠标点的要更合适,前者更一目了然。

低保真的交互效果在大部分项目中是没有太大意义的,真正有价值的是高保真效果,视觉稿出来之后再做的,可以直接给开发和领导看的demo(可以用AE、principle做)。这些都不是在交互制图的阶段考虑的。

唉。其实我们多么渴望能有一个好用趁手的专门用来画原型的工具啊。

楼上有个回答是用sketch画稿子,然后放omni里面连线,这完全就是浪费时间。一个中等规模的项目线框图至少都是上200+的页面,每个页面随时都会发生更新修改,来回在两个产品里倒来倒去,还不如在omni里直接做了。

当然,如果是做视觉稿的话,sketch工具还是非常赞的,我们团队现在有一部分APP的项目开始选择用sketch做了,至少是可以作为一个可选的技术方案去考虑了。(当时写这篇答案的时候sketch还没有那么火,现在我们的项目80%都是sketch做的,基本上已经是业内标准了。之前我们最担心的是用PS的客户打不开sketch源文件,所以一直不太敢用sketch做项目,但是现在已经不担心这个问题了,因为大家都用sketch)

而交互制图工具一直都不被业内重视,最近几年的热点其实也是在交互动画上,交互稿的绘图工具估计还要好几年才会有所发展,前几年出来一个axure已经非常难得了。

但是axure主要是用来做web端产品的,移动端明显就不行了,而且axure最近的发展也不太行了,一直都没什么动作,而且这么多年那界面丑的跟啥一样也不改。

然后楼上有人说principle的,可算了吧,当初我们刚拿到principle的时候,也激动的跟啥一样,然后在最近的两个项目里用principle搭建了完整的交互模型(就是把整个APP的功能都模拟出来,最后文件将近300M),在做的过程中那个BUG多的,我真是无力吐槽了。而且界面一旦多了,principle的内容结构就太复杂了,想修改东西很费劲,做到一半要交接给别人那更是不可能,其他人看了直接懵逼。

所以目前principle还只是作为个人玩玩,或者产品不复杂的,或者只做局部功能的演示,千万不要像我们一样傻乎乎的用principle把整个APP都做出来。

principle最近版本更新了component(组件)功能,结构上的问题会好一点,但是总体来说离真正成熟还差得远。

所以,我的结论就是,在实际商业项目的生产环境里,目前还没有发现任何一个靠谱的交互工具。老老实实用omni graffle、ai、viso这种老枪老炮吧,虽然不酷、不新潮,但是真好用,这些老家伙们直到现在还没死掉是有原因的。