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

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

1.dribbble上的原型图看不出逻辑

dribbble上面大多都是视觉设计师,他们有些原型作品并不是用来体现交互逻辑的,是完全按照视觉表现做出来的原型图(怎么美怎么画,怎么有逼格怎么画)纯展示性质,实用性并不高,当然dribbble的那种小图也看不清楚你想要了解的“逻辑”。

例如下图:

图片来自dribbble

虽然上图的原型图确实很好看,原型与原型之间的线也似乎把逻辑表达的很清晰,但是这样的交互原型图是好的吗?显然并不好。因为原型连接线错综复杂稍不留意就容易看错,使之看起来很复杂(里面也有大量的曲线,其实调节曲线也会花掉许多功夫)。整个交互文档显得过于庞大,一个画面里面要交代的事情过多,这使之你的文档的体验变得极差,虽然他看起来很美很规范的样子,但是他并不好用。并不能清晰的展现出交互逻辑。当然如果你想让你做出来的原型图美观一些,给看你稿子的人以愉悦感,让他们通过视觉感官认知到你的专业,也是给可以自己的稿子加分的,那么这样的话,当然是可以借鉴学习一下dribbble上的原型作品,但是切记不能为了美观而美观(花费大量时间和心思为了美观),保持基本的整洁大方,排版正确已经足够咯~

另外导致原型连接错综复杂的原因就是可能是一个页面跳转流程图里包含了不同的几个功能,在一个流程里塞入不同的功能,确实会让文档变得复杂不清晰。


2.以下是我在工作中采用的方式 仅供参考

例如我们要用原型来表达一个任务流程

首先我们会先有一个主流程(happy path) 主流程中一般不要出现报错、判断、与主流程不相关的特殊跳转、特殊的情况等。这个主流程的目的是为了让文档的使用者先了解此流程的主线,了解一个正确流程的流转路径。

好了,主流程咱们表达完了,接下来我们就要对主流程作一个补充。

我们再把一些特殊的情况以及主流程的一些分支流程分开来写,这样的话就让你的交互文档主次清晰,更容易表达我们的交互逻辑。切记不要在一个流程中过多的表现与之不相关的流程,一次只说清楚一件事情。


如上图从视觉上看流程是从左到右依次排开往后面走的,但不是绝对是这样的,有时候分支流程里其实也会有一些小的分支流程的情况,这时候可以根据实际情况用线直接连接出小的分支流程,切记避免杂乱,如果分支流程过于复杂,请拉出来单独画出。

如上图从视觉上看流程是从左到右依次排开往后面走的,但不是绝对是这样的,有时候分支流程里其实也会有一些小的分支流程的情况,这时候可以根据实际情况用线直接连接出小的分支流程,切记避免杂乱,如果分支流程过于复杂,请拉出来单独画出。

其实以前也有跟楼主一样的烦恼,自己的交互文档总是乱七八糟,这期间尝试了不同的做法。也许以后做法也可能改变,但是有一条不能变:那就是用自己的文档来清晰的表达出自己的设计想法,让使用自己文档的人有最好的体验【我们就是做用户体验的嘛 : ) 】

最后希望能帮助到楼主和看我回答的人 若有表达不对的 请提出 多多赐教 共勉 : )


----------------------------------------------------------------------------------------------

2017年2月21日补充更新

其实我上面主要说的是【场景流程图】每一个场景都是从左到右,有始有终,很清晰,每次直说一件事。让交互设计师的上下游都能够清晰的明白用户通过这个流程能够达到什么样的目的。但是开发同学用起来就缺了很多跳转逻辑,判断逻辑。

另外【页面流程图】就是以上我吐槽的dribbble上的图,这种图其实能够清晰的表达出页面跳转逻辑,适合跟开发同学进行沟通。但是缺点也是显而易见的,绘制的过程中容易让其过于复杂,可读性降低。

【场景流程图】和【页面流程图】两者都有优缺点,所以我们在做稿子的时候尽量把两个结合,让两者进行互补,合理运用让交互设计产出物更加的清晰明了。

这些都是我答完题之后又进行的一些总结思考,以前的答案略有偏激。

好了,希望大家都能给出最好的设计产出!