← 返回多端学习对照表

通用平板端常用组件

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

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

一、 导航与布局类 (Navigation & Layout)

平板横屏空间极大，导航的重心从底部的“拇指热区”转移到了侧边的“视线黄金区”。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
侧边导航栏
Sidebar
/ˈsaɪdbɑːr/ /ˈnævɪɡeɪʃən bɑːr/
 平板端绝对核心的常驻导航。替代手机底部 Tab Bar，固定在左侧（亦可右），可折叠/展开，承载多层菜单与全局入口。
  • 不要默认收起导致一级导航消失（除非提供明显展开手势）。
  • 不要把高频操作埋进深层折叠项（被发现性差）。
  • 横屏时勿与内容争夺过多宽度（建议 240–280px）。
  • 横屏 iPad / Android 平板的全局导航（文件/邮件/笔记类）。
  • 左侧导航 + 右侧内容的主从（Master-Detail）布局。
  • 核心构成：折叠把手、头部(Logo/工作区切换)、导航分组、菜单项(图标+文字)、展开/收起态、底部账号/设置区。
间距：宽度 240–280px(折叠态 60–72px 仅图标)；项高 44–48px；左内边距 16px；分割线分隔分组。红线拆解图待补。
 平板/PC：常驻 Expanded 为默认。移动/折叠屏：Collapsed(仅图标)、Peeking(悬停展开)、Overlay(小屏覆盖式)。
  • 常驻侧栏
  • 可折叠侧栏
  • 覆盖式抽屉(小屏)
  • 双栏主从(Master-Detail)
  • 图标仅侧栏
  • 宽度：平板 240–280px(折叠 60–72px)。
  • 项高：44–48px；图标：24px。
  • 字号：14–15px；展开动画：~200–250ms。
  • 触发：汉堡键/手势边缘滑出/悬停展开。
  • 反馈：跟随手指或悬停即时展开；内容区宽度随侧栏自适应(不遮挡)。
  • 响应式：竖屏窄态可转为覆盖抽屉；横屏默认常驻。
  • 热区 ≥44pt。
  • 键盘 Tab 可达，Esc 收起(覆盖态)。
  • 对比度 AA；语义 <nav> 含 <ul>/<li>；折叠态 aria-expanded。
2
顶部导航栏
Nav Bar / Top Bar
/næv bɑːr/ /tɒp bɑːr/
 常驻顶部的横向条，承载页面标题、返回键与大量右侧操作图标（分享/导出/编辑等）。平板横屏空间下右侧操作区更宽松。
  • 右侧操作图标不要超过 4–5 个（否则收进“更多”菜单）。
  • 不要把全局 Tab 切换放进导航栏。
  • 标题勿与左侧返回键重叠（尤其竖屏/小屏）。
  • 几乎所有二级页顶部；需标题 + 多个操作的编辑/浏览页。
  • iPad 大屏右侧常并列“分享/标记/导出/更多”。
  • 核心构成：左侧返回/关闭、左对齐或居中标题、右侧操作簇(图标按钮，末尾“更多”⋯)、底部分隔线/阴影。
间距：左右安全边距 16px；标题与操作间距 ≥8px；高度 iPadOS 44–52px。红线拆解图待补。
 Default、Pressed(操作图标)、Disabled(不可返回时隐藏返回键)、Transparent(沉浸式/全屏阅读)、Large Title(滚动收缩)。
  • 标准栏
  • 大标题栏(Large Title)
  • 透明/沉浸式
  • 搜索内嵌式
  • 带分段控件的复合栏
  • 高度：iPadOS 44–52px；Android 56px。
  • 操作图标：24px；标题：17px/Bold。
  • 触发：点击返回/操作图标。
  • 反馈：点击涟漪/高亮；大标题随滚动收缩为小标题。
  • 响应式：横屏右侧操作区更宽，可并排更多图标。
  • 热区 ≥44×44。
  • 返回键用系统导航；右侧操作用 <button>。
  • 对比度 AA；当前标题用 <h1>。
3
顶部标签页
Tab Bar - Top
/tæb bɑːr tɒp/
 iPadOS 中大量 App 把 Tab 栏移到顶部（如 App Store、Apple Music），以适配双手横握时的拇指可达区与更宽的横向空间。
  • 不要与底部 Tab Bar 同时存在造成双导航（除非不同层级）。
  • 选项不要超过 5–7 个（超出用可滚动标签）。
  • 不要把 Tab 当作内容内的子分类切换（那用 Segmented Control）。
  • iPad 横屏 App 一级切换（如 App Store 的 今天/游戏/App）。
  • 媒体类 App（音乐/播客）顶部大 Tab。
  • 核心构成：顶部标签项(文字/图标+文字)、选中指示(填充/下划线)、可滚动轨道、左右渐隐边缘、常驻于 Nav Bar 下方或独立条。
