# 即时反馈

用户当前在网页上的任何交互,不论是 hover、单击、滚动还是按下键盘,页面应给出反馈。此时反馈应该是即时的、有效的、合适的(按照重要程度,避免过度打扰),用户只要操作了,就要告诉用户正在操作,操作的进度,需要多少时间以及操作的结果。

# 可操作反馈

即时响应用户操作,告诉用户当前是可操作的,以及操作的影响范围

视觉规范示例

悬停即现示例1

鼠标悬浮时,该项视觉效果明显变化,告诉用户当前按钮可操作,以及操作影 响范围

视觉规范示例

悬停即现示例2

鼠标悬浮时,该项和其他项呈现出明显不同的视觉效果,响应用户操作,即时 告诉用户当前按钮可操作

# 输入反馈

输入内容时自动实时反馈结果,而不是等到用户提交后再反馈

视觉规范示例

表格搜索示例

同样用户在查询输入框中输入内容时,会自动即时在列表中出现搜索结果,对 应关键词高亮

视觉规范示例

录入反馈示例

用户在输入时即时反馈给用户,其输入内容是否错误(一般错误说明紧贴输入 框,与输入框交互时,错误消失)

视觉规范示例

气泡反馈示例

用户在focus输入框时,给予气泡操作说明提示,输入内容时气泡消失(气泡可 承载更多文字说明、操作按钮、链接)

# 进度反馈

一个操作的结果需要一定时间或者步骤才能出现时,要及时反馈操作进度,避免用户产生疑惑或焦虑情绪

视觉规范示例

正在加载示例

当一个操作的结果需要一定时间(这个时间很短)才能出现时,即时给予用户 一个正在加载的反馈

视觉规范示例

进度条示例

当加载时间较长时,需要即时给予用户一个进度反馈,一般反馈当前进度百分 比或者剩余进度所需时间

视觉规范示例

按钮加载反馈示例

适当的加一些视觉和动画反馈效果,让用户知道自己的操作有效,而且还能给 产品增加趣味性

# 结果反馈

用户操作后,即时给予用户操作结果的反馈

视觉规范示例

顶部结果反馈示例

轻量级反馈,此结果反馈浮于界面顶部居中的位置,自动关闭(用户也可 操作关闭),不打断用户当前操作(一般用于成功/异常反馈)

视觉规范示例

对话框反馈示例

重量级反馈,此对话框反馈浮于页面中央,用户可进行取消或确认的操作, 打断用户操作(用户在反馈层出现时不可进行任何操作),对于重要的失败 通知,一般也使用对话框进行通知,避免用户遗漏信息

上次更新: 11/5/2020, 3:04:38 PM