# 即时反馈
用户当前在网页上的任何交互,不论是 hover、单击、滚动还是按下键盘,页面应给出反馈。此时反馈应该是即时的、有效的、合适的(按照重要程度,避免过度打扰),用户只要操作了,就要告诉用户正在操作,操作的进度,需要多少时间以及操作的结果。
# 可操作反馈
即时响应用户操作,告诉用户当前是可操作的,以及操作的影响范围
悬停即现示例1
鼠标悬浮时,该项视觉效果明显变化,告诉用户当前按钮可操作,以及操作影 响范围
悬停即现示例2
鼠标悬浮时,该项和其他项呈现出明显不同的视觉效果,响应用户操作,即时 告诉用户当前按钮可操作
# 输入反馈
输入内容时自动实时反馈结果,而不是等到用户提交后再反馈
表格搜索示例
同样用户在查询输入框中输入内容时,会自动即时在列表中出现搜索结果,对 应关键词高亮
录入反馈示例
用户在输入时即时反馈给用户,其输入内容是否错误(一般错误说明紧贴输入 框,与输入框交互时,错误消失)
气泡反馈示例
用户在focus输入框时,给予气泡操作说明提示,输入内容时气泡消失(气泡可 承载更多文字说明、操作按钮、链接)
# 进度反馈
一个操作的结果需要一定时间或者步骤才能出现时,要及时反馈操作进度,避免用户产生疑惑或焦虑情绪
正在加载示例
当一个操作的结果需要一定时间(这个时间很短)才能出现时,即时给予用户 一个正在加载的反馈
进度条示例
当加载时间较长时,需要即时给予用户一个进度反馈,一般反馈当前进度百分 比或者剩余进度所需时间
按钮加载反馈示例
适当的加一些视觉和动画反馈效果,让用户知道自己的操作有效,而且还能给 产品增加趣味性
# 结果反馈
用户操作后,即时给予用户操作结果的反馈
顶部结果反馈示例
轻量级反馈,此结果反馈浮于界面顶部居中的位置,自动关闭(用户也可 操作关闭),不打断用户当前操作(一般用于成功/异常反馈)
对话框反馈示例
重量级反馈,此对话框反馈浮于页面中央,用户可进行取消或确认的操作, 打断用户操作(用户在反馈层出现时不可进行任何操作),对于重要的失败 通知,一般也使用对话框进行通知,避免用户遗漏信息