间距：项间距 24–32px；指示高 2–3px；标签条高 48px；距顶部安全区。红线拆解图待补。
 Default、Selected(主色/填充)、Pressed、Scrollable(边缘露半项)、Badge(未读)。
  • 等宽标签
  • 滚动标签(超宽)
  • 带图标标签
  • 下划线式/填充胶囊式
  • 大号媒体 Tab
  • 高度：48px；字号：14–17px(iPad 可更大)。
  • 指示条：2–3px；选中色：主色。
  • 触发：点击/滑动切换。
  • 反馈：内容切换 + 指示位移(~200ms)；横屏可并排更多。
  • 响应式：竖屏可回退为底部 Tab Bar（按设备方向）。
  • 热区 ≥44pt。
  • role="tablist"+aria-selected；对比度 AA；键盘左右切换。
4
分屏与悬浮控制器
Split View & Slide Over
/splɪt vjuː/ /slaɪd ˈoʊvər/
 系统级多任务控件。iPad 顶部的小圆点（或多任务条）用于把 App 分为左右两半（Split View）或右侧悬浮小窗（Slide Over），并拖动调整分屏比例。
  • 不要让 App 自身拦截系统多任务手势（顶部条/拖拽）。
  • 不要在分屏态下强行锁定固定宽度（应尊重 1/3、1/2、2/3 比例）。
  • 悬浮窗内容勿遮挡关键信息且无关闭入口。
  • 边看文档边记笔记；主 App + 计算器/聊天悬浮。
  • iPadOS 分屏 1/3、1/2、2/3；Slide Over 悬浮并可左右移。
  • 核心构成：顶部多任务控制条(小圆点)、分隔拖拽条(可左右拖)、App 边界、Slide Over 悬浮窗(可隐藏到边缘)、切换/关闭按钮。
间距：分隔条可拖拽区宽约 10–14px；分屏比例档位 1/3、1/2、2/3；Slide Over 默认宽约 1/3 屏。红线拆解图待补。
 Collapsed、Half(1/2)、Third(1/3)、Two-Third(2/3)、SlideOver(悬浮)、Hidden(滑出边缘)。
  • 左右分屏
  • 上下分屏(Stage Manager)
  • Slide Over 悬浮
  • Stage Manager 自由窗口(M 系芯片)
  • 分屏档位：33% / 50% / 67%。
  • 分隔条热区：≥10px；Slide Over：默认 320–380px；动画：~300ms。
  • 触发：长按顶部小圆点拖拽 / 从 Dock 拖 App。
  • 反馈：跟手拖拽分隔条实时改变比例，松手吸附最近档位；Slide Over 可左右移或滑出隐藏。
  • 响应式：外接显示器/Stage Manager 支持多自由窗口。
  • 尊重系统 safe area 与多窗口；Scene/WindowScene 适配。
  • 勿禁用系统手势；对比度 AA；拖拽条有 accessible 标签。
5
分段控制器
Segmented Control
/ˈseɡməntɪd kənˈtroʊl/
 在同一内容层级内并列切换若干平级视图的紧凑控件。因平板横向空间充裕，极为常见（如“日/周/月”视图切换）。
  • 选项不要超过 4–5 个（否则用 Tabs/下拉）。
  • 不要用它做全局导航（那是 Sidebar/Tab Bar 职责）。
  • 不要动态增减分段导致布局跳动（固定宽度更稳）。
  • 日历“日/周/月/年”；设置“普通/紧凑”。
  • 图表“收入/支出”；工具栏内联切换显示模式。
  • 核心构成：外框胶囊、等宽分段项(文字)、选中分段(填充主色/高亮)、分段间分割线、滑动指示(iOS 填充式)。
间距：分段项高 28–32px；内边距 12–16px；字号 13–15px；圆角全胶囊。红线拆解图待补。
 Default、Selected(填充主色)、Pressed、Disabled(整组禁用)。
  • 两/三/四段式
  • 图标+文字
  • 纯文字
  • 填充式(iOS)/下划线式(Material)
  • 高度：28–32px；字号：13–15px；选中色：主色。
  • 项间距 0(共享边框)；触摸目标：≥44×28。
  • 触发：点击分段。
  • 反馈：选中段填充滑动/变色(~150–200ms)；内容即时切换。
  • 响应式：横屏可放更多分段而不拥挤。
  • 热区 ≥44pt(整段可点)。
  • radiogroup+radio 或 tablist；对比度 AA；键盘左右切换。

二、 数据展示与容器类 (Data Display)

