动态原型设计

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

 origami_weather_app_complete

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

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

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

 sketch_website

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

界面介绍

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

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

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

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

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

 origami_virtual_screen

创建屏幕界面

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

 origami_empty_project

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

 origami_add_layer

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

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

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

     origami_change_screen_color

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

  1. 选中Weather页面的展开画板,使用cmd + c(复制);
  2. 切换到Origami Studiocmd + v(粘贴);

整个界面就导入完成了,

 orgami_load_complete

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

设置滑动区域

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

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

感知交互

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

 origami_content_y_scroll_detect

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

 origami_content_add_y_scroll_detect

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

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

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

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

  1. Content添加一个壳-Group+ -> group),将Content包裹在里面(通过拖动ContentGroup中实现);

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

 origami_add_content_wraper

然后再给Group添加响应,

 origami_add_content_wraper_detect

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

 origami_content_wraper_scroll

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

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

  1. Weather detail添加一个壳-Group,将Weather detail包裹在里面;

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

     origami_add_weather_detail_wraper
  3. 鼠标按住紫色框图Y字符的位置,拖住不放,连接到组件区域上方的Y坐标处,

     origami_add_weather_detail_scroll

    工作区域就会自动添加紫色框图到新Group的连接,

     origami_add_weather_detail_scroll_result

注意:这种拖拽端点到属性值的方法贯穿了使用Origami Studio的各个地方,是非常核心的操作方式。

此时滑动界面的时候,Weather detail也会跟着滑动了,

 origami_weather_detail_scroll_complete

这时可以看到,状态栏被挡住了。解决的办法很简单,只要在组件区域,把Statusbar拖动到最上面的位置就可以了,

 origami_statusbar_adjust

标题的变化

现在开始加入标题-成都的变化。

成都Weather detail中剥离出来,便于全局的控制,进行如下设置,

 origami_location_adjust

在界面滑动的过程中,字体的大小和X Y坐标都要发生变化,说明需要找到内容区域Y轴滑动时的比例,然后让成都元素的对应属性发生变化。

滑动变化有自己的百分比:(当前值-原始值/变化范围)* 100% = 变化的百分比

原始值:0 变化范围:-245(245是Weather detail的高度)

成都文字的属性变化范围是:

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

Origami Studio中确定变化范围,需要使用Progress patch(到底什么是patch,会在后面介绍)。

工作区域双击,弹出patch选择框,找到Progress

 origami_load_progress_patch

修改Progress patchStart value0End value-245

 origami_progress_patch_settings

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

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

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

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

 origami_title_x_settings

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

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

 origami_title_fontsize_settings

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

 origami_title_scoll_complete

滑动的范围

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

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

滑动的保持

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

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

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

 origami_weather_app_complete

尾巴

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

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

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

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

回顾总结

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

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

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

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

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

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