← 返回多端学习对照表

通用桌面端常用组件

桌面端通用组件库，按分类组织，共 0 个组件档案。

说明：表格列较多，窄屏可横向滚动；「结构解剖」红线拆解图待后续以配图补充，此处先给出核心构成与间距标注。

一、 窗口与全局框架类 (Window & Global Framework)

桌面端独有，负责管理应用与操作系统之间的关系。这一类组件在手机/平板上几乎不存在，是桌面体验的“地基”。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
标题栏
Title Bar
/ˈtaɪtl bɑːr/
 窗口顶部的横向条，显示应用名称或当前文档/文件名。双击可最大化/还原，常承载拖拽移动窗口的手柄。
  • 把标题栏当成纯装饰，不提供拖拽移动（用户抓不住窗口）。
  • 长文件名不省略（溢出难看）；应中间省略并 hover 显示全称。
  • 与菜单栏/工具栏重复显示应用名造成冗余。
  • 所有桌面窗口程序的顶部；文档型 App 显示“文件名 — 应用名”。
  • 无边框设计（Chromeless）下尤需保留可拖拽区。
  • 核心构成：左侧文档名(可省略)、中间拖拽区、右侧窗口控制按钮组(或 macOS 在左侧)、可选路径/状态副标题。
间距：高度 28–36px(macOS 约 28px、Windows 约 32px)；字号 13–14px；拖拽区占满除按钮外区域。红线拆解图待补。
 Default、Active(当前窗口高亮)、Inactive(灰显)、Maximized(无还原手柄)、Dirty(未保存显示圆点)。
  • 标准标题栏
  • 无边框/自定义标题栏
  • 带路径副标题
  • 标签页融合式标题栏
  • 高度：28–36px。
  • 字号：13–14px；省略：中间截断 + 省略号。
  • 双击：最大化/还原。
  • 触发：双击标题栏最大化；拖拽移动窗口。
  • 反馈：窗口跟随光标；未保存状态用圆点提示。
  • 响应式：窄窗口优先保留按钮，文件名截断。
  • 拖拽区可聚焦；aria-label 含文件名。
  • 对比度 AA；按钮用真实 <button>。
2
窗口控制按钮
Window Controls
/ˈwɪndoʊ kənˈtroʊlz/
 最小化、最大化/还原、关闭按钮。macOS 位于左上角（红黄绿），Windows 位于右上角（— □ ×）。是桌面窗口的必备元件。
  • 自定义皮肤把三键画得过小/难分辨（易误关）。
  • 隐藏关闭键却保留手势，触达差。
  • 跨平台位置错乱（mac 放右侧会反直觉）。
  • 任何可独立开合的桌面窗口。
  • 多窗口 App（编辑器、浏览器、文件管理器）。
  • 核心构成：三枚圆形/方形按钮(最小化、最大化/还原、关闭)、固定角位、点击热区、hover 图标。
间距：按钮直径 12–14px(mac)、方形 12–16px(Win)；间距 8–10px；距边缘 12–16px。红线拆解图待补。
 Default、Hover(显示图标)、Pressed、Disabled(如不可最小化)、Focused。
  • macOS 红黄绿圆点
  • Windows 方键(— □ ×)
  • Linux 三键变体
  • 隐藏式(仅 hover 显现)
  • 尺寸：12–16px；热区：≥24×24。
  • 位置：mac 左上 / Win 右上(遵守平台)。
  • 触发：单击各键执行对应动作。
  • 反馈：hover 显示功能图标(如 ×)；还原/最大化状态互换。
  • 平台：位置严格遵循 macOS / Windows 习惯。
  • aria-label 指明“最小化/最大化/关闭”。
  • 键盘 Alt+Space 可调出系统菜单；热区 ≥24pt。
3 文件 编辑 视图 帮助
全局菜单栏
Menu Bar
/ˈmenjuː bɑːr/
 固定在屏幕顶部(macOS)或窗口顶部(Windows)的横向菜单，含“文件、编辑、视图、帮助”等顶级入口，承载 App 全部命令。
  • 把所有功能堆进菜单栏导致项目过长、找不到。
  • 高频操作也藏进菜单(多一次点击)；应上提至工具栏。
  • 跨平台位置错乱（mac 屏幕顶 / Win 窗口顶）。
  • 传统桌面应用（Office、PS、编辑器）的命令总入口。
  • macOS 全屏时菜单随窗口顶部。
  • 核心构成：应用名菜单、顶级菜单项(文件/编辑/视图/窗口/帮助)、下拉子菜单、快捷键提示(⌘S)、分隔线、禁用项灰显。
间距：项高 22–28px；项间距 4–8px；下拉菜单内边距 6–8px；字号 13px。红线拆解图待补。
 Default、Open(展开子菜单)、Hover、Disabled、Checked(开关项打勾)。
  • 屏幕顶固定式(mac)
  • 窗口顶内嵌式(Win)
  • 可隐藏自动显现
  • 含图标菜单项
  • 项高：22–28px；字号：13px。
  • 快捷键：右侧对齐显示(⌘C)。
  • 层级：子菜单向右展开。
  • 触发：点击/悬停展开子菜单；鼠标横向移动到相邻项自动切换。
  • 反馈：子菜单即时展开；快捷键常驻提示。
  • 平台：mac 屏幕顶 / Win 窗口顶。
  • 菜单项用 <menu>/<menuitem> 或 ARIA menu 角色。
  • 键盘方向键可达；快捷键不依赖鼠标。
4
多文档标签页
Tabbed Document
/ˈtæbd ˈdɒkjumənt/
 在同一窗口内并列打开多个文件/文档标签（如 VS Code、浏览器）。用一个窗口收纳多内容，避免桌面被窗口淹没。
  • 标签过多不滚动/不折叠（挤成不可点）。
  • 关闭标签误关整窗；应就近提供“关闭其他/右侧”。
  • 不显示未保存圆点，丢失状态。
  • 编辑器、IDE、浏览器、设计工具的多文件场景。
  • 需在单窗口内快速切换多个上下文。
  • 核心构成：标签条、标签(图标+文件名+关闭×)、激活态高亮、新建标签(+)、标签溢出滚动/下拉、拖拽重排。
间距：标签高 30–36px；标签内边距 8–12px；激活态底部 2px 品牌色；关闭键 16px。红线拆解图待补。
 Active、Inactive、Hover、Dirty(未保存圆点)、Dragging(重排)、Overflow(折叠菜单)。
  • 顶部标签条
  • 可拖出独立窗口
  • 垂直标签(侧栏)
  • 分组标签
  • 标签高：30–36px；最小宽：省略号截断。
  • 关闭键：16–20px；拖拽：可重排。
  • 触发：点击切换、×关闭、+ 新建、拖拽重排。
  • 反馈：激活态即时高亮；溢出提供“＞”展开全部。
  • 响应式：窄窗标签折叠为下拉。
  • 标签用 role="tab" + aria-selected；关闭键可聚焦。
  • Ctrl+Tab 切换；对比度 AA。
5
工具栏
Toolbar
/ˈtʊlbɑːr/
 位于菜单栏下方的横向条，提供高频操作的图标按钮（保存、撤销、画笔等）。将常用命令从菜单上提，减少点击层级。
  • 把所有命令塞进工具栏（ overcrowded、找不到）。
  • 图标无文字/无 tooltip，含义模糊。
  • 不可自定义/不可隐藏，小屏被挤压。
  • 编辑器、设计软件、办公套件等命令密集的 App。
  • 需要一键触达的高频操作。
  • 核心构成：图标按钮组、文字/图标+文字按钮、分组分隔线、溢出“更多”、可折叠/可右键自定义、工具提示。
间距：高度 40–48px；图标 20–24px；组间距 8–12px；分隔线 1px。红线拆解图待补。
 Default、Hover、Pressed、Active(切换类)、Disabled、Overflow(更多菜单)。
  • 固定图标栏
  • 可自定义(Ribbon)
  • 浮动工具条
  • 上下文相关工具栏
  • 高度：40–48px；图标：20–24px。
  • 热区：≥32×32；提示：hover 出 tooltip。
  • 触发：点击执行/切换；可拖拽自定义顺序。
  • 反馈：按下高亮；tooltip 延迟显示。
  • 响应式：窄窗溢出为“更多”。
  • 每个按钮 aria-label + title；键盘可达。
  • 对比度 AA；分隔线用 role="separator"。
6
状态栏
Status Bar
/ˈsteɪtəs bɑːr/
 窗口最底部的信息栏，显示光标位置、文件大小、网络延迟、缩放比例等即时状态。不打断操作，纯信息提示。
  • 把状态栏当广告/促销区，干扰阅读。
  • 显示与当前任务无关的信息（噪声）。
  • 长文本不省略，撑破布局。
  • 编辑器(行列号)、设计软件(画布尺寸)、下载工具(速度/进度)。
  • 任何需要常驻反馈的操作型 App。
  • 核心构成：左/右分段信息区、分隔、可点击链接(如错误数)、进度指示、隐显开关。