平板屏幕宽，更适合多列布局与卡片化展示，实现“宽屏多图流”。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
6
网格视图
Grid View / Collection View
/ɡrɪd vjuː/ /kəˈlekʃən vjuː/
 大屏上极常见的多列网格/瀑布流，以等宽卡片承载图片或信息单元，信息密度显著高于手机单列流，点击进入详情。
  • 不要在平板上硬套手机单列流（浪费横向空间）。
  • 卡片间距过小导致误触、视觉拥挤。
  • 不要无限瀑布流无分页/无定位（大列表易迷失）。
  • 相册/图库、应用商店、商品/作品集。
  • 文件缩略图浏览、素材中心。
  • 核心构成：网格容器、单元格(图片/封面+标题+元信息)、间距(Gutter)、滚动轨道、可选筛选/排序条、空状态。
间距：单元间距 8–16px；图片比例统一(1:1/4:3/16:9)；列数随宽度自适应 2–6 列。红线拆解图待补。
 Default、Selected(选中描边/勾选)、Pressed、Loading(骨架)、Empty。
  • 等宽网格
  • 瀑布流(不等高)
  • 可横滑卡片
  • 可多选网格
  • 带分组表头
  • 间距：单元 8–16px；比例：1:1/4:3/16:9。
  • 列数：2–6(随屏宽)；角标：12–16px；触摸：≥44pt。
  • 触发：点击单元格进详情/长按多选。
  • 反馈：点击缩放/高亮；多选出现浮动工具条；横屏列数自动增多。
  • 响应式：竖屏少列、横屏多列；可配合 Sidebar 做主从。
  • 网格用语义列表/role="grid"；键盘可达。
  • 选中态 aria-selected；对比度 AA；图片有 alt。
7
数据表格
Data Table
/ˈdeɪtə ˈteɪbəl/
 平板可直接呈现含 3–5 列的轻量表格，多列并排可读，而不必像手机那样折叠成列表或卡片，适合结构化数据浏览与对比。
  • 不要把本可多列的表强拆成卡片列表（增加滚动）。
  • 列数过多(>6)导致拥挤/横向滚动。
  • 表头不吸顶，横向滚动时丢失上下文。
  • 订单/报表、设置项参数、用户/设备管理。
  • 统计对比、监控指标。
  • 核心构成：表头(列名+排序)、行(单元格)、斑马纹/分隔线、可选行选(checkbox)、分页/滚动加载、列对齐(数字右对齐)。
间距：行高 44–52px；单元格内边距 12–16px；列间距 ≥16px；表头吸顶。红线拆解图待补。
 Default、Hover(行高亮)、Selected(行选中)、Sorted(列排序箭头)、StickyHeader、Empty。
  • 静态表
  • 可排序表
  • 可筛选表
  • 内联可编辑表
  • 固定首列+横滚
  • 行高：44–52px；字号：13–14px。
  • 列最小宽：96–120px；数字列：右对齐；触摸：≥44pt。
  • 触发：点击表头排序、点击行选中/进详情。
  • 反馈：排序箭头翻转(~150ms)、行 hover 浅底；横屏列更多。
  • 响应式：窄屏退化为卡片列表；横屏保留多列并冻结首列。
  • 真 <table> 语义；th scope。
  • 可排序用 aria-sort；行可 Tab；对比度 AA。
8
画廊/画廊视图
Gallery View
/ˈɡæləri vjuː/
 以大幅缩略图为主、常配合侧栏的浏览视图（如相册、文件管理器）。比网格更强调“图”本身，单图更大、信息更聚焦。
  • 不要让缩略图过小像列表（失去画廊意义）。
  • 侧栏与画廊争夺主区（应画廊为主）。
  • 不要无批量操作（图多选/删除频繁）。
  • 相册/照片、设计稿库、文件管理器。
  • 素材中心、作品集浏览。
  • 核心构成：左/右栏(筛选/文件夹)、主区大缩略图网格、悬浮工具条(分享/删除/信息)、选中态、详情浮层。
间距：缩略图 160–240px；图间距 12–16px；栏宽 200–260px。红线拆解图待补。
 Default、Selected(描边/勾选角标)、Hover(工具条浮现)、MultiSelect、Empty。
  • 大图网格
  • 横滑胶片条
  • 与 Sidebar 主从
  • 与 Preview Pane 结合(选图看大图)
  • 缩略图：160–240px；间距：12–16px。
  • 栏宽：200–260px；角标：16px；触摸：≥44pt。
  • 触发：点击看图/双击全屏、框选多选。
  • 反馈：hover 工具条淡入；选中描边+角标；横屏图更大更多。
  • 响应式：竖屏栏可收起；横屏画廊扩为主区。
  • 图有 alt/aria-label；列表语义。
  • 多选可键盘；对比度 AA。
