← 返回多端学习对照表

iOS HIG

iOS HIG 组件库，按分类组织，共 0 个组件档案。

一、 栏与导航（Bars & Navigation）

作为界面的结构骨架，帮助用户定位与切换。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
状态栏
Status Bar
/ˈsteɪtəs bɑːr/
 屏幕顶部常驻条，显示时间、电量、信号等设备状态。
  • 不要在状态栏区域叠加自定义内容遮挡系统信息。
  • 不要自定义颜色导致系统图标对比度不足。
  • 不要在状态栏放可点击元素（系统占用区）。
  • 每个 App 首屏都必须显示。
  • 全屏视频 / 游戏可临时隐藏。
  • 核心构成：时间文本(左)、系统图标群(右：信号/运营商/Wi-Fi/蓝牙/电池)、刘海或灵动岛区(中)。
间距：iOS 左右安全边距各 16px；状态栏高度 20px(普通)/44px(含灵动岛区域)。红线拆解图待补。
 Default、Hidden(全屏时)、Light/Dark(随背景深浅适配)。
  • 默认(深/浅色)
  • 隐藏式
  • 沉浸透明式(视频/地图)
  • 高度：iOS 20px(普通)/44px(含灵动岛)。
  • 字号：时间 15–17px。
  • 颜色：随背景深浅自动切换。
  • 触发：系统级，无用户触发。
  • 反馈：来电/录音/导航时背景变红/蓝并带动画。
  • 响应式：横屏时部分图标隐藏。
  • 热区：N/A(系统占用)。
  • 对比度：满足 WCAG 2.1 AA。
  • 开发：系统层(非 DOM)，不可自定义操作。
2
导航栏
Navigation Bar
/ˌnævɪˈɡeɪʃən bɑːr/
 位于状态栏下方，通常包含标题、返回按钮的顶部导航区域。
  • 不要放超过 2 个右侧操作图标(拥挤)。
  • 不要用它做全局 Tab 切换(那是 Tab Bar 职责)。
  • 标题过长时不省略会造成截断尴尬。
  • 几乎所有二级页顶部。
  • 需返回、需标题、需右上角操作的页面。
  • 核心构成：左侧返回键(←)、居中或左对齐标题、右侧操作区(图标/文字按钮)、底部分隔线。
间距：左右安全边距 16px；标题与按钮间距 ≥8px；高度 iOS 44px。红线拆解图待补。
 Default、Pressed(返回键)、Disabled(不可返回时隐藏)、Large Title(大标题)、Transparent(沉浸式)。
  • 标准栏
  • 大标题栏(Large Title)
  • 透明/沉浸式
  • 搜索内嵌式
  • 高度：iOS 44px(内容区)。
  • 字号：标题 17px/Bold。
  • 操作图标：24px。
  • 触发：点击返回(←)或操作图标；屏幕边缘右滑返回手势。
  • 反馈：Android 涟漪；滚动时大标题收缩为小标题。
  • 响应式：折叠屏展开时两侧留白增加。
  • 热区 ≥44×44pt。
  • 对比度：AA。
  • 开发：语义 <header>+系统返回；iOS UINavigationBar。
3
标签栏
Tab Bar
/tæb bɑːr/
 固定于屏幕底部，用于在 App 顶级页面间切换的导航控件，通常 2–5 个标签。
  • 不要放非导航功能(如"发布"应做成悬浮按钮)。
  • 标签数不要超过 5 个。
  • 进入子页面不要隐藏它(应全局可达)。
 3–5 个平级一级页面的 App(首页/发现/消息/我的)。
  • 核心构成：图标(上)+文字标签(下)的等分项、未选/选中态、顶部分隔线/阴影、底部安全区留白。
间距：图标 24–28px、文字 10–11px；高度 iOS 49px(+安全区)。红线拆解图待补。
 Default、Selected(选中,主色)、Pressed、Badge(带未读数)。
  • 图标+文字(标准)
  • 纯图标(无文字)
  • 带中间凸起按钮
  • Material 底部导航
  • 高度：iOS 49px(内容)/含安全区更高。
  • 图标：25px；字号：10–11px。
  • 选中色：品牌主色。
  • 触发：点击切换。
  • 反馈：切换页面+图标变色/微缩放。
  • 响应式：横屏/iPad 可隐藏或转为侧边栏。
  • 热区 ≥48×48(整项可点)。
  • 对比度：AA。
  • 开发：<nav>+<a>，当前项 aria-current。
4
工具栏
Toolbar
/ˈtuːlbɑːr/
 顶部或底部水平排列的控件组，放置当前页面的操作按钮。
  • 不要与 Tab Bar 同置底部(层级混乱)。
  • 不要放导航性按钮(应进导航栏)。
  • 操作按钮不要超过 5 个(拥挤)。
  • 内容页底部操作(分享/删除/编辑)。
  • 顶部上下文工具(如选择后出现的操作)。
  • 核心构成：等分的操作按钮(图标±文字)、可选分隔段、底部确认/取消(编辑态)，顶/底部分隔线。
间距：底部工具栏高 44px、iPad 顶部 56px；图标 24–28px；操作间距 ≥8px。红线拆解图待补。
 Default、Pressed、Disabled(变灰)、Active(选中态)。
  • 底部工具栏
  • 顶部工具栏
  • 带文字按钮
  • 带分隔段
  • 高度：44px(底部)/56px(顶部 iPad)。
  • 图标：24–28px；文字：11–15px。
  • 触发：点击操作按钮。
  • 反馈：iPad 顶栏常与导航栏合并；编辑态出现"完成"按钮。
  • 热区 ≥44×44pt。
  • 对比度：AA。
  • 开发：<div role="toolbar"> 或 iOS UIToolbar；按钮带 aria-label。
