• 您当前的位置:首页 > 科技资讯 > 互联网新闻 > 全方位科普手册:产品的动效设计
  • 全方位科普手册:产品的动效设计

    时间:2017-11-23  来源:人人都是产品经理  作者:

    4. 具象的阐述动效设计

    就是让开发形象的知道你要做的什么,这个时候就需要适当的将你的动效设计——数据化。

    (必要时输出动效说明文档)

    那么问题来了,是所有动设计都是可以数据化的描述的吗?

    准确的讲我们平常web&APP设计中大部分是可以描述的。

    还有一些不可描述的动效设计,他们的基本是用在品牌展示(比如logo的变化等),或者一些小的惊喜点,比如JD的app中loadinggif,是正在送货的小人。这类的动效设计我归结为展示型动效设计。

    展示型动效设计:

    展示型动效(此图来自网络采集非作者原创)

    因为他们基本不存在复杂的交互,尤其在动效原件本身上,基本是满足一定条件触发播放,满足一定条件触发停止的逻辑。

    他们基本实现方式就是输出PNG序列,或者视频或者GIF文件形式,所以也就不存在输出说明文档的问题了。

    输出视频就要涉及到压缩体积,下面给大家说一说怎么压缩这类文件的体积:

    AE文件压缩

    AE压缩设置

    如果你用AE做,在渲染输出时,如图设置。基本可以将一半的动效设计控制在几百KB以内,将复杂动效控制在几M之内。

    如果还是过大,怎么办? 就需要压缩软件:

    视频压缩软件

    HandBrake是一款强大的视频压缩软件,可以将几十(MB)的视频文件在画面几乎无损的情况下压缩至几十(KB)大小。是不是很感人? 更感人的是它还免费。有需要的同学可以下载下来研究一下。

    功能型动效设计:

    功能型动效(此图来自网络采集非作者原创)

    类似上面这种动效设计我叫他们功能型动效设计,这是我们平常工作中可能使用最多的一种动效设计。这些动效设计就需要涉及到我们前面讲的动效设计数据化,输出效果设计文档。因为他们运动本身会涉及到页面中各种交互元件,以及交互操作。不能单单输出一个视频。需要开发使用程序控制个原件的运动实现动效设计,但是如果只对开发说我要这样一个动效设计,开发是很难理解你到底要干什么,要做到什么程度?往往还原度很低,会被开发鄙视。为了使我们的动效也能精确到像素,这个时候我们就需要进行动效数据化就是根据实际情况适当的书写《动效设计文档》。

    这里说的 ,根据实际情况适当的书写《动效设计文档》。为什么要加根据实际情况和适时呢?这就是时间成本问题。我们书写这个的目的就是想要通过精确的用数字和文字传递一种具象的动效设计。所以动效说明文档,只是一种可以向开发传递具象动效设计的方法。这个方案最终落地的形式,不需要一定是一份文档,可以根据实际情况活学活用。

    关键词:
    最近更新
    推荐资讯