移动界面动效设计的全方位科普指南

读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。


读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

移动界面动效设计的全方位科普指南

动效在用户体验设计中正变得越来越重要,那么动效能带来什么好处呢?

  • 体现交互层级:动态界面使人更容易理解交互层级关系,减轻了人们的认知负担
  • 给予反馈:给人感觉界面是活的,让体验流畅
  • 弥补静态页面的表达不足:在内容优先的设计趋势下,用户界面变的更加简洁。这将给用户带来操作上的盲目感;动效则可以在不打破界面美感的前提下,弥补认知的损失

原则

设计是为了解决问题,动效设计作为设计的手段之一,能解决一些静态界面设计无法解决的问题。但是,它并不是万能的,动效要克制,过多、过慢或不适合的动效,只能让界面失去重点,让团队和用户怨声载道。

在实际项目中应用的动效,只有精准地对齐需求,才能使动效带来真正应有的价值。那么,如何评估一个动效是否有价值呢?

  1. 动效是否必要
  2. 动效是否带来体验提升
  3. 动效开发的成本是否过高

如果都没有问题,送给工程师一个飞吻吧。

动效工具

Adobe After Effect

视频特效软件,被普遍使用的动效和 MG 制作软件,功能强大,和其他 Adobe 软件无缝配合,可做的效果也是不限量的。

Quartz Composer + Origami Studio

Apple 的可视化编程软件,搭配 Facebook 的 Origami 可以非常好的模拟机器效果,做单页面的动效可以用它,Origami 还可以导出直接可实施的代码。

Hype 3

可交互的 Demo ,虽然是 HTML5 制作工具,但是做动效也算是一只[好猫]吧。

其他的还有原型工具 Framer、Pixate、Form 等和 QuartzCode、PaintCode 也都可以用来做动效。具体工作时候可以选用适合的来做,目前还没有一站式解决的软件出现。

数值化动效

只谈制作动效,不谈实现都是耍流氓,动效设计师同样需要为动效标注。

常规的值包括:

  1. 属性:移动距离 旋转角度
  2. 时间:运动持续时间 延迟出现时间 重复时间
  3. 曲线Android:插值器曲线
  4. iOS:运动曲线
  5. 自定义曲线

移动界面动效设计的全方位科普指南

动效标注模版,包括常用动作、曲线、表格。 Sketch 格式,Sketch 的快速、矢量特性也非常适合进行动效标注。

动效标注技巧

移动界面动效设计的全方位科普指南

有些运动需要分解成多种值标注。比如 Material Design 里面的「重力运动」

设计师的思维是 Position 到 Position 的弧线运动,但实现时并没有运动轨迹的开发方式。

那么如何表述这个运动轨迹呢?

两种方法

时间错位:

移动界面动效设计的全方位科普指南

延迟单个值的时间(真实运动曲线为绿色虚线略有夸张)

不同曲线:

移动界面动效设计的全方位科普指南

两个值持续时间相同,但应用的曲线不同

曲线 / 插值器

刚才提到了曲线是什么呢?

在 Android 系统内,调用系统内置曲线插值器,改变动画的播放速率,可以实现大部分动态速率的效果。

移动界面动效设计的全方位科普指南

图为 Android 插值器

自定义曲线

插值器默认的速率无法完全符合需求时,还需要给它进行数值调整。

调整 Factor 的值,就可以快速改变速率:

移动界面动效设计的全方位科普指南

当然,你也可以尝试使用自定义的去曲线,将曲线换算成二次贝塞尔曲线,可以直接用于开发。

如下图,为 cubic-bezier (.82, .25, .29, .78)

移动界面动效设计的全方位科普指南

Android 和 iOS 都支持二次贝塞尔和三次贝赛尔曲线。

交互与动效

动效和交互联系很紧密,这也要求动效是先于视觉考虑的。

移动界面动效设计的全方位科普指南

如上图,在内容优先的设计中常用的共享元素样式,从交互层面就需要对动效有一定的规划,否则会遇到动效很牵强或视觉返工的情况。

动画与动效

动效不同于动画,动效常发生在过场或操作之后,有趋向于表现更快的倾向。动画中看上去恰到好处的运动时间,直接套用在动效中应用会显得拖沓沉冗效率不高。显然,简单粗暴的把动画中的时间直接应用在动效中,是不合适的。

在 Material Design Motion 中,对动效时间有比较详细的定义,对各种设备的动画时间都有推荐,实际应用时还需要考虑元素变化的范围,给出合适的时间。

