real-world-metaphors

UI 中的现实世界隐喻

借鉴现实世界的 UI 模式可以降低学习成本，因为用户已经了解它们的工作方式。卡片让人觉得可以拿起来。轮播让人觉得像在翻阅一叠东西。抽屉让人觉得可以从侧面拉出。这些隐喻带有可供性——用户不看任何说明就知道该怎么做。

有意识地使用这些隐喻，而不是把它们当作装饰。

常见隐喻及适用场景

卡片

卡片是一个边界清晰、内容自成一体的单元——就像实体索引卡，或货架上的商品。

适用场景：

• 内容项彼此独立且可比较（产品、人物、文章、任务）
• 每个内容项都需要快速浏览，并且可能需要执行操作
• 内容项适合配上视觉缩略图、图片或图标

关键属性：

• 卡片应当有可拿取之感：使用阴影（--shadow-sm）、圆角和清晰的边界
• 同一组中的所有卡片宽度应相同；高度可随内容变化
• 每张卡片设置一个主要操作——次要操作放在悬停时显示，或放在详情视图中
• 卡片暗示“我可以拿起它并对它做点什么”——如果点击后什么也不会发生，就改用列表

轮播 / 横向滚动

轮播借鉴了翻阅一叠东西或沿轨道滑动内容项的动作。

适用场景：

• 内容项多于视口可容纳的数量，且主要操作是浏览
• 内容项有自然的视觉顺序（步骤、精选内容、媒体）
• 期望用户进行探索，而不是查找特定内容项

注意：

• 轮播会隐藏内容——重要内容不应只放在轮播中
• 自动播放的轮播会降低用户的控制感；优先采用由用户主动操作的导航
• 在移动设备上，不带显式导航圆点的横向滚动比箭头显得更自然

抽屉 / 侧边面板

抽屉从边缘滑入，就像实体办公桌抽屉——它能提供额外上下文，而不会替换当前视图。

适用场景：

• 需要查看次要详情，但不想丢失主视图的上下文
• 编辑或配置某个内容项，同时让列表保持可见
• 移动设备的导航模式（汉堡菜单打开侧边抽屉）

关键属性：

• 抽屉应当给人固定在边缘的感觉——导航放在左侧，详情/设置放在右侧
• 始终提供清晰的关闭操作（× 按钮和点击外部区域）
• 背后的内容应稍微变暗（遮罩层），以表明抽屉是位于上层的界面

折叠面板

就像展开后可查看内容的实体文件夹——折叠以节省空间，展开以显示详情。

适用场景：

• 内容具有清晰的父子层级
• 大多数用户一次只需要查看几个部分
• 垂直空间有限

标签页

就像活页夹中的实体分隔标签——选择一个标签即可查看对应部分。

适用场景：

• 内容划分为互斥且同级的部分
• 用户经常在不同部分之间切换
• 所有标签都与同一上下文同等相关

注意： 标签页暗示各部分处于同一层级且重要性相同。不要将标签页用于层级导航（应改用面包屑或侧边栏）。

工具提示

就像贴在物体上的便利贴——悬停时出现，提供简短的补充说明。

适用场景：

• 图标或控件需要简短标签，但始终显示会使布局显得杂乱
• 术语或数值需要结合上下文进行简短说明

不能替代： 清晰的标签、行内帮助文本，或复杂功能的文档。

善用隐喻的原则

1. 隐喻应与交互相匹配 — 卡片点击后没有任何反应，会造成虚假的可供性
2. 不要混用隐喻 — 卡片中的轮播图又嵌在抽屉中，会造成认知干扰
3. 移动端与桌面端采用不同的隐喻 — 滑动关闭、底部弹层和下拉刷新是移动端原生交互；强行应用到桌面端，两边的体验都会显得不自然
4. 层级效果能强化隐喻 — 没有阴影的卡片让人感觉无法抓取；没有遮罩层的抽屉则缺乏层叠感

审查清单

• 所选模式是否符合用户直觉中的物理隐喻？
• 卡片是否有明确的主要操作，而不只是装饰？
• 轮播图或水平滚动是否提供了导航提示（圆点、箭头，或部分显示的下一项）？
• 抽屉是否将背景内容调暗，以体现层叠关系？
• 物理隐喻是否保持一致——整个产品中，同类内容是否始终使用相同模式？