5
搜索栏/搜索域
Search Field
/sɜːrtʃ fiːld/
 带有搜索图标与占位符的文本域，用于快速查找内容。
  • 不要放过长占位提示挤占空间。
  • 不要默认展开全屏搜索遮挡列表(除非主动触发)。
  • 空结果不要只显示"无"。
  • 内容量大的列表页(商品/通讯录/文章)顶部。
  • 全局搜索入口。
  • 核心构成：搜索图标、输入框(占位文本)、清除按钮(×)、取消/搜索按钮(右)、圆角容器。
间距：高度 36–44px；圆角 8–10px；左右内边距 12px；图标 20px。红线拆解图待补。
 Default、Focused(出取消键)、With-Value(显清除×)、Disabled。
  • 常驻嵌入式
  • 点击展开式
  • 带筛选按钮
  • 语音搜索式
  • 高度：36–44px。
  • 字号：14–16px；圆角：8–10px。
  • 图标：20px；占位色 #9aa1ab。
  • 触发：点击聚焦/回车搜索。
  • 反馈：聚焦高亮+右侧出取消键；实时联想下拉；清除×一键清空。
  • 热区 ≥44pt。
  • <input type="search">+aria-label。
  • 对比度：AA。
6
侧边栏
Sidebar
/ˈsaɪdbɑːr/
 通常用于 iPadOS、在手机端较少见的侧边导航区域。
  • 不要手机端强行常驻挤占内容。
  • 不要与 Tab Bar 同时常驻造成重复导航。
  • 层级不要过深(>3 级)。
  • iPad 多栏布局(邮件/备忘录/设置)。
  • Mac Catalyst 与分栏视图。
  • 核心构成：侧栏容器、头部(标题/头像)、导航项列表、选中指示、右分隔线；右侧主内容区。
间距：宽度 iPad 240–320px；列表项高 44–48px；分隔线 1px。红线拆解图待补。
 Default、Selected(主色/高亮)、Collapsed(手机临时抽屉)。
  • 常驻侧边栏(iPad)
  • 可折叠
  • 双列(主-从)
  • 临时抽屉(手机)
  • 宽度：iPad 240–320px。
  • 列表项高：44–48px。
  • 分隔线：1px。
  • 触发：iPad 常驻；手机转临时抽屉(滑出)。
  • 反馈：选择项主区内容更新；抽屉随手指跟手。
  • 热区 ≥44pt。
  • <aside>+<nav>，当前项 aria-current；iOS UISplitViewController。
  • 对比度：AA。
7
页面控件
Page Controls
/peɪdʒ kənˈtroʊlz/
 即分页点（···），显示轮播图或分页视图的当前位置。
  • 不要超过 5–7 个点(过多用数字/进度条)。
  • 不要放在会被内容遮挡的底部(如 Tab Bar 上)。
  • 不要在无滑动场景使用。
  • 引导页(首次启动)。
  • Banner 轮播、图片画廊分页。
  • 核心构成：圆点(未选小/选中大)、间距、容器。
间距：点径 6–8px、选中 8–10px(胶囊)、点间距 8px；常距底部 16–24px。红线拆解图待补。
 Default(未选)、Current(选中放大/变色)、Compressed(首尾收缩胶囊)。
  • 小圆点
  • 拉长胶囊(选中横条)
  • 数字(3/8)
  • 进度条式
  • 可点击跳转
  • 点径：6–8px；选中 8×16px 胶囊。
  • 间距：8px。
  • 颜色：未选 30% 黑/白，选中主色。
  • 触发：滑动内容自动同步。
  • 反馈：点随页码位移动画(弹性)；点击(若可点)跳转。
  • 热区 ≥44pt(整组可点若可跳转)。
  • 可点跳转时 role="tablist"；纯装饰用 aria-hidden。
  • 对比度：AA。

二、 控件与输入（Controls & Input）

处理用户输入、选择与状态调节。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
8
按钮
Buttons
/ˈbʌtənz/
 触发即时动作的核心组件，可承载文字或图标。
  • 不要滥用实心主按钮(一屏最多 1 个主操作)。
  • 不要在无后果操作上用红色危险按钮。
  • 不要使标签含糊(如"提交"而非"确定")。
  • 所有需要用户确认/执行的动作。
  • 表单提交、页面主要操作。
  • 核心构成：容器(圆角矩形/胶囊)、标签或图标、内边距、品牌色填充或描边。
间距：最小内边距 16×8px(竖×横)；高 44pt；字号 17px。红线拆解图待补。
 Default、Pressed(变深/缩放回弹)、Disabled(变灰 40%)、Loading(转圈)。
  • 主按钮(实心)
  • 次按钮(描边)
  • 文本按钮
  • 图标按钮
  • 高度：44pt(最小热区)。
  • 字号：17px。
  • 圆角：10pt(或胶囊 22pt)。
  • 主色：品牌色。
  • 触发：轻点。
  • 反馈：按下变深+微缩(scale .96)；加载态禁用并显示 spinner。
  • 热区 ≥44×44pt。
  • <button> 带 aria-label；对比度 AA。
  • iOS UIButton。
9
切换开关
Toggles / Switches
/ˈtɒɡlz/ /swɪtʃɪz/
 用于开启/关闭某个设置的二元状态控件。
  • 不要把它当"提交"用(它是即时生效开关)。
  • 不要在列表里与"选择"混用造成歧义。
  • 不要缺失 On/Off 的视觉对比。
  • 设置页(通知/隐私/深色模式)。
  • 即时生效的二元偏好。
  • 核心构成：轨道(开=绿/关=灰)、滑块圆钮、左右状态。