9
气泡卡片
Popover
/ˈpɑːpˌoʊvər/
 平板端极高频。点击图标/按钮后，在旁侧弹出带箭头的小气泡卡片，呈现操作/信息，不打断主流程，常替代手机的底部 Action Sheet 或全屏弹窗。
  • 不要把承载复杂表单的长内容塞进 Popover（应改弹窗/抽屉）。
  • 箭头指向不准（应指向触发源）。
  • 窄屏无空间时用 Popover（应改底部 sheet）。
  • 工具栏“更多”菜单、筛选浮层。
  • 快速信息卡、富文本工具条、分享菜单。
  • 核心构成：触发源(按钮/图标)、气泡卡片(标题/内容/操作)、指向箭头、背景遮罩(可选轻遮)、关闭区。
间距：卡片宽 200–320px；内边距 12–16px；箭头长 8–10px；距触发源 4–8px。红线拆解图待补。
 Default、Open、Dismiss(点外部/ESC)、WithArrow(上/下/左/右)、Disabled(触发不可点)。
  • 菜单型
  • 信息卡型
  • 富操作型
  • 带搜索筛选
  • 四向(上/下/左/右)
  • 卡片宽：200–320px；箭头：8–10px。
  • 内边距：12–16px；圆角：10–12px；触摸：≥44pt。
  • 触发：点击触发源。
  • 反馈：气泡淡入+轻微缩放(~150–200ms)、箭头随锚点定位；点外部/ESC 关闭；横屏空间足更常用。
  • 响应式：窄屏/竖屏改底部 Action Sheet 或居中弹窗。
  • 触发按钮 aria-expanded/aria-haspopup。
  • ESC 关闭；焦点陷阱；对比度 AA。
10
展开面板
Expandable Rows
/ɪkˈspændəbəl roʊz/
 点击列表/表格中的一行，向下平滑展开显示详情（而非跳转新页）。适合邮件、文件列表等“概览→详情”场景。
  • 不要展开内容过高（应限制高度/内部滚动或转详情页）。
  • 展开动画卡顿。
  • 一次允许展开过多行（页面过长）。
  • 邮件列表(展开看摘要)、文件/订单列表。
  • FAQ、设置项分组。
  • 核心构成：行头(主信息+展开箭头)、展开区(详情/子列表/操作)、箭头旋转态、分隔线。
间距：行高 48–56px；展开区内边距 12–16px；箭头区 24px。红线拆解图待补。
 Collapsed、Expanded(箭头翻转)、Hover、Selected。
  • 单展开(手风琴)
  • 多展开
  • 内嵌子表
  • 带批量操作的展开
  • 行高：48–56px；动画：~200–250ms。
  • 箭头：旋转 180°；触摸：≥44pt。
  • 触发：点击行头/箭头。
  • 反馈：高度平滑展开(~200–250ms)、箭头 180° 翻转；横屏可同时展开多行。
  • 响应式：窄屏同样可用；内容过宽可横向滚动。
  • 行头用 button+aria-expanded。
  • 展开区 aria-controls；键盘可达；对比度 AA。
11
侧边预览窗格
Preview Pane
/ˈpriːvjuː peɪn/
 左侧列表 + 右侧大半屏常驻显示当前选中项详情（如邮件 App）。平板横屏空间使“列表-预览”双栏成为高效阅读范式。
  • 不要预览窗格过窄（读不全）。
  • 列表与预览宽度失衡（应预览≥列表）。
  • 窄屏硬留双栏（应转单栏+详情页）。
  • 邮件/消息、文件管理器、笔记/文档库。
  • 工单系统、设备管理。
  • 核心构成：左列表(行+选中态)、分隔、右预览窗格(标题/正文/附件/操作条)、列表选中高亮、空状态(未选)。
间距：列表宽 280–360px；预览≥列表；分隔 1px；行高 48–56px。红线拆解图待补。
 ListOnly(未选)、Preview(已选)、Loading(加载中)、Empty。
  • 列表-预览双栏
  • 列表-预览-详情三栏
  • 可收起预览
  • 与 Sidebar 主从叠加
  • 列表宽：280–360px；预览：≥列表宽。
  • 行高：48–56px；触摸：≥44pt。
  • 触发：点击列表项。
  • 反馈：预览区即时渲染(可淡入)；选中行高亮；横屏三栏更顺。
  • 响应式：竖屏/窄屏退化为单栏(点列表进详情页)；横屏双/三栏。
  • 列表 listbox+option；选中 aria-selected。
  • 预览区可聚焦；对比度 AA；键盘导航。

三、 交互操作类 (Action & Interaction)

平板支持多种输入方式（手指、笔、鼠标），交互维度比手机更丰富。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
12
长按上下文菜单
Context Menu
/ˈkɒntekst ˈmenjuː/
 长按文字/图片（或触控板右键点击），弹出带毛玻璃半透明效果的快捷菜单，提供与所选对象相关的操作（复制/分享/删除等）。
  • 菜单项与点击对象无关（应“情境相关”）。
  • 菜单覆盖被操作对象本身。
  • 长按无触觉/视觉反馈（应即时震动或预览气泡）。
  • 文本选择后的编辑菜单、图片长按分享。
  • 列表项长按批量操作。
  • 核心构成：触发(长按/右键)、毛玻璃卡片、菜单项(图标+文字)、分隔线、危险项(红)、箭头指向锚点。
