天天看点

BlazorUI 组件库——反馈与弹层 (1)

作者:六月六的牛人

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

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

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

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

反馈

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

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

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

BlazorUI 组件库——反馈与弹层 (1)

消息

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

BlazorUI 组件库——反馈与弹层 (1)

警告

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

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

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

BlazorUI 组件库——反馈与弹层 (1)

弹层

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

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

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

BlazorUI 组件库——反馈与弹层 (1)

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

BlazorUI 组件库——反馈与弹层 (1)
BlazorUI 组件库——反馈与弹层 (1)

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

设计要点

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

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

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

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

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

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

继续阅读