间距：高度 22–28px；内边距左右 12px；字号 11–12px；多段间用间距或细线分隔。红线拆解图待补。
 Default、Busy(进度)、Error(红字)、Empty(占位)、Hidden(可关)。
  • 底部固定条
  • 可隐藏自动显现
  • 带进度指示
  • 可点击跳转
  • 高度：22–28px；字号：11–12px。
  • 位置：窗口最底部；可切换显隐。
  • 触发：内容随操作实时更新(如光标移动)。
  • 反馈：数值即时变化；错误态变红。
  • 响应式：窄窗分段折叠/省略。
  • 动态信息用 aria-live="polite" 轻量播报。
  • 对比度 AA；可点击段用 <button>。
7
系统托盘 / 状态栏图标
System Tray / Menu Bar Extra
/ˈsɪstəm treɪ/ /ˈmenjuː bɑːr ˈekstrə/
 常驻在操作系统右下角(Windows 托盘)或右上角(macOS 菜单栏额外项)的快捷图标，如微信、钉钉。后台运行、一键唤出。
  • 图标无状态区分（在线/离线/新消息都一样）。
  • 右键菜单过深，常用操作找不到。
  • 开机自启且无关闭入口，强占资源。
  • 即时通讯、云盘、杀毒、音视频等需后台常驻的 App。
  • 需要不占窗口也能接收通知/快速操作。
  • 核心构成：托盘图标、未读角标/红点、左键点击(唤出主窗)、右键菜单(设置/退出)、hover 提示、动画(如同步中)。
间距：图标 16–24px；角标直径 8–12px 置于右上；菜单项高 28–32px。红线拆解图待补。
 Default、Active(运行中)、Notification(红点)、Syncing(旋转)、Disabled(灰)、Hovered。
  • Windows 通知区
  • macOS 菜单栏额外项
  • 带未读角标
  • 折叠隐藏区
  • 图标：16–24px；角标：8–12px。
  • 位置：Win 右下 / mac 右上。
  • 触发：左键唤出、右键出菜单、hover 提示。
  • 反馈：新消息红点；同步时图标旋转。
  • 平台：遵循各自托盘规范。
  • 图标 aria-label 含状态；角标用 aria-label 读未读数。
  • 右键菜单键盘可达；退出项明确。
8
拖拽分割线
Splitter / Resizer
/ˈsplɪtər/ /ˈriːsaɪzər/
 用于调节左右/上下面板宽高的隐形拖拽线。让用户在固定窗口内自由分配空间（如编辑器+预览、文件树+内容）。
  • 分割线太细无热区，抓不住。
  • 没有双击复位/吸附位，调回去麻烦。
  • 拖拽时卡顿、不实时反馈。
  • IDE(资源管理器/编辑)、邮件(列表/预览)、设计工具(图层面板)。
  • 任何需要多面板同屏对比的场景。
  • 核心构成：可拖拽手柄(细线/双竖点)、两侧面板、实时预览、碰撞最小/最大宽度、双击复位、可选折叠手柄。
间距：可视线 1px，热区 6–8px；最小面板宽 120–160px；双击复位到默认比例。红线拆解图待补。
 Default、Hover(高亮)、Dragging(实时跟随)、Collapsed(折叠面板)、Snapped(吸附)。
  • 垂直分割(左右)
  • 水平分割(上下)
  • 可折叠手柄
  • 网格多分割
  • 热区：6–8px(扩大可拖)；最小宽：120–160px。
  • 动画：实时跟随，~120ms 复位。
  • 触发：悬停高亮、按下拖拽、双击复位、可吸附。
  • 反馈：面板宽度实时跟随；越界夹取最小/最大。
  • 响应：窗口缩放时比例保持或记忆。
  • 分隔用 role="separator" + aria-orientation；可键盘调整。
  • 热区 ≥8px；对比度 AA。

二、 菜单与导航类 (Menus & Navigation)

桌面端的操作极度依赖鼠标，导航层级更深。这一类组件靠“点击展开 + 右键 + 快捷键”组织复杂命令树与多级结构。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
9
下拉菜单
Dropdown Menu
/ˈdrɒpdaʊn ˈmenjuː/
 点击菜单栏项或按钮后向下/向右展开的命令列表。适合中等数量的平级或二级命令，比全屏菜单轻。
  • 选项过多不滚动/不分组（找起来累）。
  • 与选项本身功能混淆（按钮既触发又展开要区分）。
  • 键盘无法打开/遍历（仅鼠标可用）。
  • 工具栏“更多”、筛选下拉、用户头像菜单。
  • 需要二级命令但又不值得占整条工具栏时。
  • 核心构成：触发器(按钮/菜单项)、浮层容器、菜单项(图标+文字+快捷键+子菜单箭头)、分隔线、禁用/选中态、溢出滚动。
间距：浮层圆角 8–10px；项高 32–36px；内边距 6–10px；子菜单向右展开。红线拆解图待补。
 Closed、Open(展开)、Hover(高亮项)、Disabled、Checked(单选/勾选)、Submenu(展开子项)。
  • 点击触发下拉
  • 悬停触发级联
  • 带搜索过滤
  • 多选/单选菜单
  • 项高：32–36px；圆角：8–10px。
  • 快捷键：右侧对齐；层级：子菜单向右。
  • 触发：点击/悬停展开；鼠标横移切相邻项。
  • 反馈：即时展开浮层；外部点击关闭。
  • 响应式：空间不足时向上平移/翻转方向。
  • role="menu" / menuitem；方向键遍历、Esc 关闭。
  • 对比度 AA；触发器 aria-haspopup/expanded。
10
上下文菜单
Context Menu
/ˈkɒntekst ˈmenjuː/
 桌面端灵魂组件。鼠标右键点击任意区域弹出的快捷操作列表，内容随点击对象（文字/图片/空白）动态变化。
  • 把所有功能都塞进右键（变成第二个主菜单）。
  • 空白处与对象处菜单项毫无区分，无“情境”。
  • 没有键盘等价入口（Shift+F10 / 菜单键打不开）。
  • 文件管理器右键文件、编辑器右键选区、画布右键元素。
  • 任何“选中对象后想快速操作”的场景。
  • 核心构成：浮层、情境相关项(剪切/复制/删除/重命名)、分隔线、子菜单(如“打开方式”)、危险项(删除标红)。
间距：项高 32–36px；圆角 8–10px；出现在光标右下；越界自动翻转。红线拆解图待补。
 Closed、Open(贴在光标)、Hover、Disabled、Danger(删除红)、Submenu。
  • 对象相关型
  • 空白处型
  • 文本选区型
  • 带图标/头像型
  • 项高：32–36px；出现位：光标右下，越界翻转。
  • 危险项：红色文字。
  • 触发：右键/Shift+F10/菜单键；出现在光标处。
  • 反馈：即时浮层；点击外部或 Esc 关闭。
  • 响应：贴近屏幕边缘自动翻转方向。
  • role="menu"；键盘等价触发 + 方向键遍历。
  • 对比度 AA；危险操作可二次确认。
11
侧边栏导航
Sidebar / Tree View
/ˈsaɪdbɑːr/ /triː vjuː/
 常驻左侧，展示文件目录、组织架构或多级菜单树。通过展开/折叠管理深层层级，是桌面信息架构的主骨架。
  • 默认全部展开成超长列表（应记忆展开态、可折叠）。
  • 节点无缩进/无连接线，层级看不出来。
  • 选中态不明显，找不到当前位置。
  • IDE 文件树、邮件文件夹、知识库目录、企业组织架构。
  • 任何多级层级需要常驻浏览的场景。
  • 核心构成：根节点、父/子节点、展开箭头、缩进层级线、选中高亮、右键、拖拽排序、搜索过滤。
间距：节点高 28–34px；缩进每级 16–20px；箭头 16px；选中态整行底色。红线拆解图待补。
 Collapsed、Expanded、Selected(整行高亮)、Hover、Focused、Dragging(排序)。
  • 文件树
  • 可折叠分组
  • 带图标节点
  • 多选树
  • 节点高：28–34px；缩进：16–20px/级。
  • 选中：整行底色；箭头：点击切换。
  • 触发：点击箭头展开/折叠；点击节点选中。
  • 反馈：展开带轻微过渡；记忆展开态。
  • 响应：窄窗可整体收起为抽屉。
  • 树用 role="tree"/treeitem；方向键导航、右左展开折叠。
  • 对比度 AA；选中态不靠颜色单独区分。
12 文档项目文件
面包屑导航
Breadcrumbs
/ˈbredkrʌmz/
 显示当前文件或页面的绝对路径（如 文档 / 项目 / 文件），可点击任意一级跳回上层。定位与快速回退兼得。
  • 层级过深不省略，撑破一行。
  • 末级也做成链接（当前页不应可点）。
  • 与侧边栏选中态不一致，造成位置混乱。
  • 文件管理器、设置多级页、电商分类、文档站。
  • 需要展示“我在哪、怎么回去”的路径场景。
  • 核心构成：层级节点(文字链接)、分隔符( / 或 › )、当前节点(非链接、加粗)、省略号(超长折叠)、hover 下划线。
