# Elaine Kits - 提醒组件篇

**Published by:** [Elaine](https://paragraph.com/@elaine/)
**Published on:** 2022-05-08
**URL:** https://paragraph.com/@elaine/elaine-kits

## Content

今天来更新提醒相关的组件，提醒在移动端App或者是Web类产品十分常见，比如说：用户操作成功或者失败，收款提醒等。 我将提醒分成三类：弱提醒，3秒钟自动消失中提醒，待验证条件正确之后，自动消失重提醒，用户触发按钮之后，消失弱提醒-Alert组件样式：Alert使用场景： 一般可以用在系统中一些简单反应，例如成功修改手机号、密码之类弱业务。 Alert实例：成功修改和修改失败（注：以下实例都会在Convert功能种演示）中提醒-InlineAlertInlineAlert和Alert很相像，但是两者作用的场景不同，InlineAlert不会自动消失，需要校验value是否正确。 组件样式：InlineAlert的场景： 一般可以用在输入框的校验，比如说：账号密码格式校验，数量的判断等。 InlineAlert的实例：当用户输入的数量超过他的可用，提示余额不足；直到输入的数量小于等于可用，InlineAlert消失。当用户输入的数量超过系统设置的最大值，提示超过限制。重提醒-Dialog和Alert一样，Dialog也分两种居中弹出Dialog从角落弹出Corner Dialog这两种提醒一般会有选择按钮，需要用户主动触发按钮，Dialog才会消失。 Dialog组件样式：使用场景：一般用于系统相关的提醒，例如：转账收款提醒，App更新提醒等 实例：收款到账提醒和风控提醒Corner Dialog组件样式：使用场景：用在重要业务中的强提示，例如Convert是否成功失败，它的提示可以增强用户体验。 实例：最后以上是我在产品设计中总结出来的经验，从提醒程度上可以分为弱中重；但从类型上可以分成Alert和Dialog，组件里的样式都比较简单，主要是content和icon；但在真正的视觉设计中，可以发挥的空间还很大，可以贴合自己的产品风格再做视觉设计。 👋我会努力更新其他产品组件的，同步文档我也发布在Figma社区里了！ For Work, for fun. https://www.figma.com/community/file/1105041814380782645

## Publication Information

- [Elaine](https://paragraph.com/@elaine/): Publication homepage
- [All Posts](https://paragraph.com/@elaine/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@elaine): Subscribe to updates
- [Twitter](https://twitter.com/HuElaine3): Follow on Twitter