恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
论动效的重要性
0.0°
2014-09-29 自译外文 经验/观点 原作者: Paul Stamatiou 举报 37602 89 33 0

上周我第一次出席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定义动画的繁冗细节,但你最好通读以下几篇文章:authenticmotionresponsiveinteractionmeaningfultransitionsdelightfuldetails

“用心的动效编排设计能通过各种运行方式的展示直接指导用户使用,并吸引用户。避免因为版式布局或者各类元素的重新组合而迷茫,并且极大的提高了美观。”

动效不仅是单纯的界面样式展示或者愉悦舒适度的表现,而是另一种添加个性的渠道,让你的用户了解如何更好的感受交互操作,甚至为用户创造了一个故事。

页面的完全更替迫使用户不得不重新浏览整个页面,这也为编排提供了一个机会,重新组合切换安排,视觉上更好的接受。

举例说,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 

更新:2014-09-29

收藏

89人已收藏

Muselilys

Know your shabby.

  • 32

    作品

  • 501

    粉丝

  • 6

    关注

  • 设计师如何找到自己真正热爱的工作
  • 你的滚动条
  • Twitter设计总监谈“宏交互”
  • 乌托邦式UI构建者:Bret Victor
相关标签

    猜你喜欢

      2014-09-29 自译外文 经验/观点 原作者: Paul Stamatiou 举报 37602 89 33 0

      论动效的重要性

      0.0°

      你确定要举报论动效的重要性

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年09月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      33
      89
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录