间距：字号 12–13px；节点间距 6–8px；分隔符 8–10px；当前级用主色/加粗。红线拆解图待补。
 Default、Hover(下划线)、Current(非链接)、Truncated(省略号)、Clickable。
  • 斜杠分隔
  • 箭头分隔
  • 可折叠省略
  • 带图标路径
  • 字号：12–13px；分隔：8–10px。
  • 当前级：加粗/主色、不可点。
  • 触发：点击任意上级跳回；hover 出下划线。
  • 反馈：即时跳转；超长折叠为“…”。
  • 响应：窄屏仅保留上级+当前。
  • 用 nav aria-label="面包屑" + 有序链接；末级 aria-current="page"。
  • 对比度 AA；分隔符对读屏友好。
13
命令面板 / 全局搜索
Command Palette
/kəˈmɑːnd ˈpælət/
 按下 Ctrl+K / Cmd+K 唤起的极客搜索框，支持模糊搜索指令、文件、设置。让深层级命令“一搜即达”，键盘流首选。
  • 没有快捷键提示，用户不知道存在。
  • 仅能搜命令、不能搜文件/设置（价值减半）。
  • 结果无分组/无高亮，匹配看不出。
  • 编辑器(VS Code)、笔记、设计工具、Dev 工具。
  • 命令极多、键盘优先、需快速跳转的场景。
  • 核心构成：居中浮层、搜索输入(带 ⌘K 提示)、结果分组(命令/文件/最近)、高亮匹配、快捷键提示、上下键选择。
间距：浮层宽 520–640px；输入高 40–44px；结果项高 36–40px；圆角 12px。红线拆解图待补。
 Closed、Open(居中)、Typing(实时过滤)、Empty(无结果)、Selected(高亮项)、Recent(历史)。
  • 纯命令型
  • 命令+文件型
  • 带最近使用
  • 可操作结果
  • 浮层宽：520–640px；输入高：40–44px。
  • 项高：36–40px；触发：⌘K / Ctrl+K。
  • 触发：⌘K 唤起；输入实时模糊过滤。
  • 反馈：匹配字符高亮；↑↓ 选择、Enter 执行。
  • 响应：输入为空显示最近/常用。
  • 输入框 role="combobox" + 列表；键盘全可达。
  • 对比度 AA；提供可见快捷键说明。
14
折叠面板
Accordion
/əˈkɔːrdiən/
 在设置或工具面板中折叠次级选项。点击标题展开/收起内容区，节省垂直空间、让主层级清晰。
  • 默认全部展开，长页面找不到重点。
  • 同时只能开一个却没提示，误以为能多选。
  • 展开无过渡，内容“跳”出来。
  • 设置页分组、FAQ、属性面板、筛选条件。
  • 需要把次级选项藏起来、保持主层级清爽的场景。
  • 核心构成：标题栏(文字+展开箭头)、内容区、单开/多开策略、分隔线、键盘可达、动画。
间距：标题栏高 40–44px；箭头 16px 旋转 180°；内容内边距 12–16px；圆角 8px。红线拆解图待补。
 Collapsed、Expanded、Hover、Focused、SingleOpen(互斥)、MultiOpen(并列)。
  • 单开手风琴
  • 多开可并列
  • 带图标标题
  • 嵌套折叠
  • 标题高：40–44px；箭头：16px 翻转。
  • 策略：单开/多开明确；动画 ~200ms。
  • 触发：点击标题展开/收起；箭头 180° 翻转。
  • 反馈：内容高度过渡展开；焦点可见。
  • 响应：窄屏整组占满宽度。
  • 用 <button> 控制 aria-expanded；内容关联 aria-controls。
  • 对比度 AA；键盘可展开/收起。

三、 数据录入与操作类 (Data Entry & Actions)

桌面端鼠标定位精准、可视空间大，适合高密度参数调节与批量录入。这一类组件普遍支持精细的状态反馈（Hover/Active/Disabled/校验），是桌面工具型软件（设计器、IDE、后台系统）的高频区。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
15 默认HoverActive禁用
按钮
Button
/ˈbʌtn/
 最基础的触发控件。桌面端按钮强调状态可见性，必须清晰区分默认、悬停、按下、禁用四种核心状态。
  • 只有一种视觉状态，Hover/Active 无反馈，用户不知能否点。
  • 禁用态仍用高亮色，让人误以为可点。
  • 主操作与次要操作视觉权重相同，无主次。
  • 所有提交、确认、新增、删除等动作入口。
  • 工具栏图标按钮、对话框底部操作区。
  • 核心构成：标签文本/图标 + 容器(圆角矩形) + 可选前缀图标 + 可选快捷键角标。
间距：内边距 6–10px 12–20px；圆角 6–8px；最小高度 32–36px。红线拆解图待补。
 Default、Hover(悬停高亮)、Active(按下下沉/加深)、Disabled(灰显不可点)、Focus(键盘聚焦描边)。
  • Primary / Secondary / Ghost / Text
  • 图标按钮 / 带图标按钮
  • 危险按钮(Destructive)
  • 高度：32–36px；圆角：6–8px。
  • 最小点击：≥24×24px。
  • 禁用：降透明度或换灰，不可保主色。
  • 悬停：颜色过渡 120–160ms。
  • 按下：1–2px 下沉或亮度下降。
  • 焦点：键盘 Tab 显式描边，不丢焦点环。
  • 用真实 <button>；禁用时 aria-disabled。
  • 快捷键角标加 title；对比度 AA。
16
文本输入框
Input / Text Field
/ˈɪnpʊt/ /tekst fiːld/
 接收单行文本输入的基础控件。桌面端常配合实时校验、占位提示、前后缀图标与错误提示。
  • 错误提示只在提交后才出现，不实时校验。
  • 占位符代替标签，失焦后用户忘了填什么。
  • 校验错误用颜色却不配文字，色盲用户读不出。
  • 表单、搜索框、筛选条件、登录注册。
  • 参数面板中的文本类字段。
  • 核心构成：标签 + 边框容器 + 输入文本/占位符 + 前后缀图标 + 错误提示文字/图标。
间距：内边距 8–10px；标签与框间距 6–8px；错误文字 11–12px。红线拆解图待补。
 Default、Focus(边框高亮/聚焦环)、Filled(有内容)、Error(红边+提示)、Disabled、Read-only。
  • 带前/后缀图标
  • 带清除按钮(×)
  • 密码框(显隐)
  • 带字符计数
  • 高度：32–40px；圆角：6–8px。
  • 标签：必填项标 *。
  • 错误：红 #E54545 + 文字双通道。
  • 聚焦：边框变色 + 外阴影，150ms。
  • 校验：输入即校验，实时更新错误态。
  • 清除：点 × 清空并保留焦点。
  • <label> 关联 id；错误用 aria-invalid+aria-describedby。
  • 色 + 文字双重提示。
17
数字步进器
Input Number / Stepper
/ˈnʌmbər/ /ˈstiːpər/
 带上下微调箭头的数值输入框，用于精确调参（如数量、尺寸、延迟）。可设步长、上下限。
  • 只允许输入、无箭头，调参要手敲数字，效率低。
  • 步长过大或没有上限，一抖就超范围。
  • 箭头点击区太小，桌面鼠标也难点中。
  • 后台表单的数量/金额/尺寸字段。
  • 设计器里的像素、角度、不透明度微调。
  • 核心构成：数值显示区 + 右侧上下箭头按钮(常上下堆叠) + 可选前后缀单位。
间距：箭头区宽 18–24px；点击热区 ≥16px；步长可调。红线拆解图待补。
 Default、Hover(箭头高亮)、Active(按下)、Disabled、Out-of-range(越界红边)。
  • 无箭头纯输入
  • 带单位后缀
  • 带拖动滑块联动
  • 步长：默认 1，可配 0.1/5/10。
  • 上下限：min/max 约束。
  • 热区：箭头 ≥16×16px。
  • 长按箭头：连续递增，带加速度。
  • 键盘：上下方向键 ±步长。
  • 滚轮：悬停滚动调值（桌面高频）。
  • 箭头为真实 button；role="spinbutton" + aria-valuenow/min/max。
  • 键盘可达。
18 65%
滑动条
Slider
/ˈslaɪdər/
 桌面端极度高频的连续值调节控件，用于音量、画笔大小、透明度、缩放比例、进度跳转等。
  • 用数字输入框替代连续调节，调一点要敲一次键盘。
  • 没有当前值显示，用户不知拖到哪。
  • 轨道太细、拇指太小，鼠标难精准。
  • 媒体播放进度/音量。
  • 设计器画笔、透明度、缩放。
  • 任何连续区间参数（0–100）。
  • 核心构成：轨道(Track) + 已选区段(Fill) + 可拖拽拇指(Thumb) + 可选刻度/数值气泡。
