动态原型设计

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

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

很多创业团队也发现了产品人的这个刚需，做出了诸如Principle、Axure这类著名的原型设计产品。

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

这是一个免费的工具，而且也能和Sketch互通，所以我选择了它来向大家讲解互动原型的设计。

界面介绍

启动Origami Studio后，可以看到类似如下界面，

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

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

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

点击虚拟屏幕右上方的摄像机按钮，可以将屏幕上的内容录制下来，

创建屏幕界面

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

我们可以通过菜单栏的+，为界面添加各种组件，

也可以直接将Sketch中的图形，通过复制粘贴的方式，直接添加到组件区域。

1. 通过Phone -> Nexus 5将虚拟设备的屏幕，设置成Nexus 5- 安卓设备；

   

2. 将组件区域中Color Fill的背景色修改成白色，

   

然后，打开上一章节中Sketch设计的静态高保真原型，

1. 选中Weather页面的展开画板，使用cmd + c（复制）；
2. 切换到Origami Studio，cmd + v（粘贴）；

整个界面就导入完成了，

所以我之前说，使用Sketch进行界面设计可以事半功倍，它与Origami Studio配合的非常好。

设置滑动区域

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

1. 滑动Content区域：要能够感知到这个区域被滑动；
2. Content区域跟随滑动：滑动的位移能够作为输入，实时的影响Content区域的位置；

感知交互

组件旁边有个touch按钮，点击后会出现该组件可能会接收到的各种触控方式。在本例中，我们是需要感知Content组件垂直方向上的滑动，所以选择ScrollY，

此时，工作区域和虚拟屏幕都发生了变化，

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

在紫色的Scroll框图中，Content Layer被指定成了Content，说明需要关注Content的滑动。Y坐标的变化将被输出到蓝色框图代表的Content区域，修改它的Y坐标。

因此，当框图被这样组合之后，我们没有触控Content区域，Content的Y轴就没有滑动，因此输出就为0。0作为Content区域的新位置，就将其顶到了屏幕的最上方。

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

1. 给Content添加一个壳-Group（+ -> group），将Content包裹在里面(通过拖动Content到Group中实现)；

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

然后再给Group添加响应，

可以看到，现在虚拟屏幕上的界面就没有变形了。在屏幕上进行拖动，Content区域就可以随着Y轴的偏移，而实时的修改自己的Y坐标，达到互动的效果，

Content滑动的过程中，Weather detail，也需要随着向上滑动，并隐藏起来。

有了上面处理Content的经验，我们就知道需要如何处理Weather detail的滑动了。

1. 给Weather detail添加一个壳-Group，将Weather detail包裹在里面；

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

   

3. 鼠标按住紫色框图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坐标。

1. 在Progress path之后，添加一个Transition patch；
2. Start为244，End为38；
3. 将Transition patch的输出，通过拖拽的方式，连线到成都元素的Y坐标值的位置；

开始修改成都文字的X坐标。

1. 在Progress path之后，添加一个Transition patch；
2. Start为24，End为16；
3. 将Transition patch的输出，通过拖拽的方式，连线到成都元素的X坐标值的位置；

开始修改成都文字的字体大小。

1. 在Progress path之后，添加一个Transition patch；
2. Start为34，End为20；
3. 将Transition patch的输出，通过拖拽的方式，连线到成都元素字体大小的位置；

---

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

滑动的范围

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

1. 添加一个叫做Clip patch过滤器；
2. 将它允许输出的最小值Min设置成-245（也就是Weather detail的高度）；将允许输出的最大值Max设置成0；
3. 修改框图的连接方式如下，

滑动的保持

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

1. 将Content所在的Group向下移，放到Weather detail所属的Group的下面；
2. 修改该Group的大小为1000；

---

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

尾巴

这里留下了一个小尾巴：滑动的过程中，状态栏的颜色也是需要变化的，从#3F51B5逐渐变化到#303F9F。

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

提示：通过Color to HSL patch Transition patch与HSL Color patch的配合，来修改状态栏背景元素的颜色属性。

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

回顾总结

通过具体的案例，我们初步了解了Origami Studio的用法，对实现动画的方式也有了概念。

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

1. 感知触发动画的事件，点击、滑动等等；
2. 把触发事件后产生的数值，交给一个个串联起来的patch进行处理，获得新的数值；
3. 利用新的数值来修改某个界面元素的属性，比如文字的大小，文字的位置，文字的透明度等等；

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

至于什么是patch，我相信一步步做到这里，也都可以心领神会了吧。

另外，处理虚拟屏幕，Origami Studio产生都可交互原型，也能在手机设备上运行，前提是在设备上按照对应的应用Origami live。希望进一步了解的同学，请移步这里，有更为详尽的信息提供给你。

---

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

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

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

---

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

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

最后再次感谢各位读者对安豆的支持，谢谢:)