间距：宽 51pt×高 31pt；圆钮直径 28pt；轨道内边距 1.5pt。红线拆解图待补。
 Off(灰)、On(绿/主色)、Disabled。
  • 标准 iOS 开关
  • 文字标签开关(Android)
  • 图标化开关
  • 尺寸：51×31pt。
  • 圆钮：28pt。
  • 开色：#34c759。
  • 触发：轻点整轨或圆钮。
  • 反馈：圆钮滑动+变色(弹性 0.2s)；即时生效无需确认。
  • 热区 ≥44pt(整行可点)。
  • role="switch" + aria-checked。
  • iOS UISwitch。
10
滑块
Sliders
/ˈslaɪdərz/
 通过拖动来调节数值（如音量、亮度）的连续控件。
  • 不要用于离散少选项(用分段控件)。
  • 不要隐藏进度数值导致无反馈。
  • 跨大范围不要无刻度标记。
  • 音量/亮度/进度调节。
  • 价格区间、评分等多值连续调节。
  • 核心构成：轨道(已选/未选段)、滑块拇指、可选刻度、可选数值气泡。
间距：轨道高 2–4pt、拇指 28–34pt；内边距 16pt；横向布局。红线拆解图待补。
 Default、Dragging(拇指放大/高亮)、Disabled、Focused。
  • 单滑块
  • 双滑块(区间)
  • 带刻度
  • 带图标端点
  • 轨道：全长自适应；拇指：28–34pt。
  • 高度：≥44pt 触控区。
  • 步长：可配。
  • 触发：拖动拇指/点击轨道跳转。
  • 反馈：跟手移动+数值气泡；松手确认；Live Region 播报。
  • 热区 ≥44pt。
  • role="slider" + aria-valuenow/min/max。
  • iOS UISlider。
11
分段控件
Segmented Controls
/ˈseɡmentɪd kənˈtroʊlz/
 一组并列的选项卡，用于在少量互斥的选项间切换。
  • 不要超过 5 段(过长用下拉/列表)。
  • 不要放图标+长文字挤在一起。
  • 不要用于导航(那是 Tab Bar 职责)。
  • 视图过滤(日/周/月)。
  • 内容形态切换(列表/网格)。
  • 核心构成：等分管容器、选中块(主色高亮)、分隔、文案(或图标)。
间距：单段高 32pt、内边距 8×12pt；≤5 段；字号 13–15px。红线拆解图待补。
 Default、Selected(滑块填充主色/反白)、Pressed。
  • 纯文字
  • 纯图标
  • 图文混排
  • 带计数徽标
  • 高度：32pt。
  • 段数：≤5。
  • 字号：13–15px。
  • 选中：主色反白。
  • 触发：点击切换段。
  • 反馈：选中块滑动(0.2s 缓动)；内容即时更换。
  • 热区 ≥44pt。
  • role="tablist" + 段 role="tab"，当前 aria-selected。
  • iOS UISegmentedControl。
12
选择器
Pickers
/ˈpɪkərz/
 滚动轮盘式控件，用于从一组值中选择特定项（如日期、时间）。
  • 不要在无确定按钮时直接关闭(易误选)。
  • 不要选项过长导致滚动疲劳(>20 项考虑列表)。
  • 不要与键盘同时弹占满屏。
  • 日期/时间选择。
  • 地区/分类等层级枚举选择。
  • 核心构成：选中高亮带(上下两条线夹)、可滚动的轮列、每项居中对齐、惯性滚动。
间距：单轮宽自适应、项高 30–44pt；高亮带高约 40pt；字号 17–23px。红线拆解图待补。
 Default、Scrolling(惯性)、Selected(停在高亮带)、Disabled。
  • 单列
  • 多列联动(省市区)
  • 日期/时间专用
  • 内联(嵌入表单)
  • 项高：30–44pt。
  • 字号：17–23px。
  • 惯性：松手减速吸附。
  • 触发：上下拖动轮列。
  • 反馈：惯性滚动+吸附到高亮带；联动列即时更新。
  • 热区 ≥44pt。
  • role="listbox" + 项 option；实时播报当前值。
  • iOS UIPickerView。
13
计数器
Steppers
/ˈstɛpərz/
 带有"+"和"-"按钮的控件，用于精确增减数值。
  • 不要用于大范围数值(用滑块/输入+键盘)。
  • 不要让数值超出上下限还持续可点。
  • 不要缺单位说明造成歧义。
  • 购物车数量、人数、时长等小步长增减。
  • 需要精确整数输入的场景。
  • 核心构成：减号按钮、数值显示、加号按钮、分隔线、可选外框。
间距：单按钮 28×28pt、数值区 ≥40pt；整体高 30–40pt；字号 17px。红线拆解图待补。
 Default、Pressed(按钮)、Disabled-(达下限)/Disabled+(达上限)、Focused。
  • 标准(减 数 +)
  • 带数值框
  • 无外框(嵌入行)
  • 按钮：28×28pt。
  • 步长：可配(默认 1)。
  • 字号：17px。
  • 触发：点击 +/−。
  • 反馈：数值即时增减+按钮 micro-animation；长按可连发(可选)。
  • 热区 ≥44pt(整按钮)。
  • 按钮 aria-label"增加/减少"+数值 aria-live。
  • iOS UIStepper。
14
文本字段
Text Fields
/tɛkst fiːldz/
 单行文本输入框，用于接收用户文本输入。
  • 不要无标签/占位符代替标签(失焦即丢失上下文)。
  • 不要隐藏错误直到提交后才提示。
  • 不要无清除按钮造成删改繁琐。
  • 登录/注册/搜索/评论等单行信息录入。
  • 表单中的文本项。
  • 核心构成：容器(圆角/边框)、标签、占位符、输入文本、清除(×)、错误提示、可选左图标。
