组件是前端的基础。组件库也是前端框架的核心中的重点。

组件库中有一个重要的板块：反馈与弹层！

反馈与弹层在组件形态上，与 Button、Input 类等嵌入界面的组件有所不同，通常以层的形式出现。

本篇文章简单介绍一下组件库中反馈与弹层的组件形态、分类及功能说明。关于反馈与弹层组件在组件库中的设计与实现，后续文章将会慢慢补全。

反馈

在组件设计中，反馈是很重要的一个元素。包括用户操作的鼠标点击，移动、悬停，按键等改变组件的颜色都属于反馈。但今天主要介绍的是组件库设计中的反馈组件的设计，而不是组件本身的反馈设计。

反馈组件的作用是将系统中当前的数据、操作、或重要提示反馈给用户，不让用户因对系统状态的未知而产生焦虑、或因为操作规则不明而无所适从。显示简短的重要消息、展现提供契合上下文的反馈与需要关注的信息。是这类组件主要传递的目的。

反馈根据类型可分为：Alert （警告），Message（消息），Notice（通知）Feedback（反馈），Result（结果），Tips（提示），Progress（进度）Toast(轻量反馈） 等。反馈的方式可分为弹层显示、固定显示、模态显示等。

反馈包括让用户知道自己在做什么，需要有什么注意的、已经做了什么，进行到了哪一步、以及当前的结果如何等，反馈为用户提供适当且及时的消息，以帮助他们了解他们是否正在朝着自己的目标、正在正确地迈进或完成任务。

反馈以提示、告知、警告为主。可分为标的物的信息提示、行为前的提示与告知、当前行为的进度反馈、行为结果的反馈等。

没有好的反馈与提示，可能造成用户误操作，甚至导致任务中断难以进行。

及时的反馈、完备的提示，能减少用户的误操作、引导用户的下一步行为、并能增强用户的掌控感。为用户提升整个操作流程的完整性和流畅度。同时也能丰富前端交互的元素，为提高用户体验加分！

弹层

弹层是组件的另一种展示形态。与嵌入在界面显示的组件如Button,Input等不同，弹层以新的层展开界面。提供专项、专一的界面来组织用户新的操作或展示新的内容。

弹层分为模式弹层和弹出框两种。

模式弹层包括：Dialog （对话框）,Drawer （抽屉）, Loading （装载遮罩）等。模式弹层以分割用户操作行为为主。用户在完成当前操作或阅读了当前内容后，才能返回主界面。

弹出框包括：Window（窗口）、Menu （菜单）、DropdownMenu（下拉菜单）, ComboBox (下拉选择框）、Popoper（小气泡）、Popup（弹层） 等。弹出框以专项任务为主。以组织同类的数据或功能为主。为用户提供操作的指导、或展示专项内容。

弹出框与模式弹层不同在于，弹出框不会打断用户的当前操作。用户可以在弹出框和普通组件之间切换操作。而模式弹层则需要用户在完成当前操作后，才能返回原界面。

设计要点

反馈组件与弹层组件与普通组件一样，具备组件的基本要素：包括内容、个观、颜色、字体、操作反馈等。与普通不同的是，反馈组件与弹层组件是以层的方式显示在界面中。其优先度上高于普通组件，多以吸引注意力，强化操作为主要目的。

在设计反馈组件与弹层组件时，我们可以为每一种反馈组件来单独完成实现。这也是目前大部分组件库的其本实现。但这种实现从组件设计理念来说，并不是一种最佳的实现方案。好的方案是设计一套合理的 Layer （层）的管理逻辑，以层的管理逻辑来统计实现各种反馈与弹层组件。这种设计理念更具有扩展性、统一性和规范化。

#BlazorUI# 组件库采用了后一种方式，即为反馈与弹层设计了一套复杂的Layer （层）管理逻辑，在这套逻辑下，可以统一方便的完成反馈组件与层组件的构建。

#BlazorUI#为所有的反馈组件提供了一个标准的、统一的、规范的入口服务，叫 NotifyService。NotifyService 提供 Alert、Message、Result、Tips、Toast 的反馈操作。可以分别完成 Info、Notice、 Warning、Danger等类型或级别的反馈。

#BlazorUI#为弹层设计了一套统一的实现方式，包括 Dialog（对话框）、Popover（气泡）、Menu（菜单）、Drawer（抽屉）、Loading(装载）等。可以方便实现在全局、当前页、指定组件区域为提供弹层组件的显示与操作。

后继关于反馈与弹层的文章、将详细介绍#BlazorUI#组件库中反馈与弹层组件的设计思路与实现方法，以及常用反馈与弹层组件的介绍。