最专业的代练平台开发!

资讯热点
设计规范|网页设计组件 - 反馈类

发布时间:2022-10-23 分类: 行业动态

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

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

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

统一的用户体验:通过使用统一的组件规范,可视化和交互设计可确保确保整体用户体验。

改进设计集成:由于减少了组件的重复性工作,交互设计人员/PM可以花更多的时间和精力来讨论业务的综合功能,设计方法,设计思路和定义产品。从而推动业务创新。

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

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

吐司

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

使用场景:

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

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

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

有三种类型的Toast消息提示类别:成功类,失败类和通用类。

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

提醒警报提示

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

使用场景:

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

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

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

警报警报有三种类型的消息分类:成功类,失败类和常规类。当然,您也可以不包含图标操作。如果您有图标操作,则警报性会更强。

有两种类型的警报警报组件样式:具有删除操作,没有删除操作。

对话框对话框

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

使用场景:

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

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

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

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

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

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

通知通知提醒框

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

使用场景:

更复杂的通知内容。

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

系统积极推动。

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

工具提示文字提示

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

使用场景:

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

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

浏览器还附带了一个工具提示。浏览器本身与本文工具提示之间的区别在于浏览器附带的鼠标通常以2s显示,通常用于文本提示进行折叠。例如,一本简单的书,以及本文的工具提示鼠标似乎移入,剪切组件的样式与浏览器完全不同。

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

专栏

UX,微信公众号:UEDC,每个人都是产品经理专栏作家。曾任华为ITUX互动小组组长,现为美国Mission Mission高级互动设计师。

这篇文章最初发表。未经许可,禁止复制

该地图来自Pexels,基于CC0协议

« 为商家做生意的利弊是什么? | 荣获“领导力领军团队”,此次巡演应邀参加2018年小谷围国际产业人才大会 »