间距：高 44pt、内边距 12×16pt、圆角 10pt；字号 17px；间距标签与框 8pt。红线拆解图待补。
 Default、Focused(边框高亮主色)、Filled、Error(红框/提示)、Disabled。
  • 带标签
  • 带左图标
  • 带清除/密显
  • 下划线式
  • 高度：44pt。
  • 字号：17px。
  • 圆角：10pt。
  • 聚焦色：主色。
  • 触发：点击聚焦唤键盘。
  • 反馈：聚焦边框高亮+标签上移；实时校验；清除×。
  • 热区 ≥44pt。
  • <input>+<label> 关联；错误用 aria-describedby。
  • iOS UITextField。
15
颜色井与颜色选择器
Color Wells & Pickers
/ˈkʌlər wɛlz/ /ˈpɪkərz/
 用于选择或调整颜色的控件（颜色井=当前色块入口）。
  • 不要无预览就直接应用(易误改)。
  • 不要缺无障碍色名/对比度提示。
  • 不要遮挡画布(用弹层/侧栏)。
  • 绘图/笔记/主题个性化。
  • 标记/高亮颜色选择。
  • 核心构成：颜色井(圆角色块)、弹出面板(色相条/饱和度网格/HEX、吸管)。
间距：色井 24–32pt；面板网格 200×200+色相条；圆角 8pt。红线拆解图待补。
 Default、Open(面板展开)、Selected(当前色环)、Disabled。
  • 颜色井(单块)
  • 弹层网格
  • 取色器(吸管)
  • 滑块式 RGB
  • 色井：24–32pt。
  • 面板：≥240pt 宽。
  • 格式：HEX/RGB/HSB。
  • 触发：点击色井开面板/拖动取色。
  • 反馈：实时预览+吸管跟随；确认后应用。
  • 热区 ≥44pt。
  • role="button" + 色名 aria-label；提供对比度提示。
  • iOS UIColorWell。
16
键盘
Keyboards
/ˈkiːbɔːrdz/
 系统虚拟键盘，支持文本、数字、表情等输入。
  • 不要自定义键盘遮挡输入框(应自动上移)。
  • 不要在密码场景用明文预览。
  • 敏感输入不要记录到系统词库。
  • 任何需要文本录入的输入框聚焦时。
  • 数字/安全/搜索等特定输入场景。
  • 核心构成：字符区、功能键(退格/回车/Shift)、候选条、Emoji/数字切换、安全键盘(无自动填充)。
间距：键高约 44pt；数字键≥48pt；面板高约 216–280pt。红线拆解图待补。
 Default、Shift(大写锁定)、Emoji、Secure(掩码)、Predictive(候选)。
  • 默认(QWERTY)
  • 数字/符号
  • Emoji
  • 安全键盘
  • 键高：≈44pt。
  • 类型：按 inputmode 切换。
  • 面板高：216–280pt。
  • 触发：输入框聚焦自动弹出。
  • 反馈：按键高亮+点击音；自动纠错/候选条；完成收起。
  • 热区 ≥44pt。
  • 通过 inputmode/type 唤起对应键盘；安全字段关自动填充。
  • iOS 系统键盘。

三、 视图与内容展示（Views & Content）

呈现信息、数据与媒体内容。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
17
列表和表格
Lists & Tables
/lɪsts/ /ˈteɪbəlz/
 iOS 中最基础的信息展示形式，支持分组、行内操作等。
  • 移动端不要用表格展示本该用列表的层级信息(多列难读)。
  • 不要行内塞过多操作(>3 个)造成拥挤。
  • 不要缺失分隔线与点击反馈。
  • 通讯录/设置/消息等结构化列表。
  • 数据对比(表格)用在有列对齐需求的场景。
  • 核心构成：行(图标+标题+副标题+右箭头/值)、分组(Grouped 卡片)、分隔线、右侧操作(删除/更多)、字母索引条。
间距：行高 iOS ≥44pt(标准)、分组间距 12pt；标题 17px/副标题 15px；分隔线 1px。红线拆解图待补。
 Default、Selected(高亮)、Swipe(左滑出操作)、Editing(编辑态复选)。
  • 纯文本行
  • 带图标/带副标题
  • Grouped 分组
  • Inset 分组
  • 字母索引列表
  • 行高：≥44pt(标准 44pt)。
  • 分组间距：12pt。
  • 字号：标题 17px / 副标题 15px。
  • 分隔线：1px。
  • 触发：点击行进入详情；左滑出删除/置顶；编辑态多选。
  • 反馈：行按下高亮；右箭头暗示可进。
  • 热区 ≥44pt。
  • 列表 <ul role="list">；iOS UITableView。
  • 行可聚焦；分组用 section；对比度 AA。
18
集合视图
Collection Views
/kəˈlɛkʃən vjuːz/
 以网格或自定义布局展示多项内容的视图（如图库）。
  • 不要网格间距过小导致点错(热区不足)。
  • 不要在无大量同构内容时用集合视图(列表更清晰)。
  • 不要缺失滚动性能优化(大量图片卡顿)。
  • 相册/图库/商品网格。
  • 需要瀑布流或自定义布局的多项内容。
  • 核心构成：单元格(cell)、布局(网格/横向/瀑布)、间距、可选页眉页脚、滚动容器。
间距：单元格间距 ≥8pt；最小热区 44pt；图片占位 1px 灰；字号 12–17px。红线拆解图待补。
 Default、Selected(勾选角标)、Highlighted(按下)、Placeholder(加载占位)。
  • 网格(等高/不等高)
  • 横向滚动
  • 横向分页
  • 瀑布流
  • 列表式(自定义布局)
  • 单元格间距：≥8pt。
  • 最小热区：44pt。
  • 占位色：#f0f1f3。
  • 字号：12–17px。
  • 触发：点击进入详情；长按(可选)进入选择。
  • 反馈：按下高亮；多选勾选角标。
  • 热区 ≥44pt。
  • role="list"/grid；iOS UICollectionView。
  • 虚拟化复用 cell；对比度 AA。
