知识领域
产品与体验
工程与交付
AI 能力

界面与交互术语

网页基础

3 个条目

前端Frontend

「注册页提交后没反应」——前端到底负责哪几层,我该在浏览器里补什么?

同一张注册页 · 点开关看三层职责

对照:三层一起,注册页才完整可交互。

组件Component

「首页和搜索页的商品卡越改越不一致,怎样只维护一份?」

组件本体ProductCardimage · title · price · action
首页
帆布包¥29
加入清单
搜索结果
水杯¥49
加入清单

复用 2 处 · 改组件本体,两处按钮同步变。

状态State

交互做完

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

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

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

操作与输入

22 个条目

按钮Button

交互做完

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

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

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

交互做完

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

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

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

交互做完

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

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

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

「用户写完一大段反馈,不知道是否达标,提交失败还会丢内容。」

最少 10 字 · 最多 300 字38 / 300

当前 38 字达到下限 · 多行换行 · 提交保留原文

数字输入框InputNumber

「用户输入购买数量时填了 0、负数或超库存,系统却没解释,还静默改掉他的值。」

购买数量

当前 12 件已触顶 · 范围 1–12 件 · 步进 1 件 · 越界即锁提交

「配送方式只能选一个,用户却能同时勾选快递和自取。」

改选前
快递
门店自取
即时配送
改选后
快递已取消
门店自取
即时配送

对照选了门店自取,快递的圆点自动变空——同一组只保留一个。

复选框Checkbox

「我想同时订阅产品更新和每周技巧,可一勾就把另一个取消了。」

已选 2/3 · 半选

勾选互不影响;父项「全选」随子项切到 全选 / 半选 / 未选——半选代表部分选中。

开关Switch

暗色模式拨一下就变色了,可订阅周报勾完却没反应——是不是坏了?

暗色模式当前:开

拨动即生效 · 不用点保存

滑块Slider

「拖滑块时看不出当前价格,也没法敲精确数字,一拖就刷出一堆结果。」

价格上限¥600
  • 蓝牙耳机¥299可买
  • 手机壳¥550可买
  • 充电宝¥800超限
  • 机械键盘¥1200超限

当前价格上限 ¥600 · 结果 2/4 件可买 · 松手后才刷新列表

评分Rate

“页面只画了几颗星,读屏用户和用户自己都看不出究竟给了几分。”

这次课有帮助吗?

4 分 · 很有帮助

选择器Select

「活动城市有几十个选项,用户打开后找不到当前选择,也无法快速定位目标城市。」

未选择
请选择活动城市

占位不是值——触发器上还看不到选择结果。

已选上海
上海
  • 上海3 场
  • 北京2 场
  • 成都已满

当前值始终在触发器可见;名额满的城市留下但禁用。

对照选了上海,触发器立刻显示上海,列表里上海带勾、成都灰掉标「已满」。

自动完成AutoComplete

「输入北京后高亮了一项,键盘却确认不了;改打北京大,旧的慢响应又把建议覆盖了。」

  • 北京大学北京 · 海淀
  • 北京理工大学待选(高亮)
  • 北京师范大学北京 · 海淀

对照:当前高亮「北京理工大学」只是待选,还没填进字段;上下键移动高亮不等于选择

级联选择Cascader

「收货地址改了省份,系统却保留了旧省份下的城市和区。」

改了省
江苏省杭州市西湖区
省 ✓ 已切市 · 已清区 · 已清

旧的市、区随省一起失效,要重选。

完整路径
江苏省南京市鼓楼区
省 ✓市 ✓区 ✓

三级连成完整路径,才可提交。

对照上级决定下级可选范围;改上级会清掉失效下级,最终值是完整路径,不是最后一级。

树形选择TreeSelect

「组织树里选负责人,两个陈琳分不清在哪个部门;展开部门和选中成员还老搞混。」

平铺下拉
请选择负责人
  • 陈琳
  • 陈琳

只显示名字——两个陈琳,选哪个?

树形选择
  • 产品部
    • 体验组
      • 陈琳
  • 工程部
    • 陈琳

路径产品部 / 体验组 / 陈琳

选中后写明完整路径,同名不会选错。

对照树形用「产品部 / 体验组 / 陈琳」路径区分同名节点,平铺做不到。

