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

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


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

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

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

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

原则

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

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

  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

相关推荐

  • 交互设计延伸阅读:格式塔心理学5项法则的学习与思考

    格式塔心理学5项法则的学习与思考 最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非…

    交互设计WiKi 2015-08-27
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 如何写一份全面、易读的交互说明文档?

    交互说明文档,是交互设计师的输出物中必不可少的一项,它关系着设计方案能否最大程度的被实现。交互新人,大多会烦恼如何写交互文档,今天来聊聊这个话题。 交互文档,写给谁看 交互文档可以看做交互设计师输出的”…

    2015-12-25
  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02
  • 程序员如何应对「给我弄个网站吧」的请求?

    点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边的故事编者按:昨天,我们在这篇《“你是程序员,帮我修个电脑吧” “不会,滚”》的文章中,发起了个投票。结果发现三个选项中,打败「修电脑」,位居榜首最令大家“抓狂”的选项,竟然是「我想要创业,你帮我建个网站吧,就像淘宝那样的,一定很好做吧」。一般,遇到此类情况,我们可以选择两种处理方式:第一种,直怼式。例如:“我给你1000块,你帮我做个淘宝,就和马云的淘宝一样的” “你...

    2018-04-08
  • 做设计不得不讲究的一个点:平衡

    做设计,最难的不是搞清楚解决问题的最佳答案是什么。而是,站在全局去平衡问题与问题之间的关系,做当下资源条件下相对正确的设计决策。

    2017-05-05
  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27
  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15
  • 设计新趋势!超越扁平化设计的「化繁为简」有哪些亮点?

    我们在这个“极简主义”的世界生活已经有些时日了,之后又将去向何方?

    2016-07-18
  • 一个精美的手机的原型怎么产生的第一集

    阿西录了下视屏尝试下最直接的方式 ,你看着我怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-1 在线播放! 第一集: 第一集下载地址:点我点我 第二集下载地址:点我点我

    交互设计 2014-09-05