android应用开发-从设计到实现 3-9 Origami动态原型设计

动态原型设计

动态的可交互原型产品，是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。



开发者不需要猜测设计师要什么样的效果，照着原型产品做就好了。

很多创业团队也发现了产品人的这个刚需，做出了诸如

Principle

、

Axure

这类著名的原型设计产品。

Facebook

似乎也深谙此道，专门为安卓和iOS系统开发很有针对性的交互原型设计工具-

Origami Studio

。



这是一个免费的工具，而且也能和

Sketch

互通，所以我选择了它来向大家讲解互动原型的设计。

界面介绍

启动

Origami Studio

后，可以看到类似如下界面，



悬浮在外的区域是虚拟手机屏幕。用户可以通过点击、拖动来模拟各种屏幕操作;

底部的暗色区域是工作区域。用来设置用户操作屏幕后，界面元素的各种响应方式；

右边的亮色区域是界面组件区域。展示了组成界面的各个元素，里面的布局方式，通过虚拟屏幕实时展示了出来；

点击虚拟屏幕右上方的

摄像机

按钮，可以将屏幕上的内容录制下来，

创建屏幕界面

对于新创建的项目，整个工程都是空的，



我们可以通过菜单栏的

+

，为界面添加各种组件，



也可以直接将

Sketch

中的图形，通过

复制粘贴

的方式，直接添加到组件区域。

通过

Phone -> Nexus 5

将虚拟设备的屏幕，设置成

Nexus 5

- 安卓设备；



将组件区域中

Color Fill

的背景色修改成

白色

，



然后，打开上一章节中

Sketch

设计的静态高保真原型，

选中

Weather

页面的

展开

画板，使用

cmd + c

（复制）；

切换到

Origami Studio

，

cmd + v

（粘贴）；

整个界面就导入完成了，



所以我之前说，使用

Sketch

进行界面设计可以事半功倍，它与

Origami Studio

配合的非常好。

设置滑动区域

当用户滑动

Content

区域的时候，该区域要能够跟随手指，向上滑动。这里就有2个要点，

滑动

Content

区域：要能够感知到这个区域被滑动；

Content

区域跟随滑动：滑动的位移能够作为输入，实时的影响

Content

区域的位置；

感知交互

组件旁边有个

touch

按钮，点击后会出现该组件可能会接收到的各种触控方式。在本例中，我们是需要感知

Content

组件垂直方向上的滑动，所以选择

ScrollY

，



此时，

工作区域

和

虚拟屏幕

都发生了变化，

Content

区域的位置发生了变化，被“顶”到了整个屏幕的最上面。这是为什么呢？因为

Content

区域的Y坐标被修改成了

0

。

在紫色的

Scroll

框图中，

Content Layer

被指定成了

Content

，说明需要关注

Content

的滑动。

Y

坐标的变化将被输出到蓝色框图代表的

Content

区域，修改它的

Y

坐标。

因此，当框图被这样组合之后，我们没有触控

Content

区域，

Content

的

Y

轴就没有滑动，因此输出就为

0

。

0

作为

Content

区域的新位置，就将其

顶

到了屏幕的最上方。

因此，我这里可以给出一个小技巧来避免这种错误的

置顶

效果，

给

Content

添加一个壳-

Group

（

+ -> group

），将

Content

包裹在里面(通过拖动

Content

到

Group

中实现)；

Group

的尺寸从屏幕的顶端开始计算，占据整个屏幕；



然后再给

Group

添加响应，



可以看到，现在

虚拟屏幕

上的界面就没有变形了。在屏幕上进行拖动，

Content

区域就可以随着

Y

轴的偏移，而实时的修改自己的

Y

坐标，达到互动的效果，

Content

滑动的过程中，

Weather detail

，也需要随着向上滑动，并隐藏起来。

有了上面处理

Content

的经验，我们就知道需要如何处理

Weather detail

的滑动了。

给

Weather detail

添加一个壳-

Group

，将

Weather detail

包裹在里面；

Group

的尺寸从屏幕的顶端开始计算，占据整个屏幕；



鼠标按住紫色框图

Y

字符的位置，拖住不放，连接到

组件

区域上方的

Y

坐标处，

工作区域

就会自动添加紫色框图到新