日期选择器DatePicker

「用户点了 8/8 那天,日历没拦也没说,提交才报错;他不知道哪些日子能选,也不知道按哪个时区保存。」

活动报名 · 开放日 8/10
8/8周六今日 · 早于开放日不可选
8/20周四可报名 · Asia/Shanghai已选中

日期要先过规则:开放日把 8/8 挡在外面,8/20 落进范围才确认;星期和时区跟值一起显示。

时间选择器TimePicker

「预约时间看似可选,但换到周日后仍保留了门店不营业的 10:30。」

门店预约 · 营业 09:00–18:00 · 30 分钟步长
  • 10:30已选
  • 12:30午休
  • 17:30已满
  • 08:30营业外

对照选 10:30 立即带勾;午休、已满、营业外的时段不消失,而是留下禁用并标原因。

颜色选择器ColorPicker

「选了主题色却只看到一块色:不知道选中了什么值,按钮应用后白字看不清,色盲用户也分不出。」

主题色海湾蓝#315EFB
主要操作色盲名 蓝

当前 主题色 海湾蓝 #315EFB · 结果 白字 5.09:1 达 AA 可读 · 名称 + HEX + 对比度 都在

上传Upload

交互做完

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

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

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

下拉菜单Dropdown

「用户菜单打开后键盘移不动,禁用的账单项没解释,选了之后页面也没变化。」

表单Form

交互做完

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

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

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

内容与数据展示

23 个条目

列表List

接上数据

「通知列表的项目结构不一致,加载到末尾时用户不知道还有没有更多内容。」

审核已完成刚刚未读
设计稿更新20 分钟前已读
新的评论回复1 小时前未读

当前未读 3 条 · 状态长在行上、计数长在物件上

表格Table

接上数据

「订单表排了序看不出方向,勾了行看不出选了几条,翻了页不知在第几页。」

排序:金额 ↓已选:1第:1/2
订单金额 状态
#1022¥320已取消
#1021¥256已支付
#1024¥128已支付

对照表头箭头、选中行、工具条计数一起回答「现在排什么、选了几条、在第几页」。

卡片Card

起手搭页面

「案例卡看起来像按钮却只有一小段文字能点,缺图后整张卡片布局也塌了。」

作品 · 8 分钟把模糊需求变成可验证页面
设计验收
查看详情 →

对照封面、标题、标签、入口属于同一个对象边界——卡片是摘要,不是圆角加阴影。

交互做完接上数据

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

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

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

筛选Filter

交互做完

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

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

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

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

“想给文章打几个分类标签,但分不清什么时候用标签、什么时候用徽标,也不知道怎么处理输入新建和标签太多。”

标签 · 用户可编辑3/5
对照
徽标 · 系统只读未读 12

左侧标签靠文字、可增删;右侧徽标靠数字、不可点。对照结论:一个可编辑,一个只读。

徽标Badge

「通知徽标在 0 条时仍亮红点,超过两位数又挤坏导航,读屏也不知道未读多少。」

同一入口 · 未读数变化时徽标怎么显示

0 条隐藏徽标
12 条显示数字
126 条收成 99+

数字用墨色不靠红色;真实数量由可访问名称读出,超 99 不撑坏导航。

头像Avatar

「评论区的头像加载失败后只剩破图图标,多人协作者也看不出每个人是谁、在不在线。」

林晓照片头像
周然缺图 · 首字回退
协作者 · 共 6 人

对照照片、首字、加 N 堆叠都保留身份——头像是「这是哪个人」,不是装饰圆圈。

图标Icon

「这个齿轮图标我点了没反应,读屏也读不出是设置。」

纯图标按钮(无 aria-label)读屏读作「按钮」,看不出是收藏
读屏无名
图标 + 文字读屏读作「收藏这条」,一眼能认
最稳
仅文字读屏能读,但要逐字阅读才认出
可用但慢

对照:图标是承载含义的物件——配上文字或可访问名才完整;纯图标按钮必须有 aria-label。

描述列表Descriptions

「订单详情在桌面对得齐,到手机就乱;空字段分不清没填还是没加载;订单号想复制却点不动。」

