## 简介 - 指人机界面交互式,用户得到的反馈。 - 设计目标:在不同事件下用户都能感知与操作场景和紧急程度匹配的结果反馈或消息提示,做到合理有效的信息传达。[消息与反馈 - Ant Design](https://ant.design/docs/spec/research-message-and-feedback-cn) - 使用模态反馈要谨慎,因为很令人讨厌。 - 低频且重要(破坏性)的操作可以考虑使用。 ## 富视觉非模态 - [[About Face 4]] 提到,举的例子是 App store 正在安装的时候的那个 loading 状态。 - 案例 2:例如在一个 calander 上,某一天有一个警告的 icon 代表着某种含义,hover 会出现[[工具提示 Tooltips]] - 各种小 icon 体现任务状态,一旦学会以后,就很高效,所以并不适合新手用户。 ## 听觉反馈 待补充 ## 底层逻辑 (me) - 在保证反馈能有效触达的基础上,轻量化展示,能在原地展示,就不需要跳页。 - 说到轻量化,最近体验移动端 APP的产品,**经常会有覆盖式(原位替换)信息反馈,感觉网页端也可以使用**。 - 案例1:在移动端上,搜索框下面会有历史记录,一般右边会有一个清除按钮,点击以后清除按钮会被覆盖,变成一个确认操作,特别轻量化。如果在网页上可能就是一个弹窗或者小弹窗,打断感就很强。 - 案例2:Loves fuel 的日期筛选下拉,不一定要出来一个弹窗,也可以直接替换原界面中的一些元素(这个元素在下拉操作完成前,其实没有意义)。 - loves gif![RPReplay_Final1685076437.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/RPReplay_Final1685076437.gif) - 案例3:Zapier 的信息收集![CleanShot 2023-06-17 at 11.40.28.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-06-17%20at%2011.40.28.gif) - 如果用户能得到反馈,就不要用额外的手段,例如在列表上删除一个记录,删除时已有 2 次确认,删除成功列表页刷新了,就没必要再出现一个 [[消息提示 Toast&Message]] ### 提醒从弱到强。 #### 操作前 - 通过右上角的通知中心(例如小铃铛) - 小问号图标 Hover 展现。 - [[工具提示 Tooltips]] - 原位展示到页面上(如果界面允许的话) - [[Alert 警告提示]] - [[缺省空白状态]] #### 操作中 - 加载&Loading 与[[骨架图 lazy load]] - 进度条反馈 - 表单校验反馈 #### 操作后 - 通过右上角的通知中心(例如小铃铛) - [[消息提示 Toast&Message]] - 如果是一个轻量的操作,由于 Toast 的位置一般都离操作比较远,用户是有可能察觉不到的。有一个好的替代方案,就是直接在操作的元素(一般是按钮),作反馈。 - 例如覆盖[[按钮 Button]] ![2023-03-12 09.35.29.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2023-03-12%2009.35.29.gif) - 例如覆盖[[工具提示 Tooltips]] ![[消息提示 Toast&Message#^43ef05]] - [[Notification 通知提示]] - 原位展示到页面上(如果界面允许的话) - 表单校验反馈 - [[模态窗口·对话框 Modal]] - [[操作结果页]] ## 最佳实践 ### 提供即时的用户界面反馈 #### 一旦商家与用户界面交互,就告诉他们发生了什么。 来自 [[Polaris Design System]] ![[Pasted image 20211016152740.png]] #### 页面无法立即显示内容,使用骨架图。 来自最佳实践 [[Polaris Design System]] ![[Pasted image 20211016152845.png]] ## 待分类记录 ![](https://developer.apple.com/tutorials/developer-og.jpg) ### Metadata - Title: Feedback | Apple Developer Documentation - URL: < [https://developer.apple.com/design/human-interface-guidelines/feedback>](https://developer.apple.com/design/human-interface-guidelines/feedback>) ### Page Comment - 反馈自然融入在界面里是最好的,不需要额外的打断。 ### Highlights & Notes - Consider integrating status feedback into your interface. When status feedback is available near the items it describes, people get important information without having to take action or leave their current context. For example, Mail in iOS and iPadOS describes the most recent update and displays the number of unread messages in the toolbar of the mailbox screen, making the information unobtrusive but easy for people to check when they’re interested. - Notes: 反馈自然融入在界面里是最好的,不需要额外的打断。 ### App Store 常驻页面的反馈 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220827123640.png)