Group

的连接，



注意：这种拖拽端点到属性值的方法贯穿了使用

Origami Studio

的各个地方，是非常核心的操作方式。

此时滑动界面的时候，

Weather detail

也会跟着滑动了，



这时可以看到，状态栏被挡住了。解决的办法很简单，只要在

组件区域

，把

Statusbar

拖动到最上面的位置就可以了，

标题的变化

现在开始加入标题-

成都

的变化。

把

成都

从

Weather detail

中剥离出来，便于全局的控制，进行如下设置，



在界面滑动的过程中，字体的大小和

X Y

坐标都要发生变化，说明需要找到内容区域

Y

轴滑动时的比例，然后让

成都

元素的对应属性发生变化。

滑动变化有自己的百分比：（当前值-原始值／变化范围）* 100% = 变化的百分比

原始值：0 变化范围：-245（245是

Weather detail

的高度）

成都

文字的属性变化范围是：

属性	属性起始值
X坐标	24 -> 16
Y坐标	244 -> 38
字体大小	34 -> 20

在

Origami Studio

中确定变化范围，需要使用

Progress patch

（到底什么是

patch

，会在后面介绍）。

在

工作区域

双击，弹出

patch

选择框，找到

Progress

，



修改

Progress patch

的

Start value

为

0

，

End value

为

-245

，



开始修改

成都

文字的

Y

坐标。

在

Progress path

之后，添加一个

Transition patch

；

Start

为244，

End

为38；

将

Transition patch

的输出，通过拖拽的方式，连线到

成都

元素的

Y

坐标值的位置；



开始修改

成都

文字的

X

坐标。

在

Progress path

之后，添加一个

Transition patch

；

Start

为24，

End

为16；

将

Transition patch

的输出，通过拖拽的方式，连线到

成都

元素的

X

坐标值的位置；



开始修改

成都

文字的字体大小。

在

Progress path

之后，添加一个

Transition patch

；

Start

为34，

End

为20；

将

Transition patch

的输出，通过拖拽的方式，连线到

成都

元素字体大小的位置；



至此，我们可以看到滑动时，标题变化的雏形了，

滑动的范围

上下滑动时，内容是收到了局限的，只能在一定区域内滑动。所以要给目前的设计增加一个滑动限制。

添加一个叫做

Clip patch

过滤器；

将它允许输出的最小值

Min

设置成

-245

（也就是

Weather detail

的高度）；将允许输出的最大值

Max

设置成

0

；

修改框图的连接方式如下，

滑动的保持

现在滑动

虚拟屏幕

的时候会发现，当松手之后，原来滑动到的位置会自动还原，但实际上我们希望它能够保持当前的状态。

将

Content

所在的

Group

向下移，放到

Weather detail

所属的

Group

的下面；

修改该

Group

的大小为

1000

；



至此，动画的效果就基本完成了。

尾巴

这里留下了一个小尾巴：滑动的过程中，状态栏的颜色也是需要变化的，从

#3F51B5

逐渐变化到

#303F9F

。

经过前面的实践，我想大家应该已经知道了实现的要点，那就开始自己尝试着做做吧。

提示：通过

Color to HSL patch

Transition patch

与

HSL Color patch

的配合，来修改状态栏背景元素的颜色属性。

整个工程的源文件，我放到了这里，供大家参考。

回顾总结

通过具体的案例，我们初步了解了

Origami Studio

的用法，对实现动画的方式也有了概念。

一切的动画效果都是通过下面几个步骤来实现的，

感知触发动画的事件，点击、滑动等等；

把触发事件后产生的数值，交给一个个串联起来的

patch

进行处理，获得新的数值；

利用新的数值来修改某个界面元素的属性，比如文字的大小，文字的位置，文字的透明度等等；

知道了这样的套路，以后遇到其他动画就可以依葫芦画瓢来操作了。

至于什么是

patch

，我相信一步步做到这里，也都可以心领神会了吧。

另外，处理

虚拟屏幕

，

Origami Studio

产生都可交互原型，也能在手机设备上运行，前提是在设备上按照对应的应用

Origami live

。希望进一步了解的同学，请移步这里，有更为详尽的信息提供给你。

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对

安豆

的支持，谢谢:)