间距：轨道高 4–6px；拇指直径 14–20px；拖拽时气泡距拇指 8–12px。红线拆解图待补。
 Default、Hover(拇指放大)、Active/Dragging(气泡显值)、Disabled、Focus。
  • 单滑块 / 双滑块(Range)
  • 带刻度
  • 带数值气泡
  • 范围：min–max 自定义。
  • 步长：可 0.1 连续或离散。
  • 拇指：直径 ≥14px。
  • 拖拽：拇指跟随光标，气泡实时显值。
  • 键盘：方向键 ±步长，Home/End 到两端。
  • 点击轨道：跳跃定位到该位置。
  • role="slider" + aria-valuenow/min/max；方向键可用。
  • 对比度 AA。
19 #C95A3A
颜色选择器
Color Picker
/ˈkʌlər/ /ˈpɪkər/
 选取颜色的复合控件，通常含色域图(饱和度×明度)、色相条、吸管工具，以及十六进制/RGB 代码输入框。
  • 只给几个固定色块，无法取任意色。
  • 没有代码输入/复制，开发者要手动记色值。
  • 没有吸管，难从屏幕任意处取色。
  • 设计器前景/背景色、主题色。
  • 图表、标注、高亮配色设置。
  • 核心构成：色域区(2D 选 S/V) + 色相条(1D 选 H) + 吸管 + 透明度轨(可选) + 代码输入(Hex/RGB) + 最近使用色。
间距：色域区约 200×200；色相条宽 12–16px；代码框高 28–32px。红线拆解图待补。
 Default、Active(吸管取样中)、With-alpha(含透明轨)、Disabled、Error(非法 Hex 红边)。
  • 基础(色块+代码)
  • 完整(色域+色相+吸管)
  • 含透明度(Alpha)
  • 格式：支持 Hex/RGB/HSL。
  • 吸管：跨窗口取色。
  • 代码：实时双向同步。
  • 悬停色域：实时预览大圆点。
  • 吸管：全屏取色光标，Esc 取消。
  • 代码输入：回车提交并即时回填。
  • 代码框带 label；色块加 aria-label 色值。
  • 对比度提示(前景/背景可读)。
20
开关
Switch / Toggle
/swɪtʃ/ /ˈtɒɡl/
 设置项中表达“开/关”二元状态的控件，比复选框更强调即时生效的动作感。
  • 用复选框代替开关却想表达“立即生效动作”。
  • 开/关的左右与颜色约定混乱（同产品两套）。
  • 状态切换无动画，用户不确定点没点中。
  • 系统/应用设置中的启停项。
  • 通知、同步、暗色模式等全局开关。
  • 核心构成：轨道(Track) + 可滑动拇指(Knob)；开态填充主色、关态浅灰；可选标签左右分布(开/关文字或图标)。
间距：宽 36–52px、高 20–28px；拇指直径比轨高小 4px。红线拆解图待补。
 On(主色)、Off(灰)、Disabled、Focus(键盘聚焦环)。
  • 带文字(开/关)
  • 带图标
  • 加载中(切换中 spinner)
  • 尺寸：宽 36–52px、高 20–28px。
  • 开色：主色 #c95a3a。
  • 默认：谨慎默认开启(防打扰)。
  • 切换：拇指滑动 150–200ms 缓动。
  • 键盘：Space/Enter 切换。
  • 点击：整轨可点，不只有拇指。
  • role="switch" + aria-checked；<label> 关联。
  • 颜色 + 位置双信号。
21 选项A选项B
复选框 / 单选框
Checkbox / Radio
/ˈtʃekbɒks/ /ˈreɪdioʊ/
 多选用复选框(Checkbox)、互斥单选用单选框(Radio)。桌面端常成组出现，支持批量选择与“全选”。
  • 多选场景用单选框，逼用户只选一个。
  • 选项组无“全选/反选”，批量操作痛苦。
  • 选中态只靠颜色，无对勾/圆点图标。
  • 筛选条件(多选标签/品类)。
  • 表单偏好(单选性别/套餐)。
  • 列表批量操作(全选)。
  • 核心构成：指示符(方块/圆) + 标签文本；组内有语义分组与“全选”父项；单选组同组内互斥。
间距：指示符 16–20px；项间距 8–12px；整行可点。红线拆解图待补。
 Unchecked、Checked、Indeterminate(半选，仅复选框父项)、Disabled、Focus。
  • 基础 / 带描述
  • 卡片式(大点击区)
  • 按钮组(分段单选)
  • 尺寸：指示符 16–20px。
  • 半选：仅复选框支持。
  • 默认：单选组需有预选或允许空。
  • 切换：120–160ms 状态过渡。
  • 键盘：方向键在单选组内移动、Space 勾选。
  • 点击：整行(含标签)可触发。
  • 原生 <input type=checkbox/radio> + label；组用 fieldset/legend。
  • 半选用 aria-checked="mixed"。
22 CtrlShiftS
快捷键录入框
Shortcut Input
/ˈʃɔːrtkʌt/ /ˈɪnpʊt/
 点击后进入录制态，用户直接按下键盘组合，自动捕获并显示快捷键（如 Ctrl + Shift + S），用于自定义操作映射。
  • 让用户手敲“Ctrl+Shift+S”文本，易格式错、大小写乱。
  • 不检测冲突，设了和已有快捷键撞车。
  • 录制态无明确视觉提示，用户不知在等按键。
  • IDE/编辑器命令自定义。
  • 设计器、截图工具、效率软件的热键设置。
  • 核心构成：录入区(默认“点击设置”) + 录制态高亮 + 多个按键胶囊(Ctrl/Shift/Alt/字母) + 冲突提示。
间距：按键胶囊内边距 4–8px、间距 4–6px；录制态边框主色脉冲。红线拆解图待补。
 Idle(点击设置)、Recording(录制中脉冲)、Filled(显示组合)、Conflict(冲突红边)、Disabled。
  • 单键 / 组合键
  • 带作用域(全局/应用内)
  • 可清除重置
  • 捕获：忽略单独修饰键，需含非修饰键。
  • 顺序：修饰键在前、主键在后。
  • 冲突：实时检测并提示。
  • 录制：边框主色脉冲动画提示等待。
  • 键盘：捕获 keydown，Esc 取消、Backspace 清除。
  • 回填：松开即停止录制并显示。
  • 录入区为可聚焦 button 或 role="textbox"；aria-live 播报捕获结果。
  • 冲突文字配图标。

四、 数据展示与工作区类 (Data Display & Workspace)

桌面端承载力极强，工作区往往占据屏幕绝大部分面积。这一类组件强调信息密度、多窗口并行与专业工具能力（表格、画布、图表、时间轴），是桌面区别于移动端“最核心的差异区”。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
23
数据表格
Data Table
/ˈdeɪtə ˈteɪbəl/
 桌面承载大数据量的核心控件，支持多列排序、拖拽调列宽、冻结表头/列、行内编辑、合并单元格等高级能力。
  • 把大量数据硬塞进手机式卡片，丢失列对齐与可排序列。
  • 表头不冻结，滚动后不知每列含义。
  • 不支持行内编辑，改一条要弹窗。
  • 后台系统、CRM、报表、订单管理。
  • 任何需要行列交叉对比的大数据集。
  • 核心构成：表头(可排序/调宽/筛选) + 冻结首列 + 数据行 + 合并单元格 + 分页/虚拟滚动 + 行选/多选。
间距：行高 36–48px；列最小宽 80px；表头高 40–44px；可虚拟滚动。红线拆解图待补。
 Default、Sorted(升/降箭头)、Hover(行高亮)、Selected、Frozen(冻结阴影)、Editing(行内编辑)、Loading。
  • 可编辑表
  • 树形表(含层级)
  • 透视表
  • 可拖拽行列
  • 行高：36–48px；表头：40–44px。
  • 冻结：首列/表头 sticky。
  • 大数据：虚拟滚动(万级行)。
  • 排序：点表头切换，箭头 120ms。
  • 列宽：拖拽分栏线实时；双击自适应。
  • 行内：双击进入编辑，Esc 取消。
  • 用语义化 <table> 或 role="grid"；aria-sort 标注排序。
  • 冻结列键盘可达。
24
树形控件
Tree
/triː/
 深度嵌套的层级展示控件（如资源管理器、组织架构、文档目录），支持展开/折叠与节点选择。
  • 用平铺列表展示强层级数据，父子关系丢失。
  • 节点太多不提供展开/折叠，一屏塞不下。
  • 缩进过深，深层节点被挤出可视区。
  • 文件/文件夹浏览器。
  • 部门/权限树、分类目录。
  • 代码项目结构。
  • 核心构成：展开/折叠三角 + 缩进连接线 + 节点图标 + 节点标签 + 选中高亮 + 异步加载占位。
间距：每级缩进 16–24px；行高 28–36px；三角 12–16px。红线拆解图待补。
 Collapsed、Expanded、Selected、Focus、Loading(异步子树)、Disabled。
  • 单选/多选节点
  • 可拖拽节点(改父子)
  • 带复选(父半选)
  • 缩进：16–24px/级。
  • 行高：28–36px。
  • 虚拟化：超大树用懒加载。
  • 展开：三角旋转 150ms。
  • 键盘：方向键导航、右展开/左折叠、Space 选。
  • 拖拽：放置线指示落点。
  • role="tree"/treeitem；aria-expanded/level。
  • 键盘全可操作。
