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

交互设计师的新宠：免费原型制作工具 Origami Origami 的意思是折纸（听起来是由日文翻译过来的）。它是 Facebook 的设计团队花费了 9个月时 间开发的工具， Origami 是一款基于 Quartz Composer 的插件，安装 Origami 之后， Quartz Composer 的界面会变得更加友好，更适合于交互设计师操作。 Origami 官方网站下载页面： http://facebook.github.io/origami/ 如果不能访问 Facebook ，请在这里下载： /s/oquAYKKPrOc 在2013 年4 月份的时候， Facebook 在推出 Facebook Home 的时候，曾力推 Quartz Composer ，希 望它能够成为一款设计师们都喜欢的高保真动态原型制作工具。然而因为 QC 的门槛依然很高，推广 没有成功。 这一次， Facebook 设计团队免费公开 Origami ，这款插件让 QC 的使用更加方便，希望能够借此再度 推广 QC 。 下面简单介绍一下 Origami ： 大多数设计师在向工程师讲解设计想法的时候，都是通过静态原型图来完成的，但是现在 APP 的趋 势是：动态的设计越来越多，设计师们需要更好的交互设计工具， Origami 应运而生。 怎样安装： ①你需要一台 Mac ②安装 Quartz Composer ③安装 Origami 除了第一条，后面两个都可以在 Origami 官方页面（ http://facebook.github.io/origami/ ）下载到。 Origami 提供了哪些自定义的控件（ Patch ）： Switch( 开关 )：开关就是开关 Scroll( 滚动 )：用来滚动一张图片 Bouncy Animation( 弹性动画 )：通过弹簧控制变化参数的动画 Classic Animation( 传统动画 ) ：传统的曲线型缓动动画 Transition( 转场动画 )：输入 0-1 的数值，输出开始和结束值 Color Transition( 颜色转场 ) ：在两种颜色间淡入淡出 Image Transition( 图像转场 )：两张图片间淡入淡出 Interaction 2( 交互2 号) ：让你可以点击某个层 Layer( 层 )：把图片显示在屏幕上 Text Layer( 文字层 ) ：把文字显示在屏幕上 Button( 按钮 )：可自定义标签和背景，连上 交互“ 2 号 ”使之可以响应点击 Hit Area( 可点击区域 )：同样也要连 交互“ 2号 ” Phone( 手机 )：在屏幕上画一个手机， iPhone 、安卓、 WP 都有 Timer( 定时器 ) ：设定一个时间，到点了定时器会改变状态 Counter 2( 计数器 2 号) ：从一个数值增减到另一个数值，用来实现 for 循环的 Origami 给 QC 带来哪些变化： ①支持 Retina 显示器 ②拖进来一张图片的时候，自动在外面包一个层 ③在参数窗口中支持键盘上下键切换 ④被禁用的控件显示为灰色 ⑤让查看窗口原生全屏支持 ⑥当分流器被删除后，连接线保留 ⑦其他 bug 修复 好了，赶紧下载一个试一试吧。下载完成后会跳转到样例下载页面，通过 4个样例你可以学习到通 过 Origami 制作出很多神奇动效的方法。 作者：搜狐 Mued 人人都是产品经理（ ）中国最大最活跃的产品经理学习、交流、分享平台