设计师来看!如何向工程师描述你的动效? - 优设网 - UISDC

设计师来看!如何向工程师描述你的动效?

2016/07/25 10176评论区

describe-motion-to-developer-1

日常工作中,交互设计师不仅需要处理复杂的业务逻辑、排放各种层次的信息,还经常需要制作各类动效。除了用于可用性测试、方案汇报与演示之外,动效还承担着丰富页面效果、情感化表达等提升用户体验的作用。

按照目前的设计趋势,动效都趋向于细微化,主张动效本身不喧宾夺主,而是潜移默化地影响用户体验。动效设计需要和场景紧密结合,炫酷的效果往往并不实用。另一方面,动效设计出来之后还要能顺利被工程师所实现。很多优秀的效果在实现过程中由于设计师、工程师的专业语言不通,浪费了大量时间,并且还原度低下。所以,本文来聊一聊基础的动效交付方法。

说在最前面,我们必须理解动效制作的一个基本特点:所有复杂效果都是各个简单效果的组合。

首先,仔细观察一下手上App里的效果:时间、位置、形状(宽、高、圆角、比例大小)、透明度、颜色,基本上所有的效果都离不开这几种属性的组合变化,最多就是不同组件的属性变化相互关联。只要抓住这个特点,就能化繁为简、化整为零。

比如,观察一下微信里,在 List 中点击某个对话进入具体聊天页面时顶部 Tab 的变化:无非就是“返回按钮”和“聊天详情 icon”淡入,“中间微信文字”向左移动并淡出、“用户名”向左移动并淡入。

nn201607255

所谓的淡入淡出,就是组件(可能是文字、icon、页面)的透明度在变化,移动则不用多说,是组件的x、y坐标在改变。这里引入技术实现过程中需要关注的第一个关键点:

属性变化的起点和终点——Begain&End Value

具体来说,可能是x坐标从0px到200px,或者透明度 Opacity 从0%变到100%。记住,代码实现时也必须明确这些值的变化,这定义了整个效果的起终点状态。

有了起点值和终点值,还需要关注的第二个关键点是:

属性变化的过程——时间和曲线

严格来说,曲线是归一化后的时间与属性值的对应关系。说人话就是,这个属性从起点到终点,总共花费了一个单位的时间(可能是一秒、或十秒),那么每一个瞬间这个属性值是多少,都应该被定义清楚。

最简单的线性曲线,即属性值变化与时间成正比;最常用的 Ease Both 曲线,即属性变化先加速后减速,保持起点和终点附近变化比较平缓;比较复杂的 Spring 曲线,模拟了弹簧的震动和阻尼效果。

nn201607256

在开发过程中,几类曲线都有对应的动画函数可以调用:以 iOS 为例,如果使用的是默认 Core Animation 引擎,会有 EaseOutEaseIn 函数——其本质为贝塞尔函数曲线,因此通过调整函数下的四个参数,可以得到我们想要的曲线形状。而如果需要 Spring 等相对复杂的效果,则可以使用 Pop Animation 等第三方动画引擎,它们对默认动画有更好的封装。

记得告诉开发同学你所使用的动画曲线是哪一种(确定参数和总体动画时间)。这里推荐一个网站:http://cubic-bezier.com,可以快速调整好曲线参数并查看效果。

nn201607257

就像前面所说,所有的动画都是简单效果的组合,因此我们还需要描述这种组合的方式,也就是第三个关键点:

描述不同属性变化的组合形式——先后顺序和相互关系

以 Principle(一个比较简单易用的动效软件)的动效产出为例:

nn201607258

很简单,你要说明的就是,什么组件(如 pic 是一张图片),什么属性(xy 坐标、Scale),在什么时间(0-300ms),以什么过程(Default 曲线)做了什么变化(起点和终点值)。然后,如图所示,列举清楚整个动画过程中,各个组件属性变化的先后关系。

差点忘了,我们还必须要告诉开发同学,是什么事件开启了整个动画过程,也就是最后第四个关键点:

描述触发动效的手势操作——点击(Tap)、轻扫(Swipe)、长按(Long Press)等

好了,有了以上四个关键点,抛开动效本身制作的技术含量不谈,绝大部分基础动效应该都可以描述得非常清晰了。其中曲线部分是一个难点,也是很多设计师所描述不清楚的,推荐阅读 Material Design Motion 一章中的 Duration and easing 一节(自带梯子 https://www.google.com/design/spec/motion/material-motion.html#),不仅给出了诸多动画样例,甚至还给出了几大平台的动画函数和参数设置,非常值得学习。

nn201607259

最后再复习一下四个动效交付关键点:

第一、属性变化的起点和终点——Begain Value 和 End Value;

第二、属性变化的过程——时间和曲线;

第三、描述不同属性变化的组合形式——先后顺序和相互关系;

第四、描述触发动效的手势操作——Tap、Long Press、Swipe and so on.

作者镇雷同学是阿里巴巴的交互设计师,文笔简洁流畅。作为一个非科班的交互设计师,他对自学方法钻研得比较透彻,写过不少实战性的好文章:

  1. 这篇是自学的总路径:《零基础入门!给非科班生的自学路径图之交互设计篇》
  2. 学完了如何面试?《毕业季专题第二期!揭秘天猫交互设计师面试过程》
  3. 交互设计师速成篇:《速成技巧篇!一个月内如何学习才能应聘交互设计实习生?》

欢迎关注作者的微信公众号:

zlqr211

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/describe-motion-to-developer

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里