BlazorUI 组件库——反馈与弹层 (1)
ztj100 2025-05-08 22:30 40 浏览 0 评论
组件是前端的基础。组件库也是前端框架的核心中的重点。
组件库中有一个重要的板块:反馈与弹层!
反馈与弹层在组件形态上,与 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#组件库中反馈与弹层组件的设计思路与实现方法,以及常用反馈与弹层组件的介绍。
相关推荐
- Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)
-
IT之家讯微软已向Insider用户推送了Win10预览版10532更新,本次更新对右键菜单、《Windows反馈》应用以及Edge浏览器进行了改进。除此之外还包含一些Bug,汇总如下,有意升级Wi...
- Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等
-
IT之家讯本月中旬微软向Insider用户推送了Win10Mobile预览版10512,该版本修复了一些Bug,增强了系统稳定性,但依然存在一些问题。今天,微软Insider项目负责人GabeAu...
- 微软开始推送Win10预览版10532快速版更新
-
8月28日消息,刚才,微软推送了Win10Build10532快速版,修复了之前的Bug,并带来了三项改进。主要来说,这次的更新改进了右键菜单的UI,使其更具Modern风格(见上图)。此外,更新...
- Win10预览版10532更新内容大全(windows10更新预览版)
-
IT之家讯今天凌晨微软向Insider用户推送了Win10预览版10532快速版更新,本次更新主要带来了三处改进,汇总如下:o改进右键菜单,外观更加Modern。这是基于网友要求界面一致的反馈做出...
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
-
根据IT之家网友的反映,安装了微软虚拟机Hyper-V的Win10预览版用户无法成功升级Build10532版本,安装过程中会被要求回滚系统。很多朋友在尝试关闭虚拟机之后重启安装程序,结果仍然无法顺...
- Win10预览版10532界面兴起“酷黑”风潮
-
Win10预览版10532的界面改动还是较为明显的,主要体现在右键菜单上面。总体来看,该版本的右键菜单间距更宽,视觉上更大气,操作上更便于触控。具体来说,任务栏右键菜单的变化最为明显。除了增加选项的宽...
- Win10预览版10532上手图集(windows10预览版下载)
-
IT之家讯8月28日,微软今天推送了Win10预览版10532快速版更新,在该版本中,微软主要是加强细节上调整,并且主要是增强Edge浏览器性能等。在Windows10预览版10532中,微软改进了...
- Win10预览版10532上手视频亮点演示
-
IT之家讯8月28日消息,今天凌晨微软向WindowsInsider快速通道用户推送了Win10预览版10532。在Windows10预览版10532中,微软改进了右键菜单,外观更加现代化。另外还...
- 第二篇 前端框架Vue.js(vue前端框架技术)
-
前端三大核心是网页开发的基础,Vue则是基于它们构建的“生产力工具”。通俗理解就是HTML是化妆的工具如眉笔,CSS是化妆品如口红,JavaScript是化妆后的互动,而Vue就是化妆助手。有了化妆工...
- 基于SpringBoot + vue2实现的旅游推荐管理系统
-
项目描述...
- 基于Vue以及iView组件的后端管理UI模板——iview-admin
-
介绍iView-admin是一套后端管理界面模板,基于Vue2.0,iView(现在为ViewUI)组件是一套完整的基于Vue的高质量组件库,虽然Github上有一套非常火的基于ElementUI...
- 别再说你会SPA开发了,这5个核心你真的搞懂了吗?
-
前言此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。我们这里指的是在前端开发中的一种模型,叫作单页应用程序,顾名思义,就是整个项目只有一个页面,而页面中的内容是动态的...
- React.js Top20面试题(react.js中文官网)
-
概述作为React开发者,对框架的关键概念和原则有扎实的理解是很重要的。考虑到这一点,我整理了一份包含20个重要问题的清单,每个React开发者都应该知道,无论他们是在面试工作还是只是想提高技能。...
- 美媒:特朗普签署行政令后,FBI又发现约2400份、总计超14000页涉肯尼迪遇刺案文件
-
来源:环球时报新媒体1月23日特朗普下令公布肯尼迪遇刺案相关机密文件图源:美媒综合福克斯新闻网和Axios网站10日报道,在总统特朗普签署行政令,要求公布“肯尼迪遇刺案”相关政府机密文件之后,美国...
- 2021 年 Node.js 开发人员学习路线图
-
Node.js自发布以来,已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业,纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用,例如实时追踪...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)
- Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等
- 微软开始推送Win10预览版10532快速版更新
- Win10预览版10532更新内容大全(windows10更新预览版)
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
- Win10预览版10532界面兴起“酷黑”风潮
- Win10预览版10532上手图集(windows10预览版下载)
- Win10预览版10532上手视频亮点演示
- 第二篇 前端框架Vue.js(vue前端框架技术)
- 基于SpringBoot + vue2实现的旅游推荐管理系统
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)