订单详情只读 · 标签值对齐
订单号
#1024
收货地址
上海市静安区南京西路 1788 号恒隆广场 3 座 45 层
联系电话
138-••••-4821
发票信息

对照标签列对齐让配对一眼可见;缺值用「—」、敏感值掩码、订单号可复制——描述表的状态长在每一行。

统计数值Statistic

「仪表盘上 12,480 这个数没标去重口径、单位和统计周期,加载时还短暂闪过 0,失败后仍显示旧值。」

关键指标周活跃用户
本周 · UTC+8

7 天内活跃≥1 次,按用户 ID 去重

12,480
+8.4%环比上升

较上周 11,512 人

已更新 10:30已就绪

对照数字、单位、口径、比较基准、趋势方向与状态一起出现——遮住标题仍知道这是什么指标、怎么算、涨还是跌。

图表Chart

「图表画出了趋势,却没标指标、时间范围和口径,用户读不出精确值,色弱也看不出涨跌。」

经营趋势 · 订单量近 6 个月
194+7.2%环比上升

对照形状看趋势(6 根柱整体升高),数值与口径靠文字(194 单 · 近 6 个月)——图形与文字缺一不可。

图片Image

起手搭页面

「商品图加载慢或加载失败时,图片位要么跳一下、要么剩个破图标,用户不知道是在加载、没图、还是坏了。」

对照同一个商品图位,加载中、成功、失败、空四态都长在物件上,尺寸始终不跳、alt 始终可读。

视频Video

「页面里的演示视频,有时候封面没了、有时候转圈不出、有时候点了没反应,我也不知道它现在到底是什么状态、能不能播。」

对照同一个课程预览视频位,封面、播放(进度+时间)、失败(重试)、空——状态长在视频位上,下一步看得清。

「附件列表里 5 个文件,看不出哪个传完了、哪个还在转、哪个失败了,失败了也没法重试。」

项目资料 · 附件(4)每个文件的状态长在行上

完成、处理中、失败、待处理——扫一眼就知道哪个文件卡在了哪一步,下一步该做什么。

引用别人原话时,除了加引号还该放什么?

终于知道下一步该怎么改了——把模糊需求拆成了可以检查的步骤。

— 林晓 · 课程学员出处:用户访谈 · 第 12 条
原文
用户原话,不删改
署名 · 角色
谁说的
出处
可核对的来源

结论:署名 + 出处 = 可核对;对照无来源的金句,读者无法核实。

交互做完

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

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

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

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

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

分段控制Segmented

「任务板要在列表/网格/紧凑视图间切,还要切范围,但选中态不清、键盘切不了、切完视图和筛选还不同步。」

我的任务 · 共 6 项分段控制
列表网格紧凑

对照连体墨色滑块盖在「网格」段指明当前;切视图,任务物件跟着重排——分段控制切的是同一内容的维度。

折叠面板Collapse

「订单详情把时间线、商品、常见问题、发票全摊开,页面拉得很长,想只看我关心的又收不起来。」

订单详情 · #1024已展开 1/4

对照折叠后 4 个标题可扫描,只展开要看的——长度换成可扫描性,箭头方向与活动计数 1/4 都长在物件上。

时间线Timeline

「物流时间线只画了一条彩色线连圆点,看不出当前到哪步;派送节点变红又不说为什么,色弱和读屏都被挡在外面。」

订单 #1024 · 履约轨迹5 节点 · 按时间排序
  1. 已下单08-05 10:24
    已完成
  2. 已支付08-05 10:31
    已完成
  3. 已发货08-06 09:12
    已完成
  4. 派送中今天 08:05
    进行中 · 当前
  5. 已签收待更新
    待处理

对照5 个节点按时间排序,形状+文字双通道标状态(实心圆=已完成、半填圆=进行中、空心环=待办),当前指针指向「派送中」——遮住标题仍知道到哪步、下一步是什么。

「给促销选类目,勾父类要联动所有子类,扁平清单勾不全;半选状态也看不出来。」

扁平清单
  • 家电
  • 厨房家电
  • 个护家电

勾「家电」不勾子类——看不出哪些纳入。

树形勾选
  • 家电
    • 厨房家电
    • 个护家电

勾「厨房家电」→ 家电变半选,提示部分子类已纳入。

对照树形勾选父子联动,半选方块说明「部分子类已选」;扁平清单看不出这层关系。

