动态原型设计
动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。
开发者不需要猜测设计师要什么样的效果,照着原型产品做就好了。
很多创业团队也发现了产品人的这个刚需,做出了诸如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
坐标。1. 在
Progress path
之后,添加一个Transition patch
;2.
Start
为24,End
为16;3. 将
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
。希望进一步了解的同学,请移步这里,有更为详尽的信息提供给你。