设计师新宠!交互神器Origami - 优设网 - UISDC

设计师新宠!交互神器Origami

2014/02/12 63993评论区

Facebook社交新闻应用Paper iOS版上架

@陈泽涛 Facebook上周发布的独立应用Paper今天正式上架苹果App,该应用看起来相当简洁,与众不同,并没有像Facebook的原有应用产品那样充斥着各种按钮和菜单。

Paper?的诗意现身,一个叫做Origami的工具功不可没。Facebook?开发的这款图像设计动画合成工具,可以快速构建原型,并在不写一行代码的前提下完成对复杂动画的合成和测试。自上个月发布后,全世界的设计师都可以免费使用。

正如?Paper?可能取代?Facebook?本身的?App?一样,?Origami?的出现可能会对?Photoshop?造成威胁。?这个工具让设计师们给?Paper?原型设计出了许多复杂的动画,?无论是在一个屏幕里实现翻页和切换主题,还是用滑动来移动板块提取新闻,屏幕和手机永远处于即时互动状态,iOS7?的?3-D?效果更给图片增添了无限立体感。

Origami?自九个月前由大名鼎鼎的?Facebook?产品设计师?Brandon?Walkin?和?Drew?Hamlin?开始,与他们的作品?Paper?同时进行,随着?Paper?需要承载的功能越来越多?Origami?也在不断完善其功能。事实上,在?Paper?上面看得到的每个动画效果都是先由设计师们在?Origami?上成型后再由?Facebook?的程序员们在?App?上编写的。

神器推荐:
《PHOTOSHOP玩腻了!这10个图形编辑神器你知道吗?》
《让网页舞动起来!25个免费的视差滚动插件》
《高端干货!PHOTOSHOP实用脚本大合集》

Origami的意思是折纸(听起来是由日文翻译过来的)。它是Facebook的设计团队花费了9个月时间开发的工具,Origami是一款基于Quartz Composer的插件,安装Origami之后,Quartz Composer的界面会变得更加友好,更适合于交互设计师操作。

Origami官方网站下载页面:http://facebook.github.io/origami/
如果不能访问Facebook,请在这里下载:微盘下载

在2013年4月份的时候,Facebook在推出Facebook Home的时候,曾力推Quartz Composer,希望它能够成为一款设计师们都喜欢的高保真动态原型制作工具。然而因为QC的门槛依然很高,推广没有成功。

这一次,Facebook设计团队免费公开Origami,这款插件让QC的使用更加方便,希望能够借此再度推广QC。

Origami-Work

下面简单介绍一下Origami:

大多数设计师在向工程师讲解设计想法的时候,都是通过静态原型图来完成的,但是现在APP的趋势是:动态的设计越来越多,设计师们需要更好的交互设计工具,Origami应运而生。

 

怎样安装:

①你需要一台Mac
②安装Quartz Composer
③安装Origami

除了第一条,后面两个都可以在Origami官方页面(facebook.github.io)下载到。

 

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.sohu
分享人:@陈泽涛

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
“优设网ag亚游集团“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/interactive-artifact-origami

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里