虽然 Android 动效已经支持 60fps 的速度,但是在实际应用中,有时运动不够平滑*确实存在,甚至为了达到理想效果,要同之前标注时间相差很大。这时,可能需要对部分标注时间进行修改,不过我一般会遵循一个原则:尽量保持时间之间的比例,倾向相信模拟中的时间。因为机器的个体差异导致的问题很难被量化。当然,解决这种问题,需要工程师和设计师的通力配合。

项目中的动效

就好像工业设计师需要懂材料、平面设计师需要了解印刷知识,动效设计同样需要设计师具有「跨专业」的视野。

在 iOS 和 Android 上,系统其实已经帮你完成了不少工作,很多常见的、被经常使用的动效,可能已经有做好的「轮子」,这些「轮子」往往经过多次验证,效果和性能都说的过去,有些稍加改动就可以满足项目要求。

在实现这类动效的时候:

除非有信心实现的比已有的好,不然还是直接使用吧。

使用已有的「轮子」、将常用基础动效控件化,减少整个团队重复工作,提高效率,设计师和工程师也可以把精力用在能让项目更为出彩的地方。

 

作者:顾小犊

来源:http://www.uisdc.com/mobile-motion-design-guideline

版权声明:人人都是产品经理尊重行业规范,所转载的文章都注明作者和来源,若标注有误,请联系主编QQ:419297645更改。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26141/

(0)
CatherineCatherine
上一篇 2017-05-13 10:34
下一篇 2017-05-13 12:55

相关推荐

  • 全面提升用户体验,海尔卫玺首个智慧浴室体验店盛大开业!

    随着“智慧家庭”的概念不断深入人心。在智慧浴室空间领域,与以往用户单一追求产品的实用性相比,如今用户更倾向于将浴室打造成一个智能化、人性化的空间。基于用户对美好智慧生活的需求,海尔卫玺首个智慧浴室体验店于4月28日在上海盛大开业。开业地址:上海市浦东新区浦三路1515号同福易家丽6号楼2-108海尔卫浴专卖店卫玺智慧浴室体验店咨询热线:(021)50102530海尔卫玺智能马桶盖全系列闪耀亮相自上市以来,海尔卫玺智能马桶盖以高水准的品质...

    2018-05-04
  • 来!说一个影响用户体验的网贷“非典型”案例

    点击上方文字“Fintech首席体验官”关注最在乎你体验的公众号这是一个体验至上的时代,无体验,非产品。今天的推送选择了最近在新金融圈,因体验问题而引发的一个“非典型”案例,或许可以作为大家在追求合规过程中的一个警示。先来聊个5毛钱的吧……无论在哪个行业,用户体验都一直被强调。毫不夸张地说,一次用户体验上的失误,给平台带来的伤害几乎是不可估量的。近期,深圳网贷平台人人聚财就遇到了这样的事儿。【背景资料】人人聚财成立于2011年,主营业务...

    2018-03-28
  • Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20
  • 产品经理神器 Axure 安装、激活和汉化教程

    摘要:Axure 是产品经理必会的一个工具,本文详细讲解 Axure 的下载、安装、激活和汉化等流程,方便大家学习 Axure 。作为一个合格的产品经理,几乎没有人不会使用 Axure 的,事实上,熟练使用 Axure 也成为了一个产品经理的基本功。为方便新手产品经理部署 Axure 环境,方便学习和使用,下面我来详细说明涉及部署 Axure 软件的各个步骤。下载关于 Axure 软件的下载,这里不多说,建议大家去官方网站进行下载,不要...

    2018-04-25
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 实战经验|在工作中,交互设计师应学会的“僭越”

    本文是刚入行的交互设计师结合整个实际项目实践,尝试探讨交互设计师和产品经理、其他上下游同事之间的“共生”关系,希望帮助设计新人找到与上下游配合的一点灵感。“人们创造了事实上并不存在的对立,并且他们也给这些对立强加上十分确定的新的名称”。

    2017-05-04
  • 一名交互设计师的日常思考方式

    如果有一天,当你发现自己“较真又矫情,苛求又世故,倔强还言辞凿凿”,别否定自己,也许你已经开始有点交互设计师的意思了。

    2017-05-05
  • 响应式网页图片库设计的九个注意事项

    响应式设计 无疑是当前网页设计 领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网站中的图片库应当如何设计呢?

    2017-05-25
  • 如何把产品思维应用在APP页面上

    产品思维的终极目标就是  让产品经理和UI设计人员、交互设计师等建立卓有成效的合作关系,携手做出更好的移动端产品。

    2017-05-12
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19