Intro视频：http://v.youku.com/v_show/id_XNzEyMDE2ODA4.html

万万妹想到啊，上次的教程居然很受大家欢迎，小生我深受鼓舞，决定再为大家奉献一篇教程。

Quartz Composer这款软件，我个人认为既能做动效，又能做可交互原型。（当然，QC的用处不局限于此）上篇教程出了以后，很多人问我这玩意儿怎么和开发衔接，就Origami来说，iOS有对应的POP动效库，Android和web有对应的Rebound动效果库。

跟上一篇教程不一样，这篇教程侧重的不是动效，因此很多效果做的马马虎虎，在版式和细节上也没多大用心，相信基础比我好的多得各位一定会比我做的更好，大家见谅。

这篇教程主要侧重于视觉稿、整体界面的整合，以求更好地叙述设计理念，主要侧重于可交互原型。

大家可以看到下图这个最终结果，“架子”已经“搭”好了，具体的细节慢慢丰满即可。

参考的效果有：

如果大家伙打算仔细撸一款牛逼的手表，不妨设计前先读读我翻译的

Android Wear UI设计规范深度剖析：http://www.ui.cn/project.php?id=12022

以及相关资料

首先要强调下本案例中的4个Patch，非常实用，非常的符合逻辑思维，利用这4个patch，大部分的效果都可以达成。

Javascript：通过对输入值得判定，来决定输出值

Timeline：时间轴patch，利用这个Patch，我们可以打造出时间帧动画

Logic：与或非等逻辑

Math：决定了物体参数变化，math expression可以看成是math的高级形式，在进行交互时，可以实现“交互方式不同，效果也不同”。

首先，分析一下整体效果，分成5个部分

—————————————————————————————————————————————————————————————————————————

使用插件依然是jQC1.0+Origami 1.2（手表模板来自jQC1.0，各位QC粉，不可不下）

1.时钟界面

（1）背景图用PS做了一张，然后置于底层，这样多余的部分就去掉了（因此尺寸要大）

（2）这页我偷懒了，直接用的别人的QC文件制作出了钟表效果，不是很难，各位可以研究一下

（3）moto 360这个是直接用的一张png

（4）moto 360上方设置了可点击区域Hit Area，点击后进入主界面

2.主界面

（1）这一页稍显复杂，4个点可以交互——点击时间进入时钟界面，点击“G”Logo进入通知界面，点击页卡具有滚动效果，点击第三张页卡的小飞机，进入具体细节界面

（2）素材方面，需要用PS画一张png长图，涵盖png页卡，由于制作了Javascript切换背景的效果，还需要4张精美背景图

（3）整体使用字体为Roboto Light/Thin，G Logo使用字体为catull

（4）这一页涵盖的动效有，点击时间，时钟界面出现的透明动效/点击G Logo，整个Logo上跳，Logo变红，然后画布变白的动效/整体的翻页滚动效果/翻页时卡片不同，背景切换的效果/点击Sophia，出现的涟漪效果（谁叫Sophia！快给我来个电话）/点击“飞机”（Feel.J）出现的变暗效果

（5）使用到了Timeline、Javascript、Scroll等常用Patch，基本上这一界面能够掌握，什么交互效果都不在话下了。

3."飞机界面"

这一页比较简单了，不多说。

4.通知界面

（1）这一页没有做全，因为比较懒，没有给蓝色圆加上图标，也没有做滚动效果（因为Origami的Scroll比较坑爹，做滚动效果需要将每个元素都切出来）

（2）这一页的核心效果是，点击一个蓝色圆，其他两个蓝色圆会受到“排斥”，远离这个圆30px，使用到了Logic 这个Patch，用来简化步骤。

5.来电界面

（1）最开始使用了Ripple这个效果来模拟水波纹涟漪效果，但是不太逼真，估计把图像按比例分成多份，然后根据时间轴多次涟漪波动效果会逼真一点，但是没有动，有心的同学请补充！

（2）开始的电话摇动使用了Timeline来制作，摇动一会儿就停了

（3）在最顶层放置了Sophia和Sophia的点击区域。

————————————————————————————————————————————————————————————————————————

这是一个浩瀚的工程，好了，我们开始制作第一部分，时钟界面。

第一个环节视频地址：http://v.youku.com/v_show/id_XNzEyMTk0MDg0.html

讲解了Scroll创建滚动视图，QC中层级堆叠顺序、Javascript做判定、设定系统时间等问题。

第二个环节视频地址：http://v.youku.com/v_show/id_XNzEyNjMxNTQ0.html

讲解了用Javascript实现背景图切换效果，点击小图标实现侧滑效果。

 第三个环节视频地址：http://weibo.com/1956547962/B6vxXqGH4?mod=weibotime

Timeline Patch制作时钟界面