任务路线

交互做完

让按钮、表单、弹窗真的能走完:加载、校验、成功和失败。

操作与输入

7 个条目

按钮Button

交互做完

这个可点的东西是在「做事」还是「去别的页面」?按下去之后我怎么知道开始了、能不能再按?

账户设置 · 个人资料可提交

对照:邮箱已填,按下只改当前页,不跳页面。

交互做完

「用户输错邮箱后,根本不知道哪里错了,也不知道应该怎么改。」

实时校验 · 键入即报邮箱地址6 字 · 格式不对邮箱地址:请输入完整邮箱地址。
失焦校验 · 离开字段才报邮箱地址6 字 · 待离开字段用于接收报名确认。

对照:同一时刻都只键入「hello@」——左侧实时校验已在字段下方长出带字段名的错误物件;右侧失焦校验仍只显示帮助,要等用户离开字段。

表单Form

交互做完

「填了一堆信息点提交,转圈然后没动静,不知道提交上了没,还得重新填一遍。」

提交失败网络异常 · 内容已保留,可重试

表单不只是输入框加提交:字段错误和提交结果都长在物件上,失败不清空。

交互做完

「邮箱字段只写了 placeholder,用户一输入就看不出用途,错误也读不出是哪个字段。」

有 label邮箱地址label 持久可见
只有 placeholderplaceholder 暂代字段名

对照:输入前——左侧 label 始终说明字段;右侧 placeholder 暂时代替字段名,一输入就没了

上传Upload

交互做完

「头像传了半天才反应过来失败了,根本不知道是太大、格式不对还是网络断。」

换头像 · 头像图片限 JPG / PNG · 单个 ≤ 2 MB

选择 → 校验 → 进度 → 成功 / 失败 → 可移除,每一步状态都长在文件行上

反馈与临时层

7 个条目

弹窗Modal

交互做完

「弹窗一打开焦点就丢了,手滑点到遮罩把记录删了,关掉也不确定到底删没删。」

交互做完

「保存成功的提示一闪而过,失败的提示也跟着消失,用户不知道还要不要重试。」

操作反馈非阻塞

对照成功提示一闪即逝,失败提示留住直到处理——寿命不同,但都不挡主任务;关键信息要同时在页面留底。

抽屉Drawer

交互做完

「点列表行想看详情又不想离开当前列表,抽屉该从哪滑出?关掉之后焦点该回到哪?」

对照点列表行 → 抽屉从屏幕边缘滑出,背后列表仍可见、半透明遮罩可点关闭——抽屉是不离开主上下文的临时侧层面板,不是整页跳转。

气泡确认框Popconfirm

交互做完

「点了删除就直接删了,手滑都来不及——能不能在按钮旁让我确认一次再执行?」

  • 无遮罩:背景列表仍可见可点,不打断主流程。
  • 焦点进气泡:Esc / 点外部 / 取消 三条退路。
结论:气泡贴在触发器旁就地确认一次,没有全屏遮罩、不强制阻断——这是它和 modal 的关键区别;只有点「确认删除」才执行,结果落在被删的那一行上。

进度条Progress

交互做完

导入过程中不知道完成了多少,也不知道失败后能不能接着来——进度条该表达什么?

资料导入状态:处理中
当前 60%还剩 2 步 · 约剩 40 秒 · 请勿关闭页面

骨架屏Skeleton

交互做完

“内容加载时灰块一直闪,数据到达后页面跳一下,失败了也不知道接下来该做什么。”

骨架按真实内容预留尺寸,加载完成时不抖动

结果页Result

交互做完

“支付完成后只跳走,用户看不到订单号;失败、空结果和 404 也没有可执行的下一步。”

支付结果支付成功

订单 #20260805 · 可复制

查看订单回首页
出错了

无原因 · 无重试

结果页 = 状态结论 + 关键证据 + 下一步主操作:成功留下订单号、失败给原因和重试;只写「出错了」的反例既无凭据也无恢复——对照就在物件上,不只靠颜色。

导航结构

1 个条目
交互做完

「结账步骤条允许跳过没填地址的步骤,回退后已填内容也丢了。」

结账向导第 2 步 / 共 3 步

当前步高亮、已完成打勾、未到的步骤灰色;未完成当前步不能跳到下一步

内容与数据展示

3 个条目

筛选Filter

交互做完

「200 条任务里我只想看未完成 + 本周到期的,怎么缩到只剩这几条?筛完还剩几条?」

任务清单多维 facet 筛选
找到 3 条全部 8 条
  • 整理发布清单未完成 · 本周
  • 评审设计稿未完成 · 本周
  • 回复客户反馈未完成 · 本周

