订阅程序员杂志RSS CSDN首页> 程序员杂志

次时代交互原型神器Origami档案

发表于2014-06-09 15:00| 次阅读| 来源《程序员》| 0 条评论| 作者陈泽涛

摘要:产品经理和交互设计师在寻找一种简单好用的原型工具,随着iOS 7的推出,扁平化和极简主义设计风格在移动互联网领域流行起来,让自己的App从与竞争对手中脱颖而出,开发者必须拥有一款可以制作花哨动效的原型工具。

背景与特点

对高保真原型工具的需求日益凸显

一直以来,产品经理和交互设计师都在寻找一种既简单又好用的原型工具,从Visio到AI,从Axure到Mockups,不一而足。Mockups能让你在电脑上模拟出手绘纸质原型的效果,Axure则可以让你快速构建出以Web为基础的动态原型,而Visio和AI更以其高度的可定制性深得细节控设计师们的喜爱。但随着iOS 7的推出,扁平化和极简主义设计风格在移动互联网领域流行起来,App动效越来越成为了决定App气质的重要因素,原型的动态保真度似乎成为了阻碍设计师发挥想象力的一道门槛。传统的以点按为主的App设计,逐渐演变成为大量手势交互,这使得Axure类工具表现手势交互显得心有余而力不足。

为了让自己的App从与千万个竞争对手的PK中脱颖而出,开发者必须拥有一款可以制作花哨动效的原型工具。

Quartz Composer浮出水面

2014年4月,Facebook召开了一次隆重的发布会,推出了其专属定制桌面Facebook Home,这款Android Launcher一经推出便以其花哨的动态效果轰动设计界,而Facebook的UED团队在设计过程中所使用的原型工具Quartz Composer(以下简称QC)也开始引起人们的关注。

QC是苹果Xcode开发工具包中的一个重要程序,苹果的初衷是希望它能帮助开发者合成拥有丰富视觉效果的动画,最初经常被用来制作屏幕保护程序。其特点是:无须编写代码,只要将工具所提供的各种功能的Patch(封装好的代码模块)进行连接和组装,就可以输出丰富的动画。

有的人要问了,After Effects也可以制作动画呀?没错,After Effects的动画效果也很强大,但它属于渲染输出类软件,制作出的动画是不可交互的。交互原型若是不能操作只能观看的话,效果绝对会大打折扣。如果直接用HTML/CSS/JS编写呢?那你没准会耗费很多的精力在代码构建和Debug上。

QC提供的动画效果非常强大,iOS下所有的动画效果都可以通过它实现。在用QC完成App的动效设计后,只需将功能模块的连接方式、各模块的详细参数告知工程师,工程师就可以用Xcode将其转化为对应的实现代码。

很多网友开始照着Facebook设计团队在YouTube上发布的教学视频《Building Facebook Home with Quartz Composer》学习QC的使用,但发现并不像想象中那么简单。因为QC不是一款专为移动原型设计而生的软件,繁杂的模块(Patch)让人眼花缭乱,有时为了构建一个移动App中常见的小模块都要大费周折,很多人觉得花费在QC上的时间太多了,高门槛让大多数人望而却步。

Origami进一步降低了QC的使用门槛

2014年初,Facebook重磅推出一款拥有超华丽界面的新闻聚合应用:Paper,它的面世让一个叫做Origami的软件进入了大家的视线(Origami在日文中是“折纸”的意思,所以它的Logo是一个千纸鹤)。在九个月的时间内,Facebook的产品设计师们用它给Paper原型设计出了许多复杂的动画:在一个屏幕内翻页和切换主题,滑动移动版块提取新闻,灵活的互动让用户仿佛感觉不到屏幕上玻璃的存在,富有诗情画意的3D效果更是给App增加了无限立体感。

实际上,Origami是一款Quartz Composer的插件,在安装QC之后安装Origami,会发现QC的界面变得更加友好,更加适合进行移动App的界面设计。