间距：卡片宽 200–260px；项高 44–48px；内边距 12–16px；毛玻璃模糊 20–30px。红线拆解图待补。
 Default、Preview(长按预览气泡)、Open、Selected(项高亮)、Dismiss。
  • 文字编辑菜单
  • 对象操作菜单
  • 带图标菜单
  • 带次级子菜单
  • 危险项红字
  • 卡片宽：200–260px；项高：44–48px。
  • 毛玻璃：模糊 20–30px；圆角：12–14px；触摸：≥44pt。
  • 触发：长按 500ms/右键。
  • 反馈：轻震动+菜单淡入缩放(~150ms)；点外部/ESC 关闭；横屏任意位置可弹。
  • 响应式：窄屏可居中或底部 sheet；横屏就近锚定。
  • 菜单 role="menu"+menuItem。
  • 键盘可达；触发源 aria-haspopup；对比度 AA。
13
拖拽交互
Drag & Drop
/dræɡ ænd drɑːp/
 平板的灵魂交互。长按元素使其脱离原位，可拖拽到另一位置、侧边栏或另一 App（如拖图片到备忘录），支持跨 App 数据传输。
  • 拖拽中无“抬起”视觉（阴影/缩放），不知在拖。
  • 落点无高亮提示。
  • 拖拽距离过短误触（应与长按区分）。
  • 拖图片到备忘录/邮件、整理文件。
  • 跨 App 拖文本、看板卡片排序。
  • 核心构成：可拖源(抓手/缩略)、悬停抬升态(阴影+缩放)、拖影、放置目标(高亮/虚线框)、插入指示线、取消区。
间距：抬升缩放 1.05–1.1；阴影 0 8–16px；目标高亮描边 2px。红线拆解图待补。
 Idle、Lifted(抬起阴影)、OverTarget(目标高亮)、Dropping(落定)、Cancel(弹回)。
  • 同列表排序
  • 跨列看板
  • 跨 App 拖拽
  • 文件整理
  • 文本拖拽
  • 抬起：缩放 1.05–1.1；阴影：0 8–16px。
  • 目标描边：2px 主色；动画：~200ms；触摸：≥44pt。
  • 触发：长按后跟手拖动。
  • 反馈：源抬起+拖影跟手；目标实时高亮；松手吸附/弹回(~200ms)；横屏落点区更大。
  • 响应式：小屏同样支持；目标区随屏放大。
  • 提供非拖拽替代(长按菜单/按钮移动)。
  • 拖拽有 accessible 标签；对比度 AA。
14
悬浮工具面板
Floating Toolbar
/ˈfloʊtɪŋ ˈtuːlbɑːr/
 屏幕上层悬浮的小工具条（如 iPad 配 Apple Pencil 时出现的画笔/橡皮/高亮工具栏），可拖动到任意位置，不占主布局。
  • 悬浮条遮挡正在操作的内容（应可拖动避让）。
  • 工具过多导致条过长。
  • 不提供收起/隐藏（干扰阅读）。
  • 手写/标注工具栏、绘图工具。
  • 选区工具、格式浮条。
  • 核心构成：悬浮胶囊条、工具图标按钮、分隔、激活态(填充)、拖拽抓手、收起按钮。
间距：条高 44–48px；图标 24px；图标间距 8–12px；圆角全胶囊。红线拆解图待补。
 Default、Active(工具选中填充)、Dragging(跟手)、Collapsed(收起小点)、Hidden。
  • 笔工具条
  • 格式浮条
  • 标注条
  • 可展开更多
  • 条高：44–48px；图标：24px；圆角：全胶囊。
  • 触摸：≥44pt；阴影：0 6–12px。
  • 触发：出现于特定输入(如落笔)/长按工具。
  • 反馈：条淡入+可拖动；激活工具填充主色；横屏可贴边。
  • 响应式：横竖屏均浮于内容上方；可贴边收纳。
  • 工具为 button+aria-pressed。
  • 可键盘聚焦；对比度 AA；可关闭。
15
悬浮键盘
Floating Keyboard
/ˈfloʊtɪŋ ˈkiːbɔːrd/
 系统组件。键盘可缩小成手机大小并悬浮在屏幕任意位置，方便单手打字，同时留出上半屏显示内容（iPadOS 长按键盘底栏即可触发）。
  • 悬浮键盘遮挡正在输入的输入框（应可拖动到不挡处）。
  • 缩太小导致误触。
  • 无吸附/收起（干扰浏览）。
  • 单手打字、边看内容边回复。
  • 横屏输入不挡全屏。
  • 核心构成：缩小键盘体、顶部拖拽抓手、左右轻推分离键(可选)、收起/全键盘切换、光标定位。