25 120%
画布
Canvas / Viewport
/ˈkænvəs/ /ˈvjuːpɔːrt/
 核心工作区，支持无限平移、缩放、多图层叠加（设计软件、地图、视频剪辑预览窗），是专业桌面工具的“主舞台”。
  • 画布不能缩放/平移，大图被裁切看不到全貌。
  • 图层概念缺失，无法独立编辑元素。
  • 没有缩放指示/适配，用户迷失位置。
  • 设计/绘图/原型工具。
  • 地图、白板、视频剪辑预览。
  • 核心构成：视口容器 + 内容坐标系(可平移/缩放) + 图层栈(可选) + 缩放指示(右下) + 网格/标尺(可选) + 平移抓手。
间距：缩放指示 80×24 右下角；图层面板宽 200–260px；缩放范围 10%–6400%。红线拆解图待补。
 Default、Panning(抓手)、Zooming、Empty、Loading(大文件)、Multi-select。
  • 单图层/多图层
  • 带标尺网格
  • 无限画布
  • 缩放：10%–6400%，惯性。
  • 平移：空格+拖/中键。
  • 适配：Zoom to Fit/Selection。
  • 缩放：滚轮/Ctrl+滚轮，200ms 平滑。
  • 平移：拖拽跟随光标。
  • 键盘：缩放快捷键、适配。
  • 视口 role="application"；提供缩放值 aria-live。
  • 快捷键文档化。
26
列表视图 / 画廊视图
List / Gallery View
/lɪst/ /ˈɡæləri vjuː/
 同一批资源(文件/商品)的两种展示形态：列表强调信息密度与可排序，画廊强调缩略图与视觉浏览。
  • 只给一种视图，看图要切到别处、看信息又要回来。
  • 视图切换不记忆排序/选中状态。
  • 画廊缩略图过小，图看不清。
  • 资源管理器、素材库、相册。
  • 商品/模板浏览后台。
  • 核心构成：视图切换入口 + 列表(行:图标+名+元信息) / 画廊(网格:缩略图+名) + 排序/筛选 + 选中。
间距：列表行高 36–48px；画廊缩略图 ≥120px；网格列随宽自适应。红线拆解图待补。
 Default、Selected、Hover、Empty(无结果)、Loading。
  • 紧凑列表 / 详情列表
  • 小/中/大缩略图
  • 封面流(Cover Flow)
  • 缩略图：≥120px。
  • 列表行：36–48px。
  • 切换：状态记忆。
  • 切换：视图 150ms 淡入。
  • 键盘：方向键在网格/列表移动。
  • 批量：框选/Shift 连选。
  • 视图容器 role="list/grid"；切换按钮 aria-pressed。
  • 缩略图有 alt。
27
卡片
Card
/kɑːrd/
 信息聚合容器，把标题、图、摘要、操作聚在一块独立成块，桌面端用于看板、仪表盘、资源卡片墙。
  • 所有信息平铺成一段，无分组边界。
  • 卡片内操作入口藏太深，找不到。
  • 卡片尺寸不一、对齐混乱，网格不齐。
  • 看板(Kanban)、项目卡片。
  • 仪表盘模块、素材卡片。
  • 核心构成：容器(圆角+阴影) + 标题栏/封面 + 正文摘要 + 元信息(标签/时间) + 操作区(按钮/菜单)。
间距：圆角 8–12px；内边距 12–16px；阴影 0 1–2px rgba；网格 gap 12–16px。红线拆解图待补。
 Hover(上浮阴影)、Selected、Dragging、Expanded、Disabled。
  • 带封面 / 纯文本
  • 可拖拽看板卡
  • 可展开详情卡
  • 圆角：8–12px；阴影：轻。
  • 宽：固定或栅格自适应。
  • 间距：gap 12–16px。
  • 悬停：阴影上浮 120–160ms。
  • 拖拽：倾斜+阴影，放置线指示。
  • 点击：整卡可进详情。
  • 卡片为 article/group；操作按钮可聚焦。
  • 对比度 AA。
28
时间轴
Timeline
/ˈtaɪmlaɪn/
 按时间顺序展示事件、操作历史或版本分支；支持缩放时间粒度、节点展开详情。
  • 用普通列表展示时间线数据，先后顺序不直观。
  • 节点过多不提供缩放，密集重叠。
  • 分支(版本)用线性列表表达，关系丢失。
  • 操作历史/审计日志。
  • 版本管理、提交记录。
  • 项目里程碑。
  • 核心构成：时间主干 + 节点(事件点) + 分支连线(可选) + 节点详情卡 + 时间刻度/缩放。
间距：节点直径 10–16px；主干粗 2–3px；刻度按粒度 1h/1d。红线拆解图待补。
 Default、Selected(节点高亮)、Collapsed(分支收起)、Hover、Empty。
  • 横向 / 纵向
  • 带分支(版本树)
  • 可缩放刻度
  • 节点：直径 10–16px。
  • 粒度：可 1h/1d/1m 切换。
  • 方向：横/纵可配。
  • 缩放：滚轮缩放时间轴 200ms。
  • 悬停：节点弹出详情。
  • 键盘：左右选节点。
  • role="list"+节点 listitem；分支用 tree 语义。
  • 时间文本可读。
29 说明
悬浮提示
Tooltip
/ˈtuːltɪp/
 鼠标 Hover 在图标/控件上出现的文字说明，几乎每个图标都要配，用于降低认知负荷（不替代常驻标签）。
  • 把必要信息只放 Tooltip，默认看不见，用户不知道去悬停。
  • Tooltip 含可点击链接/操作，悬停即消失难交互。
  • 延迟过长或过短，体验割裂。
  • 工具栏图标按钮的说明。
  • 缩写/专业术语的解释。
  • 图表数据点数值。
  • 核心构成：触发源(图标/文字) + 气泡(文字±小箭头指向源) + 出现/消失延迟控制。
间距：内边距 6–10px；最大宽 240–280px；箭头 6–8px；延迟 Hover 300–500ms。红线拆解图待补。
 Hidden、Visible、With-arrow(指向源)、Rich(含图/快捷键)。
  • 纯文字 / 含图标
  • 含快捷键角标
  • 深色 / 浅色
  • 延迟：Hover 300–500ms、离开即隐。
  • 宽：≤280px 自动换行。
  • 不挡：避开触发源。
  • 触发：悬停/聚焦显示，键盘 Focus 同理。
  • 消失：离开 100ms 内隐。
  • 可访问：同时进 title。
  • 触发源 aria-describedby 指向 Tooltip 文本。
  • 不可含可聚焦元素。
30
图表
Charts
/tʃɑːrts/
 大屏数据看板中的可视化控件，如折线图、柱状图、K 线图、饼图等，桌面端可承载高密度、多序列的数据展示。
  • 用表格展示本该可视化的趋势，受众抓不住规律。
  • 坐标轴无单位/无刻度，图读不懂。
  • 颜色只用红绿表示涨跌，色盲不可辨。
  • 数据看板、监控大屏。
  • 财务报表、行情 K 线。
  • 用户行为分析。
  • 核心构成：坐标轴(含单位/刻度) + 图例 + 数据序列(线/柱/点) + 悬浮数据点提示 + 缩放/刷选(可选)。
间距：坐标轴标签 11–12px；图例间距 8–12px；网格线浅灰。红线拆解图待补。
 Default、Loading(取数)、Empty(无数据)、Hover(数据点提示)、Zoomed。
  • 折线 / 柱状 / 饼 / K线
  • 组合图(双轴)
  • 可下钻
  • 刻度：含单位、合理区间。
  • 色板：≥3 色且色盲友好。
  • 交互：刷选/缩放可选。
  • 悬停：十字线+数据点气泡。
  • 缩放：框选放大、复位。
  • 动效：首次绘制动画 300ms。
  • 提供数据表回退；aria-label 简述趋势。
  • 色 + 形状双编码。
31 65%
进度条
Progress Bar
/ˈproʊɡres bɑːr/
 长任务进度展示（复制、导出、渲染），可含百分比文字与不确定态(循环动画)表示无法预估时长。
  • 长任务无任何进度反馈，用户以为卡死。
  • 不确定时长却显示 0% 不动，误导。
  • 进度条遮挡了“取消”入口。
  • 文件上传/下载、导出。
  • 批量处理、安装、渲染。
  • 核心构成：轨道 + 已填充段 + 百分比文字(可选) + 不确定态(循环条) + 取消按钮(可选) + 剩余时间估算。
间距：高度 6–10px；百分比 11–13px；取消按钮在条右侧或下方。红线拆解图待补。
 Determinate(已知%)、Indeterminate(未知循环)、Complete、Error(失败红)、Paused。
  • 线性 / 环形
  • 含百分比 / 不含
  • 可分段(多任务)
  • 高度：6–10px。
  • 精确：≥1% 步进更新。
  • 不确定：循环动画。
  • 更新：平滑过渡，不跳变。
  • 完成：变绿/对勾 + 自动消失。
  • 错误：红色 + 重试入口。
  • role="progressbar"+aria-valuenow/min/max；不确定态 aria-busy。
  • 文字同步。
