OK，下面这张图就是我们今天的主角：
目的很简单：点击「show details」按钮后，展示用户的详细信息窗口。设计思路也很清晰：点击 → 加载 → 出现。
但是过程中存在问题：
- 加载缓慢，且没有任何指示在加载
- 遮罩的出现挡住了原本的 UI
- 动效太慢
- 动效多余
那么，接下来就针对这些开始改进。首先，加了一朵菊花，告诉用户正在加载。如下图：
加载本来就需要时间了，何苦再因为上浮窗口增加时间呢？于是再次改进：去除了这个窗口上浮这个多余的动效，变成下图：
去除了不必要的加载时间，但好像哪里还不对劲。
对，菊花和遮罩！虽然达到了告诉用户正在加载的目的，但这种方式过了一些。于是，第三次改进，把加载提示直接展现在按钮旁边，如下图：
顺畅多了，对吗？不过，如果让信息渐进加载的话，则可以进一步减少用户感知上的等待时间。于是第四次改进如下：
有人提出，其实遮罩 + 浮窗会让用户脱离了原来的环境中。于是，最后一次改进，采用了卡片延伸的方式：
五步，蜕变完成。
你看，一个小小的动画设计并没有想象中简单。所谓「细节是魔鬼」，一点都不夸张。
上面这个例子摘自《Stop Gratuitous UI Animation》（别做多余的 UI 动效）。我在看这个例子时看了好一会儿，觉得受用，所以特地拎了出来，希望对你也有所启发。
本文作者是 Dominic H，在努力学习的一枚产品经理，最近他还发了这些文章，别错过。
网友评论