Back to Details

real-world-metaphors

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Real-World Metaphors in UI

UI设计中的现实世界隐喻

UI patterns borrowed from the physical world reduce the learning curve because users already know how they work. A card feels like something you can pick up. A carousel feels like flipping through a stack. A drawer feels like it slides out from the side. These metaphors carry affordance — the user knows what to do before reading any instructions.
Use them deliberately, not decoratively.
借鉴现实世界的UI模式能降低学习门槛，因为用户早已熟悉这些模式的运作方式。Card就像你可以拿起的实物，Carousel就像翻阅一叠物品，Drawer就像从侧边滑出的抽屉。这些隐喻具有功能可见性——用户无需阅读任何说明就知道该如何操作。
要刻意运用这些隐喻，而非仅作装饰用途。

Common Metaphors and When to Use Them

常见隐喻及适用场景

Card

Card

A card is a bounded, self-contained unit of content — like a physical index card or a product on a shelf.
Use when:
  • Content items are discrete and comparable (products, people, articles, tasks)
  • Each item needs to be scanned quickly and potentially acted on
  • Items benefit from a visual thumbnail, image, or icon
Key properties:
  • Cards should be graspable: elevation (
    --shadow-sm
    ), border-radius, and clear boundary
  • All cards in a set should be the same width; height can vary with content
  • One primary action per card — secondary actions appear on hover or inside a detail view
  • Cards imply "I can pick this up and do something with it" — if nothing happens on click, use a list instead
Card是一个有边界、独立的内容单元——类似实体索引卡或货架上的商品。
适用场景：
  • 内容项是独立且可比较的（商品、人物、文章、任务）
  • 每个内容项需要被快速浏览并可能触发操作
  • 内容项需要搭配视觉缩略图、图片或图标
核心特性：
  • Card应具有可抓取感：阴影（
    --shadow-sm
    ）、圆角和清晰边界
  • 同组内的所有Card宽度应一致；高度可随内容变化
  • 每个Card仅保留一个主要操作——次要操作可在 hover 时显示或放在详情视图内
  • Card暗含“我可以拿起它并进行操作”的意味——若点击无任何反应，建议改用列表

Carousel / Horizontal Scroll

Carousel / 横向滚动

A carousel borrows from the physical act of flipping through a stack or sliding items along a rail.
Use when:
  • There are more items than fit the viewport and browsing is the primary mode
  • Items have a natural visual order (steps, featured content, media)
  • The user is expected to explore, not to find a specific item
Caution:
  • Carousels hide content — important items should not live only inside a carousel
  • Auto-advancing carousels reduce user control; prefer user-driven navigation
  • On mobile, a horizontal scroll without explicit navigation dots feels more natural than arrows
Carousel借鉴了翻阅一叠物品或沿轨道滑动物品的实体操作。
适用场景：
  • 内容项数量超出视口范围，且浏览是主要操作模式
  • 内容项具有自然的视觉顺序（步骤、精选内容、媒体）
  • 预期用户会进行探索，而非寻找特定内容项
注意事项：
  • Carousel会隐藏内容——重要内容不应仅出现在Carousel内
  • 自动轮播的Carousel会降低用户控制权；优先选择用户驱动的导航方式
  • 在移动端，无明确导航点的横向滚动比箭头导航更自然

Drawer / Side Panel

Drawer / 侧边面板

A drawer slides in from an edge, like a physical desk drawer — it brings additional context without replacing the current view.
Use when:
  • Secondary detail is needed without losing context of the main view
  • Editing or configuring an item while keeping the list visible behind
  • Mobile navigation patterns (hamburger menu opens a side drawer)
Key properties:
  • The drawer should feel anchored to an edge — left for navigation, right for detail/settings
  • Always provide a clear close action (× button and clicking outside)
  • The content behind should dim slightly (overlay) to signal the drawer is a layer above
Drawer从边缘滑入，类似实体书桌抽屉——它能带来额外上下文信息，同时不替换当前视图。
适用场景：
  • 需要查看次要详情，同时不丢失主视图的上下文
  • 编辑或配置某个内容项时，保持后方列表可见
  • 移动端导航模式（汉堡菜单打开侧边Drawer）
