设计师怎么和工程师配合制作UI动效?

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

designer-rd-ui-animation-1

(本文为个人笔记,我都用 Hype3 直接产出 Prototype 和 JS,避开和一堆数值的大混战,但该知道「为什么要这样做」的部份还是要懂。)

如果设计师要产出动态特效给 RD ,他们需要几种信息。感谢邱政宪、Cateyes Lin 、谢孟哲的分享,综合三位说法整理出下列 6 点:

  1. 起始状态、结束状态
  2. 变化属性(宽度、高度、XY 坐标、XYZ 轴旋转角度、透明度、颜色…)
  3. 时间脚本(多少 ms 到多少 ms 做哪个属性变化)
  4. 渐变函式(Ex. ease-in)
  5. 操作行为(停止并改为根据使用者操作、忽略、其他)
  6. 参考范例

1. 起始状态、结束状态

动态效果开始和结束时的状态。也就是动画开始前、跑完动画后,画面会长什么样子。

2. 变化属性

有写过标示文件的设计师都知道,一个组件需标出它的尺寸、距离、色码、透明度等,如果是文字还要加上字体字级行高之类。在动画的领域除了 X 轴和 Y 轴外,在 3D 空间里要再加上 Z 轴。

所有需要制作动态效果的组件通通要标出这些数值,注意是数值,不是一个「感觉」,RD 写程序不能靠感觉。

百度搜索用户体验中心的 H5 实现酷炫水滴效果 文中对于「水滴」有非常可怕 + 凶恶的数值示范(抖)。

天马行空般的设计甩到面前,含着泪也要做出来——百度前端工程师的内心独白

设计师很爽地把想象中的动态效果扔给 RD ,RD 要经过这么复杂的计算才有办法实现。如果有专门处理动画的职务就算了,这是他的工作,但往往没有这么美梦,RD 光是解 Bug 都没时间了,哪有这么多心力处理锦上添花的部份呢?)

slow-computer-620x400

3. 时间脚本

在什么时间点、某个组件的属性变化。同样是关键影格的概念,配合「变化属性」,从 A 时间点到 B 时间点之间,某组件的数值有什么变化。

若各组件变化时间不同,就会有很多不同的「时间经过」搭配「属性变化」要处理。

4. 渐变函式

可以用「动作的加减速」来理解。根据迪斯尼 12 项动画原则,第 6 条是渐快与渐慢(Slow in and slow out),Material Design 有一整个章节在说明曲线的必要性,并附上许多动画范例说明。当然这对设计师来讲很有难度。

Easing 函数速查表 可以参考这个网址,和 RD 共同讨论组件动作的路径。

5. 操作行为

「触发条件」,使用者的操作是否会影响动画?游戏类特别会注意到这个部分。

6. 参考范例

展示动画、模拟影片、Prototype 之类,对设计师来说不算太大的困难,难的绝对是上方提的这 5 项数值怎么标。这些属性状态数值没写清楚就要靠 RD 通灵了。

RD 现身说法

感谢 谢孟哲 在 FB 公开分享他的实作经验,已征得同意转录。看完这篇文后,就会知道为什么 RD 会练满通灵 Lv.99了。

wallhaven-234377

全文如下:

其实动画会有分两种:

  1. 一般的2D动画(平移、旋转、透明⋯)
  2. 特殊或3D动画(翻页、mac的丢到垃圾桶⋯)

后者大概都只能用口头或是影片沟通,而且开发成本很高。我遇过的情况是:有一个专业的设计 team,一个专业的特效函式库 team,再加上完成一切作业的软件研发 team。

前者就比较有一定的规则可循,因为 engineer在开发时,系统已经提供了相关的操作方式,只要给些相关的参数即可:

  1. 动画对象的参数变化(如坐标、透明度、旋转角度)
  2. 动画持续的时间
  3. 动画加减速的曲线,f(x)=y 表示在时间点 x 的时候对象参数为 y。

这就是上面其他人所提到的。

前两点是很简单能量化的,但是光是动画持续时间就能看出这个 team 在 ux 上的 sense:使用者觉得几秒的动画能被接受?动画播放时是否能被中断或者改变状态(左滑到一半可以停止,或变成右滑)?或者,这个动画是否是需要的?

我遇过新手 designer 或是 engineer 最常做的事情就是把动画时间定义为 0.6 到 1sec,如果没有特别的设计我通常会说「太长」而要求改为 0.3 到 0.5sec…这边扯比较远,点到为止就好了。

第三点那个方程式就好玩了。这个部分 designer 根本不知道该怎么描述,即使是 engineer,在这个素质落差那么大的年代,也不是人人都能写出那个 f(x)=y 的方程式。不过现在还是有些好用的工具可以用,如这种网页:

http://matthewlein.com/ceaser/

你可以拉动方块改变那个曲线,然后按那些按钮看到实时的效果。

当然,如同上面其他人所言,这个方程式是有现成的可以套用,比如说渐减( web engineer 喜欢说 ease-out,android 上会说 DecelerateInterpolator,由于各平台用词不同,除非是只跟特定某个平台的 engineer 沟通,否则沟通上我觉得还是用通俗的语言「渐减」来描述比较好。至少 PM 看得懂)。一般而言能有这样的描述就不错了,不过若要求更高的质量,就会需要更精确的描述。渐减这种词就跟黄色一样,是种很不精确的概念,黄色再精确一点 可能会说鹅黄或香蕉黄,但是要十分精确一定是用色码来描述,否则你的香蕉黄跟我的香蕉黄可能会不同。渐减也是一样,ease-out 跟 DecelerateInterpolator 是否相同呢?有兴趣的可以研究一下,最精确的描述则一定是数学方程式。

在开发某个要求很高的手机 app 项目时,我是直接仿造上面网页的概念,在手机上面做了一个长得很像的 app 来跟 designer 沟通。他们手指拉一拉,方程式会用到的参数就出来了,也能直接在手机上看到效果。

 

原文地址:blog.akanelee.me

作者:@Akane_Lee

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 动效设计太难了……

    回复
加载中