Apple 把 UI 组件分成 8 大功能组。这张 wiki 是"我要做 X,该用哪个组件 / 这个组件什么时候别用"的查表。每个组件给:一句定义 + 何时用 + 关键 do/don't + 跨平台支持。
易混淆的组件对(弹出按钮 vs 下拉按钮、列表 vs 集合、警告 vs 操作表、Sheet vs Popover…)我都标了"怎么选"。
mindmap
root((63 组件 / 8 组))
菜单与操作
按钮 / 弹出 / 下拉
菜单 / 上下文菜单
工具栏 / 活动视图
选择与输入
文本框 / 选择器
滑块 / 步进器 / 开关
分段控制 / 键盘
界面展示
警告 / 操作表
Sheet / Popover / 面板
窗口 / 滚动 / 页面控制
布局与组织
列表表格 / 集合 / 大纲
分栏 / 标签视图 / 框
导航与搜索
标签栏 / 侧边栏
搜索栏 / 路径 / 标记
内容承载
图表 / 图像 / 文本 / 网页
状态指示
进度 / 活动环 / 仪表 / 评分
系统体验
小组件 / Live Activities
通知 / 控件 / 复杂功能
快捷方式 / 菜单栏 / 表盘
一、菜单与操作 Menus and Actions
按钮 Buttons —— 启动即时操作。三属性:样式 Style(大小/颜色/形状)、内容 Content(图标/文本/二者)、角色 Role(Normal/Primary 默认操作/Cancel/Destructive 破坏性)。
图:用样式而非大小区分首选项 —— 左 Secondary(浅填充)、右 Primary(实填充),尺寸相同。一组同类选项用相同大小,靠更突出的样式标出"最可能选的那个"。
· 点击区 ≥44×44pt(visionOS 60×60pt);限制每个视图里"视觉显著按钮"数量(过多增认知负担);文本用动词短语("添加至购物车")。macOS 有推送/渐变/帮助/图像等专用按钮型;visionOS 按钮带可见背景+声音反馈(无触觉),3 形状(圆/胶囊/圆角矩形)×5 尺寸;watchOS 10 全胶囊形,主操作用全宽按钮。
| 组件 |
一句话 + 何时用 |
关键 do/don't |
不支持 |
| 弹出按钮 Pop-up |
选互斥选项,选完按钮显示当前值 |
提供有用默认值;空间有限时用 |
— |
| 下拉按钮 Pull-down |
列操作/命令(与按钮功能相关) |
≥3 项才值得;主操作别藏进去;破坏性操作红字+确认 |
tvOS/watchOS |
| 弹出 vs 下拉 怎么选 |
选值→弹出;选动作→下拉 |
下拉需多选/子菜单时也用 |
— |
| 菜单 Menus |
列命令/选项,省空间 |
常用项放顶部;逻辑分组+分隔符;子菜单≤1 级且≤5 项;切换项用动态标签("显示/隐藏地图") |
— |
| 上下文菜单 Context |
长按/右键显示当前项相关命令 |
只放最相关项(别当"发现所有功能"的入口);隐藏不可用项而非置灰;破坏性放末尾标红;与编辑菜单二选一 |
— |
| 编辑菜单 Edit |
选中内容的复制/翻译/查找等 |
优先系统菜单;只显当前可用命令;支持复制不可编辑文本 |
tvOS/watchOS |
| 工具栏 Toolbars |
当前视图的常用命令 |
项别太多;iPadOS/macOS/visionOS 支持分组+自定义;下方有内容时自动半透明;工具栏=操作,标签栏=导航,不同时出现 |
— |
| 活动视图 Activity(分享表单) |
分享/复制/打印等任务 |
别重复已有操作;自定义操作用动词标题;用分享按钮触发 |
macOS(用扩展替代) |
| 装饰 Ornaments |
visionOS 窗口边缘的悬浮控件条 |
保持稳定可见;宽度≤窗口;无边框按钮(玻璃背景) |
仅 visionOS |
| Dock 菜单 |
macOS 图标右键菜单 |
高价值项(最近窗口/常用操作);别处也要能访问到 |
仅 macOS |
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 文本框 Text Fields |
输入少量文本(姓名/邮箱) |
占位符示范格式;密码用安全文本框;按内容类型显键盘;合适时机校验 |
全平台 |
| 文本视图 Text Views |
多行/可编辑/带样式的长文本 |
短文本用标签;短可编辑用文本框 |
全平台 |
| 选择器 Pickers |
中到长的选项列表(日期/时间/地区) |
短列表用下拉按钮;超大集用列表;可预测排序;分钟可设 15 间隔 |
全平台 |
| 分段控制 Segmented |
2+ 互斥(或多选)的密切相关选项 |
iPhone ≤5 段、宽屏 ≤5-7 段;别放工具栏;切换视图放导航栏 |
全平台 |
| 滑块 Sliders |
连续值调节 |
方向一致(左/下=最小);别调音量(用专用音量控件);大范围配文本框+步进器 |
tvOS 不支持 |
| 步进器 Steppers |
小幅增减值(自身不显值) |
配旁边的字段显值;大范围配文本框 |
watchOS/tvOS 不支持 |
| 开关 Toggles |
两态切换(开/关) |
状态差异别只靠颜色;iOS 列表行用 Switch、其他场景用按钮样式;macOS 有 Switch/Checkbox/Radio |
全平台 |
| 颜色选取 Color wells |
调颜色,点开调色器 |
优先系统调色器(可存常用色) |
tvOS/watchOS 不支持 |
| 图像选取 Image wells |
可编辑图像视图(拖放替换) |
支持复制粘贴;必填时清空恢复默认图 |
仅 macOS |
| 组合框 Combo boxes |
文本框+下拉(可输入可选) |
填有意义默认值;引导标签;列表项别超框宽 |
仅 macOS |
| 数字输入视图 Digit entry |
全屏输 PIN/密码(电视) |
用安全字段(●替代);标题说明用途 |
仅 tvOS |
| 虚拟键盘 Virtual keyboards |
无实体键盘时输入 |
按语义选键盘类型;Return 键可改"搜索/发送";自定义键盘别重复系统功能 |
— |
三、界面展示 Presentation
这一组最容易选错,核心是"打扰程度"递增:Popover < Sheet < Action Sheet < Alert(最打扰)。
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 警告 Alerts |
必须立即知道的重要信息/破坏确认 |
慎用(中断任务);纯信息别用警告;常见可撤销操作别弹;最多 3 按钮;别用"OK"当默认(用"删除"等具体词) |
全平台 |
| 操作表 Action sheets |
用户发起的操作的多选项 |
用它而非菜单(操作后确认);破坏性放顶标红+取消按钮;别滚动(iOS) |
visionOS 不支持 |
| 警告 vs 操作表 |
告知问题/确认→警告;给操作选项→操作表 |
警告是意外的,操作表是用户主动触发的 |
— |
| 视图片 Sheet |
与当前上下文紧密相关的模态任务 |
简单任务用 Sheet;复杂/长任务用全屏或新窗口;同时只一个;iOS 可非模态+中/大停靠点+拖动条 |
全平台 |
| 弹出视图 Popover |
少量信息/简单操作,箭头指向触发元素 |
紧凑视图(iPhone 竖屏)改用 Sheet;同时只一个、不级联;别用来显警告 |
tvOS/watchOS 不支持 |
| Sheet vs Popover |
临时少量→Popover(宽屏);独立任务→Sheet |
紧凑屏一律 Sheet |
— |
| 面板 Panels |
macOS 浮于窗口上的辅助控件/检查器 |
简单调节控件;短标题;App 失活时隐藏;HUD 样式仅媒体场景 |
仅 macOS |
| 窗口 Windows |
iPadOS/macOS/visionOS 内容容器 |
自适应尺寸;别自定义边框按钮;UI 里说"窗口"别说"scene";visionOS 默认 1280×720pt、2 米处 |
iOS/watchOS 无 |
| 滚动视图 Scroll views |
超出边界的可滚动内容 |
用熟悉的弹性行为;暗示可滚动(露半个);别嵌同方向滚动;一屏一个(iOS) |
全平台 |
| 页面控制 Page controls |
一排圆点表线性页面位置 |
底部居中;≤10 个点;自定义符号要简单;别自定义颜色 |
全平台 |
四、布局与组织 Layout and Organization
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 列表与表格 Lists/Tables |
行式数据(可分组/层级/编辑) |
文本内容优先用它;图多/尺寸差异大用集合;选中给反馈;列标题用名词短语 |
全平台 |
| 集合 Collections |
高度视觉化的有序内容(图为主) |
用标准行/网格布局;别做confusing 自定义布局;图周围留边距好选 |
全平台 |
| 列表 vs 集合 |
文本→列表;图像→集合 |
— |
— |
| 大纲视图 Outline |
滚动列表里的层级数据(展开三角) |
非层级用表格;首列放层级;支持列标题排序+调宽;保留展开状态 |
macOS 为主 |
| 分栏视图 Split views |
相邻多面板(主选→次显详情) |
持续高亮当前选项;支持拖放;iPhone 竖屏不建议;iPad 双/三栏 |
iOS 紧凑慎用 |
| 标签视图 Tab views |
同区域切换互斥内容面板 |
控件只影响本面板;≤6 个标签;别用弹出按钮切标签 |
— |
| 侧边栏 Sidebars |
领先侧的区域间导航(浮于内容) |
≤2 级层级(更深用分栏);别默认隐藏;iOS 不推荐(用标签栏);iPadOS 可自适应切标签栏 |
iOS 不推荐 |
| 框视图 Boxes |
视觉分组逻辑相关内容 |
别太大(接近窗口就失效);别嵌套多框(用边距/对齐表子组);标题简短 |
— |
| 标签 Labels |
静态可读不可编辑文本 |
少量不可编辑文本用它;可编辑用文本框;有用信息(IP/错误码)可选可复制 |
— |
| 列视图 Column views |
垂直列浏览深层级(浏览器式) |
层级深+常来回切换时用;首列放根;不提供排序 |
macOS 为主 |
| 锁定视图 Lockups |
多视图组合成交互单元(卡片/海报) |
留足间距(聚焦放大);同行尺寸一致;4 型:卡片/说明按钮/字母图标/海报 |
tvOS 为主 |
| 展开控制 Disclosure |
按需显隐相关信息(三角/按钮) |
常用项放顶部常显,高级默认隐藏;给描述性标签;单视图只一个展开按钮 |
— |
五、导航与搜索 Navigation and Search
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 标签栏 Tab bars |
顶级功能区导航 |
只导航不操作(操作用工具栏);保持可见;避免"更多"标签;标题一词;徽章提示 |
— |
| 搜索栏 Search fields |
输词查结果 |
占位符给内容类型("Shows, Movies");即时搜索+建议;范围控制+标记筛选;iOS 推荐放底部 |
— |
| 路径控制 Path controls |
显文件路径层级 |
放窗口主体非工具栏 |
仅 macOS |
| 标记字段 Token fields |
文本转可操作标记(邮件收件人) |
给标记上下文菜单;多种转换触发(逗号/回车) |
仅 macOS |
| (侧边栏见"布局与组织") |
|
|
|
六、内容承载 Content
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 图表 Charts |
数据可视化(柱/线/点标记) |
柱=比类别、线=随时间、点=异常/关系;别只靠颜色(配形状);音频图表+无障碍标签(描述含义非颜色);别要求交互才能看关键信息 |
— |
| 图像视图 Image views |
显示单图/图序列(通常非交互) |
要交互用按钮包;显图标用 SF Symbols 别用图像视图;别在图上叠文本 |
— |
| 文本视图 Text views |
(见"选择与输入") |
|
— |
| 网页视图 Web views |
App 内加载网页/HTML |
多页提供前进后退;别当浏览器用(Safari 才是) |
— |
七、状态指示 Status
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 进度指示器 Progress |
加载/耗时操作未卡顿 |
能量化用确定型;别"5秒到90%再卡5分钟";保持动画;别在圆/线样式间切;可中断给取消 |
全平台 |
| 活动环 Activity rings |
移动/锻炼/站立三目标进度 |
只用于这三项、黑底标准样式、不改色不加特效、不用于品牌装饰;单用户 |
仅 iOS/watchOS |
| 仪表盘 Gauges |
数值范围内的当前值(圆/线) |
渐变填充传达用途;颜色提示重要区间;单用户;macOS 有 Level Indicator |
tvOS 不支持 |
| 评分指示器 Rating |
一排符号表评分(默认星) |
只显完整符号(四舍五入);列表内可直接改;自定义符号要含义清晰 |
仅 macOS |
八、系统体验 System Experiences(超越单个 App 的系统级组件)
| 组件 |
一句话 + 何时用 |
关键 do/don't |
平台 |
| 小组件 Widgets |
主屏/锁屏/桌面的及时信息瞥视 |
清晰核心理念;动态更新(别只当图标);文本 ≥11pt+系统字体;别光栅化文本(VoiceOver 读不了);支持深色/染色/StandBy/Night 模式 |
iOS/iPadOS/macOS/watchOS |
| 实时活动 Live Activities |
锁屏/动态岛的实时进展(≤8h) |
明确起止;完成即结束(15-30 分后移除);只显关键信息;别打广告;独特布局(别模仿通知) |
iOS/iPadOS/watchOS |
| 通知 Notifications |
及时有价值的状态更新 |
先要权限;错误用警告不用通知;操作按钮用动词(别只"打开 App");徽章只显未读数 |
iOS/iPadOS/macOS/tvOS/visionOS |
| 控件 Controls |
控制中心/锁屏/操作按钮的快速功能 |
不启动 App 即用的高价值功能;开关给开/关两符号;锁屏隐敏感信息;安全操作要验证 |
仅 iOS/iPadOS |
| 复杂功能 Complications |
表盘上的实时信息瞥视 |
用 WidgetKit;支持所有家族;深度链接到相关页;染色模式可读;线宽 ≥2px |
仅 watchOS |
| 应用快捷方式 App Shortcuts |
Siri/Spotlight 调用的常用任务 |
≤10 个;名字含 App 名;参数可预测;歧义时给~5 选项确认 |
macOS 不支持(动作可用) |
| 主屏快捷操作 Quick Actions |
长按图标的快捷菜单 |
≤4 个高价值操作;标题简洁不含 App 名;别表情符号(单色 SF Symbols) |
仅 iOS/iPadOS |
| 菜单栏 Menu bar |
Mac/iPad 顶部的命令总入口 |
遵循标准顺序(应用/文件/编辑/格式/视图/窗口/帮助);全显(不可用置灰);标准快捷键;一词标题 |
仅 macOS/iPadOS |
| 状态栏 Status bars |
屏幕顶部的设备状态(时间/电量) |
保证可读(导航栏/模糊背景);全屏媒体时临时隐藏;别永久隐藏 |
仅 iOS/iPadOS |
| Top Shelf 顶部货架 |
Apple TV 主屏的内容展示区 |
帮用户快速进内容;展新内容(别推已看);动态内容>静态;别打广告/价格 |
仅 tvOS |
| 表盘 Watch faces |
watchOS 核心界面 |
通过分享表盘推广 App+复杂功能;给预览;处理机型不兼容(给替代配置) |
仅 watchOS |
源自 Components 组件手册(8 组 63 篇)。交互流程(引导/搜索/反馈等)见 Apple HIG 交互模式 Patterns(25 个流程模式 · 上手/输入/反馈/媒体/系统协作);视觉基础见 Apple HIG 视觉基础 Foundations(颜色/字体/布局/材质/动效/暗黑/图标/SF Symbols/品牌)。Live Activities/小组件的 iOS 深化设计另见 Apple HIG iPad & Mac 专项(平台差异/光标/导航/文案/图表/窗口/订阅/动态组件)。
