Design with iOS pickers, menus and actions

Highlight

iOS 14 引入从按钮触发的轻量菜单、新日期/时间选择器和系统颜色选择器，让常见选择与二级操作更靠近上下文，并减少 action sheet、popover 和滚轮选择器带来的打断。

核心内容

在 iOS 13 里，很多小操作会被 action sheet 或 popover 接管。用户点了一个按钮，界面变暗，列表从屏幕另一端出现。iPhone 屏幕变大以后，这种距离更明显；iPad App 变得更密集以后，整屏遮罩也更重。演讲从这个问题切入：很多操作本来很轻，却被放进了很重的容器。（00:47）

iOS 14 的菜单把操作放回触发点附近。菜单从任何 button 出现，动作更紧凑，背景不再被强烈打断；它也不只服务于 action，还可以处理选择、导航和二级选项。排序、添加照片、返回历史、更多操作，这些原本分散的交互都能用同一套行为表达。（01:41）

日期和时间选择器解决的是另一个老问题：滚轮选择器表达日期结构很弱，用户要分别转动多个轮子。新的设计把日期呈现为月份、星期、日期的结构；时间可以直接输入。无法 inline 展示时，compact picker 先显示一个按钮，再在当前视图上方展开，表单行也能承载日期输入。（09:39）

颜色选择器补上了系统级颜色选择体验。用户可以从网格、光谱、RGB 值和屏幕取色四种入口选色，还能把颜色存进跨 App 可访问的 palette。开发者把颜色选择交给系统组件后，可以直接获得无障碍、本地化、iPad 与 Mac 一致性。（12:54）

详细内容

菜单要从明确动作开始

（03:44）演讲把菜单的主要场景分成四类：disambiguation（消歧）、navigation（导航）、selection（选择）和 secondary options（二级选项）。共同点是用户先看见一个明确动作，再由菜单补上更具体的选择。

明确动作
  Photos: 点 add
  Notes: 点 add image
  Safari: 长按 back
  Podcasts: 点 Sort

菜单承担的任务
  询问具体要添加什么
  展示可返回页面
  标记当前排序选项
  收纳低频二级操作

关键点：

• 菜单适合在用户已经表达意图之后出现，避免一开始就把所有选项摊开。
• selection 菜单会给当前选项加 check mark，用户可以理解当前状态。
• 更多按钮适合承载低频操作，但高频主操作应继续留在界面上。
• 用户点击菜单外部即可取消，不需要额外放一个 Cancel 项。

破坏性操作继续使用确认容器

（07:09）菜单减少了手指移动距离，这对普通操作很好，对删除这类动作却太轻。演讲用 Reminders 删除列表和 Mail 丢弃草稿说明，破坏性动作需要确认，并且确认动作要出现在不同位置。

普通二级操作
  点 more
  菜单在触发点附近出现
  选择后立即执行

破坏性操作
  点 Delete
  弹出 action sheet 或 popover
  用户移动到另一个位置确认
  确认前仍有机会取消

关键点：

• 删除、丢弃草稿这类动作会造成信息丢失，需要人为增加一点摩擦。
• action sheet 在 iPhone 底部出现，popover 在 iPad 上出现，和触发点保持位置差。
• 菜单适合推进任务，确认容器适合防止误触。
• 这个规则保留了旧组件的价值，不要求把所有 action sheet 都替换成菜单。

日期和时间选择器要匹配布局密度

（10:03）新的日期和时间选择器提供更清楚的日期结构，也支持 touch、Pencil、keyboard 和 cursor。Reminders 示例把日期和时间放在 inline 区域；Contacts 示例则把生日放在行内按钮里，点击后展开 compact picker。

有足够空间
  在当前视图 inline 展示日期或时间选择器
  用户直接看到月份、星期、日期或时间输入

空间紧张
  先展示 compact 按钮
  点击后在当前视图上方展开
  用户点外部区域确认选择

关键点：

• inline 适合 Reminders 这类把日期选择当作当前任务核心步骤的界面。
• compact 适合 Contacts 生日字段这类表单行，默认只占一行。
• 新设计让日期、时间和日期加时间使用一致的表达方式。
• 同一信息在 iPad 和 Mac 上更接近，迁移到大屏时不需要重新解释控件。

颜色选择器要覆盖完整选色路径

（12:54）iOS 14 的颜色选择器提供四种选色方式：grid（网格）、spectrum（光谱）、RGB value（RGB 值）和 screen color picking（屏幕取色）。用户还可以把颜色保存到 palette，并在其他 App 中继续访问。

用户想快速选色
  使用 grid

用户想细调颜色
  使用 spectrum
  或输入 RGB value

用户想匹配现有界面
  使用 pipet 从屏幕取色

用户想复用颜色
  保存到跨 App palette

关键点：

• 颜色选择包含快选、精调、取样和复用几条路径。
• pipet 通过放大镜取屏幕上的颜色，适合绘图和标注类 App。
• palette 可跨 App 使用，减少用户重复记录品牌色或常用色。
• 官方资源只给出了 Human Interface Guidelines: Designing for iOS，正文中的判断都来自演讲逐字稿。

核心启发

• 做什么：把表单里的生日、截止日期、提醒时间改成 compact picker。为什么值得做：演讲明确指出 compact 适合无法 inline 展示选择器的行内场景。怎么开始：先找出当前会弹全屏日期选择的表单字段，把默认状态压缩成一行按钮，点击后在当前视图上方展开。

• 做什么：给列表页增加一个排序菜单。为什么值得做：排序是演讲里的 selection 示例，当前选项能通过 check mark 表达。怎么开始：保留一个清楚的 Sort 按钮，把排序项放进菜单，取消操作交给点击外部区域完成。

• 做什么：把图片、笔记、文件的“添加”按钮改成消歧菜单。为什么值得做：Photos 和 Notes 的例子说明，用户先点明确动作，再选择具体来源，比把所有入口长期铺在页面上更省空间。怎么开始：列出添加动作的具体类型，例如拍照、相册、扫描、文件导入，只在用户点击 add 后展示。

• 做什么：把隐藏在工具栏里的低频命令收进 more 菜单。为什么值得做：Files 的例子说明，二级操作集中后，内容区域会更清楚。怎么开始：保留新建、发送、编辑这类主操作，把导出、复制路径、排序详情等低频项放到 more 菜单；删除类操作继续走确认容器。

• 做什么：在绘图、标注或主题编辑功能里接入系统颜色选择器。为什么值得做：演讲展示了网格、光谱、RGB、屏幕取色和跨 App palette，覆盖了常见选色路径。怎么开始：先停止维护自定义色板状态，把常用色、屏幕取色和精确输入交给系统组件处理。

关联 Session

• Build with iOS pickers, menus and actions — 继续看这些设计准则在 UIKit 控件和 UIAction 中如何实现。
• Designed for iPad — 从 iPad 设计角度继续理解减少模态、使用 sidebar 和适配多输入设备。
• Design for the iPadOS pointer — 了解 iPadOS 指针为何采用 indirect touch 设计。
• Build for the iPadOS pointer — 进入指针效果、自定义视图和 pointer interaction 的实现细节。
• Design great widgets — 用同一年 iOS 14 的设计案例理解信息密度、上下文和系统组件的一致性。