「消息发出去看不到进度,失败了也不能重试,用户不知道对话是不是还在继续。」

客服小夏 · 10:20

订单哪里出了问题?

我 · 刚刚

还没送到。

✓ 已送达
我 · 刚刚

能改地址吗?

✕ 发送失败 · 可重试

对照同一对话里每条消息都带归属、时间,和自己的发送状态——发送中、已送达、失败都长在气泡上。

导航结构

7 个条目

菜单Menu

“点了菜单项,内容区不跟着切换,当前项也只靠颜色,窄屏还把入口藏没了。”

面包屑Breadcrumb

「面包屑层级太多,当前页也长得像链接,点一下没反应;窄屏还把祖先挤没了。」

交互做完

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

结账向导第 2 步 / 共 3 步

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

分页Pagination

「订单列表翻到第 3 页,却看不出现在显示的是哪几条、一共多少、还能不能往回翻。」

订单列表共 47 条
  • CN10011林晓¥138已发货
  • CN10012陈宇航¥266待付款
  • CN10013王诗琪¥109处理中

第 11–20 条,共 47 条

对照翻页 = 切片结果:当前第 2 页,订单行换成第 11–20 条;当前页墨色实心,首末页到头「上一页 / 下一页」禁用。

「长文右边那个目录,点了不滚动,也不知道自己正在读第几节——移动端目录一折叠更是找不到正文。」

组件发布指南 · 页内目录

对照目录与正文两列同时指向「用法」:点目录项 → 对应节滚到视口、标题高亮、目录项激活;滚动正文 → 激活项反向跟随(scrollspy)。

「长页面滚到很深,想回顶部只能狂滚滚轮;按钮该什么时候出现、点了会不会清掉我刚才的勾选?」

长文章已滚动 68%

对照滚过阈值出现 · 点回顶归零 · 不抢主任务

反馈与临时层

12 个条目

加载器Spinner

「点完按钮只剩一个光秃秃的转圈,不知道在做什么、要等多久、是完成了还是卡死了。」

小圆环只表示「在动」,必须配文字说明在做什么,完成或失败后消失

骨架屏Skeleton

交互做完

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

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

进度条Progress

交互做完

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

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

「图标按钮只在鼠标悬停时显示说明,键盘和触屏用户不知道它会做什么。」

对照悬停或键盘聚焦时弹出短说明;提示只补充,操作名与关键后果仍要常驻可见,触屏需另有显示提示的入口。

「点了头像弹出资料卡,可背景被遮罩盖住、列表看不见了,Esc 也关不掉。」

气泡关闭
未分配工单 · 王女士负责人 ⌄

触发器收起浮层——工单行只看到负责人未分配。

气泡打开(无遮罩)
负责人 ⌄
林晓 · 设计师负责体验与交付指派给林晓

浮层贴触发器、不挡工单、内有主操作;Esc 或点外部关。

对照无遮罩、贴触发器、带可操作内容——这是 popover,不是 tooltip(纯文字)或 modal(强制遮罩)。

“警告提示只变成红色横条,用户看不懂严重程度,也找不到处理入口。”

账户警告即将过期

订阅将在 3 天后到期;续费后全部功能不受影响。

去续费关闭
三件事都在条上:发生了什么、影响是什么、下一步去哪处理——严重程度靠文字承担,不只靠颜色。
反例只写「系统出错了」的红条:看不懂严重程度,也找不到处理入口。
交互做完

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

操作反馈非阻塞

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

通知Notification

「通知中心的未读数不跟着标已读变化,清空后也没有反馈,用户不知道发生了什么。」

🔔 通知中心未读 2

通知 = 铃铛入口 + 角标驱动的列表:未读用文字和加粗表达、不靠红点;对照 Toast 几秒消失,通知会留下来直到标已读、移除或清空。

反例只亮一个红点、不写未读数:色盲和读屏都不知道有几条,也不知道点哪里处理。

气泡确认框Popconfirm

交互做完

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

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

弹窗Modal

交互做完

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

抽屉Drawer

交互做完

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

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

结果页Result

交互做完

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

支付结果支付成功

订单 #20260805 · 可复制

查看订单回首页
出错了

无原因 · 无重试

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