SuperAPI AI 工具集

states

设计与创作

查看项目

更新于 10-24 16:17

技能介绍

该技能名为 states,核心观点是:顺畅路径只是六种状态之一,而界面质量往往由其余五种状态决定,因为用户正是在等待、卡住或焦虑时才会注意到这些状态。

用途: 为界面中每个依赖数据的区域系统化地设计与实现状态覆盖,避免只处理成功路径。文档适用于需要提升界面健壮性与感知性能的产品设计与前端开发场景。

主要能力:

  1. 状态枚举:要求为每个数据区域列出加载(首次/再次)、空、部分、错误、过期/离线、成功等状态,并说明触发条件与展示内容。
  2. 加载状态:骨架屏需匹配最终布局的高度、宽度与节奏;预留空间避免内容到达时页面移动;使用灰色块与元素圆角,避免快速闪烁;骨架用于内容,加载指示器用于操作。
  3. 时序控制:前150–200毫秒不显示加载态;显示后至少保持300毫秒;超过3秒给出提示;超过10秒提供取消或通知选项。
  4. 重新获取:已有数据时不用骨架屏替换,保留数据并显示轻量刷新指示。
  5. 图片处理:声明宽高或宽高比,加载时200毫秒淡入,首屏外使用懒加载,失败时显示同尺寸中性占位符。
  6. 空状态:包含一行说明、一个主操作按钮,可选一行解释;区分“空”与“筛选后为空”;空状态位于所属区域内而非整页接管。
  7. 部分状态:分页显示边界与加载更多;渐进式渲染不等待最慢请求;流式列表追加内容不移动当前阅读位置。
  8. 错误状态:按顺序说明发生了什么、原因(若有助于行动)、该做什么;错误靠近起因位置;不展示堆栈或单独状态码;刷新失败时保留数据并标记过期;网络闪断自动重试一次。
  9. 乐观更新:适用于切换、排序、重命名、点赞等低失败率操作;失败时回滚并解释;保留稳定ID避免重复;不用于金钱、无撤销删除等场景。
  10. 过期与离线:标记“更新于4分钟前”而非隐藏;离线时显示持久轻量条;恢复连接后同步并清除条,不重载页面。
  11. 未保存变更:显示保存状态标签;低风险时自动保存,高风险时显式保存;离开时仅在可能丢失内容时警告;从本地存储恢复草稿。
  12. 成功反馈:就地显示(按钮变为“已保存”1.5秒、行更新、计数增加);仅当效果在别处时使用提示条;全屏成功仅用于一次性事件;措辞具体。
  13. 状态间过渡:骨架到内容交叉淡入200毫秒无位移;内容到错误就地替换不抖动;空到首项时单项进入与空消息离开不同时动画;用户操作触发的状态变化比服务器触发的更快。
  14. 检查清单:汇总上述关键要求,便于逐项核对。

使用方式: 文档以设计规范与检查清单形式呈现,读者可按“枚举—设计—核对”的流程,在构建每个数据区域前先列出状态表,再依据各节规则实现,最后用清单验证。文末提及可参考 Page Flows、Nielsen Norman Group、Mobbin、Smashing Magazine 等资源,并指向 stealth.pm/look 获取更多内容。

适用场景: 适用于 Web 与移动端产品中任何依赖数据加载的界面区域,尤其适合表单、列表、详情页、仪表盘、消息流、搜索与筛选结果等需要处理加载、空、错误与刷新状态的场景。

限制: 文档为设计指导,不提供具体代码实现、框架绑定或组件库;部分建议(如150毫秒、300毫秒、3秒、10秒等阈值)为通用经验值,实际项目需结合场景调整;未涉及无障碍、国际化或特定技术栈的适配细节。