从2013年5月开始,Facebook的产品设计师们就开始开发这款QC插件。Origami的开发过程与Paper一同进行,随着Paper的功能越来越复杂,Origami也变得越来越强大,Paper上的每个动画效果都是由设计师首先在Origami上制作成型后,再由iOS工程师编写的。目前Origami的最新版本是1.2,在GitHub有它的源代码(https://github.com/facebook/origami)。

安装和Hello World

安装

安装分三步:(1)请确保Mac OS X系统版本在10.8以上;(2)安装Quartz Composer;(3)安装Origami。

安装QC和Origami都可以在Origami的介绍页面找到下载链接:http://facebook.github.io/origami/。页面提供的QC的安装地址因为在Facebook服务器上,所以可能需要“翻墙”。如果从苹果官网下载QC的话,需要使用开发者账号。安装过程很简单,就不详述了。

Hello Origami

打开Quartz Composer,选择新建一个空模板,我们来看一下主界面的功能(如图1所示)。


图1  Quartz Composer主界面

首先,我要解释一下“模块”(Patch)这个概念。图1中间的蓝色“Clear”就是一个模块,它的功能是将整个屏幕清空刷新成某个特定颜色。

在QC中,有400多个模块,每个模块实现一个小功能,使用QC就是将这些模块像搭积木一样拼装在一起的过程。所有的模块都可以在主界面顶部工具栏最左侧的模块库找到。

QC中模块分为以下多种。

  • 圆角是普通模块。
  • 四角是尖的模块叫“宏”(Macro),可以双击进入详细编辑(点击工具栏Edit Parent返回上层)。
  • 蓝色的是输出模块,会在查看器(Viewer)的画布中看到。输出模块的右上角有个数字,表示这个图层的顺序,数字越小的图层越在下面,下面的图层会被上面的盖住。
  • 紫色模块则代表该模块内部还有其他的子模块。

模块的左侧和右侧分别有一些点,左侧的是输入接口,右侧的是输出接口。将A模块右侧的输出点连接到B模块左侧的输入点,即可完成将A的结果传递给B的任务。

接下来,我们做一个最简单的Demo,向世界问个好。

  • 点击主界面顶部工具栏最左侧的Patch Library(快捷键:Command+回车,经常用到请熟记),在搜索框输入“Text Layer”(不区分大小写),回车。可以看到画布上多了一个模块,这个模块的作用是在屏幕上绘制一个显示文字的层。
  • 在Text Layer左侧的输入口“Text”上双击,将文字改成“Hello Origami”。
  • 点击主界面工具栏上的“Viewer”(快捷键:Command+Shift+V,也经常用到),可以看到黑色的背景上出现了熟悉的画面。

搞定!我们已经用Origami完成了一个最简单的Demo,不过似乎没有太多成就感呀!别着急,我们再来一个稍微复杂点的,这次我们做一个带手机界面,并且可以交互的。

1. 首先,我们需要三个模块来搭建基本的手机框架:Phone、Phone Dimensions、Layer Group。Phone会在屏幕上绘制一个手机,Phone Dimensions控制手机的类型(iPhone/Android Phone/iPad)和手机的朝向(竖的/横的),Layer Group是一个宏,用来承载屏幕中需要显示的内容。
2. 将这三个模块按照图2的顺序依次连接,完成基本框架搭建。此时打开Viewer,发现已有一个手机显示了,不过屏幕中间没有任何内容(隐藏的快捷键:按“F”键可让手机屏幕铺满全屏)。


图2  Phone Dimensions、Layer Group、Phone三个模块的连接顺序

3. 接下来我们制作手机屏幕上的内容。双击Layer Group,进入内部。在画布上添加四个模块(Interaction 2、Fill Layer、Switch、Color Transition),并按照图3的方式相连。将Color Transition的Start Color和End Color设置为黑色和白色。


图3  Interaction 2、Fill Layer、Switch、Color Transition四个模块的连接顺序

4. 搞定。打开Viewer预览一下,点击屏幕时,背景色会在黑色和白色之间切换。

恭喜你走进了Origami的世界。

所有模块解析

Origami目前共带有24个模块(v1.2),玩好它们,你将进入一个新境界。

下面按照循序渐进的方式,让大家逐渐学会将这些模块组合使用。建议按下文给出的顺序将这24个模块亲手玩一遍,保证立马上手。下面将这24个模块分为四类。

显示类(如图4所示)


图4  显示类,包括6个模块:图层、文字图层、填充图层、图层组、手机、手机尺寸

  • 图层(Layer)是一个显示类模块。它能在屏幕上生成一个矩形,可以调整它的长宽,绕X、Y、Z轴的旋转角度,叠加在上面的图片和遮罩图片,设置这个矩形的颜色、透明度和缩放等。如果要在画布上添加一个图片层,只需要将图片拖拽到画布上即可,Origami会自动将图片与一个图层连接好。
  • 文字图层(Text Layer)是一个显示类模块。它让指定的文字显示在屏幕上。可以在左侧输入端口调整文字内容、字体、字号、位置、长宽、颜色、透明度等属性。
  • 填充图层(Fill Layer)也是显示类模块。它的作用是生成一个全屏幕大小的颜色填充层,可以设置填充色和透明度。
  • 图层组(Layer Group)是一个宏模块。它的作用是将若干模块的输出合并成一个图片,以便输入到其他拥有图片输入接口的模块中。上文的Hello Origami样例中,我们就用到了图层组模块来搭建手机屏幕的内容输出容器。

手机(Phone)是一个显示类模块。它可以将Screen Image输入端口的图片显示在一个手机的屏幕中,它会根据图片的长宽比自动调节手机是横放还是竖放。

手机尺寸(Phone Dimensions)是个普通模块。它的作用是输出手机屏幕的长和宽。输入端口可以选择手机类型:iPhone、Android、Windows Phone、iPad,以及旋转方向。输出端口自动生成对应的屏幕长宽数值,然后就可以将长和宽分别连接到图层组对应的输入模块。

交互触发类(如图5所示)


图5  交互触发类,包括6个模块:交互2号、滚动、点击区、按钮、计时器、计数器2号

  • 交互2号(Interaction 2),之所以叫“2号”,是因为QC中本身就有一个“交互1号”的模块,Origami的开发者为了让这个交互模块更加适合移动开发,对它进行了再次封装,于是变成了交互2号。交互模块的使用比较特别,它的右上角有一个特殊的端口,将它连接到可交互的模块的左上角(比如按钮模块),它俩就形成了关联,对按钮进行的操作就会在交互2号的对应输出接口产生信号。交互2号的输出口含义:Down—鼠标按下;Click—鼠标点击;Tap—鼠标轻拍;Drag—拖动鼠标。点击和轻拍的判定区别是:轻拍要求按下的点和松开的点必须在同一个位置,即鼠标不移动;而点击只需要按下点和送开点都在控件内部即可。
  • 按钮(Button)。将交互2号与按钮进行连接:交互2号右上角的接口连接到按钮左上角的接口。比如我们想让按钮被按下的时候,背景变成鲜红色:添加一个填充图层到画布上,注意将填充图层放在按钮的下方(提示:显示类模块右上角的数字),将填充图层的Color接口设置成红色,然后将交互2号的Down输出口连接到填充图层的Enable输入口。
  • 滚动(Scroll)。用来实现iOS中的滚动视图,可以模拟网页、地图等边缘带有弹性反馈的滚动效果。滚动和交互2号一样,需要将右上角的端口连接到可交互模块的左上角。比如用一个网页截图来模拟滚动效果:第一步,打开Photoshop快速制作一张640×2000的图,在上面填满文字以便识别,保存后拖拽图片到QC的画布上;第二步,将滚动模块与图层进行交互连接,然后将图片的Image接口连接到滚动模块的Image输入口,以便滚动模块获取图片的长宽属性;第三步,把滚动模块的Y Position连接到Layer的Y Position上,如果需要制作地图样式,XY都可以滚动的话,只需把X Position也连上就可以了。
  • 点击区(Hit Area)。在屏幕上生成一个点击热区,用来承载用户对这个热区进行交互操作。比如你做了一个界面,上面有四个按钮,不需要把四个按钮单独切图后放置在图层模块进行交互,只需使用四个点击区就可以了。点击区有一个设置模式(Setup Mode),当设置为True时,点击区会显示为透明的红色,以便你看到它们;在原型做好以后就可以把它设置为False隐藏。
  • 计时器(Timer)。通过Turn On接口激活计时器,Duration设置持续时间,输出接口Time就会连续地输出当前流逝的时间,当时间到以后,Time输出口会置零,Done输出口会变成True。该模块可以用来实现让一个对话框在屏幕上显示若干时间然后消失的功能。
  • 计数器2号(Counter 2)。它的功能是输出一个数字,当输入口发生跳变(从False到True)时,输出也会发生变化。输入口有:Increase、Decrease、Jump三类,Increase口每次跳变会让输出增加1,Decrease减小1,Jump的跳变则会让数字跳转成为Jump To所指定的数字。还有Maximum Count输入口用来指定输出数字的范围。计数器2号可以方便地用来做递增递减操作,用来实现for循环。

交互响应类(如图6所示)


图6  交互响应类模块

  • 开关(Switch)。开关是一个对真假状态进行变化的模块:Flip输入口每次从False到True的跳变都会让输出口的真假状态发生变化,Turn On和Turn Off口分别将输出口状态置为True和False。
  • 弹性动画(Bouncy Animation)。当输入口Number的数字发生变化时,输出口Progress的数字也会随着发生变化,这种变化的函数关系是具有“弹性”的:即Progress的数字变化总是比Number慢那么一点点,而且当Number骤停时,Progress也会在这个数字来回摆动几下最终停下来。有两个属性可以调节:摩擦系数(Friction)和弹簧松紧度(Tension)。摩擦系数越大,弹性动画就会表现得越“黏滞”,松紧度越大,弹性动画的回弹速度就会越快。这个模块的下游经常接上过渡模块,用来控制图像的弹性缩放或物体的弹性位移。
  • 经典动画(Classic Animation)。输入/输出口与开关类似,不过两个输入属性不同。经典动画包含两个属性:持续时间(Duration)和运动曲线(Curve)。持续时间的作用不用多说,运动曲线分为5类:线性、二次方曲线、三次方曲线、指数曲线、正弦曲线。它们代表运动位移和时间之间的关系函数,交互设计师应该对这几种曲线非常熟悉。经典动画经常用来做iOS中的各种出入场动画,它们与iOS中的UIView动画是对应的。
  • 索引开关(IndexSwitch)。左侧有若干输入口(输入口的数量可以在Patch Inspector中的设置面板中设定),右侧输出一个索引数。左侧第N个输入口发生了跳变,右侧就会输出数字N。这个模块经常用来制作App底部Tab的逻辑。

下面讲讲产生动画过程的4个模块,三个过渡和一个与之相反的模块。

  • 过渡(Transition)。通过Progress输入口数字的变化,输出一个在Start Value和End Value之间的对应值。精准地描述是这样的:假设Progress为p,StartValue为s,End Value为e,那么输出值x=s+(e-s)*p。过渡在动画表现中非常重要,某个按钮点击触发0到1的跳变,通过过渡放大到开始值到结束值的变化,再对应到某个图层的位移或缩放上,即完成了一次交互触发到响应的过程。
  • 颜色过渡(Color Transition)。和过渡类似,不过输出口变成了某个颜色,开始和结束值也变成颜色,可以通过Progress口控制两个颜色之间的连续变化。
  • 图像过渡(Image Transition)。和颜色过渡类似,不过对象变成了图片。
  • 进度(Progress)。进度是和过渡功能相反的一个模块。根据输入的Value(设为v),和Start Value(设为s)与End Value(设为e),判定并输出当前的Progress(设为x)。精确描述为:x=(v-s)/(e-s)。进度可以被用来中转两种过渡的关系:比如做一个亮点调节滑竿,将一个滑块的位移量对应到屏幕亮度上。

其他类(如图7所示)


图7  其他类,包括4个模块:16进制颜色、指针控制、浏览器、速度

其他类中所包含的四个模块分别如下。

  • 16进制颜色(Hex Color)。根据指定色值输出一个颜色,比如FFFFFF输出白色。
  • 指针控制(Cursor Control)。可以改变指针的形状或隐藏指针。
  • 浏览器(Browser Chrome)。将Viewer模拟成一个浏览器的样子,用来展示网站的原型(平时很少用到)。
  • 速度(Velocity)。当输入口的数值发生变化时,输出口输出变化的值。比如输入口从12跳变成16时,Velocity会输出4。这个模块可用来检测速度,用来实现iOS 7通知中心面板那种“快速下拉再放手就展开,慢慢下拉松手就缩回去”这种效果。

实例上手

这个例子将介绍如何构建Tab结构的App框架。Tab结构是iOS程序的一种经典传统结构,通过点击底部Tab控制视图的变化,iOS中的电话、时钟、照片、音乐等诸多系统App都是基于Tab的结构。用Origami构建一个基本的Tab框架需要几个模块:索引开关、层、交互2号、点击区,另外还需要一个QC自带的模块:多路复用器(Multiplexer),用它将某个模块的输出数值分别接入到多个输入口。

1. 首先按照上文Hello World章节描述方法,搭建一个基本框架。然后进入图层组模块,准备开始搭建屏幕显示的内容。

2. 接着我们将用PS做好的导航栏、底部Tab的图片拖动到画布上,底部Tab有三个状态,就做三个分别选中的状态。将三个Tab图片附带的Layer删掉,通过一个Multiplexer集中后接到一个单独图层的Image输入口。这样就可以通过Multiplexer的Source Index口控制显示哪一张Tab的图片了。

3. 同样,把三张代表内容视图的图片拖动到画布中,去掉附带的Layer,通过Multiplexer接到另外一个图层上,这个图层要摆在Tab图层的下面一层,以免Tab被内容视图盖住。

4. 最后,我们添加三个点击区,覆盖在Tab上对应的位置:分别调整定位点(Archor Point)为:底部靠左、底部居中、底部靠右,调整一下长宽,使之正好覆盖整个Tab。为每一个点击区增加一个交互2号,Click输出端接到一个索引开关上,索引开关的输出分别接到两个Multiplexer上。这样一来,对每一个点击区的Click事件,都会使索引开关的输出变成对应的序号,序号则可以控制两个多路复用器,让对应的Tab和内容视图的图片显示。完成后如图8所示。


图8  通过添加三个点击区,使对应的Tab和内容视图的图片显示

优缺点总结

纵观刚才的使用过程,我们发现Origami(或者说QC)总体来说是一款学习曲线很陡的软件,初期需要花费比较多的时间来学习每个模块的特性,适应模块之间流式的模式。一旦熟练掌握这24个模块,并记住自己常用的模块组合后,你就攻克了初期的壁垒,慢慢变得如鱼得水,能演变出千变万化的动效。接着你就可以去尝试使用QC模块库中的其他400多个模块,让交互原型变得更加强大和复杂。你甚至可以创建属于自己的专属模块,保存到模块库中,在以后的创作中直接调用它。如果你对自己的库足够有信心的话,甚至可以公开发布到网上,让大家下载试用。目前Origami的一个不尽如人意的地方是,生成的qtz文件还不能在iOS设备上运行,所以交互原型只能在Mac上进行演示。国外有个叫Joris的荷兰iOS工程师在开发iOS版的QC,但目前只完成了一小部分模块,性能也不是特别高。GitHub上有他的QC-Mobile的源码(https://github.com/kluivers/qc-mobile),感兴趣的读者可以研究一下。

作者陈泽涛,搜狐视频高级交互设计师,X实验室负责人,关注移动互联网和客厅体验,除了负责iPad版搜狐视频外,手头还有若干神秘新项目。吉他和架子鼓发烧友。

0
0

近期活动

更多

2015中国大数据技术大会

为了更好帮助企业深入了解国内外最新大数据技术,掌握更多行业大数据实践经验,进一步推进大数据技术创新、行业应用和人才培养,2015年12月10-12日,由中国计算机学会(CCF)主办,CCF大数据专家委员会承办,中国科学院计算技术研究所、北京中科天玑科技有限公司及CSDN共同协办的2015中国大数据技术大会(Big Data Technology Conference 2015,BDTC 2015)将在北京新云南皇冠假日酒店隆重举办。

微博关注

程序员移动端订阅下载

相关热门文章