# Elaine Kits - 提醒组件篇

By [Elaine](https://paragraph.com/@elaine) · 2022-05-08

---

今天来更新**提醒**相关的组件，提醒在移动端App或者是Web类产品十分常见，比如说：用户操作成功或者失败，收款提醒等。

我将提醒分成三类：

*   弱提醒，3秒钟自动消失
    
*   中提醒，待验证条件正确之后，自动消失
    
*   重提醒，用户触发按钮之后，消失
    

### 弱提醒-Alert

组件样式：

![](https://storage.googleapis.com/papyrus_images/64a738e284a18930dd485e221014be5c625d1d9ea90d2039a926531b6eb76c1a.png)

Alert使用场景：

一般可以用在系统中一些简单反应，例如成功修改手机号、密码之类弱业务。

Alert实例：

*   成功修改和修改失败（注：以下实例都会在Convert功能种演示）
    

![](https://storage.googleapis.com/papyrus_images/d56d848c553aa8af2bcd7622f01b7a2fd2ca7b73eac5a64f89ba1d6cde2c5141.png)

### 中提醒-InlineAlert

InlineAlert和Alert很相像，但是两者作用的场景不同，InlineAlert不会自动消失，需要校验value是否正确。

组件样式：

![](https://storage.googleapis.com/papyrus_images/19b2c26ef168d4a3cb3c3fdcac4ca13c981efdb4807d881fd0a485711cac5b58.png)

InlineAlert的场景：

一般可以用在输入框的校验，比如说：账号密码格式校验，数量的判断等。

InlineAlert的实例：

*   当用户输入的数量超过他的可用，提示余额不足；直到输入的数量小于等于可用，InlineAlert消失。
    
*   当用户输入的数量超过系统设置的最大值，提示超过限制。
    

![](https://storage.googleapis.com/papyrus_images/4236ec3f48a760a0e0f6b40343f2640bfbeb2877f16c8807e0db509dab0616ac.png)

### 重提醒-Dialog

和Alert一样，Dialog也分两种

*   居中弹出Dialog
    
*   从角落弹出Corner Dialog
    

这两种提醒一般会有选择按钮，需要用户主动触发按钮，Dialog才会消失。

Dialog组件样式：

![](https://storage.googleapis.com/papyrus_images/599668dbe724ed5f3ac846cbfd06d6a0aefd1c4d0514c3827b977b9fdc204df4.png)

使用场景：一般用于系统相关的提醒，例如：转账收款提醒，App更新提醒等

实例：

*   收款到账提醒和风控提醒
    

![](https://storage.googleapis.com/papyrus_images/e876788497bebfc59952f587d3d0f35b6c18e0fc62d44527fbbaa33655f79767.png)

Corner Dialog组件样式：

![](https://storage.googleapis.com/papyrus_images/8cdec515266599a918a6b93ba6d51b7939a45622842b23625e05d4ecbcf8456b.png)

使用场景：用在重要业务中的强提示，例如Convert是否成功失败，它的提示可以增强用户体验。

实例：

![](https://storage.googleapis.com/papyrus_images/b270ae87e3ce7a2f2a4566096857e592380e95db0b72678145a823b3aa158cbf.png)

### 最后

以上是我在产品设计中总结出来的经验，从提醒程度上可以分为弱中重；但从类型上可以分成Alert和Dialog，组件里的样式都比较简单，主要是content和icon；但在真正的视觉设计中，可以发挥的空间还很大，可以贴合自己的产品风格再做视觉设计。

👋我会努力更新其他产品组件的，同步文档我也发布在Figma社区里了！

For Work, for fun.

[https://www.figma.com/community/file/1105041814380782645](https://www.figma.com/community/file/1105041814380782645)

---

*Originally published on [Elaine](https://paragraph.com/@elaine/elaine-kits)*