按钮Button
这个可点的东西是在「做事」还是「去别的页面」?按下去之后我怎么知道开始了、能不能再按?
让按钮、表单、弹窗真的能走完:加载、校验、成功和失败。
这个可点的东西是在「做事」还是「去别的页面」?按下去之后我怎么知道开始了、能不能再按?
页面里一堆「点击这里」,点之前看不出每条去哪;有的跳转还做成了按钮,我更不知道点下去会发生什么。
「点击这里」看不出目的地
链接文字先说去哪;去别处用 a href,当前页操作才用按钮。「用户输错邮箱后,根本不知道哪里错了,也不知道应该怎么改。」
对照:同一时刻都只键入「hello@」——左侧实时校验已在字段下方长出带字段名的错误物件;右侧失焦校验仍只显示帮助,要等用户离开字段。
「填了一堆信息点提交,转圈然后没动静,不知道提交上了没,还得重新填一遍。」
表单不只是输入框加提交:字段错误和提交结果都长在物件上,失败不清空。
「邮箱字段只写了 placeholder,用户一输入就看不出用途,错误也读不出是哪个字段。」
对照:输入前——左侧 label 始终说明字段;右侧 placeholder 暂时代替字段名,一输入就没了。
「头像传了半天才反应过来失败了,根本不知道是太大、格式不对还是网络断。」
选择 → 校验 → 进度 → 成功 / 失败 → 可移除,每一步状态都长在文件行上
「输入了关键词,却看不出检索有没有跑、命中在哪一条、没结果时该怎么走下去。」
对照:搜索把关键词变成结果——命中则高亮片段、计数贴在结果区物件上(2 条)。
「弹窗一打开焦点就丢了,手滑点到遮罩把记录删了,关掉也不确定到底删没删。」
「保存成功的提示一闪而过,失败的提示也跟着消失,用户不知道还要不要重试。」
对照成功提示一闪即逝,失败提示留住直到处理——寿命不同,但都不挡主任务;关键信息要同时在页面留底。
「点列表行想看详情又不想离开当前列表,抽屉该从哪滑出?关掉之后焦点该回到哪?」
对照点列表行 → 抽屉从屏幕边缘滑出,背后列表仍可见、半透明遮罩可点关闭——抽屉是不离开主上下文的临时侧层面板,不是整页跳转。
「点了删除就直接删了,手滑都来不及——能不能在按钮旁让我确认一次再执行?」
导入过程中不知道完成了多少,也不知道失败后能不能接着来——进度条该表达什么?
“内容加载时灰块一直闪,数据到达后页面跳一下,失败了也不知道接下来该做什么。”
“支付完成后只跳走,用户看不到订单号;失败、空结果和 404 也没有可执行的下一步。”
订单 #20260805 · 可复制
无原因 · 无重试
「结账步骤条允许跳过没填地址的步骤,回退后已填内容也丢了。」
当前步高亮、已完成打勾、未到的步骤灰色;未完成当前步不能跳到下一步。
「200 条任务里我只想看未完成 + 本周到期的,怎么缩到只剩这几条?筛完还剩几条?」
2 个条件按 AND 组合 → 结果缩小到 3 条
对照勾/取消任一条件,结果列表与「找到 N 条」计数立即变。
「订单详情的概览、物流、评价、售后挤成一条长滚动;当前在哪个全靠颜色高亮,售后灰着却不说为什么,键盘也到不了标签。」
2 件商品 · 合计 ¥328 · 运输中
售后禁用:订单未确认收货,确认收货后可申请。
对照同一订单的 4 组内容在同页切换;当前态用墨色下划线,禁用标签写明原因——遮住标题仍知道活动的是哪组、为什么有的不能选。
「收藏夹一片空白——我是没有收藏,搜出来是空的,还是网挂了?」
对照原因不同 → 空态的文案、图标与主操作都不同;空 ≠ 加载中,也 ≠ 请求失败。
点了保存,怎么知道现在是未改动、编辑中、保存中,还是已经成功/失败?
同一字段 · 当前状态对照五态
“禁用按钮只变灰却没有原因和恢复路径,用户不知道如何继续。”
禁用要把「缺什么、怎么恢复」写在控件上;只变灰等于把用户锁在门外。
“帮助说明只在鼠标悬停时出现,键盘和触摸用户找不到同样的提示或关闭路径。”
「键盘焦点顺序和可见轮廓不清,用户无法知道当前操作位置。」
悬停换色 跟随鼠标指针; 焦点环 跟随键盘——两条路径不同。
焦点环 = 键盘当前位置。删掉它只留悬停色,键盘用户按 Tab 时看不到停在哪。「点了按钮之后页面一片白,或者一直转圈,我不知道是没点上、还在加载还是坏了。」
「点了发布,要么弹一坨红色英文报错,要么什么都没发生——我到底成没成功,下一步该怎么办?」
错误要长在出错的物件上:给原因、影响哪个对象、下一步怎么恢复;不静默吞错,也不把堆栈甩给用户。
「点了保存,不知道收到没、还在处理还是已经好了,于是又点了几下。」
知识点可以反复查;任务则建议按「搭页面 → 交互 → 数据 → AI → 上线 → 协作」推进。