设计系统 · 术语对齐
每个交互组件都有其标准名称。同一个东西叫十种名字，沟通效率折半。把这页发给团队，从此说一种语言。
网站顶部的主导航区域，通常包含 Logo、链接列表和行动按钮。分为固定导航（Sticky Navbar）和滚动消失型。
别叫：顶部栏 / 头部 / 菜单条
三条横线组成的图标按钮，点击后展开移动端导航菜单。名称来源于其外形像汉堡。点击试试看👇
别叫：三横线 / 展开按钮 / 菜单图标
显示用户在网站层级结构中所处位置的导航辅助组件。帮助用户理解并快速跳转到上层页面。
别叫：路径导航 / 层级导航 / 位置栏
将同一层级的多个内容分组切换显示。常见于设置页、详情页。点击可切换。
别叫：切换栏 / 菜单栏 / 分类
固定在页面左侧或右侧的导航/内容区。后台系统中最常见，分为固定型和可折叠型（Collapsible Sidebar）。
别叫：左边栏 / 功能栏 / 目录
点击触发区域后展开的浮层菜单列表。与 Select（选择器）不同，Dropdown 可以包含任意操作项。
别叫：下拉框 / 弹出菜单（注意与Popup区分）
将大量列表数据分割成多页展示的导航组件。与无限滚动（Infinite Scroll）相对应。
别叫：翻页 / 页码 / 换页按钮
网站首页进入视口的第一个大型区块，通常包含标题、副标题和主要 CTA 按钮。决定第一印象。
为团队打造的下一代项目管理平台
别叫：大图区 / 首屏Banner / 顶部区域
网页最底部区域，通常包含版权信息、链接分组、社交媒体入口。分为简洁型和多列型（Multi-column Footer）。
别叫：底部 / 底栏 / 尾部
有边界的内容容器，将相关信息组织在一起。是现代 UI 中最通用的布局单元之一。
这是卡片的描述文字，简洁说明内容。
展示单一指标或摘要信息。
别叫：模块 / 格子 / 方块
用于在视觉上分隔内容区块的水平或垂直线条。可以是简单线条，也可以带标签文字。
别叫：间隔线 / 分行 / 横线
可展开/收起的内容区块，节省页面空间。常用于 FAQ、详情信息。点击展开试试。
别叫：展开收起 / 下拉内容 / FAQ组件
引导用户完成多步骤流程的进度指示组件，清晰标注当前位于第几步及完成状态。
别叫：步骤导航 / 进度步骤 / 流程条
按时间顺序展示事件或内容的纵向列表组件，多用于动态、历史记录、操作日志。
版本 2.0 正式发布
2025年3月15日
进入公测阶段
2025年1月10日
项目立项
2024年8月1日
别叫：历史记录 / 动态列表 / 流水线
结构化展示大量行列数据，支持排序、筛选、分页等操作的组件。是后台系统核心组件。
| 姓名 | 状态 | 金额 |
|---|---|---|
| 张三 | 活跃 | ¥3,200 |
| 李四 | 待审 | ¥1,800 |
| 王五 | 停用 | ¥900 |
别叫：列表 / 表单（注意！表单=Form） / 报表
用于接收用户文本输入的基础表单元素。常见变体：带图标、带前缀/后缀、密码型、多行文本（Textarea）。
别叫：填写框 / 文字框 / 录入框
专用于搜索功能的输入组件，通常含搜索图标和快捷键提示（如 ⌘K）。是全局搜索的标准入口。
别叫：搜索栏 / 查询框（均可，但Search Bar最标准）
双态切换控件，用于开启/关闭某个功能或设置。比 Checkbox 更适合即时生效的设置项。
别叫：开关按钮 / 滑块 / 勾选开关
Checkbox 可多选，Radio Button 单选一组。是表单中最基础的选择控件，注意区分两者。
别叫：多选框、方框打钩 / 圆圈选择
拖拽选择范围值的控件，适合价格区间、音量、不透明度等连续值的输入场景。
别叫：拖动条 / 进度条（注意：进度条是Progress Bar）
触发操作的可点击元素。按层级分：Primary（主要）、Secondary（次要）、Ghost（幽灵）、Danger（危险）、Text（文字）。
别叫：点击按钮（冗余）/ 按钮组件（学会用Primary/Secondary区分）
固定在页面顶部（Navbar之上）的全宽横幅，用于展示重要公告、促销活动或系统通知。
别叫：顶部广告条 / 提示横幅 / 公告栏
短暂显示后自动消失的浮动通知，不打断用户操作。常出现在角落，用于操作成功/失败的反馈。
别叫：弹出提示 / 消息提醒（Toast是最通用的叫法）
嵌入在页面内容中的状态提示块，分为 Success（成功）、Warning（警告）、Error（错误）、Info（信息）四种语义。
别叫：提示信息 / 状态栏（注意：不是Toast，是嵌入式的）
附着在元素上的小型状态标记，常用于显示数量（未读消息数）或状态类型。
别叫：小红点 / 标签（Tag/Label有专指）/ 角标
可视化展示任务完成进度的条状组件。注意区分：线性进度条（Linear）和圆形进度（Circular/Ring）。
别叫：加载条 / 百分比条（注意与Loading区分）
内容加载时显示的灰色占位结构，模拟最终布局，减少用户等待的感知焦虑。比菊花圈体验更好。
别叫：加载占位 / 灰色框框 / 预加载
表示系统正在处理的动态指示器。Spinner（旋转圆圈）、Dots（三点动画）是最常见形式。
别叫：转圈 / 等待动画 / Loading 图标
当列表、搜索结果、数据为空时展示的占位内容，通常包含插图、文案和引导操作按钮。
别叫：无数据 / 空页面 / 占位图
鼠标悬停时显示的小型说明浮层，提供补充信息。不可交互，与 Popover（可交互气泡）不同。
别叫：气泡提示 / 悬浮提示（Tooltip=不可交互，Popover=可交互）
覆盖整个页面的弹出窗口，需要用户明确操作（确认/取消）才能关闭。阻断主流程，慎用。
别叫：弹窗 / 弹出框（Modal/Dialog 是标准术语）
从屏幕边缘滑入的面板层，不完全遮挡主内容。适合详情查看、表单填写等需要保留上下文的操作。
详情面板
姓名：张三
邮箱：···
状态：活跃
别叫：侧边弹窗 / 滑动面板（Drawer是标准叫法）
点击触发的小型浮层，内部可包含富内容（文字、按钮、表单）。与 Tooltip 的区别：Popover 可交互。
别叫：气泡提示（与Tooltip混淆最多！可交互=Popover）
网站首次访问时出现的 Cookie 使用授权提示组件，GDPR 合规要求。通常固定在底部或顶部。
别叫：Cookie弹窗 / 隐私提示（Cookie Banner是标准说法）
用于展示用户或实体的图形标识。包括：图片型、字母型、叠加组（Avatar Group/Stack）、带在线状态。
别叫：头像图标 / 用户图片（Avatar是通用标准术语）
用于分类、标记内容的小型元素。Tag 通常静态展示，Chip 可删除/可选中，两者形态相似但交互不同。
别叫：小标签 / 分类标记（注意 Tag 与 Badge 的区别：Tag=分类，Badge=状态）
展示单一核心数据指标的卡片组件，常见于仪表盘顶部，通常包含数值、标签和趋势变化。
别叫：数字卡片 / 统计模块 / 数据格子
独立的功能性 UI 单元，可嵌入到页面任意位置。如天气小组件、聊天小组件、日历小组件等。
别叫：模块 / 插件 / 卡片（Widget 特指独立可嵌入的功能单元）
循环展示多张图片或内容的滑动组件。自动播放型叫 Auto-play Carousel，带控制的叫 Controlled Carousel。
别叫：大图滚动 / 图片切换 / Banner轮播
以网格形式展示多张图片的组件，常见于作品集、相册页面。点击通常触发 Lightbox（全屏预览）。
别叫：图片展示 / 图集（Lightbox特指点击后全屏预览）
固定在页面角落的圆形主要操作按钮，代表页面核心操作（如新建、添加）。Material Design 中的核心组件。
别叫：悬浮按钮 / 圆形按钮（FAB是约定俗成的缩写）
固定在页面底部（或顶部）的全宽横幅，包含核心行动号召按钮。常用于官网转化、限时促销。
🚀 开始您的免费试用
无需信用卡，14天全功能体验
别叫：底部固定条 / 悬浮广告（CTA=Call To Action，行动号召）
水平滚动展示内容的动态组件，常用于展示合作品牌、实时数据、新闻快讯。鼠标悬停可暂停。
别叫：滚动字幕 / 轮播文字（Marquee是HTML/CSS通用叫法）
展示不同套餐价格、功能对比的卡片组件。推荐套餐通常用"Featured"或"Popular"样式突出显示。
别叫：套餐选择 / 价格模块 / 付费区域
交互设计 · 模式对齐
这些不是单一组件，而是设计决策。每一种交互行为都有名字——从 Optimistic UI 到 Coachmark，从 Undo Pattern 到 Infinite Scroll。
以下是网站设计中必须掌握的交互行为模式。这些不是单一组件，而是设计决策——每一个都有名字，每一个都值得对齐。
鼠标悬停时元素发生的视觉变化，是最基础的交互反馈。常见效果：颜色变化、抬起（Lift）、缩放（Scale）、发光（Glow）、下划线。
别叫：鼠标移上去的效果 / 高亮（请说具体是哪种Hover效果）
输入框或可交互元素获得键盘焦点时的视觉反馈。是无障碍（A11y）的核心要求。用 Focus Ring（外发光边框）标准实现。
✕ 邮箱格式不正确
✓ 邮箱格式正确
别叫：选中框框 / 蓝色边框（Focus Ring是无障碍标准术语）
对用户输入进行规则检查并给出反馈。分为：实时校验（Inline Validation）、提交时校验（On Submit）。包含密码强度指示器（Password Strength Meter）。
✓ 邮箱格式正确
✕ 请输入有效的邮箱地址
密码强度：强
别叫：校验 / 输入检查（区分：Inline Validation=即时 vs On-Submit=提交后）
用户输入时实时展示候选项的交互模式。包括历史记录、分类建议、热词推荐。核心是降低用户输入成本。
别叫：搜索下拉 / 输入联想（Autocomplete / Typeahead 是标准术语）
单一操作触发的短暂动画反馈，让产品显得有生命力。点赞、收藏、评分、计数器都是典型案例。
别叫：小动画 / 点击效果（Micro-interaction 专指单操作触发的反馈动效）
操作后立即在 UI 上显示"成功状态"，不等待服务器确认。失败时再回滚。大幅提升感知速度，常用于点赞、评论、删除。
别叫：预先显示 / 假反馈（Optimistic UI 是行业标准术语）
执行破坏性操作后，提供短暂时间窗口让用户撤销。比"确认弹窗"体验更好，减少摩擦的同时保留安全网。
别叫：删除提示 / 确认框（Undo Pattern 是比确认Modal更优雅的方案）
首次使用时指引用户发现功能的提示层。Coachmark 特指"高亮遮罩+气泡说明"的组合，Pulse（脉冲点）用于静默提示。
别叫：新手引导 / 气泡说明（Coachmark = 高亮定位气泡，Onboarding Tour = 多步引导流）
将复杂表单分割为多个步骤，降低用户填写压力。每步只展示相关字段。也叫 Wizard（向导式）模式。
别叫：分步表单 / 多页表单（Wizard 特指向导式多步流程）
用户通过拖拽重排列表项或将元素放入目标区域。Sortable List = 可排序列表，Drop Zone = 文件拖放目标区。
别叫：拖动 / 拖拽交互（Drag&Drop = 通用，Sortable = 特指列表排序，DnD = 缩写）
右键点击或长按触发的浮层操作菜单，展示与当前元素相关的操作。是 Power User 效率工具。
别叫：弹出菜单（注意与Dropdown区分：Context Menu=右键触发，Dropdown=点击触发）
图片或内容滚动进入视口时才加载，节省流量、提升首屏速度。常配合模糊渐显效果（Blur-up）使用。
别叫：慢加载 / 延迟显示（Lazy Loading = 滚动触发；Eager Loading = 提前加载）
滚动到底部时自动加载更多数据，无需翻页操作。提升内容流沉浸感，但不利于查找特定位置。
别叫：滚动加载 / 自动翻页（与Pagination对立；Virtual List = 优化版无限滚动）
完全使用键盘操作界面的能力。是无障碍（Accessibility / A11y）的核心要求。Tab = 切换焦点，Enter/Space = 激活，Escape = 关闭。
别叫：快捷键（Keyboard Navigation=无障碍导航；Shortcuts=效率快捷键，两者不同）
允许用户在深色/浅色主题间切换的功能。通过 CSS 变量（Design Token）实现。支持跟随系统（prefers-color-scheme）是最佳实践。
prefers-color-scheme别叫：夜间模式 / 黑色主题（Dark Mode是标准说法；Light/Dark Theme Toggle = 切换器）
页面滚动相关的交互设计。包括：平滑滚动（Smooth Scroll）、锚点跳转（Anchor Link）、滚动吸附（Scroll Snap）、视差（Parallax）。
#顶部
Smooth Scroll = CSS scroll-behavior: smooth
Scroll Snap = 每次滚动对齐到固定位置
Parallax = 背景与前景滚动速度不同
Sticky Header = 导航栏滚动后固定
Back to Top = 滚动到底部显示回顶按钮
别叫：页面滑动 / 滚动动画（要精确说是哪种Scroll行为）
系统出错时的友好提示页面或状态。区分：404（页面未找到）、500（服务器错误）、网络离线（Offline）。每种都要有恢复路径。
别叫：报错页 / 出错了（区分404/500/Offline三类，处理策略不同）
根据屏幕尺寸自适应调整布局的设计方式。断点（Breakpoint）：Mobile ≤768px，Tablet 768-1024px，Desktop ≥1024px。
别叫：自适应 / 手机版（Responsive=流式响应；Adaptive=为特定设备设计独立版本）