前端设计语言基础
1. Tabs vs Headings：结构与交互
在网页设计中，Tabs（标签页） 和 Headings（标题） 常被混淆，但它们代表两个完全不同的概念：
| 类型 | 类比 | 特点 |
|---|---|---|
| Tabs | 像杂志顶部的"分栏标签" | 没有固定的 HTML 语义；需要 JavaScript 控制状态；用于切换内容块。 |
| Headings | 像文章中的章节标题 | 结构化元素（<h1> ~ <h6>），定义内容层次结构。 |
👉 一句话总结： Tabs 专注于交互切换，Headings 专注于文档结构。
2. Icon vs Badge：功能与状态的视觉表达
🔹 Icon（图标）
图标代表功能或对象。例如：
| 图标 | 名称 | 含义 |
|---|---|---|
| 🔍 | 搜索图标 | 搜索功能 |
| ⚙️ | 设置图标 | 设置功能 |
| 🔔 | 通知图标 | 通知中心 |
图标强调对操作或对象的识别——它们是操作的入口点。
🔸 Badge（徽章）
徽章是状态或数量的视觉指示器。有四种常见类型：
| 类型 | 示例 | 含义 |
|---|---|---|
| 🔢 计数徽章 | 99+ | 显示数量，如消息或通知 |
| 🟢 状态徽章 | 在线 / 新 | 指示当前状态 |
| 🔴 圆点徽章 | 红点 | 表示有新内容，不显示数字 |
| 🏷️ 标签徽章 | Beta / Pro | 显示版本或标签 |
👉 一句话总结： Icon 显示它是什么，Badge 显示它处于什么状态。
3. Sidebar Navigation vs Vertical Navigation
两者都是垂直（列式）导航结构，但在位置和用途上有所不同：
| 类型 | 定义 | 使用场景 |
|---|---|---|
| Sidebar Navigation（侧边栏导航） | 页面边缘（左侧或右侧）的固定导航区域 | 管理仪表板、应用主界面 |
| Vertical Navigation（垂直导航） | 可出现在任何位置的垂直导航链接列表 | 内容区域或卡片部分内 |
👉 可以这样理解： 每个 Sidebar 都是 Vertical Navigation，但不是每个 Vertical Navigation 都是 Sidebar。
4. Command Palette vs Action Panel
| 类型 | 核心逻辑 | 用户意图 |
|---|---|---|
| ✅ Command Palette（命令面板） | 用户主动输入命令来执行操作（如 VS Code 的 ⌘+Shift+P） | “我知道我想要什么——让我直接做。” |
| ✅ Action Panel（操作面板） | 显示与当前对象相关的所有可能操作 | “我正在查看某个东西——我能用它做什么？” |
5. Alert、Modal Dialog 和 Notification：关键区别
| 类型 | 目的 | 用户操作 |
|---|---|---|
| ✅ Alert（警告） | 提供信息 | 只读，无需交互 |
| ✅ Modal Dialog（模态对话框） | 需要立即决策 | 必须交互，如"确认删除" |
| ✅ Notification（通知） | 告知用户后台事件 | 可以忽略，不中断工作流 |
6. Pill Badge 样式对比
| 类型 | 特点 | 视觉风格 |
|---|---|---|
| 小型扁平胶囊徽章 | 小巧，实色背景，圆角边缘 | 轻量但显眼 |
| 带边框的胶囊 | 空心，轮廓线，无背景 | 简洁极简外观 |
7. 按钮类型：Primary / Secondary / Soft
| 类型 | 背景样式 | 使用场景 |
|---|---|---|
| Primary Button（主按钮） | 实色背景 | 主要操作，如"提交"或"保存" |
| Secondary Button（次要按钮） | 边框 + 透明背景 | 辅助操作，如"取消"或"返回" |
| Soft (Ghost) Button（柔和按钮） | 几乎透明或浅色阴影 | 非关键、不显眼的操作 |
👉 一句话总结： 主按钮执行主要操作，次要按钮提供替代选项，柔和按钮处理次要功能。
8. Container 和布局控制
Container（容器） 定义内容的最大宽度并将其在页面上居中。
| 类型 | 特点 | 用途 |
|---|---|---|
| Full-width（全宽） | 横跨整个视口 | 仪表板、展示页面 |
| Constrained（受限） | 最大宽度受限（如 1280px）并居中 | 文章或博客内容 |
| Breakpoint（断点） | 根据设备调整宽度 | 响应式布局 |
| Padded Content（填充内容） | 添加内边距（padding） | 提高可读性 |
| Narrow（窄型） | 特别窄的容器 | 长篇阅读或博客文本 |
9. Card 和响应式行为
“在移动端要边到边”
Card（卡片） 是一个带背景的信息块。
- 在 移动端（📱）：通常全宽（边到边），以获得沉浸感和空间效率。
- 在 桌面端（💻）：通常居中（受限），以提高可读性和视觉平衡。
10. Media Object 布局模式
Media Object（媒体对象） 是一种经典的 UI 布局模式：
媒体（头像、图片或图标）位于左侧或右侧，文本（标题、描述、操作）位于其旁边。
常见使用场景包括：
- 评论列表（头像 + 文本）
- 新闻卡片（缩略图 + 内容）
- 聊天消息（头像 + 对话气泡）
总结
理解这些基本的 UI 组件和布局原则就像掌握网页界面的语法。 一旦你能清楚地区分 Tabs vs Headings、Icons vs Badges 以及 Primary vs Soft Buttons， 你的设计和代码将变得更加一致、可读和语义化。
🧩 “设计语言"不仅仅关乎风格——它关乎界面中每个元素背后的语义逻辑。