32
滚动条
Scrollbar
/ˈskroʊlbɑːr/
 桌面端可见且可拖拽的滚动条（水平+垂直），滑块长度反映内容占比，拖拽实现快速定位。
  • 完全隐藏滚动条(移动化)，桌面用户无法定位/拖拽。
  • 滑块长度不随内容变化，看不出占比。
  • 滚动条过细，鼠标难抓。
  • 所有超出视口的内容区。
  • 长列表、代码编辑器、画布侧栏。
  • 核心构成：轨道(Track) + 可拖拽滑块(Thumb，长度∝可视比例) + 两端箭头(可选) + 点击轨道跳页。
间距：宽 10–16px(默认 15px Win / 16px Mac)；滑块最小长 24–32px；Hover 加粗。红线拆解图待补。
 Default、Hover(滑块加宽)、Active/Dragging、Hidden(无溢出自动隐)、Overlay(内容区浮层式)。
  • 常驻(OS 默认)
  • 悬停浮现(Overlay)
  • 细滚动条(紧凑)
  • 宽：10–16px。
  • 滑块：长度∝内容、最小 24px。
  • 箭头：可选。
  • 拖拽：滑块跟手；点轨道跳页。
  • 滚轮：联动滚动。
  • 键盘：方向键/PageUp/Down。
  • 原生可滚动容器自动具备；自定义需 role="scrollbar"+aria-controls。
  • 键盘可达。

五、 浮层与面板类 (Panels & Overlays)

桌面端极少用全屏弹窗，更多采用局部浮层：可拖拽吸附的悬浮面板、侧边抽屉、系统级通知。这一类强调“不阻断主流程”与“精准定位上下文”，是桌面多任务体验的关键。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
33
悬浮面板
Floating Panel
/ˈfloʊtɪŋ ˈpænl/
 可脱离主窗口自由拖拽、吸附的面板（如 PS 的图层面板、工具箱），常多块并存，支持停靠/叠放/隐藏。
  • 把工具面板硬嵌进主窗口，无法移出/并排对照。
  • 面板过多且无法收起，挤占工作区。
  • 拖拽无吸附反馈，用户不知能停靠。
  • 设计/剪辑/IDE 的图层面板、属性面板。
  • 任意需要常驻对照的辅助信息。
  • 核心构成：面板标题栏(拖拽手柄) + 内容区 + 停靠吸附区(边缘/叠加) + 收起/展开 + 多面板标签(可选)。
间距：标题栏高 28–32px；停靠边距 0–4px；最小宽 180px。红线拆解图待补。
 Docked(停靠)、Floating(自由悬浮)、Collapsed(收起)、Active(聚焦面板)、Hidden。
  • 可停靠/可浮动
  • 标签页组(多面板合一)
  • 半透明浮动
  • 尺寸：最小宽 180px、高自适应。
  • 吸附：边缘磁铁 4–8px。
  • 记忆：布局持久化。
  • 拖拽：面板倾斜+阴影，吸附线高亮。
  • 收起：滑入边缘 150ms。
  • 键盘：快捷键唤出/隐藏。
  • 面板 role="region"+aria-label；拖拽手柄可聚焦。
  • 聚焦顺序合理。
34
侧边抽屉
Drawer
/drɔːr/
 从侧边滑出的详情/操作面板，通常半宽、不遮挡主内容，适合展示选中项的详情或次级表单。
  • 用全屏 Modal 展示本可并排的详情，遮挡主列表。
  • 抽屉滑出无遮罩却也无法点主区，状态暧昧。
  • 没有关闭入口(×或点遮罩)，用户困在抽屉里。
  • 列表点选项→右侧详情。
  • 筛选/设置次级面板。
  • 核心构成：滑出容器(左/右) + 标题+关闭 + 内容区(可滚动) + 可选半透明遮罩(弱阻断) + 底部操作条。
间距：宽 320–480px 或 30–40% 视口；滑出 200–300ms 缓动；遮罩 20–30% 黑。红线拆解图待补。
 Closed、Open(滑入)、With-mask(弱阻断)、Focus-trap(焦点锁在抽屉内)。
  • 左侧 / 右侧
  • 半宽 / 全高
  • 带遮罩 / 无遮罩
  • 宽：320–480px。
  • 滑出：200–300ms。
  • 遮罩：可选 20–30%。
  • 滑入：transform 缓动 250ms。
  • 关闭：× / Esc / 点遮罩。
  • 焦点：打开锁入、关闭归还主区。
  • role="dialog"+aria-modal按需；Esc 关闭；焦点管理。
  • 遮罩可穿透时勿锁焦点。
35
模态对话框
Modal / Dialog
/ˈmoʊdl/ /ˈdaɪəlɒɡ/
 强阻断弹窗，背景变暗并要求用户必须处理（如未保存时“是否退出？”）。强调聚焦与明确操作。
  • 把非紧急信息用 Modal 弹，打断用户心流。
  • 只有“确定”没有“取消”，无法退出。
  • 遮罩点不掉、Esc 关不掉，像陷阱。
  • 危险确认(删除/退出未保存)。
  • 必填表单提交前校验。
  • 核心构成：遮罩(变暗) + 居中卡片 + 标题 + 正文 + 底部操作区(主/次/危险) + 关闭(×/Esc/点遮罩，按场景)。
间距：卡片宽 360–480px；圆角 8–12px；操作区按钮右对齐或两端。红线拆解图待补。
 Open、Focus-trap(焦点锁内)、Destructive(危险红)、Confirmed、Dismissed。
  • 确认 / 输入 / 选择
  • 危险(红) / 普通
  • 不可关(强制) / 可关
  • 宽：360–480px。
  • 遮罩：40–60% 黑。
  • 默认：次操作预聚焦防误确认。
  • 出现：缩放+淡入 150–200ms。
  • 关闭：× / Esc / 点遮罩(可关型)。
  • 焦点：打开锁入、关闭归还。
  • role="dialog"+aria-modal="true"；焦点陷阱；Esc 关闭；还原焦点。
  • 危险操作有二次确认文案。
36
原生文件对话框
File Dialog
/faɪl ˈdaɪəlɒɡ/
 调用操作系统原生的“打开/保存”文件选择器，由系统接管路径导航、文件类型过滤与预览，体验一致且安全。
  • 自己造一套文件选择器，路径/权限/预览全要重写，体验还差。
  • 不限制文件类型，用户选错格式才报错。
  • 保存时不提示覆盖同名文件。
  • 打开本地文件/导入。
  • 保存/导出到指定路径。
  • 核心构成：左侧位置导航(快速访问) + 右侧文件列表(图标/详情) + 类型过滤下拉 + 文件名输入 + 打开/保存/取消。
间距：对话框 480–900px 宽；列表行高 24–32px；类型过滤在底部。红线拆解图待补。
 Open(浏览)、Save、Filter(按类型)、Overwrite-warning(同名覆盖)、Empty(无匹配)。
  • 打开 / 保存 / 另存为
  • 单选 / 多选
  • 带预览 / 纯列表
  • 类型：默认过滤 + “全部”。
  • 多选：Shift/Ctrl 连选。
  • 覆盖：同名二次确认。
  • 导航：双击进目录、Back/Forward。
  • 键盘：输入即筛选文件名。
  • 确认：双击文件=打开。
  • 优先用 <input type=file> 或 OS API；accept 限类型。
  • 键盘全可操作。
37
气泡卡片
Popover
/ˈpɒvəvər/
 点击或 Hover 弹出的富文本卡片，带箭头指向触发源，用于在不打断主流程的前提下展示上下文信息或轻量操作。
  • 把 Popover 当 Modal 用，一弹就全屏遮罩。
  • 气泡超出视口被裁切，箭头指错方向。
  • Hover 弹出却不自动消失，挡住视线。
  • 图标按钮的操作菜单。
  • 表单字段的上下文帮助。
  • 选中元素的属性微调。
  • 核心构成：触发源 + 气泡卡片(标题/正文/操作) + 指向箭头(自动定位方向) + 出现/消失延迟。
间距：卡片 240–320px；箭头 6–8px 指向源；延迟 Hover 100–200ms、点击即时。红线拆解图待补。
 Hidden、Visible(箭头朝源)、Hover-sticky、Dismiss(点外部/Esc)、Pinned(钉住可交互)。
  • Hover / Click 触发
  • 带操作 / 纯信息
  • 可钉住(交互型)
  • 宽：240–320px。
  • 箭头：随源自动定向。
  • 避让：超界自动翻转。
  • 出现：淡入+位移 120–160ms。
  • 关闭：点外部/Esc/源再点。
  • 键盘：Focus 同显、Esc 关。
  • 源 aria-expanded 关联气泡 id；可聚焦。
  • 含可点元素时可钉住。
