交互设计师的新宠:免费原型制作工具Origami
Origami的意思是折纸(听起来是由日文翻译过来的)。它是Facebook的设计团队花费了9个月时间开发的工具,Origami是一款基于Quartz Composer的插件,安装Origami之后,Quartz Composer的界面会变得更加友好,更适合于交互设计师操作。
Origami官方网站下载页面:http://facebook.github.io/origami/
如果不能访问Facebook,请在这里下载:http://vdisk.weibo.com/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
-
微信创始人张小龙首次公开演讲(官方无删减版)
微信创始人张小龙首次公开演讲(官方无删减版) -
如何通过APP看到产品战略层面
产品经理拿到一款产品的时候,不能只能看到表面信息,而是要能看到产品背后的信息。 -
基于用户的“真需求”创新产品
产品创新是保证企业在竞争激烈的市场上长久生存的关键,今天,我们就围绕产品创新和用户研究分享一些看法。 -
有一种交互设计研究验证叫“设计走查”
如何在最短的时间内对自己的产品做出检验,确保其在定位、设计、营销计划等多个环节,在可视范围内是正确的,需要一套比较科学、完善的方法去做出检测。 -
你为什么离不开微信?
张小龙说用完即走,你却爱不释手; 到底是什么让你离不开微信? -
移动互联时代APP的发展方向
现在我们已经走上了移动互联网时代,无论是企业还是公司,都会经过网络竞争中争取有利的优势,较为传统的产品竞争逐渐向互联网竞争转型,出现了很多数据云大数据等等 -
AI 时代产品经理的机遇和挑战
AI 时代产品经理的机遇和挑战 -
前1%与前10%的产品经理差距在哪?
前1%与前10%的产品经理差距在哪? -
你有哪些策略应对不断的需求变更?
你有哪些策略应对不断的需求变更? -
如何运营天猫【十亿俱乐部】商家页面?
如何运营天猫【十亿俱乐部】商家页面?