19
图像视图
Image Views
/ˈɪmɪdʒ vjuːz/
 用于展示单张图片的视图。
  • 不要无占位/无比例导致加载跳动(CLS)。
  • 不要用低清拉伸填满(模糊)。
  • 不要遮挡重要内容(全屏图无退出)。
  • 头像/封面/插画/内容图。
  • 需要展示视觉内容的场景。
  • 核心构成：图片容器(固定比例)、内容模式(填充/适配/居中)、占位(灰块)、可选角标/徽标。
间距：内容模式 aspect fit/fill/center；圆角 8–12pt；占位色 #f0f1f3；若可点最小 44pt。红线拆解图待补。
 Loading(占位)、Loaded、Error(破损图)、Placeholder(无图)。
  • 1:1 方形
  • 圆形(头像)
  • 宽幅封面
  • 自适应高度
  • 带圆角
  • 内容模式：aspect fit / fill / center。
  • 圆角：8–12pt。
  • 占位色：#f0f1f3。
  • 最小热区：44pt(若可点)。
  • 触发：点击放大(若可点)。
  • 反馈：加载占位→图片淡入；错误显破损图标。
  • 热区 ≥44pt(若可点)。
  • <img> alt 必填；iOS UIImageView。
  • 固定比例防 CLS；对比度 AA。
20
图表
Charts
/tʃɑːrts/
 用于数据可视化的图表组件（如柱状图、折线图）。
  • 不要无坐标轴/图例导致读不懂。
  • 不要在一个图堆过多系列(>5)造成混乱。
  • 不要缺无障碍文本(屏幕阅读器读不到)。
  • 健康/财务/统计等数据展示。
  • 趋势对比(折线)、占比(饼)、分布(柱)。
  • 核心构成：坐标轴(X/Y)、网格线、数据系列(柱/线/点)、图例、数值标签、标题。
间距：轴标签字号 11–13px；系列色板对比 ≥4.5:1；最小触控 44pt(若可交互)。红线拆解图待补。
 Loading(骨架)、Empty(无数据)、With-Data、Error(拉取失败)。
  • 柱状图
  • 折线图
  • 饼/环形
  • 散点
  • 面积图
  • 雷达图
  • 轴标签：11–13px。
  • 系列色：对比度 ≥4.5:1(AA)。
  • 最小触控：44pt(若交互)。
  • 触发：点击数据点/悬停(PC)显示 tooltip。
  • 反馈：tooltip 浮层；点击下钻(可选)。
  • 热区 ≥44pt(若交互)。
  • 提供 SVG/aria 摘要；iOS 用图表库或 Swift Charts。
  • 对比度 AA。
21
空白状态屏幕
Empty State Screens
/ˈɛmpti steɪt skriːnz/
 无内容时显示的占位页面，通常包含图标与引导文案。
  • 不要只显示"暂无数据"无引导(用户不知所措)。
  • 不要空白页无插图显得像出错。
  • 不要缺主操作按钮(无法继续)。
  • 首次进入无收藏/无消息。
  • 搜索无结果/列表清空。
  • 核心构成：居中插图(或图标)、标题、说明文案、主操作按钮(如"去添加")、充足留白。
间距：居中布局；插图 64–120pt；标题 17–22px；按钮 44pt；四周充足留白。红线拆解图待补。
 Default(空)、Loading、Error(加载失败带重试)。
  • 首次引导
  • 无结果
  • 无网络
  • 已清空
  • 权限未开
  • 布局：居中。
  • 插图：64–120pt。
  • 标题：17–22px。
  • 按钮高：44pt。
  • 触发：点击主按钮进入对应操作。
  • 反馈：按钮按下态；有时带轻量插画动效。
  • 热区 ≥44pt。
  • 插图有 alt/aria-label；主按钮语义化；iOS 自绘或第三方库。
  • 对比度 AA。

四、 浮层与反馈（Overlays & Feedback）

临时出现的提示、菜单或模态界面。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
22
警告框
Alerts
/əˈlɜːrts/
 强制用户注意的模态弹窗，用于重要信息确认或错误提示。
  • 不要用于非阻断通知(该用 Toast/Banner)。
  • 不要堆两级 Alert(嵌套弹窗)。
  • 不要按钮文案含糊("是/否"应改"删除/取消")。
  • 危险操作二次确认(删除/退出登录)。
  • 重要错误提示、系统权限请求。
  • 核心构成：遮罩、居中卡片(标题/正文/按钮区)、可选输入框、按钮分隔线、危险操作红色文字。
间距：卡片宽 270pt(标准)、圆角 14pt、内边距 20pt；按钮高 44pt。红线拆解图待补。
 Default、With-Input(带输入框)、Destructive(危险色)、Presented(弹出中)。
  • 双按钮(取消/确定)
  • 单按钮(好)
  • 带输入框
  • 带图标
  • 三按钮竖排
  • 卡片宽：270pt。
  • 圆角：14pt。
  • 标题：17px Semibold；正文 13px。
  • 按钮高：44pt；分隔线 0.5px。
  • 触发：由危险操作/关键事件触发。
  • 反馈：背景模糊+卡片弹出(scale 1.05→1，0.25s)；点遮罩不可关闭，需明确选择。
  • 热区 ≥44pt。
  • role="alertdialog" + aria-modal；焦点陷阱。
  • iOS UIAlertController；Esc 可取消(桌面)。
23
动作表
Action Sheets
/ˈækʃən ʃiːts/
 从底部滑出的操作选项列表，常用于确认危险操作。
  • 不要缺取消按钮(用户无法退出)。
  • 不要选项超过 6 个(应改列表/表单)。
  • 不要与 Alert 混用语义(需明确阻断程度)。
  • 危险操作确认(删除/举报/退出)。
  • 多选一操作(拍照/从相册选/取消)。
  • 核心构成：遮罩、底部卡片、标题(可选)、操作项(等分)、危险项红字、独立取消按钮。
