《致读者们》

昨天发完文章之后,很多朋友都表示了对我的支持,反应的主要问题就是上一篇文字太少了。我在写的时候没有刻意追求文字量,只图表达清楚我的所思所想,大家能这么说,我估计是因为我的文笔还不错(我知道你们没这么说,但我知道大家就是这个意思)。这篇我略加了写笔墨,如果大多数朋友喜欢这种风格,那我也就不怕大家见笑,以后多抖抖墨水。

作品来源:追波 ZhiF for UIGREAT

动效与时间相得益彰,脱离了时间,动效只是子虚乌有;离开了动效,时间也随之黯然失色。  动效种类繁多,变幻万千,追其本源,都是时间赋予了他们灵魂。

 

作品来源:追波 Lindsay for UIGREAT

我们 UI 设计师主要做移动端设计,相应的动效设计也以此为根基。手机尺寸已日趋极限,动效变化速度太快或太慢都不合适,距离和速度决定了时间。因此,我们接下来探讨的内容在很长的一段时间内都不会都大的改动。

作品来源:追波 VitoShen for UIGREAT

这方面的研究,谷歌的 material design 设计指南已给出了答案。

(注:material design 设计指南是到目前对动效设计最具参考价值的设计指南)

  • 移动设备动效通常在 300ms(毫秒)内,对于某些动效有一定的差异范围:

  • 大型复杂的全屏过渡可能具有更长的持续时间,375ms;

  • 进入屏幕的元素 225ms;

  • 离开屏幕的元素 195ms;

  • 超过 400ms 的转换太慢了。

 

作品来源:追波 李超 for UIGREAT

我相信很多朋友都听过这些,但很少有设计师对300ms有概念。纵然有 Principle、Flinto 等效率型的动效软件可供选择,但制作优质的动效 AE 是目前最好的选择,在 AE 一个 25 帧的预合成中,300ms 是多少帧?

如果你之前未接触过 AE,这一段只需了解即可。但若果你已经在用 AE 制作动效作品,回答不上来这个问题,你的动效不是偏慢了就是偏快了。为了照顾到所有人,我在此做一个小小的计算。1s 是 1000 ms,25 帧的预合成就是把 1s 分成 25 份,300ms 是 7.5帧,但帧不能在分割,所以取 8 帧。

 

这着东西我曾经给有的朋友说过,但我得到的回答是:我们做的是 iOS,material design 是安卓的东西!这么说不外乎两点:1. 认为 material design 是安卓专用的; 2. 看不起安卓。

 

先来扫除一个误区,material design 是设计指南,安卓只是采用了这套设计指南而已,这不意味着只有安卓能用。至于看不起安卓,我也不知道他们哪来的自信,在苹果 wwdc2017 上展示的 iOS11,把安卓阵营都抄成那样了,就差改名叫 Android 11 了。

 

诚然,iOS 在很长的一段时间内,在设计领域完全吊打安卓,直到现在都是设计界的风向标,但不能因为往日的辉煌就完全忽略掉其他势力的发展。若一味的闭塞双目,阻塞双耳,只顾闭门造车,多少昔日王者已是皑皑白骨。

这是我正式开始讲的第一个知识点:动效时间选取。这篇写的多少有些仓促,主要是昨天手贱在朋友圈秀之前的一周7更,让不少朋友可逮到了看我这次出糗的机会。为了能让他们失望,我要去准备明天的文章,今天就说到这里,明天见。