一个动效设计的 5 次改进

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

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

但是过程中存在问题：

• 加载缓慢，且没有任何指示在加载
• 遮罩的出现挡住了原本的 UI
• 动效太慢
• 动效多余

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

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

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

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

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

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

五步，蜕变完成。

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

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

文／Dominic_H

关键字：产品设计, 产品经理, 动效

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！