人机交互（HCI）并不是“把按钮画得好看一点”，而是一套让用户更容易理解、做对、做完的设计与工程语言。
这篇文章把常用的 HCI 概念压缩成 10 个关键词，并且配上网页/落地页里最常见的例子，最后给你一份 5 分钟评审清单：当你在做页面、做组件、做交互细节时，可以快速自检。
1) 反馈（Feedback）：系统要让用户知道“发生了什么”
定义：用户做了一个动作（点击、提交、拖拽、切换），系统要在合理时间内给出可感知的反馈。
常见例子
- 表单提交：按钮进入 loading，完成后显示成功状态或错误提示。
- 切换开关：立刻改变视觉状态，同时在后台异步保存。
典型坑
- 点击后没有任何变化（用户会重复点击）。
- 只有“转圈圈”，没有明确“在处理什么 / 预计多久”。
2) 可供性（Affordance）：这个东西看起来“能做什么”
定义：元素的外观与上下文暗示它的可操作方式。
常见例子
- 可点击：按钮有明确的层级（填充色/边框/悬浮态），链接有可识别样式。
- 可输入：输入框边界、占位符与焦点态清晰。
典型坑
- 看起来像按钮的东西其实不可点（或反过来）。
- 图标没有配文字或 tooltip，导致可供性不足。
3) 映射（Mapping）：操作与结果之间的对应关系
定义：用户如何操作、会影响什么结果，这个对应关系是否自然。
常见例子
- 音量滑块向右更大、向左更小。
- 轮播的左右箭头与内容移动方向一致。
典型坑
- 交互方向与视觉方向相反（例如内容向右滑却显示“上一页”）。
4) 约束（Constraints）：把“错误操作”挡在外面
定义：通过规则限制，让用户不容易走错路。
常见例子
- 必填项没填：禁用提交按钮，或提交时明确指出缺失项。
- 上传图片：限制格式/大小，超出时给出可执行解决办法。
典型坑
- 只告诉用户“失败”，却不说明怎样才能成功。
5) 可见性（Visibility）：关键状态与关键入口必须看得见
定义：重要信息/状态/下一步动作应该在用户需要时可见。
常见例子
- 表单报错：错误信息紧挨字段，并且提供“怎么改”。
- 价格/权益：落地页的核心卖点、价格、CTA 不要藏得太深。
典型坑
- 关键 CTA 被图片/装饰元素抢走注意力。
6) 一致性（Consistency）：同一件事不要用两种说法
定义：同类控件同样行为，同类术语同样含义。
常见例子
- “提交/保存/确认”不要混用；按钮主次样式统一。
- 同一个站点里，表单校验规则一致（邮箱、手机号、密码）。
典型坑
- 一处叫“会员”，一处叫“高级权益”，用户会以为是两个东西。
7) 心智模型（Mental Model）：用户在脑海里是怎么理解你的系统的
定义：用户对系统的“默认理解”与真实规则之间的差距。
常见例子
- 用户以为“返回”会回到上一步流程；如果你把他直接踢到首页，会产生强烈挫败。
- 用户以为购物车里数量变化会自动保存；如果要点“更新”，需要显式提示。
典型坑
- 以开发者的模型设计（例如把技术字段名直接暴露在 UI）。
8) 认知负荷（Cognitive Load）：不要让用户在脑子里算太多
定义：用户需要理解/记忆/对比的成本。
常见例子
- 选项太多：提供默认值与推荐路径。
- 复杂表单：按步骤拆分、分组（
fieldset/legend），把解释放到恰当位置。
典型坑
- “一屏塞满所有信息”，导致用户不知道从哪看起。
9) 容错与恢复（Error Tolerance & Recovery）：允许犯错，并能轻松回来
定义：用户出错时，系统能帮他恢复到可继续的状态。
常见例子
- 撤销（Undo）：删除条目后提供撤销入口。
- 草稿：填写一半的内容能自动保存。
典型坑
- 一次操作不可逆，却没有二次确认或撤销。
10) 渐进披露（Progressive Disclosure）：先给“必要”，再给“更多”
定义：把复杂度分层展示。
常见例子
- 默认只显示关键字段，“高级设置”折叠起来。
- 先给一个可用模板，再允许深度自定义。
典型坑
- 重要信息也被折叠（用户找不到）。
2) 5 分钟评审清单（网页 / 落地页通用）
你可以按这张清单快速走查一个页面（或一个组件）：
- 反馈：点击/提交/切换后，$\le 100ms$ 是否有可见反馈？异步处理是否说明状态？
- 可供性：可点/不可点是否一眼能分辨？图标是否有文字或 tooltip？
- 约束：用户能否轻易走到“必定失败”的路径？失败时是否给出可执行修复？
- 可见性：核心卖点、价格、CTA、错误状态是否在用户需要时可见？
- 一致性：同类按钮/同类术语/同类校验规则是否统一？
- 认知负荷：用户是否需要记住上一步信息才能做下一步？能否减少对比成本？
- 容错：关键操作是否可撤销？是否有草稿/自动保存/二次确认？
3) 常见误区：看起来“很高级”，但实际更难用
- 只追求“动效/酷炫”，忽略了反馈与可见性。
- 把解释写进长段落，而不是写进用户当下需要的字段旁。
- 把“必须做的步骤”藏在 tooltip 或折叠面板里。
4) 落地建议：把概念变成可交付的页面改动
如果你要快速把 HCI 用在网页与落地页上，建议从这三件事开始：
- 先补反馈：按钮 loading、成功/失败提示、错误定位。
- 再补约束：禁用不可提交状态、输入限制与即时校验。
- 最后做渐进披露：把“高级选项”折叠，把“关键下一步”放到显眼位置。
FAQ
Q1：HCI 和 UX、交互设计有什么区别？
HCI 更像“学科与方法集合”，UX/交互设计更像“岗位与实践”。落到项目里，你可以把 HCI 的概念当作团队对齐语言：遇到争论时，用“反馈/可供性/映射/约束”去描述问题，会更快达成共识。
Q2：要不要每个图标都加 tooltip？
不一定。能用文字说明就别用 tooltip（尤其移动端）。tooltip 更适合：空间受限、但又必须解释的场景。反过来，如果一个页面要靠大量 tooltip 才能理解，往往意味着信息架构或命名有问题。