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