用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所提供的缓动函数快速指南是必读的。

2015-05-28 23:02424