间距：项高 44–57pt、顶部圆角 14pt、内边距 20pt；项分隔线 0.5px。红线拆解图待补。
 Default、Destructive(红字)、Disabled、Dismissing(下滑关闭)。
  • 纯操作项
  • 带标题说明
  • 带图标
  • iPad 弹窗式(Popover)
  • 项高：57pt(标准)/44pt。
  • 圆角：顶部 14pt。
  • 字号：20px / 17px。
  • 危险色：#ff3b30。
  • 触发：点击"更多"或危险操作入口。
  • 反馈：底部滑入(0.3s)；点遮罩/取消关闭；危险项可二次确认。
  • 热区 ≥44pt(整行可点)。
  • role="dialog" + aria-modal。
  • iPad 转 popover；iOS UIAlertController(.actionSheet)。
24
活动视图
Activity Views
/ækˈtɪvəti vjuːz/
 即系统分享面板，用于分享内容到其他 App 或执行系统操作。
  • 不要自绘分享面板(应调系统 Share Sheet 保持一致)。
  • 不要隐藏 AirDrop/拷贝等系统项(能力缺失)。
  • 不要分享前不做内容预览确认。
  • 分享文章/图片/链接到社交/邮件。
  • 保存到文件/拷贝/打印等系统操作。
  • 核心构成：头部内容预览(缩略图+标题)、App 图标行(横向可滑)、系统操作行(拷贝/收藏/打印)、底部取消。
间距：图标 40pt(热区 60pt)、行间距 16pt；卡片圆角 14pt。红线拆解图待补。
 Default、Scrolling(横滑)、Loading(准备分享内容)、Error(分享失败)。
  • 系统标准
  • 自定义扩展 Action
  • iPad 弹窗式
  • 仅操作项无 App 行
  • 图标：40pt(热区 60pt)。
  • 行间距：16pt。
  • 圆角：14pt。
  • 标签字号：11px。
  • 触发：点击"分享"图标。
  • 反馈：底部滑入；选目标后即时分享并发反馈；取消收起。
  • 热区 ≥44pt。
  • 调系统 API(iOS UIActivityViewController / Web navigator.share)。
  • 图标带无障碍标签。
25
菜单
Menus
/ˈmɛnjuːz/
 通过点击或长按触发的命令列表，如上下文菜单、下拉菜单。
  • 不要层级过深(>2 级，移动端难操作)。
  • 不要项过多不分组(>8 项应加分组标题)。
  • 不要放最高频主操作(应外露为按钮)。
  • 长按列表项的操作菜单(置顶/删除)。
  • 导航栏"更多"下拉菜单。
  • 核心构成：触发点、锚定菜单卡片、菜单项(图标+文字)、分隔线、危险项、选中项勾选。
间距：项高 44pt、卡片圆角 8–14pt、内边距 8pt；最小宽 200pt。红线拆解图待补。
 Default、Pressed(高亮)、Selected(带勾)、Disabled、Open/Closed。
  • 下拉(锚定上/下)
  • 上下文菜单(长按+模糊背景)
  • 带子菜单
  • 分段带标题
  • 项高：44pt。
  • 圆角：8–14pt。
  • 字号：17px。
  • 最小宽：200pt；危险色红。
  • 触发：点击 / 长按(400–500ms)。
  • 反馈：锚定弹出(spring 缩放)；选中即关闭；长按带轻震动。
  • 热区 ≥44pt。
  • role="menu" / menuitem；键盘可导航；Esc 关闭。
  • iOS UIContextMenu / UIMenu。
26
弹出窗口
Popovers
/ˈpɒpəʊvərz/
 在 iPad 上常见的气泡式浮层，手机端也可用于特定场景。
  • 手机端不要滥用(小屏遮挡内容，应改 Sheet)。
  • 不要无指向箭头(用户不知来源)。
  • 不要内容过多需滚动(应改全屏/Sheet)。
  • iPad 工具面板/选择器/设置浮层。
  • 手机端新手引导气泡说明(特定场景)。
  • 核心构成：指向箭头(锚定触发点)、浮层卡片、内容区、可选标题/关闭、投影。
间距：卡片宽 320pt(iPad)、圆角 14pt、内边距 16pt；箭头 12pt。红线拆解图待补。
 Default、Open、Dismissing、Anchored(随锚点移动)。
  • 带箭头 / 无箭头
  • 可调整大小
  • 带导航层级
  • 半透明背景
  • 宽：320pt(iPad)。
  • 圆角：14pt；内边距 16pt。
  • 箭头：12pt。
  • 投影：0 8px 24px rgba(0,0,0,.15)。
  • 触发：点击锚定按钮。
  • 反馈：从锚点缩放弹出；点外部关闭；设备旋转时重新定位。
  • 热区 ≥44pt。
  • role="dialog"(非模态可用 group)；焦点管理。
  • iOS UIPopoverPresentationController。
27
表单
Sheets
/ʃiːts/
 从底部滑出的半屏或全屏模态视图，用于次级任务。
  • 不要用于主流程页面(应整页导航)。
  • 不要无抓手条/关闭按钮(用户不知可关)。
  • 不要多层 Sheet 叠加。
  • 新建/编辑表单(新建日程/发帖)。
  • 筛选器、设置、详情查看等次级任务。
  • 核心构成：抓手条(grabber)、标题、内容区、可选底部按钮、关闭(×/取消)。
