用Sketch 和 Origami 做产品原型(prototype)

这个是自己翻译的文章,感觉很有用,原文地址在这里: http://www.sketchappsources.com/blog/post/prototyping-with-sketch-and-origami

Origami是一个免费的原型工具,拥有大量的可自定义和固有的交互动效。你可能听说过Origami因为它是Facebook公司开发的,而且被一些开发了popular的产品和互动app的优秀团队所使用——Facebook Paper,Instagram,and Facebook Messenger ,这里仅仅是举了几个例子。

一些人还舍不得去试着使用Origami,因为它的安装要求和Quattz Composer看似陡峭的学习曲线。在Origami最新的更新版本(version 2.0)中,这些现象都会改变。 New Sketch Plugin ,Oragami Live iOS App, new website ,和 documentation。随着资源和教程的日益增加,入门的门槛降低,Origami社区在逐渐壮大。必须的,为了开始学习这款软件,你将需要:

1) Apple Developer Account - 这样你可以下载最新版本的Quartz Composer。
2) Quartz Composer (127 MB)-给Origami提供动力和接口。
3) Origami (27 MB)-Quartz Composer 的prototyping库。
4) Origami Live App -现在只有ios版本。Origami Live与Sketch Mirror 相似,可以在ios设备上面预览prototypes界面。你还是要插入你的设备,但是希望很快只要设备和电脑在同一wifi下就能实现同步。
5) Origami Sketch Plugin -通过这款插件,你能够快速导出而且自动同步PNG视图或者元素,以便在Quartz Composer中使用。你将需要生成可用的链接,而不是只是把一个图像拖进Quartz Composer中。你可以拖动图像,在送掉的时候安住option和command,这样就可以生成一个链接。这样就可以保证你的prototype和最新的版本同步。

Recreating Facebook Paper's Photo View

在完成了上面的安装要求以后,观看下面这个介绍的视频,然后你可以 download and play with the actual prototype

即使你还没有设计的基础,一个快速的途径去开始prototyping就是去 搜索下载一些设计师的UI kit 。如果你初学动效而且不知道怎么创造出酷炫的互动UI,你可以考虑去浏览 Capptivate's collection 或者是最新的 ios app ,在这里得到一些灵感和动效的想法。

只要你开始使用了Quartz Composer,你就会发现你可以为使用不同的动效性能(easing, delay, bounciness, speed等)来创作更流畅和更intriquining的动效。 Lucas Barbosa 所提供的缓动函数快速指南是必读的。

Comments
Write a Comment