交互设计师的新宠：免费原型制作工具Origami

Origami的意思是折纸（听起来是由日文翻译过来的）。它是Facebook的设计团队花费了9个月时间开发的工具，Origami是一款基于Quartz Composer的插件，安装Origami之后，Quartz Composer的界面会变得更加友好，更适合于交互设计师操作。Origami官方网站下载页面：http://facebook.github.io/origami/

业界综合 2014年02月13日

Origami五分钟入门秘籍

早在Facebook推出Facebook Home时，相信强大的原型工具Quartz Composer就进入了很多设计师的法眼，无须编写代码就可以输出细腻丰富的动画，这个太刁了，和大家一样，彼时我也信誓旦旦励志要学会这个玩意儿，于是开始参考教学视频摸索，甚至拿着Quartz Composer的Guideline企图翻译，结果发现并不是那么简单。于是学QC这件事情就一直一直搁

Axure教程 2016年04月11日

Origami2.0 中文教程 -Scrolling Views

教程是直接从官方初步了解之后，以中文的方式作为本人的学习记录，同时共享大家一起学习。共勉在学习之前，首先大概和大家重新认识一下Origami 的新版界面 简单明了，动效基本就是图层属性的变化，同时操作交互上也与以前的QC有不小的变化，后续的小教程里面会一一说明。为什么选择 Origami 做为主动效工具，最大的原因是 免费！！！咳咳～ 哈哈，其次还有就是：对动效的实现进行初

产品 2016年11月03日

Origami 教程 03- 基础入门

Origami 2.0 网盘地址：https://pan.baidu.com/s/1kU5YnJp通过前两个教程，希望大家对Origami 创建动效有一个比较直接的认知，尝试之后觉得感兴趣的就可以继续深入学习 Origami 了。此次教程会为大家阐述一下基本原理，还有怎么和 Sketch 配合使用。请打开教程文件同步进行学习。文件理解解压教程文件，你会看到里面有个Sektc

产品 2016年11月06日

Origami 教程 04- 初识逻辑

经过几个小教程，相信大家对Origami 已经有了不少的认知，一些基本的动效实现都懂了。那对于动效工具而言，Origami 的优势除了免费之外，其对于动效的实现是基于逻辑关系搭建的，这才是本人喜欢Origami 最大的原因。请打开教程文件同步进行学习。文件理解打开教程文件，你会看到里面已经搭建好了基础的一些交互，从预览中可以尝试，我们最终要实现的交互如上图：点击发送图标，发

产品 2016年11月07日

Origami 教程 05- 多状态切换

上一教程大家接触到 Origami 的逻辑Patch之后，应该一些常规的动效都可以自行设计了。那今天我们继续学习一些新玩意，主要围绕多状态进行，也就是常见的状态栏。Switch patch只有2个动态之间的切换，且还是循环的，所以在此我们需要学习新的Patch。请打开教程文件同步进行学习。文件理解打开教程文件，你会看到Patch 控制区域空空如也，这次我们慢慢一步一步把动效

产品 2016年11月10日

Origami 教程 06- 列表数据循环生成方法

Origami 的教程已经出到第六期了，前5期都是基础，而第6期开始，会慢慢复杂，同时也会加大学习量，加油～共勉!请打开教程文件同步进行学习。学前思考先忽略动效，提出几个问题，大家可以尝试以前面学习的经验来思考一下。List 不用图片来代替，怎么实现？所有List内容都不一样，怎么实现？所有List 都能保持一个统一的操作，怎么实现？…… OK，如果仅前2个问题来说，用“笨

产品经理 2016年11月11日

Origami2.0 教程 - Android 按钮动效

今天暂时脱轨一下官方案例，一起研究下Origami Studio之后，Android按钮动效的制作方法。和QC年代的做法略有不同，不过方法大同小异。今天会有几个新的Patch学习，还有如何清晰规划自己的Patch逻辑。请打开教程文件同步进行学习。学前思考相信大部分同学都应该对Material Design有一些了解的，不清楚的请自行面壁思过。先看看官方的按钮动效，以此为基础

产品 2016年11月13日

Origami 教程 08- 简单描边动画学习

本次教程，暂时脱离一下交互层面，从纯动效来初步认识一下，Origami Studio目前在这一块能达到什么样的效果。两种针对描边的动效讲解，都非常简单和基础，主要学习设计思路及新的属性。本次教程，有两个案例讲解，其中01案例不需要原始教程文件，全程自主创建。描边动效01案例，效果如下：学习讲解常见的描边动效，不同的工具有不同的方法和思路，在Origami中如何实现？抱着这一

产品 2016年11月17日

Origami 教程 09- 下拉刷新动画

上期教程，大家学习了简单的描边动画，并且认识了软件默认的Loading图层Progress Ring。本期教程就继续由此延伸，在实际的案例中可以如何运用。教程文件，请大家直接使用06期教程最后完成的文件来调整，在学习过程中也会给大家介绍一些规划逻辑的思路以及良好的设计习惯。请找到文件打开，并且开始学习。完整效果如下：学习讲解下拉刷新，这个常见的效果想必大家都不陌生，在此主要

产品 2016年11月23日