间距：半屏约 50%、大表单 75%+；顶部圆角 14pt；内边距 20pt。红线拆解图待补。
 Default(半屏)、Expanded(全屏)、Detents(多档高度)、Dismissing。
  • 半屏(medium)
  • 大屏(large)
  • 多档 detents
  • 全屏覆盖
  • 可滚动内容
  • 圆角：顶部 14pt。
  • 抓手条：36×5pt。
  • 档位：50% / 75% / 100%。
  • 内边距：20pt。
  • 触发：点击入口滑出。
  • 反馈：底部滑入、可下滑关闭、拖到档位吸附；背景变暗。
  • 热区 ≥44pt。
  • role="dialog" + aria-modal；焦点陷阱。
  • iOS UISheetPresentationController(detents)。
28
进度指示器
Progress Indicators
/ˈprəʊɡrɛs ˈɪndɪkeɪtərz/
 展示任务加载或进行中的状态（如旋转菊花、进度条）。
  • 不要超过 10s 无进度反馈(用户以为卡死)。
  • 不要用不确定进度条冒充确定进度。
  • 不要遮挡关键操作区(应可取消)。
  • 网络请求/上传下载/初始化加载。
  • 长任务分阶段进度展示。
  • 核心构成：确定型(轨道+已填充+百分比) / 不确定型(旋转菊花/循环条)、可选文案。
间距：菊花 20–37pt；进度条高 4–8pt、圆角 2–4pt。红线拆解图待补。
 Indeterminate(不确定)、Determinate(确定百分比)、Paused、Complete、Error。
  • 旋转菊花(spinner)
  • 水平进度条
  • 环形进度
  • 步骤条
  • 骨架屏
  • 菊花：20 / 37pt。
  • 条高：4–8pt；圆角 2–4pt。
  • 更新：≥10fps。
  • 触发：任务开始自动显示。
  • 反馈：旋转动画(1s/圈)；进度平滑增长；完成淡出。
  • 热区 N/A(非交互)。
  • role="progressbar" + aria-valuenow；aria-busy。
  • reduced-motion 降级；iOS UIActivityIndicatorView/UIProgressView。

五、 系统级与硬件交互（System & Hardware）

与设备硬件、系统功能深度整合的组件。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
29
主屏幕指示器
Home Indicator
/hoʊm ˈɪndɪkeɪtər/
 底部的横条，用于返回主屏幕（iOS 26 起默认仅在交互时显示）。
  • 不要紧贴指示条放可点元素(易误触返回主屏)。
  • 不要用深色页面导致白色横条不可见(需自适应)。
  • 不要隐藏系统手势区、自绘伪横条。
  • 所有全屏 App 底部必现。
  • 全面屏设备的内容避让区参考。
  • 核心构成：底部居中横条(系统绘制)、下方安全区留白；iOS 26 起默认沉浸、交互时浮现。
间距：宽 134pt(≈屏宽 1/3)、高 5pt、距底 8pt；安全区 env(safe-area-inset-bottom)。红线拆解图待补。
 Idle(隐藏/淡出, iOS 26)、Visible(交互时浮现)、Light/Dark 自适应。
  • 经典常显
  • iOS 26 交互浮现
  • 透明/自动变色
  • 宽：134pt。
  • 高：5pt；圆角 3pt。
  • 距底：8pt。
  • 颜色：自适应(白/黑±透明)。
  • 触发：上滑返回主屏；左右滑切换 App。
  • 反馈：系统手势无自定义动效；iOS 26 交互时淡入淡出。
  • 热区 N/A(系统)。
  • 用 env(safe-area-inset-bottom) 避让；不可自定义绘制。
  • 底部按钮与其保留 ≥16pt。
30
主屏幕快速操作
Home Screen Quick Actions
/hoʊm skriːn kwɪk ˈækʃənz/
 长按 App 图标弹出的快捷菜单。
  • 不要放低频操作(应只保留 1–4 个高频)。
  • 不要与 App 内功能重复却跳向不同结果。
  • 不要无图标导致难以辨识。
  • 快捷发起核心任务(新建日程/扫一扫/搜一搜)。
  • 直达高频二级页。
  • 核心构成：长按 App 图标的模糊背景、App 名标题、快捷项列表(图标+标题)、可含副标题。
间距：项高 44pt、图标 32pt、卡片圆角 14pt。红线拆解图待补。
 Default、Highlighted(高亮)、Disabled。
  • 静态快捷(Info.plist 声明)
  • 动态快捷(运行时更新)
  • 带副标题
  • 带图标组合
  • 项高：44pt。
  • 图标：32pt。
  • 数量：1–4 个。
  • 标题字号：15px。
  • 触发：主屏长按 App 图标(Haptic Touch)。
  • 反馈：模糊背景+菜单弹出；点项直接跳转对应功能。
  • 热区 ≥44pt。
  • iOS UIApplicationShortcutItem(静态/动态)。
  • 标题简洁可读；深链直达。
31
主屏幕小组件
Home Screen Widgets
/hoʊm skriːn ˈwɪdʒɪts/
 主屏幕上的信息展示卡片。
  • 不要在小尺寸塞过多信息(截断难读)。
  • 不要把小组件当按钮堆满操作。
  • 不要长时间不刷新(信息过期失信)。
  • 天气/日历/待办/健康等 glanceable 信息。
  • 主屏一眼获取关键状态。
  • 核心构成：容器(圆角卡片)、标题/主数据、辅助信息、可选快速操作；支持小/中/大三档尺寸。
间距：小 2×2、中 4×2、大 4×4 网格；圆角 ≈22pt；内边距 16pt。红线拆解图待补。
 Default、Placeholder(占位)、Loading、Snapshot(快照)、Redacted(隐私遮罩)。
  • 小(2×2)
  • 中(4×2)
  • 大(4×4)
  • 可交互控件(iOS 17+)
  • 锁屏配件
  • 圆角：≈22pt。
  • 内边距：16pt。
  • 字号：11–22px。
  • 刷新：受 Timeline 策略限制。
  • 触发：点击进入 App 对应页面。
  • 反馈：点击深链；iOS 17+ 支持按钮/开关即时操作。
  • 热区 ≥44pt(可交互控件)。
  • WidgetKit(SwiftUI)；Timeline 刷新策略。
  • 对比度 AA。