38
通知横幅
Notification
/ˌnoʊtɪfɪˈkeɪʃn/
 系统右上角滑出的卡片通知（如“下载完成”“收到新消息”），非阻断，可堆积、可点击跳转、可定时消失。
  • 把通知做成 Modal 弹窗，严重打断操作。
  • 通知不自动消失也无法手动关，越堆越多。
  • 点通知无任何跳转/动作，形同摆设。
  • 系统/应用事件提醒。
  • 后台任务完成提示。
  • 核心构成：应用图标 + 标题 + 正文 + 可选操作按钮 + 关闭(×) + 出现位(右上角堆叠) + 进度(可选)。
间距：卡片宽 320–400px、高 64–88px；堆叠间距 8–12px；停留 4–8s 或手动关。红线拆解图待补。
 Slide-in(滑入)、Hovered(暂停计时)、Expanded(展开详情)、Dismissed、Stacked(多条)。
  • 系统 / 应用内
  • 含操作 / 纯提示
  • 带进度 / 普通
  • 宽：320–400px。
  • 停留：4–8s 或常驻手动关。
  • 位置：右上(或右下)角。
  • 滑入：从边缘 250ms 缓动。
  • 悬停：暂停自动消失计时。
  • 关闭：× 或滑动消除。
  • role="status"/alert 视紧急度；可聚焦关闭。
  • 不抢焦点、可批量管理。
39 已复制
轻提示
Toast
/toʊst/
 短暂出现的操作反馈（如“已复制到剪贴板”“保存成功”），非阻断、自动消失，不打断当前任务。
  • 把每条反馈都做成 Modal，操作被反复打断。
  • 提示出现位置随机，用户找不到。
  • 提示含关键操作却自动消失，来不及点。
  • 操作成功/失败类轻反馈。
  • 无需用户决策的瞬时结果。
  • 核心构成：深色/浅色小条(圆角胶囊) + 图标 + 文字；出现位(底部居中/顶部) + 自动消失计时。
间距：高 36–44px、圆角 8–22px；停留 2–4s；底部居中或右下。红线拆解图待补。
 Show(淡入)、Auto-dismiss(定时隐)、Success/Warning/Error(配色)、With-action(含撤销)。
  • 纯文字 / 带图标
  • 带撤销(可点)
  • 多行 / 单行
  • 停留：2–4s 自动隐。
  • 位置：底部居中/右下。
  • 层级：高于内容、低于 Modal。
  • 出现：淡入+上移 150ms。
  • 消失：淡出；含撤销可延长时间。
  • 不可挡：不与输入焦点冲突。
  • role="status" + aria-live="polite"；不抢焦点。
  • 含操作可聚焦。

六、 拖拽与鼠标专属交互 (Drag & Mouse Interactions)

桌面端独有的高级交互形态，依赖精准的鼠标定位与大屏空间，往往需要特殊设计反馈：拖拽排序手柄、框选、智能对齐参考线、组合键多选、选中对象的悬浮工具条。它们共同构成专业工具（设计、剪辑、IDE）的“手感”。

序号 组件缩略图 中英文名称 简要说明 反模式 使用场景 结构解剖 状态 变体 规范参数 交互与动效 开发与无障碍
40
拖拽手柄
Drag Handle
/dræɡ ˈhændl/
 列表项/卡片左侧的 ⠿ 或面板边缘的抓手柄，提示该元素可拖拽重排；通过抓取手柄（而非整行）避免与点击/选择冲突。
  • 整行都可拖拽，导致点击展开/选中与拖拽冲突。
  • 手柄无视觉提示（无 ⠿ 图标），用户不知可拖。
  • 拖拽时无任何抓取/抬起反馈。
  • 可排序列表、看板卡片、图层顺序。
  • 自定义工具栏/侧栏项重排。
  • 核心构成：手柄图标(⋮⋮/⠿/≡) + 可拖拽目标行 + 插入位置指示线(拖拽时显示) + 抬起阴影。
间距：手柄在行首 16–24px 区；图标 12–16px；拖拽时插入线 2px 主色。红线拆解图待补。
 Default、Hover(手柄高亮)、Grabbing(抬起+阴影)、DropTarget(插入线)、Disabled。
  • 左侧点状手柄
  • 整行抓手(≡)
  • 边缘拖拽条
  • 命中区：≥24×24px。
  • 图标：12–16px。
  • 抬起：阴影 0 8px 24px。
  • 抓取：光标 grab→grabbing。
  • 排序：实时位移 + 插入线；松手归位动画 200ms。
  • 触屏：长按进入拖拽（移动端回退）。
  • aria-grabbed + 键盘(空格抓、方向键移)；拖拽区可聚焦。
  • 提供非拖拽的“移到…”菜单作回退。
41
框选区域
Marquee Selection
/mɑːrˈkiː sɪˈlekʃən/
 鼠标在空白处按住拖出半透明矩形（marquee），圈选画布上的多个元素；松手选中框内全部对象。专业工具的批量选择基础。
  • 框选起点落在元素上直接拖成移动，用户想框选却触发了移动。
  • 框选矩形无填充/边框，肉眼难辨。
  • 松手后未清空选区或残留半选。
  • 设计/剪辑画布、地图、文件网格多选。
  • 配合 Shift 累加选择。
  • 核心构成：起始点 + 跟随光标的矩形(填充 α≈0.12、1px 虚线边) + 命中元素高亮 + 选区计数(可选)。
间距：边框 1px 虚线；填充 α≈0.12；选区计数在框右上角。红线拆解图待补。
 Default、Dragging(跟随)、Selecting(命中高亮)、Empty(无命中)。
  • 矩形框选
  • 套索(Lasso)自由曲线
  • 加选(Shift 累加)
  • 填充：α 0.1–0.15。
  • 边：1px 虚线。
  • 阈值：拖出 ≥4px 才激活。
  • 跟随：矩形实时更新(60fps)。
  • 命中：元素描边高亮。
  • 松手：选中集成型 + 选区信息显示。
  • 键盘替代：Ctrl+A 全选、Shift+方向键扩展；选区可朗读数量。
  • 画布提供“选择全部”入口。
42
吸附参考线与智能对齐
Snapping & Smart Guides
/ˈsnæpɪŋ ənd smɑːrt ɡaɪdz/
 拖拽元素时自动出现对齐参考线，吸附到与其它元素/画布中心/边距对齐的位置，并显示间距数值，降低对齐成本。
  • 参考线频繁闪烁、乱飞，反而干扰。
  • 吸附过强，用户无法停在“差 2px”的精确位。
  • 无任何视觉提示，全靠手感。
  • 设计工具拖元件、PPT 对齐、窗口/面板停靠。
  • 多元素等距分布。
  • 核心构成：对齐参考线(1px 主色虚线) + 吸附高亮元素 + 间距标注(如 24px) + 中心点标记。
间距：参考线 1px；间距标注 10–11px 字；吸附阈值 2–4px。红线拆解图待补。
 Idle、Snapping(吸附中显示线)、Aligned(对齐完成)、Override(临时关闭吸附)。
  • 边对齐
  • 中心对齐
  • 等距分布
  • 智能边距
  • 阈值：2–4px 触发。
  • 线：1px 主色。
  • 标注：间距实时显示。
  • 拖拽：接近对齐点轻微“咔哒”吸入。
  • 提示：参考线淡入 + 间距数字。
  • 关闭：按住 Alt/⌥ 临时禁用吸附。
  • 提供吸附开关；键盘用方向键微移 + Shift 大步；状态可被读屏播报。
43
多选组合键
Multi-select Modifiers
/ˈmʌlti sɪˈlekt ˈmɑːdɪfaɪərz/
 通过 Shift 连续多选、Ctrl/Cmd 跨项多选，在列表/表格/文件管理器中批量选中不连续或连续项；是桌面高效操作的核心。
  • 仅支持 Ctrl 不支持 Shift，无法区间选。
  • 多选后单击误清空选区，用户丢失选择。
  • 选中态与 Hover 态无区分，看不出选了几个。
  • 文件管理器、邮件列表、表格行、代码编辑器。
  • 批量删除/移动/导出。
  • 核心构成：选中项高亮(主色淡底) + 复选标记(可选) + 锚点项(Shift 起点) + 键盘提示(⌘/Ctrl/Shift)。
间距：选中底色 α≈0.1；复选框 16–18px；选中文字主色加深。红线拆解图待补。
 Unselected、Hover、Selected(锚点/普通)、Active(键盘焦点)、Range(区间高亮)。
  • Shift 连续
  • Ctrl/Cmd 离散
  • Ctrl+A 全选
  • 点击空白清空
  • 底色：选中 α 0.1 主色。
  • 对比：选中文字加深。
  • 焦点：2px 焦点环。
  • Shift：从锚点到目标整段选中。
  • Ctrl/Cmd：逐项目切换。
  • 反馈：选中计数(如“已选 5 项”)。
  • aria-selected；键盘 Space 切换、Shift+↓/↑ 扩选；选区可朗读。
