提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
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制作时钟界面
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册