提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
上周我第一次出席Google I/O大会参与了关于跨平台设计的研讨小组,不得不说这儿有太多令人目眩的体验和收获,就仿佛初到拉斯维加斯大都市那般称奇不已。Google发布了省电模式,锁屏通知等Android的改进体验,一些之前你需要通过利用附加工具才能满足的需要,正如在Android is better中所提及的。
Android Wear(手表),Android Auto(汽车)还有AndroidTV(电视),提到Android,人们的印象不再只是手机。
“无限即是艺术”——Matias Duarte
当更多的Android设备以蓬勃之势发展时,Google认为缓下步来斟酌设计本身十分必要。于是设计语言Material Design诞生,在Google建立的更高水平Android设计平台上,通过一定的限制形成原型框架,让设计变得更简单。
然而真正重要的不是Android也不是Material Design,而是Google强调了动效的重要性。动效元素将被添载到计算机,手机的软件还有手表,在I/O大会上的动效设计展示几乎也是无处不在,显然,开发者对她的关注程度也是历史性的。
“如果你是设计师,请学好动效设计。从模拟A到模拟B一共有58帧69fps。”——Paul Stamatiou
一年半以前在我完成一半的文件夹“工作工具”中,我写了很多关于在设计中如何使用合适的工具来对设计意图进行传述,通过After Effects和Quartz Composer转化展示,利用HTML/CSS/JS建立原型,最后再在设备上演示。
那正是Facebook在设计社区嚣张不已时,他们在FB Home的设计过程中提及到Quartz Composer:
QC不仅方便了工程师工作,更是改变了表达设计意图的方式。看到如此生动的交互演示,你便能立马理解这项设计将为你带来什么。——Julie Zhou
在此时,融合了动效和交互手势的原型模版正处在萌芽,如果你打算打破传统全面定制并且添加更高水平的交互细节,尝试一下有何不可?
我不打算研究Material Design定义动画的繁冗细节,但你最好通读以下几篇文章:authenticmotion, responsiveinteraction, meaningfultransitions, delightfuldetails
“用心的动效编排设计能通过各种运行方式的展示直接指导用户使用,并吸引用户。避免因为版式布局或者各类元素的重新组合而迷茫,并且极大的提高了美观。”
动效不仅是单纯的界面样式展示或者愉悦舒适度的表现,而是另一种添加个性的渠道,让你的用户了解如何更好的感受交互操作,甚至为用户创造了一个故事。
页面的完全更替迫使用户不得不重新浏览整个页面,这也为编排提供了一个机会,重新组合切换安排,视觉上更好的接受。
举例说,Google在涟漪效果上的编排:用一系列轻微的,延缓切换作为功能可见性的表达,解释从用户到系统之间的能量传递。通过联系用户操作动作和带来的改变进行演示,提高用户对整个空间关系的理解。
设计工具
Roman Nurik在研讨会上提出了一个关于如何让其他人喜欢你设计的问题,引起了人们对于原型设计的讨论。
哪怕你耗尽5年去思考原型设计,但通常你最先想的还是如何将页面都串接起来。而到今天,原型设计意味着让别人理解这是个能够在设备上运行的真的app——页面切换,拖动元素,滚动区域,动画,还有必要的状态浏览轨迹。
在过去,耗费时间重新设计一个像Adobe After Effects的软件来满足设计师需要是不可能的,任何与设计主题无关的举措都被理解为“精致”,这又是危险的,在项目时间进展的情况下,这种耗费精力的想法都会被抛弃。
反而After Effects被用于演示新的微动效或者说对象转换,这也牵涉到精细的打磨,复杂的挖掘。好处就是大大方便了向工程师团队沟通App如何是如何运作的,诸如模式转换,页面滑出……标准的app页面切换还有链接。
时代在改变,页面切换仍会一直存在,但每一页中将会有更多的元素,你将开始新的编排。在未来的几年中,动效势必会广泛运用在桌面,电话,手表,汽车各个平台,人们对此也会越来越期待。
在Google I/O设计大会中,如何将动效与设计相融合是大家热议的话题。Googlers承认,他们使用After Effects通常只为了微动效,比如载入和图标更新,而且他们有自己的Polymer,还包括新的Material Design。
总得说,这并不是个好答案。我们仍需要很多新的设计工具。
Polymer能够减少代码量和框架限制,但是你必须使用现有的Material Design元素,而你不能够有太多自己的想法。
我一直在使用Framer.js来构建交互设计原型。这是基于JavaScript框架上,而且如果你不太适应JavaScript,它也能很好的帮助你完成工作。不像其他工具,Framer已能适用于一般的网页开发。
Framer在测试交互以及把不同页面链接方面表现得不错。但下一代工具将更多的需要管理编码,保存路径以及拖动和滚动元件的功用。我发现当我在构建Backbone.js时,总在用它来制作复杂的页面,这有些偏题…...
还有更多的WYSIWYG工具,类似于Pixate,它能让你通过拖放web app来创建你的原型,然后在你的设备上演示,但是由于无法连接上网预览网页,发展得很慢。
我一直在等待更合适的工具,不仅能让你了解如何创建,还有设计过程中的限制;当然,这也只有不断的发展才能实现。总所周知,在你的团队前展示一个生动的原型,好过其他所有的沟通。你只需要说:“通过点击,信息会载入,然后你在滑动…”
对设计师来说这是最好的时代,我们有足够的设计平台,不断更新的搭载设备来实现我们的内心的设计。
更多的设计师意识到动效的重要性,也将会有更棒的工具诞生,我们的设计也将会变得更加便捷。蝴蝶效应一般的,也会有更多更好的为人们解决问题的设计作品。
对设计来说,有效的交流也意味着你能够掌控更多。——Milton Glaser
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册