间距：宽约屏 1/3；键高 ~36–40px；抓手区 12–16px。红线拆解图待补。
 Default(全键盘)、Floating(缩小悬浮)、Dragging(跟手)、Dismiss(收起)、Split(左右分离)。
  • 悬浮键盘
  • 左右分离键盘
  • Dock 键盘
  • 全键盘
  • 悬浮宽：约屏 1/3；键高：36–40px。
  • 圆角：10–12px；触摸：≥44pt；阴影：0 8–16px。
  • 触发：长按键盘底栏拖动/系统手势。
  • 反馈：键盘缩放+跟手悬浮；可拖到任意位置；横屏更灵活。
  • 响应式：横竖屏均可用；可贴边。
  • 系统级组件，App 用标准输入即可。
  • 输入框不被永久遮挡；对比度 AA。
16
Hover 态（悬停）
Hover (State)
/ˈhʌvər steɪt/
 当平板连接鼠标/触控板（Magic Keyboard）时，UI 必须提供 Hover 高亮反馈（光标变箭头、元素微放大/变色），弥补无触摸热区的指针定位。
  • 连接鼠标后无任何 hover 反馈（元素像“死”的）。
  • hover 与点击态混淆。
  • hover 面积过大导致误高亮。
  • 桌面级 App、带 Magic Keyboard 的 iPad。
  • 网页/文档编辑、列表浏览。
  • 核心构成：指针光标(箭头/手型/I 型)、目标高亮(底色/描边)、光标态(文本 I/可点手型)、tooltip(可选)。
间距：hover 高亮内边距 ≥目标；光标大小 16–24px。红线拆解图待补。
 Default、Hover(高亮)、Active(按下)、Focus(键盘聚焦)、Text(文本光标 I 型)。
  • 底色 hover
  • 描边 hover
  • 放大 hover
  • 手型可点
  • I 型文本
  • 过渡：~120–150ms；光标：16–24px。
  • 放大：1.02–1.05；触摸：≥44pt(兼容触屏)。
  • 触发：指针移入。
  • 反馈：元素即时高亮/微放大(~120–150ms)；光标随上下文变型；横屏多窗口各自独立。
  • 响应式：触屏设备无 hover(用按下态替代)；鼠标设备必须提供。
  • :hover 仅视觉，勿依赖其传达关键信息。
  • 聚焦态独立；对比度 AA；光标可访问。

四、 数据录入类 (Data Entry)

平板在录入上更趋近于桌面端，表单可以并排两列，而不是单列长表单。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
17
双栏表单
Two-Column Form
/ˈtuː ˈkʌləm fɔːrm/
 利用大屏，将相关输入框并排成两列（如“姓名”和“电话”一行），减少纵向滚动，录入体验趋近桌面端。
  • 不要强行两列导致标签/输入挤窄（可读差）。
  • 不相关的字段并排（应逻辑分组）。
  • 横屏两列、竖屏不回退单列（窄屏仍挤）。
  • 注册/资料编辑、订单结算、设置表单。
  • 后台录入、长表单。
  • 核心构成：表单卡片、字段组(标签+输入)、两列栅格、全宽字段(长文本/地址)、操作按钮区、校验提示。
间距：列间距 16–24px；字段高 44–48px；标签-输入间距 6–8px。红线拆解图待补。
 Default、Focus(输入高亮)、Error(红框+提示)、Disabled、Filled。
  • 两列并排
  • 三列(超宽)
  • 分组卡片
  • 全宽长文本
  • 带侧栏表单
  • 字段高：44–48px；列间距：16–24px。
  • 栅格：12 列基准；标签：13–14px；触摸：≥44pt。
  • 触发：点输入框聚焦。
  • 反馈：聚焦描边主色；错误红框+行内提示；横屏两列/竖屏单列(响应式栅格)。
  • 响应式：窄屏单列、横屏两/三列。
  • label 关联 input；错误 aria-describedby。
  • 对比度 AA；键盘 Tab 顺序合理。
18
手写输入区
Scribble / Handwriting Area
/ˈskrɪbəl/ /ˈhændraɪtɪŋ ˈeəriə/
 配手写笔，支持直接在文本框内手写并实时转换为印刷体文字（iPadOS Scribble 特性），输入与落字同区，无需切换键盘。
  • 手写区无实时识别反馈（应边写边转）。
  • 落字与笔迹重叠混乱（应字迹淡出/上移）。
  • 不支持中英文混写/标点。
  • 备注填写、搜索框手写、表单手写文字。
  • 教育类 App、手写签名。
  • 核心构成：文本框容器、手写笔迹层、实时识别文字层、光标、工具(清除/转换)、语言切换。
