设计UI布局、手势或导航时，用现实世界隐喻让交互更直观

在需要选择卡片、轮播、抽屉等UI模式时，借用物理世界隐喻降低用户学习成本，让交互自然易懂。

适用场景

解决思路

1. 卡片：用于离散、可比较的内容项（产品、人物、文章、任务），每项需快速浏览且可能被操作，适合配缩略图/图片/图标；卡片要有可抓取感（elevation 用 --shadow-sm、border-radius、清晰边界）；同一组卡片宽度一致，高度可随内容变化；每张卡片一个主操作，次要操作放在 hover 或详情页；若点击无任何反应，改用列表而非卡片。
2. 轮播/横向滚动：用于内容超出视口且以浏览为主、内容有自然视觉顺序（步骤、精选、媒体）、用户以探索而非精确查找为目的的场景；注意轮播会隐藏内容，重要项不要只放在轮播里；避免自动轮播，优先用户驱动导航；移动端用无显式导航点的横向滚动比箭头更自然。
3. 抽屉/侧边面板：用于需要次要详情但不丢失主视图上下文、编辑或配置某项时保持列表可见、移动端导航（汉堡菜单打开侧边抽屉）的场景；抽屉要锚定在边缘——左侧用于导航，右侧用于详情/设置；始终提供明确关闭操作（× 按钮和点击外部）；背后内容应轻微变暗（overlay）以表明抽屉是上层。
4. 手风琴：用于内容有清晰父子层级、多数用户一次只需少数几个区块、垂直空间受限的场景，像物理文件夹一样折叠节省空间、展开显示细节。
5. 标签页：用于内容分为互斥、同级区块，用户频繁切换区块，所有标签对同一上下文同等相关的场景；注意标签页暗示同级、同等重要，不要用于层级导航（应改用面包屑或侧边栏）。
6. 工具提示：用于图标或控件需要短标签但常显会杂乱布局、术语或数值需要在上下文中简要解释的场景；不能替代清晰标签、内联帮助文本或复杂功能的文档。
7. 隐喻要匹配交互：点击无反应的卡片会造成虚假可供性。
8. 不要混用隐喻：卡片里套轮播、轮播里套抽屉会造成认知噪音。
9. 移动端与桌面端借用不同隐喻：滑动关闭、底部弹层、下拉刷新是移动端原生；强行搬到桌面两端都会别扭。
10. 用 elevation 强化隐喻：没有阴影的卡片不觉得可抓取；没有 overlay 的抽屉不觉得有层次。
11. 审查清单：所选模式是否匹配用户直觉的物理隐喻；卡片是否有明确主操作而非纯装饰；轮播或横向滚动是否有导航可供性（点、箭头或露出下一项的一部分）；抽屉是否让背景变暗以表明分层；同一类内容是否在全产品中一致使用同一物理隐喻。

适用边界 · 注意事项

• 内容项点击后没有任何操作或反馈时，不要用卡片（会造成虚假可供性），改用列表。
• 重要内容不应只放在轮播里，因为轮播会隐藏内容。
• 不要用标签页做层级导航，标签页只适合同级、同等重要的互斥区块。