百川瑜伽培训机构学校网站建设 - 专业的瑜伽培训机构学校网站建设

资讯热点
如何构建Web端设计规范的反馈类组件

发布时间:2023-12-1 分类: 电商动态

本文是关于反馈反馈的。反馈是用户完成某项操作后系统对用户的响应。根据场景,此响应将具有不同的响应形式和不同的角色。

设计规范中最重要的部分是组件规范。开发组件规范有什么好处?

简单高效:在熟悉组件的使用之后,在设计界面时,您只需合理地使用组件即可快速构建Web界面,这样既高效又无错误。由于存在一整套组件规范,因此无需在交互设计和可视化设计过程中每次都重复工作。

统一的用户体验:由于使用统一的组件规范,可以保证视觉和交互设计的一致性,确保用户体验的完整性。

增强设计集成能力:通过减少组件的重复性工作,交互设计人员/PM可以将更多的时间和精力投入到讨论业务,设计方法,设计思维和定义产品以推动业务创新的综合能力中。

根据组件的用途,它可以分为六类:反馈反馈,表单,基本基础,数据数据,导航导航等。

反馈反馈类如下所述。

首先,吐司

定义:用户生成操作,出现吐司提示,一般2~3s消失;在toast中的提示通知用户需要理解的信息,以便用户的行为在使用期间获得反馈和帮助。

使用场景:

提供有关成功,警告或错误的反馈。

顶部中心显示并自动消失,这是一个轻量级提醒,不会中断用户的操作。

例如,如果短书未上载主题封面,请单击“创建主题”按钮,将出现“吐司”提示,提示用户首先上载主题封面以创建主题。

消息吐司有三种类型:成功类,失败类,常规类。

有两种类型的组件样式:您可以单击以使其消失,并且您无法单击以使其消失。

第二,警告警告提示

定义:当用户进行某种操作时,网站会显示相应的警告信息提示用户,提示信息的状态不会主动消失。

使用场景:

当页面需要向用户显示警告消息时。

始终显示非浮动图层的静态表示,并且不会自动消失。某些组件用户可以单击关闭。

例如,删除淘宝购物车后,将出现警告警告。淘宝的例子属于警报的变种。用户可以单击“删除此删除”以在还原之前执行破坏性操作。

警报警报警报类别有三种类型:成功类,失败类和通用类。当然,您也可以不包含图标操作,并且图标操作会更加警惕。

警报警报组件有两种样式:具有删除操作和无删除操作。

三,对话框对话框

定义:用于提示用户完成当前操作或完成任务所需的一些其他信息。对话框可以是带有“确定/取消”的简单应答模式,也可以是填写表单的自定义复杂模式。

使用场景:

用户在执行重要操作时需要执行第二次确认。

用于重要的反馈提示,让用户了解信息提示。

加载少量表单填充类以减少页面跳转。

Windows系统的“确定”按钮通常位于左侧,而Mac OS的“确定”按钮通常位于右侧。出于这个原因,我们通常看到的决定有时在左边,有时在右边。

微博和微信公众号后台的对话框在左侧确定,而淘宝的对话框在右侧。微信公众账号的对话框是一个小的浮动图层弹出窗口,避免了掩码的出现,对话框也出现在操作按钮附近,对用户的干扰也是最弱的。

对话框对话框有三种常见的使用场景。表单对话框,提示类,轻量级提示类和表单类样式都基于辅助确认类对话框样式的更改。

四,通知通知提醒框

定义:悬停显示在页面的右上角,用于全局提醒通知。在服务器异常,操作失败等中很常见。

使用场景:

更复杂的通知内容。

带有交互的通知,为用户提供下一个操作点。

系统积极推动。

通知通知提醒框显示在网页的右上角。一般来说,它会消失4~5s。您也可以单击十字以关闭它。

五,工具提示文本提示

定义:简单轻量的文本提示。

使用场景:

当鼠标移入时,会立即显示提示,当删除时,它会立即消失,并且不会携带复杂的文本和操作。

通常用于解释动作按钮的文本描述。

浏览器还附带了一个工具提示。浏览器自己的工具提示和本文的工具提示之间的区别在于浏览器自己的鼠标被移动到一般的2s中进行显示,并且通常用于文本提示进行折叠和点击。例如,出现了本书中的短篇小说和工具提示鼠标,组件样式与浏览器本身完全不同。

工具提示组件可以具有以下不同样式,具体取决于需要解释的对象的位置。

« 代码又得到千万美元级融资,源于好产品、好老师、好服务 | 双面屏Nubian X新品发售,苏宁手机6#免费赠送3299元 »