【翻译】Sketch 原型设计伴侣|提升创造力的必备工具

设计 Schuller 2016-08-15 20:50:18 ⋅ 最后回复由 子涧 2016-08-22 16:45:13 523 阅读

原型设计设计和开发过程中的作用越来越重要,已经成为现代设计师和开发者工作中不可或缺的一部分。

在当代,原型工具领域变化迅速,我们手头可用的工具也是一大把,以至于我们都有点不知所措。

file

设计圈和开发界一直都有这样的争论,“我们的设计工具都已经达到饱和了吗?什么时候工具才算足够多?” 我个人觉得选用哪些工具都没问题。App Store多了一款拼图游戏,我们会抱怨吗?不见得吧。我算了算,共有15,489款这种类型的游戏 (这数字是我自己瞎编的,但这样的游戏我知道有很多。谁有具体的数字,我给他加分)。

在工作中,随便选一个工具,只要适合手头的工作,自己用着舒服就成。有人(包括我在内)倾向于使用桌面工具,而有的就更喜欢使用云平台工具,后者已经日渐流行起来。

一直都使用一款应用是不可能的,我自己以及其他一些设计师在日常工作中都会组合使用这些工具,当然你也可以吆。
这里,我简单介绍下我常用到的一些原型设计工具,大部分时间用的都是这一些,感觉效果还不错,对于配合使用Sketch而言很合适。

Flinto

使用Flinto可以创建一些小的交互和动画,实现多屏app的整体流动(comprehensive flows)。Flinto遵循的美学与Sketch类似,甚至还提供了一些跟Sketch中类似的工具。让人吃惊的是,它甚至还有一些同样的键盘快捷键。仿佛像是从一个模子里出来的,但是这是一个加分项。

对于新手而言,直观明了,当用习惯了后就感觉特别顺手,菜单、工具和选项都变成最小化。用它完全可以设计出令人印象深刻的原型,避免陷入特点过多的境地,分散用户注意力。

【视频】http://v.youku.com/v_show/id_XMTY4NTc0OTIwOA==.html

Flinto最重要的特点就是Transition Designer。如果你是一名讨厌时间轴和编程的设计师,那么Transition Designer特别切合你的心意。Flinto很强大,精确控制每一层,能够制作出一些非常复杂的转换,对于整个项目都很有用。

file

Principle

Principle和Flinto有很多相似的地方。首先,最明显的一处就是模仿了Sketch的美学,这一点与Flinto相比有过之无不及。

Principle是这样一种为数不多的原型设计工具,更多地关注于转换制作的时间轴线路以及Sketch屏幕间的交互。有的人喜欢这种工作方法,有的人就更喜欢使用像Flinto中的Transition Designer或者Framer中的Auto-Code(自动编程)途径这种更直观的方法。在我测试的所有关注于时间轴的工具中,Principle制作的最直观。

【视频】http://v.youku.com/v_show/id_XMTY4NTQ3MDk4NA==.html

使用Principle可以方便地为多屏app制作流动,或者就专注于微交互,这两种任务它都可以胜任。与本文介绍的其它工具相比,Principle缺少一点润色( lacks a little polish)。但是作为原型设计大家庭的新成员,升级也是要花上一段时间的。

file

Framer

Framer与Flinto和Principle有点不同,主要是要自己写代码来实现结果。但是,即使你只是位设计师,也不会碰壁的,因为就算是没有经验的人也很容易上手Framer.

利用Framer,设计师可以熟练地进行对象的创建和操作,同时仍保有手动编程所带来的强大和灵活性。Framer最擅长的就是为使用Sketch创作的设计制作最为详细的交互。只要你能想到的,Framer都制作得出。与本质上更为线性的原型设计工具相比,Framer要高好几个层次。而且,Framer中加入了'Auto-Code'(自动编码)功能,这大大降低了其入门门槛。

