一个动效设计的 5 次改进

2016-10-08 本文已影响516人东炜黄

OK，下面这张图就是我们今天的主角：

目的很简单：点击「show details」按钮后，展示用户的详细信息窗口。设计思路也很清晰：点击 → 加载 → 出现。

但是过程中存在问题：

那么，接下来就针对这些开始改进。首先，加了一朵菊花，告诉用户正在加载。如下图：

加载本来就需要时间了，何苦再因为上浮窗口增加时间呢？于是再次改进：去除了这个窗口上浮这个多余的动效，变成下图：

去除了不必要的加载时间，但好像哪里还不对劲。

对，菊花和遮罩！虽然达到了告诉用户正在加载的目的，但这种方式过了一些。于是，第三次改进，把加载提示直接展现在按钮旁边，如下图：

顺畅多了，对吗？不过，如果让信息渐进加载的话，则可以进一步减少用户感知上的等待时间。于是第四次改进如下：

有人提出，其实遮罩 + 浮窗会让用户脱离了原来的环境中。于是，最后一次改进，采用了卡片延伸的方式：

五步，蜕变完成。

你看，一个小小的动画设计并没有想象中简单。所谓「细节是魔鬼」，一点都不夸张。

上面这个例子摘自《Stop Gratuitous UI Animation》（别做多余的 UI 动效）。我在看这个例子时看了好一会儿，觉得受用，所以特地拎了出来，希望对你也有所启发。

本文作者是 Dominic H，在努力学习的一枚产品经理，最近他还发了这些文章，别错过。