“多次点击，Message全局提示”交互方式的实现

“Message 消息/全局提示”：

1.用法：

常用于(用户)主动操作后的(系统)反馈提示

2.位置：

吸顶式Toast，顶部居中显示并自动消失(假定3s消失，方便讲解案例)，是一种不打断用户继续操作的轻量级提示方式。

3.已有组件库中的不足：

Element & Ant design 组件库中的“Message 消息/全局提示”显示效果

毫无疑问，针对web端的，这两个组件库给开发和设计提高了很大的工作效率，但是我们要清楚的是组件库基于用户思想和操作习惯，在一些普通的、常见的、基础的实现效果做了规整和统一，我们可以参考，但是我们要时刻提醒自己不能止步于此，它们提供的就是可开发的范围，超过我们则“无能为力”，提供给我们便捷的工具千万不能限制我们的思考与开发！！

另外，组件库提供的是基础的内容。比如就“Message 全局提示”这一组建而言，组件库上提供的是基础的，"实现效果：Toast未消失的时间内，重复点击触发按钮，则重复出现Toast提示。"

吸顶式Toast提示的显示方式就是为了不打断用户的持续操作行为的轻量级提示方式，可在某一种条件下的交互反馈则会与初衷背道而驰，所以我们需要在设计落地时考虑更多的情况去完善～

我们可以看看其他做的较好的网站，"Message 消息/全局提示"的“实现效果：Toast未消失的时间内，重复点击触发按钮，视觉上只有一个Toast提示，且每次点击均有Toast变化(可能是抖动或反弹或其他动效)的效果出现。”

【石墨文档-重复Toast提示交互效果】

【移动端/小红书-网络报错Toast提示】

也就是说组件库上提供给我们的是基础的，我们需要抓住核心思想内容，真正落地的设计也是需要结合用户体验等方面进行进一步优化和改善的；

而且我们要知道所有的网站也好，应用程序也好，都是一步步完善自己的产品的，不是一蹴而就的，比如常用的蓝湖，最开始用和现在的相比不管是功能还是交互还是操作体验都有突飞猛进的变化和提高，所以都是有一个过程，我们需要脚踏实地慢慢学习！！

哈哈哈有点啰嗦，下面详细说说从Element已有的Toast提示到想要实现的效果我们是如何做的～

4.解决方案

假定Toast提示出现的时长为3s，

实现目标：

在3s的时间内，重复触发同一个事件，Toast提示由原来组件中的点击n次出现n次Toast提示变成多次点击仅有一个Toast提示且每次触发都会有Toast交互反馈。

交互核心：

1. 3s内重复触发按钮，仅出现一次Toast提示；

2. 3s内重复触发按钮，每次均有交互反馈，让用户感觉系统是有接收到我的“请求”有反应的；

   
   

前端判断逻辑：

交互动效，我们参考的是：https://daneden.github.io/animate.css/  中shake的效果～

所以项目中，有的时候与开发一起思考如何实现，锻炼自己的逻辑思维能力，很多时候会有意想不到的收获的，当然对交互设计的思考也是有很大的帮助的；

实际一点的话，业务流程图的构建也许是某一个问题解决的切入点哦～