2 个条件按 AND 组合 → 结果缩小到 3 条

对照勾/取消任一条件,结果列表与「找到 N 条」计数立即变。

交互做完

「订单详情的概览、物流、评价、售后挤成一条长滚动;当前在哪个全靠颜色高亮,售后灰着却不说为什么,键盘也到不了标签。」

订单 #1024同一对象 · 4 个分组
详情物流评价售后
订单详情

2 件商品 · 合计 ¥328 · 运输中

售后禁用:订单未确认收货,确认收货后可申请。

对照同一订单的 4 组内容在同页切换;当前态用墨色下划线,禁用标签写明原因——遮住标题仍知道活动的是哪组、为什么有的不能选。

交互做完接上数据

「收藏夹一片空白——我是没有收藏,搜出来是空的,还是网挂了?」

我的收藏空态物件 · 随原因变
还没有收藏收藏后会显示在这里主操作:去逛逛
没找到「海岛」清除筛选看全部主操作:清除筛选

对照原因不同 → 空态的文案、图标与主操作都不同;空 ≠ 加载中,也 ≠ 请求失败。

网页基础

1 个条目

状态State

交互做完

点了保存,怎么知道现在是未改动、编辑中、保存中,还是已经成功/失败?

同一字段 · 当前状态对照五态

项目名称未改动
春日市集与服务器一致,无需保存

交互状态与指针

3 个条目

禁用态Disabled

交互做完

“禁用按钮只变灰却没有原因和恢复路径,用户不知道如何继续。”

提交按钮 · 两种禁用
提交还缺有效邮箱补齐即恢复
提交无原因

禁用要把「缺什么、怎么恢复」写在控件上;只变灰等于把用户锁在门外。

悬停Hover

交互做完

“帮助说明只在鼠标悬停时出现,键盘和触摸用户找不到同样的提示或关闭路径。”

帮助入口导出说明提示:导出会保留当前筛选条件
  • 指针悬停→ 显示同一条提示可发现
  • 键盘聚焦→ 显示同一条提示可发现
  • 触摸点击→ 提示保持 + 可关闭可发现
结果:三条路径独立发现同一条说明——hover 是附加反馈,不是唯一入口。
交互做完

「键盘焦点顺序和可见轮廓不清,用户无法知道当前操作位置。」

键盘 Tab 路径 · 确认订单
返回
付款当前位置
取消

悬停换色 跟随鼠标指针; 焦点环 跟随键盘——两条路径不同。

焦点环 = 键盘当前位置。删掉它只留悬停色,键盘用户按 Tab 时看不到停在哪。

界面体验

3 个条目

加载状态Loading State

交互做完

「点了按钮之后页面一片白,或者一直转圈,我不知道是没点上、还在加载还是坏了。」

项目列表加载结束条件 + 失败重试
  1. 骨架屏保留布局·感知快
  2. 进度条长任务·确定 %
  3. Spinner未知长度·只在转
  4. 白屏无反馈·最差
加载要让用户看到「开始了、在进行、有结束」:骨架屏保留布局感知最快,进度条给确定性百分比,Spinner 只说在转,白屏和无尽转圈会让用户以为卡死。

错误状态Error State

交互做完

「点了发布,要么弹一坨红色英文报错,要么什么都没发生——我到底成没成功,下一步该怎么办?」

发布项目 · 出错时原因 + 下一步
  • 网络异常暂时无法发布原因:服务超时,数据未写入下一步·重试
  • 输入校验项目名不能为空原因:必填项为空下一步·回字段
  • 权限不足你不能发布原因:缺少管理员权限下一步·去申请
  • 致命错误发布中断·不可重试原因:服务端崩溃 req_8f3a下一步·联系支持
  • 反例·静默失败页面无反馈,用户不知道成没成功
  • 反例·甩堆栈TypeError 堆栈直接甩给用户看

错误要长在出错的物件上:给原因、影响哪个对象、下一步怎么恢复;不静默吞错,也不把堆栈甩给用户。

交互反馈Interaction Feedback

交互做完

「点了保存,不知道收到没、还在处理还是已经好了,于是又点了几下。」

保存设置反馈可见
  1. 按下保存设置 ▾瞬时下压 · 已收到
  2. 保存中保存中…disabled + aria-busy · 防重复
  3. 结果✓ 已保存文字 + 图标 · 下一步:撤销
无反馈对照
保存设置点了没动静,用户再点一次
反馈要分阶段长在物件上:收到、处理中、结果与下一步;没有反馈或只靠颜色,用户不知道发生了什么。

做完这一步之后

知识点可以反复查;任务则建议按「搭页面 → 交互 → 数据 → AI → 上线 → 协作」推进。