前端Frontend
「注册页提交后没反应」——前端到底负责哪几层,我该在浏览器里补什么?
同一张注册页 · 点开关看三层职责
对照:三层一起,注册页才完整可交互。
这个可点的东西是在「做事」还是「去别的页面」?按下去之后我怎么知道开始了、能不能再按?
页面里一堆「点击这里」,点之前看不出每条去哪;有的跳转还做成了按钮,我更不知道点下去会发生什么。
「点击这里」看不出目的地
链接文字先说去哪;去别处用 a href,当前页操作才用按钮。「邮箱字段只写了 placeholder,用户一输入就看不出用途,错误也读不出是哪个字段。」
对照:输入前——左侧 label 始终说明字段;右侧 placeholder 暂时代替字段名,一输入就没了。
「用户输错邮箱后,根本不知道哪里错了,也不知道应该怎么改。」
对照:同一时刻都只键入「hello@」——左侧实时校验已在字段下方长出带字段名的错误物件;右侧失焦校验仍只显示帮助,要等用户离开字段。
「用户写完一大段反馈,不知道是否达标,提交失败还会丢内容。」
最少 10 字 · 最多 300 字38 / 300
当前 38 字达到下限 · 多行换行 · 提交保留原文「用户输入购买数量时填了 0、负数或超库存,系统却没解释,还静默改掉他的值。」
当前 12 件已触顶 · 范围 1–12 件 · 步进 1 件 · 越界即锁提交
「配送方式只能选一个,用户却能同时勾选快递和自取。」
对照选了门店自取,快递的圆点自动变空——同一组只保留一个。
「我想同时订阅产品更新和每周技巧,可一勾就把另一个取消了。」
勾选互不影响;父项「全选」随子项切到 全选 / 半选 / 未选——半选代表部分选中。
暗色模式拨一下就变色了,可订阅周报勾完却没反应——是不是坏了?
拨动即生效 · 不用点保存
「拖滑块时看不出当前价格,也没法敲精确数字,一拖就刷出一堆结果。」
“页面只画了几颗星,读屏用户和用户自己都看不出究竟给了几分。”
4 分 · 很有帮助
「活动城市有几十个选项,用户打开后找不到当前选择,也无法快速定位目标城市。」
占位不是值——触发器上还看不到选择结果。
当前值始终在触发器可见;名额满的城市留下但禁用。
对照选了上海,触发器立刻显示上海,列表里上海带勾、成都灰掉标「已满」。
「输入北京后高亮了一项,键盘却确认不了;改打北京大,旧的慢响应又把建议覆盖了。」
对照:当前高亮「北京理工大学」只是待选,还没填进字段;上下键移动高亮不等于选择。
「收货地址改了省份,系统却保留了旧省份下的城市和区。」
旧的市、区随省一起失效,要重选。
三级连成完整路径,才可提交。
对照上级决定下级可选范围;改上级会清掉失效下级,最终值是完整路径,不是最后一级。
「组织树里选负责人,两个陈琳分不清在哪个部门;展开部门和选中成员还老搞混。」
只显示名字——两个陈琳,选哪个?
路径产品部 / 体验组 / 陈琳
选中后写明完整路径,同名不会选错。
对照树形用「产品部 / 体验组 / 陈琳」路径区分同名节点,平铺做不到。
「用户点了 8/8 那天,日历没拦也没说,提交才报错;他不知道哪些日子能选,也不知道按哪个时区保存。」
日期要先过规则:开放日把 8/8 挡在外面,8/20 落进范围才确认;星期和时区跟值一起显示。
「预约时间看似可选,但换到周日后仍保留了门店不营业的 10:30。」
对照选 10:30 立即带勾;午休、已满、营业外的时段不消失,而是留下禁用并标原因。
「选了主题色却只看到一块色:不知道选中了什么值,按钮应用后白字看不清,色盲用户也分不出。」
#315EFB当前 主题色 海湾蓝 #315EFB · 结果 白字 5.09:1 达 AA 可读 · 名称 + HEX + 对比度 都在
「头像传了半天才反应过来失败了,根本不知道是太大、格式不对还是网络断。」
选择 → 校验 → 进度 → 成功 / 失败 → 可移除,每一步状态都长在文件行上
「输入了关键词,却看不出检索有没有跑、命中在哪一条、没结果时该怎么走下去。」
对照:搜索把关键词变成结果——命中则高亮片段、计数贴在结果区物件上(2 条)。
「用户菜单打开后键盘移不动,禁用的账单项没解释,选了之后页面也没变化。」
触发器收起所有动作——工单行只看到当前状态。
4 个动作展开成列表;高亮项 ≠ 选中,禁用项保留原因。
对照选一个动作就立即执行——结果回到工单上;这与选「值」的选择器不同。
「填了一堆信息点提交,转圈然后没动静,不知道提交上了没,还得重新填一遍。」
表单不只是输入框加提交:字段错误和提交结果都长在物件上,失败不清空。
「通知列表的项目结构不一致,加载到末尾时用户不知道还有没有更多内容。」
当前未读 3 条 · 状态长在行上、计数长在物件上
「订单表排了序看不出方向,勾了行看不出选了几条,翻了页不知在第几页。」
| 订单 | 金额 ↓ | 状态 | |
|---|---|---|---|
| ✓ | #1022 | ¥320 | 已取消 |
| #1021 | ¥256 | 已支付 | |
| #1024 | ¥128 | 已支付 |
对照表头箭头、选中行、工具条计数一起回答「现在排什么、选了几条、在第几页」。
「案例卡看起来像按钮却只有一小段文字能点,缺图后整张卡片布局也塌了。」
对照封面、标题、标签、入口属于同一个对象边界——卡片是摘要,不是圆角加阴影。
「收藏夹一片空白——我是没有收藏,搜出来是空的,还是网挂了?」
对照原因不同 → 空态的文案、图标与主操作都不同;空 ≠ 加载中,也 ≠ 请求失败。
「200 条任务里我只想看未完成 + 本周到期的,怎么缩到只剩这几条?筛完还剩几条?」
2 个条件按 AND 组合 → 结果缩小到 3 条
对照勾/取消任一条件,结果列表与「找到 N 条」计数立即变。
“想给文章打几个分类标签,但分不清什么时候用标签、什么时候用徽标,也不知道怎么处理输入新建和标签太多。”
左侧标签靠文字、可增删;右侧徽标靠数字、不可点。对照结论:一个可编辑,一个只读。
「通知徽标在 0 条时仍亮红点,超过两位数又挤坏导航,读屏也不知道未读多少。」
同一入口 · 未读数变化时徽标怎么显示
数字用墨色不靠红色;真实数量由可访问名称读出,超 99 不撑坏导航。
「评论区的头像加载失败后只剩破图图标,多人协作者也看不出每个人是谁、在不在线。」
对照照片、首字、加 N 堆叠都保留身份——头像是「这是哪个人」,不是装饰圆圈。
「这个齿轮图标我点了没反应,读屏也读不出是设置。」
对照:图标是承载含义的物件——配上文字或可访问名才完整;纯图标按钮必须有 aria-label。
「订单详情在桌面对得齐,到手机就乱;空字段分不清没填还是没加载;订单号想复制却点不动。」
#1024可复制对照标签列对齐让配对一眼可见;缺值用「—」、敏感值掩码、订单号可复制——描述表的状态长在每一行。
「仪表盘上 12,480 这个数没标去重口径、单位和统计周期,加载时还短暂闪过 0,失败后仍显示旧值。」
7 天内活跃≥1 次,按用户 ID 去重
较上周 11,512 人
对照数字、单位、口径、比较基准、趋势方向与状态一起出现——遮住标题仍知道这是什么指标、怎么算、涨还是跌。
「图表画出了趋势,却没标指标、时间范围和口径,用户读不出精确值,色弱也看不出涨跌。」
对照形状看趋势(6 根柱整体升高),数值与口径靠文字(194 单 · 近 6 个月)——图形与文字缺一不可。
「商品图加载慢或加载失败时,图片位要么跳一下、要么剩个破图标,用户不知道是在加载、没图、还是坏了。」
对照同一个商品图位,加载中、成功、失败、空四态都长在物件上,尺寸始终不跳、alt 始终可读。
「页面里的演示视频,有时候封面没了、有时候转圈不出、有时候点了没反应,我也不知道它现在到底是什么状态、能不能播。」
对照同一个课程预览视频位,封面、播放(进度+时间)、失败(重试)、空——状态长在视频位上,下一步看得清。
「附件列表里 5 个文件,看不出哪个传完了、哪个还在转、哪个失败了,失败了也没法重试。」
完成、处理中、失败、待处理——扫一眼就知道哪个文件卡在了哪一步,下一步该做什么。
引用别人原话时,除了加引号还该放什么?
「终于知道下一步该怎么改了——把模糊需求拆成了可以检查的步骤。」
结论:署名 + 出处 = 可核对;对照无来源的金句,读者无法核实。
「订单详情的概览、物流、评价、售后挤成一条长滚动;当前在哪个全靠颜色高亮,售后灰着却不说为什么,键盘也到不了标签。」
2 件商品 · 合计 ¥328 · 运输中
售后禁用:订单未确认收货,确认收货后可申请。
对照同一订单的 4 组内容在同页切换;当前态用墨色下划线,禁用标签写明原因——遮住标题仍知道活动的是哪组、为什么有的不能选。
「任务板要在列表/网格/紧凑视图间切,还要切范围,但选中态不清、键盘切不了、切完视图和筛选还不同步。」
对照连体墨色滑块盖在「网格」段指明当前;切视图,任务物件跟着重排——分段控制切的是同一内容的维度。
「订单详情把时间线、商品、常见问题、发票全摊开,页面拉得很长,想只看我关心的又收不起来。」
对照折叠后 4 个标题可扫描,只展开要看的——长度换成可扫描性,箭头方向与活动计数 1/4 都长在物件上。
「物流时间线只画了一条彩色线连圆点,看不出当前到哪步;派送节点变红又不说为什么,色弱和读屏都被挡在外面。」
对照5 个节点按时间排序,形状+文字双通道标状态(实心圆=已完成、半填圆=进行中、空心环=待办),当前指针指向「派送中」——遮住标题仍知道到哪步、下一步是什么。
「给促销选类目,勾父类要联动所有子类,扁平清单勾不全;半选状态也看不出来。」
勾「家电」不勾子类——看不出哪些纳入。
勾「厨房家电」→ 家电变半选,提示部分子类已纳入。
对照树形勾选父子联动,半选方块说明「部分子类已选」;扁平清单看不出这层关系。
「首页 Banner 轮播切得太快,看不出当前第几张,前后箭头和暂停键也找不到。」
自动播放:关 · 循环:开 · 墨色实心点 = 当前第 2 帧
对照当前第 2/4 帧、墨色实心圆点、前后箭头、自动播放关闭——页码与当前态都长在物件上,遮住标题仍知道是几帧中的第几张。
「消息发出去看不到进度,失败了也不能重试,用户不知道对话是不是还在继续。」
订单哪里出了问题?
还没送到。
✓ 已送达能改地址吗?
✕ 发送失败 · 可重试对照同一对话里每条消息都带归属、时间,和自己的发送状态——发送中、已送达、失败都长在气泡上。
“点了菜单项,内容区不跟着切换,当前项也只靠颜色,窄屏还把入口藏没了。”
「面包屑层级太多,当前页也长得像链接,点一下没反应;窄屏还把祖先挤没了。」
「结账步骤条允许跳过没填地址的步骤,回退后已填内容也丢了。」
当前步高亮、已完成打勾、未到的步骤灰色;未完成当前步不能跳到下一步。
「订单列表翻到第 3 页,却看不出现在显示的是哪几条、一共多少、还能不能往回翻。」
第 11–20 条,共 47 条
对照翻页 = 切片结果:当前第 2 页,订单行换成第 11–20 条;当前页墨色实心,首末页到头「上一页 / 下一页」禁用。
「长文右边那个目录,点了不滚动,也不知道自己正在读第几节——移动端目录一折叠更是找不到正文。」
对照目录与正文两列同时指向「用法」:点目录项 → 对应节滚到视口、标题高亮、目录项激活;滚动正文 → 激活项反向跟随(scrollspy)。
「长页面滚到很深,想回顶部只能狂滚滚轮;按钮该什么时候出现、点了会不会清掉我刚才的勾选?」
对照滚过阈值出现 · 点回顶归零 · 不抢主任务
↑「键盘用户每次都要逐个穿过搜索 + 一长串导航,才能到达正文,没有办法一步跳过去。」
对照首个 Tab 显现 → Enter 直达 main,跳过整段重复导航。
「点完按钮只剩一个光秃秃的转圈,不知道在做什么、要等多久、是完成了还是卡死了。」
“内容加载时灰块一直闪,数据到达后页面跳一下,失败了也不知道接下来该做什么。”
导入过程中不知道完成了多少,也不知道失败后能不能接着来——进度条该表达什么?
「图标按钮只在鼠标悬停时显示说明,键盘和触屏用户不知道它会做什么。」
对照悬停或键盘聚焦时弹出短说明;提示只补充,操作名与关键后果仍要常驻可见,触屏需另有显示提示的入口。
「点了头像弹出资料卡,可背景被遮罩盖住、列表看不见了,Esc 也关不掉。」
触发器收起浮层——工单行只看到负责人未分配。
浮层贴触发器、不挡工单、内有主操作;Esc 或点外部关。
对照无遮罩、贴触发器、带可操作内容——这是 popover,不是 tooltip(纯文字)或 modal(强制遮罩)。
“警告提示只变成红色横条,用户看不懂严重程度,也找不到处理入口。”
订阅将在 3 天后到期;续费后全部功能不受影响。
「保存成功的提示一闪而过,失败的提示也跟着消失,用户不知道还要不要重试。」
对照成功提示一闪即逝,失败提示留住直到处理——寿命不同,但都不挡主任务;关键信息要同时在页面留底。
「通知中心的未读数不跟着标已读变化,清空后也没有反馈,用户不知道发生了什么。」
通知 = 铃铛入口 + 角标驱动的列表:未读用文字和加粗表达、不靠红点;对照 Toast 几秒消失,通知会留下来直到标已读、移除或清空。
「点了删除就直接删了,手滑都来不及——能不能在按钮旁让我确认一次再执行?」
「弹窗一打开焦点就丢了,手滑点到遮罩把记录删了,关掉也不确定到底删没删。」
「点列表行想看详情又不想离开当前列表,抽屉该从哪滑出?关掉之后焦点该回到哪?」
对照点列表行 → 抽屉从屏幕边缘滑出,背后列表仍可见、半透明遮罩可点关闭——抽屉是不离开主上下文的临时侧层面板,不是整页跳转。
“支付完成后只跳走,用户看不到订单号;失败、空结果和 404 也没有可执行的下一步。”
订单 #20260805 · 可复制
无原因 · 无重试