【视频】http://v.youku.com/v_show/id_XMTY4NTc1NDcwMA==.html

我喜欢Framer的一点是它可以教设计师如何写代码,或者至少能让设计师对操作和代码之间的交互有更深的了解。这使得在设计师控制项目到开发后期阶段的时候,设计师与工作的关系更为密切。

Framer目前有iOS app可以使用,迭代和测试之间的工作流程也变得更加令人愉快。

iOS版Framer功能包括实时预览、离线使用和受安全链接保护的分享等。使用Framer,你就等于拥有了一个完整的移动原型设计工具包。

file

Marvel

过去很长一段时间,我都尽量不用Marvel。

从通常的渠道中,我听说过Marvel很多次了,也浏览过他们的网站和视频广告无数次(他们的网站太棒了,不看?根本把持不住好伐!)

第一次使用Marvel,并不是因为客户的项目,也不是因为和开发者一起工作完成我的设计,而是制作一个Medium教程系列,我要找一些更轻,对初学者友好的东西加入到我简短的教程系列中,就这样找到了Marvel。

【视频】http://v.youku.com/v_show/id_XMTY4NTc0OTA2MA==.html

Marvel的功能不是最丰富的,但是所具有的功能都很强大,而且可能是这次所罗列的几个工具中最容易上手的工具之一,尽管上手使用就成。像Atomic(下面会介绍)一样,只需要直接使用简单直观的Canvas在Marvel中创建屏幕就行。如果你想迭代的更快,利用Marvel这一功能非常有用。

file

Proto.io

和我前边提到的原型设计app不一样的是,Proto.io完全基于浏览器,可能有的人不喜欢这一点。我就是那种更喜欢桌面应用的人,但是这并不是说我不知道http://Proto.io是一款强大的基于浏览器的解决方案。如果你网络连接既稳定又快速的话,Proto.io或许就是你进行原型设计最佳的app。

这是一款强大的工具,可能是这次所罗列的工具中功能最为丰富的,但是与其它工具相比,第一眼看上去有那么一点点让人难以应付。

【视频】http://v.youku.com/v_show/id_XMTY4NTc0MDQyOA==.html

Proto.io的UI不是最好看的,虽然在版本6中有所改善,而且有一点点凌乱,这可能会使人在工作中分心。去掉那些无关的功能,这样才能让人更专注于编辑器中所呈现的设计、转换和交互。

file

Atomic

Atomic也是一款完全基于浏览器的原型设计应用。目前,Sketch importing这一功能还不是最精简的,但是随着专门Sketch插件的诞生,很快就会升级换代。

作为一款给我带来愉悦使用体验的基于云的工具,Atomic是这一堆应用中最为优美的,从一开始就让人感觉是一门专业的工具。你可以利用Atomic设计原型和应用,以及制作像 History滑动条一样简单的东西,自如地进行项目的迭代。

【视频】http://v.youku.com/v_show/id_XMTY4NTczNDI4OA==.html

Atomic的用户界面(UI)是如此的华丽,就是在上面转来转去也让人身心愉悦。想想‘dark mode’下的Sketch使得从设计到原型的转换变得更加流畅。

Atomic的协作功能也非常强大。你可以和你的队友在同一个项目上无缝协作,自如地分享设计文件。当你在设计自己app原型的时候,你就会感觉到这一功能简直是太有价值了!Atomic,就是它了!

file

除了上述几款工具之外,还有很多其它的工具,比如InVision (这一款我要花很多时间)、Pixate 和UXPin,当然了还有Facebook的Origami Studio以及InVisionLabs的Craft原型设计插件。

找到适合自己工作流程的工具,然后就开始工作吧 。根据手头的工作在不同的工具间切换。各个工具都各有优缺点,一种工具是肯定不行的。谨记。



我不知道怎么加视频,只能直接添加链接,表怪我笨啊!

回复数量: 4
暂无评论~~
Ctrl+Enter