间距：输入区内边距 12–16px；笔迹线宽 2–3px；识别文字 15–17px。红线拆解图待补。
 Default、Writing(笔迹显示)、Recognized(转印刷体)、Empty、Error(无法识别)。
  • 行内手写
  • 整页手写
  • 签名手写
  • 中英文混写
  • 笔迹：线宽 2–3px；识别字号：15–17px。
  • 触摸：≥44pt；延迟：<50ms(实时)。
  • 触发：笔尖落入文本区即进入手写。
  • 反馈：边写边识别、笔迹渐隐转字；双指/按钮清屏；横屏更大书写区。
  • 响应式：触屏+笔支持；无笔时用键盘替代。
  • 最终输出为可访问文本(非仅图像)。
  • 提供键盘替代；对比度 AA。
19
手写笔涂鸦区
Canvas / Drawing Board
/ˈkænvəs/ /ˈdrɔːɪŋ bɔːrd/
 备忘录、批注软件中一大块纯净画布，供 Pencil 自由书写/绘画，是平板的原生创造场景，区别于“转文字”的手写输入。
  • 画布工具栏遮挡创作区（应可隐藏/吸附边）。
  • 不支持压感/倾斜角（失去笔优势）。
  • 无撤销/重做（误操作难恢复）。
  • 备忘录手绘、PDF 批注、白板、草图。
  • 核心构成：全屏画布、悬浮工具条(笔/色/橡皮/选择)、图层/页面、撤销重做、缩放平移、导出。
间距：工具栏高 44–48px；笔触 1–12px；画布留白 ≥16px。红线拆解图待补。
 Default、Drawing(落笔)、Erasing、Selected(对象选中)、Empty。
  • 无限画布
  • 分页画布
  • 批注叠加
  • 协作白板
  • 笔触：1–12px(压感)；工具栏：44–48px。
  • 触摸：≥44pt；延迟：<20ms(低延迟笔)。
  • 触发：笔尖接触画布。
  • 反馈：低延迟落笔、压感变粗；双指缩放/平移；工具栏可隐藏；横屏更大创作面。
  • 响应式：横竖屏均可；外接大屏扩展画布。
  • 导出为可访问格式(文本/PDF)；提供撤销。
  • 对比度 AA(工具栏)。
20
滚轮选择器
Picker Wheel
/ˈpɪkər wiːl/
 在 iPad 上通常以 Popover（气泡卡片）形式弹出，而不是像手机那样从底部滑出；滚轮在卡片内旋转选择（日期/时间/选项）。
  • 在平板上硬套手机底部 Action Sheet 弹滚轮（空间浪费/遮全屏）。
  • 滚轮列过多无分组。
  • 无当前项高亮带。
  • 日期/时间选择、地区/单位选择。
  • 数量调节。
  • 核心构成：Popover 卡片、滚轮(圆柱)、选项行、选中高亮带、列分隔(多列联动)、确认/取消(可选)。
间距：滚轮宽 120–160px/列；行高 36–44px；高亮带高 36–44px。红线拆解图待补。
 Default、Spinning(滚动中)、Selected(高亮带)、Open(Popover)、Dismiss。
  • 单列滚轮
  • 多列联动
  • 日期时间组合
  • 带单位滚轮
  • 行高：36–44px；列宽：120–160px。
  • 高亮带：2px 主色边；触摸：≥44pt；惯性滚动。
  • 触发：点击输入触发 Popover 内滚轮。
  • 反馈：滚轮惯性旋转+回弹；选中带高亮；横屏 Popover 不遮全屏。
  • 响应式：窄屏可退底部 sheet；横屏用 Popover(如用户所给)。
  • 滚轮用可访问 rotor/role="listbox"；键盘可达。
  • 对比度 AA；确认有按钮。

五、 反馈与浮层类 (Feedback & Overlay)

平板绝对禁止使用全屏弹窗，所有反馈都要尽可能“轻”。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
21
Popover Alert（气泡确认）
Popover Alert
/ˈpɑːpˌoʊvər əˈlɜːrt/
 删除/危险操作时，在触发对象旁弹出小气泡“确认删除？”，就地确认，而不是屏幕中央的大黑框弹窗。平板强调“轻反馈、不阻断”。
  • 用中央全屏 Alert 做简单确认（过重、打断上下文）。
  • 气泡箭头不指向源。
  • 确认/取消按钮过小误触。
  • 删除文件/邮件、移除项目。
  • 轻量二次确认。
  • 核心构成：触发源、气泡卡片(提问+确认/取消)、指向箭头、轻遮(可选)、危险色(确认键红)。
