优艾设计网

经验分享!如何准确的向工程师传达动效设计?

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:TCWison
@TCWison (阿里高级视觉设计师):随着软件与终端的发展,如今的用户体验设计中动效的作用正变得越发重要,也有越来越多的设计师开始尝试让自己的作品“动”起来。但在实际工作中,相信大家常会有这样的

经验分享!如何准确的向工程师传达动效设计?

(譬如这段元素移动很复杂的动画,工程师即使看明白了,也不一定能准确的实现)

想要自己的设计能被精确的实现,就一定要对实现的原理有所了解。根据实现原理,把对应的参数精确的写出来,这就是参数文档。对于动效来说,基本参数无非这三类:

    动画的起始时间、持续时间(duration offset)变化的属性(rotation position scale alpha)运动速率(interpolator)

iOS与Android各自的程序语法不太相同,大家可以去官网翻看一下它们的开发者文档,了解两者在动效实现上大概的语法格式,然后对应着把这些参数标好,传递给工程师,他们就真正可以愉快的开发了。

经验分享!如何准确的向工程师传达动效设计?

(分享一下我的Andriod部分文档,只要能把开发所需的参数标明,格式随意)

当然,开发过程中少不了和工程师的不断沟通(一些如像素位置、不同机型屏幕比例的细节,包括可能出现的误差),换位思考,不能丢给他文档或demo之后做甩手掌柜,那也是不负责任的表现。

总结:

简单的说,要想准确传达自己的设计可以分三步。

第一步:要快速可视化

你可以选择任何用的顺手的工具,把自己的想法快速准确的呈现出来,就已经是成功的一半。

第二步:最大限度的还原使用场景

如果是PC端,就在电脑上演示。如果是移动端,就在手机上演示。如果可操作,那最好做可交互的原型,当然,是在时间成本允许的条件下。

第三步:把设计参数化,尽可能减少让工程师凭感觉开发的情况

相信我,如果你不希望工程师凭感觉调UI颜色,那么动效同理。一份精确的文档,是你专业性的体现。

最后我想提醒一下,本文提到了很多工具,而工具似乎有能让人着迷的魔力。所以请注意了,千万不要在追求工具的过程中迷失了设计的本源。电影《夜行者》里有一句台词:“想赢彩票的话,你得先赚够买彩票的钱。”同样,我们是设计师,想要工程师实现出酷炫的动效,你得先把它酷炫的设计出来。抓住一切机会提升自己的设计能力吧!那才是你最宝贵的东西。

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消