提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
回弹,旋转,翻转。今日的界面设计重点是动效。但是工具并不能满足我们对于效果的需求,而且大多数动效工具也非常不直观,难以学习。
作为交互设计师和软件工程师,我经常通过编码把想法实现。
而对于不会编码的人来说,问题就麻烦了,不过还还有可视化编程动画软件Quartz Composer (使用了将近十年的可视化编程语言),以及Facebook提供的插件 Origami (Facebook构建的一款新工具,作为QC的插件而存在),让不具备编程能力的人也能实现自己的想法。
我们为什么搞这玩意儿?因为第一,“让交互设计具有更多的可能性”值得尝试。其次,在我们IDEO的工作流程中,我们需要能以很快的速度构建实时交互原型。所以,我们进行了探索,Avocado因此诞生——让那些不会编码的设计师也可以用它来很好的设计。
在使用QC和Origami时,它们能够提供一些最基本的界面构建块,我们称之为“模块”(Patch)。通过模块的拼接来实现设计理念。当熟练达到一定程度,我发现自己已经能够去定制一些模块,来让我的工作更加顺手,同时减少设计的复杂度,这就是Avocado。
首先我创造了一套可复用的模块,能够实现一些常见的交互效果。
i. 注册苹果开发者账号
ii. 下载并安装Quartz Composer (我们UI中国的工具页提供了QC下载,不过之前你要安装Xcode)
iii. 下载并安装Avocado
安装完成后,我们首先来看看轮播模块
Avocado提供的Carousel(轮播)模块可以很方便的实现大量图像的轮播效果。使用Carousel模块,几秒钟就能做好轮播效果原型。
在Avocado 1.0 beta中还提供了4种基本动效:跳跃,摆动,轻摇,浮动
QC非常的强大,能够制作出效果细腻的动效,但是用起来非常的耗时,"想逻辑"和“大量连接模块"让人感到非常不愉快,而且复用性比较差。比方说图中这种最简单的摆动效果,如果不用我们提供的Nod模块,你自己用QC做,估计要做很久。而且对于旋转动效来说,需要一定的微积分知识才能做出来——Sin/Cos。而我们的Avocado这里做了简化处理,减少了制作流程中得复杂性,不用太懂数学,也能够轻松的制作交互原型。
尽管虚拟键盘是交互设计师需要经常打交道的东西。但是很少在交互原型中看到“可操作的”键盘,我自己做了之后,我明白了。。。
看了头疼不?非常煎熬,在构建iOS Keyboard这个模块的时候,我熬了一宿,在Quartz Composer和Xcode中来回跳跃,勉强搞了出来。
iOS Keyboard模块的效果
Avocado的精妙效果,还是要得益于Quartz Composer这款软件,这是Avocado的核心。QC作为一款将近10年的软件,最开始主要是用来设计屏保程序以及iTunes可视化效果,根本不是用来设计用户图形界面的。事实证明,QC对于没有编程基础的人来说,是一块难啃的骨头。为了方便大伙,我们设计了一系列易用的模块,来简化设计。
搞定之后,我们便在我们IDEO自己的项目中使用Avocado,原因有以下几点:
1. 便贴和纸质原型虽然方便实用,但是Avocado+Origami+QC可以让理念“动”起来,这样的交互设计才能考虑到更多,更加丰满。
2. 让交互设计师可以更好地、更快速的和其他同事对接,用Avocado可以非常快速的产出原型,清晰表达理念,这样整体工作便可更加灵活。——让交流更加顺畅。
3. 在定性用户研究阶段,使用Avocado可以方便迭代。例如,在用户访谈过程中,我们可以边和用户面对面交流,同时收集用户的想法和意见,如果用户有不错的意见,我们可以很快速的用Avocado把原型做出来,然后和用户交流。动态化的表达工具。
4. Avocado最厉害的地方在于,不懂编码的设计师也能利用它构建出美妙的用户体验。
Avocado让我们的工作协同更美妙。
更多效果预览:https://github.com/ideo/avocado
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册