间距：气泡宽 200–260px；内边距 12–16px；箭头 8–10px；按钮高 ≥44pt。红线拆解图待补。
 Default、Open、Confirm(红)、Cancel、Dismiss。
  • 纯文本确认
  • 带图标确认
  • 双按钮
  • 危险红键
  • 气泡宽：200–260px；圆角：10–12px。
  • 箭头：8–10px；触摸：≥44pt；毛玻璃可选。
  • 触发：点击危险操作。
  • 反馈：气泡淡入+箭头锚定(~150ms)；点确认即执行；点外部/ESC 取消；横屏就近锚定。
  • 响应式：窄屏可底部小 sheet；横屏用气泡(如用户所给)。
  • 按钮 aria-expanded/haspopup；确认键 aria-label 明确。
  • ESC 关闭；对比度 AA。
22
Toast / Snackbar（轻提示）
Toast / Snackbar
/toʊst/ /ˈsnækbɑːr/
 轻量、非阻断的瞬时提示，自动消失，用于操作结果反馈（已保存/已删除/网络已连接），不打断用户当前任务。
  • 把需要用户决策的信息做成 Toast（应改用弹窗/气泡）。
  • 停留过久或闪烁频繁。
  • 位置遮挡关键操作（如悬浮按钮）。
  • 保存成功、删除完成、撤销提示。
  • 网络状态变化。
  • 核心构成：提示条(深色/浅色)、图标(成功/信息)、文字、可选操作(撤销)、出现位(底部/顶部)。
间距：高 44–56px；内边距 12–16px；圆角 8–12px；屏边距 16–24px。红线拆解图待补。
 Default、Shown(淡入)、AutoDismiss(定时消)、WithAction(撤销)、Stacked(多条叠加)。
  • 纯文字
  • 带图标
  • 带撤销操作
  • 顶部条
  • 底部 Snackbar
  • 高：44–56px；停留：2–4s(可撤销延长)。
  • 圆角：8–12px；触摸(撤销)：≥44pt。
  • 触发：操作完成。
  • 反馈：从底部/顶部滑入+淡入(~200ms)；定时自动消失；撤销可点；横屏同样底部。
  • 响应式：窄屏全宽贴底；横屏可居中卡片式。
  • aria-live="polite" 通知；撤销可聚焦。
  • 对比度 AA；不依赖颜色单独传意。
23
轻量级模态
Modal Sheet (Form Sheet)
/ˈmoʊdəl ʃiːt/
 若必须用弹窗，通常从屏幕中央弹出半卡片（Form Sheet），不铺满全屏，用户可点击背景空白处直接关闭。比全屏 Alert 轻。
  • 用全屏 Alert 占满（平板应避免）。
  • 背景点击不关闭（应可点空白关闭）。
  • 卡片过大失去“轻”的语义。
  • 设置项编辑、轻量表单、详情/筛选、登录。
  • 核心构成：半透明遮罩、居中半卡片(标题/内容/操作)、关闭区(点空白)、圆角、阴影、可选顶部把手。
间距：卡片宽 40–60% 屏(或 420–520px)；圆角 12–16px；内边距 20–24px；遮罩 0.3–0.5 黑。红线拆解图待补。
 Default、Open(淡入缩放)、Dismiss(点空白/ESC/取消)、Submitted。
  • Form Sheet
  • Alert Sheet(带按钮)
  • 居中卡片
  • 可吸附底部
  • 卡片宽：420–520px(或 40–60% 屏)。
  • 圆角：12–16px；遮罩：0.3–0.5；动画：~200ms；触摸：≥44pt。
  • 触发：点击打开。
  • 反馈：卡片淡入+轻微缩放(~200ms)；点空白/ESC/取消关闭；横屏居中半卡不遮全屏。
  • 响应式：窄屏可转底部 sheet 或近全屏；横屏用居中 Form Sheet(如用户所给)。
  • 焦点陷阱+恢复；aria-modal；ESC 关闭。
  • 对比度 AA；背景不可操作需标注。

平板端设计的 3 个核心思维（避坑指南）

平板不是“大一号的手机”。以下三条是从手机思维切换到平板（尤其 iPad / Android 平板）时必须建立的设计心智。

1拒绝“拉长手机”

如果直接把手机 UI 等比放大，平板上会出现极其空旷的空白区，以及细小的按钮。必须重新利用空间：把纵向列表改成横向网格，把底部 Tab 改成侧边栏。

自检：放大后是否出现大块留白 / 点不动的小控件？是 → 重排而非缩放。

2拥抱“多任务并行”

平板的杀手锏是 Split View（左右分屏）。设计师要考虑到当 App 宽度被压缩一半时，侧边栏应如何自动折叠，内容如何自适应重排。

自检：宽度砍半时布局是否崩溃？侧边栏要能自动收起、内容要能重排。

3兼顾横竖屏

手机大多锁死竖屏，但平板被强烈建议同时支持横屏和竖屏。你需要设计组件在不同方向下的自适应折叠规则（如横屏有侧边栏，竖屏可能收起为汉堡菜单）。

自检：旋转设备后布局是否仍可用？横屏侧栏 / 竖屏汉堡要有明确切换规则。