核心特性：
  • Drawer应固定在边缘——左侧用于导航，右侧用于详情/设置
  • 始终提供清晰的关闭操作（×按钮和点击外部区域）
  • 后方内容应略微变暗（遮罩层），以表明Drawer是上层视图

Accordion

Accordion

Like a physical folder that expands to reveal contents — collapses to save space, expands to show detail.
Use when:
  • Content has a clear parent–child hierarchy
  • Most users need only a few sections at a time
  • Vertical space is constrained
类似可展开以显示内容的实体文件夹——折叠以节省空间，展开以显示详情。
适用场景：
  • 内容具有清晰的父子层级关系
  • 大多数用户仅需查看少数部分内容
  • 垂直空间受限

Tabs

Tabs

Like physical divider tabs in a binder — select a tab to see its section.
Use when:
  • Content is divided into mutually exclusive, peer-level sections
  • The user switches between sections frequently
  • All tabs are equally relevant to the same context
Caution: Tabs imply peer-level, equal-importance sections. Do not use tabs for hierarchical navigation (use breadcrumbs or sidebar instead).
类似活页夹中的实体分隔标签——选择标签即可查看对应板块内容。
适用场景：
  • 内容被划分为互斥、同级的板块
  • 用户需要频繁在不同板块间切换
  • 所有标签与同一上下文同等相关
注意事项： Tabs暗含同级、同等重要的板块。请勿将Tabs用于层级导航（改用面包屑或侧边栏）。

Tooltip

Tooltip

Like a sticky note attached to an object — appears on hover, provides brief additional context.
Use when:
  • An icon or control needs a short label that would clutter the layout if always visible
  • A term or value needs brief explanation in context
Not a replacement for: clear labels, inline help text, or documentation for complex features.
类似附着在物体上的便利贴——hover时显示，提供简短的额外上下文信息。
适用场景：
  • 图标或控件需要简短标签，但始终显示会打乱布局
  • 术语或数值需要在上下文内进行简短解释
不可替代： 清晰的标签、内嵌帮助文本或复杂功能的文档。

Principles for Using Metaphors Well

合理运用隐喻的原则

  1. The metaphor should match the interaction — a card that does nothing on click creates a false affordance
  2. Don't mix metaphors — a carousel inside a card inside a drawer creates cognitive noise
  3. Mobile borrows different metaphors than desktop — swipe-to-dismiss, bottom sheets, and pull-to-refresh are mobile-native; forcing them onto desktop feels wrong in both directions
  4. Elevation reinforces the metaphor — a card without shadow doesn't feel graspable; a drawer without an overlay doesn't feel layered
  1. 隐喻应匹配交互逻辑——点击无反应的Card会造成虚假的功能可见性
  2. 不要混合隐喻——Card内嵌套Carousel再嵌套Drawer会产生认知干扰
  3. 移动端与桌面端适用不同隐喻——滑动关闭、底部弹窗和下拉刷新是移动端原生交互；强行移植到桌面端会显得违和
  4. 层级感强化隐喻——无阴影的Card不会有可抓取感；无遮罩层的Drawer不会有层级感

Review Checklist

审核清单

  • Does the chosen pattern match the physical metaphor users will intuit?
  • Do cards have a clear primary action — not just decoration?
  • Does the carousel or horizontal scroll have navigation affordance (dots, arrows, or partial next item visible)?
  • Do drawers dim the background content to signal layering?
  • Are physical metaphors consistent — the same pattern used for the same type of content throughout the product?
  • 所选模式是否符合用户能直观理解的实体隐喻？
  • Card是否有清晰的主要操作——而非仅作装饰？
  • Carousel或横向滚动是否有导航提示（圆点、箭头或部分显示下一个内容项）？
  • Drawer是否会让背景内容变暗以表明层级？
  • 实体隐喻是否保持一致——同一模式在产品中始终用于同一类型的内容？