32
锁屏小组件
Lock Screen Widgets
/lɒk skriːn ˈwɪdʒɪts/
 锁屏界面上的信息小组件。
  • 不要放隐私敏感内容(锁屏人人可见)。
  • 不要信息过多(空间仅容 1 行)。
  • 不要无深色适配(锁屏背景多变)。
  • 天气/电量/日程/健身圆环等一眼可见信息。
  • 锁屏快捷状态查看。
  • 核心构成：单色符号+简短数值/文字；圆形(环形进度)与矩形(单行)两种形状，位于时间下方一行。
间距：圆形直径 ≈50pt、矩形宽 ≈110pt；内边距 4–6pt。红线拆解图待补。
 Default、Tinted(着色模式)、Redacted(隐私隐藏)、Placeholder。
  • 圆形(环形)
  • 矩形(单行)
  • 内联(时间上方一行文字)
  • 圆形直径：≈50pt。
  • 矩形宽：≈110pt。
  • 颜色：单色(受着色影响)。
  • 字号：12–15px。
  • 触发：点击跳转 App。
  • 反馈：点击深链；无复杂交互。
  • 热区 ≥44pt。
  • WidgetKit accessory 家族；单色渲染。
  • 避免隐私数据；对比度 AA。
33
控制中心
Control Center
/kənˈtroʊl ˈsɛntər/
 从屏幕右上角下滑呼出的系统快捷设置面板。
  • 不要在 App 内自绘"伪控制中心"(认知冲突)。
  • 不要遮挡系统手势热区。
  • 不要把高频操作藏到二级。
  • 系统级开关(Wi-Fi/蓝牙/亮度/音量)。
  • 快捷控制与自定义控件。
  • 核心构成：模糊背景网格、控制卡片(开关/滑块/圆形图标)、自定义控件区、底部退出提示。
间距：卡片圆角 20pt、网格间距 12pt、圆形控件 56pt。红线拆解图待补。
 Default、Active(开启/高亮)、Expanded(长按展开)、Editing(布局编辑)。
  • 单开关
  • 滑块
  • 组合组
  • 可展开卡片
  • 自定义控件(第三方)
  • 卡片圆角：20pt。
  • 网格间距：12pt。
  • 圆形控件：56pt。
  • 背景：模糊。
  • 触发：右上角下滑呼出；上滑/点空白退出。
  • 反馈：模糊背景实时生效；长按卡片展开更多。
  • 热区 ≥44pt。
  • 系统面板不可自定义外观；App 可提供 Control Widget(iOS 18+)。
  • 对比度 AA。
34
滚动边缘效果
Scroll Edge Effects
/skroʊl ɛdʒ ɪˈfɛkts/
 iOS 26 的新特性，内容滚动至边缘时的视觉反馈。
  • 不要在所有容器滥用(过度模糊干扰阅读)。
  • 不要与自定义阴影叠加(边缘发脏)。
  • 不要在短内容无滚动时启用。
  • 导航栏/工具栏与内容交界处。
  • 长列表滚动到边缘时的过渡反馈。
  • 核心构成：内容边缘的渐变模糊/淡出遮罩，随滚动位置动态变化；可配 soft/hard 两种风格。
间距：遮罩高度 ≈ 栏高(44–56pt)；过渡 100–200ms。红线拆解图待补。
 At-Edge(贴边,最强)、Scrolling(滚动中)、Scrolled(远离边缘,关闭)。
  • soft(柔和渐变)
  • hard(硬边模糊)
  • 全宽 / 局部
  • 上边缘 / 下边缘
  • 遮罩高：≈44–56pt。
  • 过渡：100–200ms。
  • 配合：栏背景模糊材质。
  • 触发：内容滚动。
  • 反馈：边缘遮罩随位移实时渐变；停止滚动后稳定。
  • 热区 N/A(视觉反馈)。
  • iOS 26 scrollEdgeEffectStyle；退化时用渐变遮罩。
  • prefers-reduced-transparency 时关闭模糊。
35
系统通知
System Notifications
/ˈsɪstəm ˌnoʊtɪfɪˈkeɪʃənz/
 系统级的横幅、提醒与通知中心消息。
  • 不要滥用推送营销(用户会关闭权限)。
  • 不要重复轰炸同一条(应合并分组)。
  • 不要无点击目的地(点了没反应)。
  • 消息到达、日程提醒、任务完成。
  • 重要状态变化与实时活动。
  • 核心构成：App 图标、标题/正文、时间、可选图片/操作按钮；横幅与通知中心两种呈现。
间距：横幅圆角 14pt、内边距 16pt、图标 38pt。红线拆解图待补。
 Banner(横幅浮现)、Delivered(通知中心)、Grouped(分组堆叠)、Silent(静默)、Dismissed。
  • 临时横幅
  • 常驻通知中心
  • 分组堆叠
  • 带操作按钮
  • Critical(需授权)
  • Live Activity
  • 横幅圆角：14pt。
  • 图标：38pt。
  • 内边距：16pt。
  • 正文：≤4 行(展开前)。
  • 触发：系统推送到达。
  • 反馈：顶部滑入横幅(常驻数秒)；点击进入；左滑清除。
  • 需用户授权(UNUserNotificationCenter)。
  • 深链直达；支持分组/静音；尊重免打扰。
  • 正文可被屏幕阅读器朗读。

补充说明

在 iOS 26 及后续版本中，组件设计有几个值得注意的趋势。