44
上下文悬浮工具条
Floating Context Toolbar
/ˈfloʊtɪŋ ˈkɑːntekst ˈtuːlbɑːr/
 选中文字或图形后，在选区附近浮出的微型工具条（加粗、颜色、对齐等），免去找菜单；位置随选区浮动，不遮挡内容。
  • 工具条盖住刚选中的内容，用户看不见在改什么。
  • 项过多，变成迷你菜单。
  • 失焦不消失，长期悬浮干扰。
  • 富文本选中后的格式条；设计软件选中图形的属性条。
  • 表格框选后的批量操作。
  • 核心构成：浮层卡片(深色/浅色) + 分组图标按钮(加粗/斜体/颜色/对齐) + 指向选区的连接 + 自动避让边缘。
间距：条高 32–40px；按钮 28–32px；距选区 8–12px；边缘自动内缩。红线拆解图待补。
 Hidden、Shown(淡入上浮)、Hover(按钮高亮)、Pinned(可固定)。
  • 文字格式条
  • 图形属性条
  • 常驻可固定
  • 高：32–40px。
  • 按钮：28–32px。
  • 避让：距视口边 ≥8px。
  • 出现：选中后 120ms 淡入+上移。
  • 定位：跟随选区中心、边缘自动翻转。
  • 消失：失焦/滚动/点空白 200ms 淡出。
  • 工具条内按钮真实 <button> + 可聚焦；aria-label 标注动作。
  • 键盘 Esc 关闭。

七、 系统底层交互 (System Interactions)

与应用生命周期和设备相关的组件，大多调用操作系统能力而非纯 App 内实现：系统原生警告、任务栏进度、全屏/沉浸、键盘焦点环。它们连接“应用”与“操作系统”，是桌面端区别于网页/移动端的关键体验层。

序号 组件缩略图 中英文名称 简要说明 反模式 使用场景 结构解剖 状态 变体 规范参数 交互与动效 开发与无障碍
45
系统原生警告
Native Alert
/ˈneɪtɪv əˈlɜːrt/
 调用 macOS/Windows 系统底层弹窗 API（如 NSAlert、MessageBox），样式由 OS 决定、与 App 无关；用于需要用户立即决策的系统级确认。
  • 用系统原生警告承载普通业务提示（应改用 App 内 Toast/Dialog）。
  • 按钮文案含糊（“确定/取消”无语境）。
  • 一次弹多个原生警告，叠层混乱。
  • 未保存退出、删除系统文件、权限请求。
  • 需要阻断 OS 级操作的关键确认。
  • 核心构成：OS 窗口外壳(含系统标题栏/红黄绿) + 警示图标 + 标题 + 消息正文 + 默认/取消按钮(主操作高亮)。
间距：由 OS 规范决定；按钮间距 8–12px；主操作在右侧或默认焦点。红线拆解图待补。
 Default、Critical(红色警示)、Informational、Confirmation。
  • 单按钮(仅确认)
  • 双按钮(确认/取消)
  • 三按钮(含第三选项)
  • 归属：由 OS 渲染，不可自定义样式。
  • 焦点：默认聚焦主/安全操作。
  • 图标：warning/error/info 三态。
  • 出现：OS 标准淡入/居中。
  • 键盘：Enter 确认、Esc 取消。
  • 层级：置顶于所属 App。
  • 使用平台 API 而非自制；正确设置对话框 role="alertdialog"；焦点锁定在弹窗内。
46
任务栏进度指示
Taskbar Progress
/ˈtæskbɑːr ˈprɑːɡres/
 在操作系统任务栏/ Dock 的应用图标上叠加显示进度（下载、渲染、转码），用户切到别处也能看到任务状态。
  • 进度长期卡在 99% 不收尾，用户以为失败。
  • 把瞬态操作也显示进度，图标乱闪。
  • 多任务时进度互相覆盖，看不出哪个。
  • 浏览器下载、压缩/导出、云同步。
  • 长耗时后台任务。
  • 核心构成：任务栏图标 + 叠加进度层(环形/条状/底衬色) + 完成态勾选 + 失败态红叉(可选)。
间距：进度环贴合图标边缘(2–3px)；成功率 ≥90% 转绿；失败红。红线拆解图待补。
 Idle、InProgress(环形增长)、Paused、Complete(绿勾)、Error(红叉)。
  • 环形进度(Windows)
  • 图标底衬色块(macOS)
  • 角标数字+进度
  • 精度：≥1% 步进。
  • 完成：自动清除或在图标显示完成标记。
  • 错误：停留提示直至用户处理。
  • 更新：平滑增长，不跳变。
  • 悬停：图标显示进度百分比气泡。
  • 完成：进度层消退 + 完成提示。
  • 调用 OS 进度 API（Win：ITaskbarList3；mac：NSApplication）；读屏可播报百分比。
47
全屏/沉浸模式
Fullscreen Mode
/ˈfʊlskriːn moʊd/
 隐藏系统状态栏/菜单栏/窗口装饰，让应用内容铺满整个屏幕，减少干扰（看板、放映、游戏、阅读）。
  • 进入全屏后把退出入口藏得太深，用户不知如何退出。
  • 全屏但保留巨型装饰元素，没真正“沉浸”。
  • 退出全屏丢失当前滚动/编辑位置。
  • 视频/幻灯片放映、游戏、写作、设计画布。
  • 长时间专注任务。
  • 核心构成：铺满视口的内容区 + 自动隐藏的悬浮控制(鼠标静止时隐) + 退出按钮/手势(右上角或移动鼠标唤出) + 安全区适配。
间距：内容铺满；控制条距边 8–16px；安全区(刘海/圆角)留 8–12px。红线拆解图待补。
 Windowed、Entering(动画)、Fullscreen、Exiting、AutoHideControls。
  • 真全屏(无 OS 栏)
  • 沉浸(控制自动隐)
  • 最大化(仍带任务栏)
  • 呼出：鼠标移顶/移底或 ⌃⌘F。
  • 退出：明显入口或 Esc。
  • 安全区：适配 notch/圆角。
  • 进入：缩放动画 200–300ms。
  • 控制：鼠标静止 2–3s 自动隐。
  • 退出：位置/状态保留。
  • :fullscreen 伪类 + Fullscreen API；Esc 退出；避免隐藏必要读屏信息。
48
焦点环
Focus Ring
/ˈfoʊkəs rɪŋ/
 用 Tab/方向键切换焦点时，当前可聚焦元素外围出现的虚线或高亮边框，是键盘导航与无障碍的必备可视反馈。
  • 为了“美观”全局移除焦点环(outline:none 无替代)，键盘用户迷失。
  • 焦点环与元素间距为 0，看不出边界。
  • 仅鼠标点击也显示 ring，误以为可聚焦。
  • 所有可聚焦元素：按钮、链接、输入框、菜单项。
  • 键盘/无障碍导航。
  • 核心构成：元素外 2px 高亮描边(品牌色) + 1–2px 偏移间隙 + 圆角跟随元素；部分 OS 用虚线。
间距：环宽 2px、偏移 2px(间隙)；对比需达 WCAG 3:1；圆角随元素。红线拆解图待补。
 KeyboardFocus(显示)、MouseFocus(可隐藏)、Active、Disabled(无环)。
  • 实线高亮环
  • 虚线环(macOS 经典)
  • 双层环(外发光)
  • 宽：2px。
  • 偏移：2px 间隙。
  • 对比：环与背景 ≥3:1。
  • 出现：键盘聚焦即时显示(无延迟)。
  • 移动：随 Tab 顺序平滑跳到下一元素。
  • 鼠标：点击可隐藏 ring(仅键盘留)。
  • 用 :focus-visible 而非 :focus，仅键盘显示；永不设 outline:none 而不提供替代；颜色满足对比。

桌面端组件的 4 个灵魂特征

桌面端的交互密度与自由度远高于移动端。这 4 条“灵魂特征”决定了专业工具是否真正好用——它们共同指向一个原则：把控制权交给用户，而不是替用户做减法。

1 右键菜单是核心交互

高级功能全部隐藏在右键里，保持主界面清爽。桌面屏幕不再寸土寸金，把“不常用但重要”的操作收进上下文菜单，主界面只留最高频的按钮，是专业工具的共识。

自检：主界面挤满按钮？→ 把二级操作移进右键 / 更多菜单。

2 Hover 态是防迷失的灯塔

鼠标滑过哪里，哪里必须有反馈——变色、放大、出现 Tooltip。桌面没有手指“按压”作为确认信号，Hover 就是用户确认“这里可点”的唯一实时线索，缺失会让界面像“死的”。

自检：鼠标划过图标毫无变化？→ 补 hover 高亮 / 光标变化。

3 面板可定制化

用户希望自由拖拽、隐藏、组合各个面板（如自定义工作区）。专业用户的高频操作路径不同，固定布局会拖慢他们；可停靠、吸附、保存工作区布局，是效率型桌面 App 的标配。

自检：面板位置写死不能调？→ 支持拖拽停靠 + 布局记忆。

4 快捷键标识

几乎所有菜单项和 Tooltip 都必须带上快捷键提示（如 保存 (Ctrl+S)）。键盘流是桌面效率用户的肌肉记忆，缺了快捷键标注，功能等于“被隐藏了一半”。

自检：菜单项只写文字无键位？→ 右侧补 (Ctrl/⌘+…) 标注。