WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Designed for iPad

Designed for iPad

WWDC 2020DesigniPadOS
观看原视频

Highlight

Apple 在 iPadOS 14 把 sidebar、overlay sidebar、三列布局、顶部工具栏和多输入协同列为 iPad app 的核心设计模式，帮助 app 减少全屏跳转和模态遮挡，并让拖放、键盘、触控板和 Apple Pencil 各自发挥作用。

核心内容

iPad app 的常见问题，是把 iPhone 的单屏流程放大。Photos 在 iPadOS 13 里选择相册会整屏切换，右侧留下大量空白；Home 里的房间选择藏在 tab 和 popover 后面；Calendar 的日历选择也会挡住事件列表。用户拿着更大的屏幕，却还要像在小屏上一样来回进入、退出页面。

iPadOS 14 的设计方向，是让导航、内容和上下文同时出现。Photos 用 sidebar 把相册入口放在左边，照片内容留在右边；Home 用 sidebar 让房间一触即达，还能直接拖放排序；Mail 借助新的 sidebar 行为，把三列布局带到所有 iPad，而不只限于最大尺寸的 iPad Pro。

这套思路也改变了模态界面的使用方式。Files 把重命名放回列表里，用户能参考同一文件夹里的其他名称；Calendar 把日历开关提升到事件同一层级，切换可见性时右侧结果即时变化。iPad 的大屏不只是放大内容，也用来保留正在发生的工作。

输入方式是另一个分水岭。Session 要求先把 Multi-Touch 做好，再补上键盘、触控板和 Apple Pencil。标准控件会自动获得很多系统能力，custom controls 需要补齐 pointer 和 Scribble。更重要的是，iPad 允许组合输入：Command 加点击、Option 加拖动、Pencil 加触控面板，这些交互很难照搬到 iPhone 或 Mac。

详细内容

用 sidebar 减少全屏跳转

（02:46）Session 的第一个建议是 flatten navigation。iPad 屏幕足够宽时，整屏 push 往往浪费空间，也让用户失去当前位置。Photos 从全屏相册切换改成 sidebar 后，相册入口、照片内容和拖放目标能同时存在。

旧流程：
选择相册 -> 整屏切换到相册内容 -> 返回后再选另一个位置

iPadOS 14 流程：
左侧 sidebar 保留相册、媒体类型和分组 -> 右侧显示照片内容 -> 拖动时目标已经可见

关键点：

  • 左侧导航和右侧内容同时出现，用户不必先离开当前内容。
  • Drag and Drop 的目标在拖动开始时已经可见，操作路径更短。
  • 这类布局也适合 Mac Catalyst，因为 macOS 更少依赖遮挡式界面。

（15:42）iPadOS 14 的 sidebar 不是简单的左侧列表。它支持 edit mode、拖放、collapsible sections、overlay presentation 和 swipe gesture。Photos 里的 sidebar 可以收起为 overlay，Portrait 和 Split View 空间不足时也会自动采用 overlay。

sidebar 结构：
顶部：primary navigation，例如 Photos、Albums、For You
下方：用户生成或常用内容，例如 albums、playlists、mailboxes
分组：用 collapsible sections 保持层级
编辑：支持 show、hide、reorder 和 drag-and-drop
空间不足：sidebar 以 overlay 出现，内容区域优先保留

关键点：

  • 顶部区域承担 tab bar equivalent 的角色，放 app 最重要的入口。
  • 用户生成内容适合放在 primary navigation 下面，并用可折叠标题组织。
  • sidebar 不适合承载完整深层树；深层浏览应交给内容区域。
  • Compact width 和 iPhone 仍应使用 tab bar 或 standard table rows。

把内容密度和上下文放回屏幕

（05:05）Files 的例子说明，大屏需要的不只是更大的图标。iPadOS 14 通过更小但仍可读、可点按的图标，让 Files 同屏显示接近三倍数量的项目。这个改变的目标是减少滚动和查找成本。

检查一个列表或网格：
文本是否仍然可读
触控目标是否仍然容易点按
同屏项目数量是否减少了滚动
用户是否能更快比较、选择或拖放内容

关键点：

  • 密度调整必须先满足可读性和触控目标。
  • 文件、照片、任务、项目库这类对象集合，通常能从更高密度中受益。
  • 密度提高后，拖放和批量选择会更顺畅，因为更多目标留在屏幕上。

（06:15）Session 反复强调减少不必要的遮挡。Files 在列表内重命名，用户还能看见同一文件夹的其他文件名；Calendar 把日历开关移到事件列表同一层级，用户切换日历时能立刻看到右侧结果。

遇到 modal sheet 或 popover 时：
先问它是否提供来源上下文
再问它是否挡住了用户需要参考的内容
如果答案偏向遮挡，就考虑 inline editing、side panel 或同层级控件

关键点：

  • popover 的箭头只有在能解释来源时才有价值。
  • inline editing 让用户保留参考信息，例如文件名、日期和当前列表状态。
  • iPhone 的紧凑屏幕仍然适合模态聚焦；iPad regular width 更适合同层级控制。

让多种输入各自有位置

（10:46）iPad 仍然是 touch-first 设备，但键盘、触控板和 Pencil 都应该获得一等支持。标准 text input controls 会自动获得 Scribble；系统控件也已经支持大量 trackpad 行为。自定义控件需要额外检查，因为系统无法凭空理解它们的语义。

输入支持顺序：
Multi-Touch：主要路径，所有核心操作都要可触控完成
Keyboard：给常见操作添加快捷键
Trackpad：先使用系统控件的默认行为，再处理 custom controls
Apple Pencil：标准文本控件自动支持 Scribble，自定义文本体验需要单独适配

关键点：

  • 键盘快捷键不会打扰触控用户，却会显著提升重度用户效率。
  • Mac Catalyst 会继承许多键盘快捷键收益。
  • 标准控件是 pointer 和 Scribble 的低成本入口。
  • Custom controls 要被单独测试，尤其是自定义输入框和画布。

（12:31）更有 iPad 特征的交互来自组合输入。Safari 用 Command 加点击打开新标签，用 Option 加点击下载文件。Session 还展示了 Loom：左手触控拨盘切换动画帧，右手用 Pencil 绘制当前帧。

组合输入设计：
Command + tap：打开、扩展或进入替代路径
Option + drag：复制项目
Shift + tap：批量选择
Touch + Pencil：一只手控制工具或帧，另一只手完成精确绘制

关键点：

  • Modifier keys 应该能和 touch、trackpad 等输入一起工作。
  • Pencil 不必承担所有 UI 操作，触控可以负责上下文切换和工具控制。
  • 组合输入适合动画、绘图、文档编辑、文件管理和专业创作类 app。

响应速度来自可中断的微交互

（14:13）Session 用 iPadOS 14 的 drop-down menu 展示响应性。菜单还在出现时，用户已经能顺势滑到目标项；在菜单外开始滚动时，系统会同时关闭菜单并滚动底层内容。动画不应该把用户锁住。

响应性检查：
动画期间是否还能接收输入
菜单外的滚动是否能继续推动内容
用户是否需要等待一个过渡结束才能执行下一步
取消、选择、滚动是否能合并成一次手势

关键点：

  • 微交互的目标是让 app 跟上用户动作，而不是等待动画播完。
  • 遮挡式控件出现时，仍要思考哪些手势不会和它冲突。
  • 动画可以保留方向感，但不能阻断后续操作。

工具栏应该跟着 iPad 尺寸变化

（26:50）iPadOS 14 把很多 toolbar items 移到顶部。对一到三个按钮的工具栏，顶部 navigation bar 往往更符合大屏使用方式；到了 compact width，再把按钮放回底部。

toolbar 布局：
Regular width：优先把主要 action 放到顶部
一到三个按钮：常见候选，可以尝试 top placement
Compact width：水平空间不足时，按钮回到底部

关键点：

  • 顶部按钮能减少底部空 toolbar 对屏幕的占用。
  • 同一个 app 需要准备 regular width 和 compact width 两套摆放方式。
  • toolbar 的位置变化应跟 size class 绑定，而不是只按设备型号判断。

核心启发

  • 把资料库型 app 改成 sidebar 入口：做什么：把项目、相册、笔记本、歌单或房间入口放进 regular width sidebar。为什么值得做：Session 里的 Photos、Home、Music、Files 都用 sidebar 缩短导航路径。怎么开始：先把原 tab bar 的 top-level items 放到 sidebar 顶部，再把用户常用列表放到可折叠分组里。

  • 给文件和内容列表增加 inline editing：做什么：让重命名、开关筛选、可见性调整等操作留在列表或内容旁边。为什么值得做：Files 和 Calendar 的例子都在减少遮挡，让用户保留周围内容作为参考。怎么开始：盘点现有 modal sheet 和 popover，优先替换那些只包含简单表单或开关的界面。

  • 为创作类 app 设计 Pencil 加 Touch 的双手流程：做什么：用 Pencil 负责绘制、标注或书写，用触控负责切换帧、工具、图层或时间线。为什么值得做：Loom 的演示说明，两种输入并行时，创作流程会少很多模式切换。怎么开始：列出创作时最频繁的两个动作，把精确动作交给 Pencil，把上下文切换放在手指容易触达的位置。

  • 补齐键盘和触控板的高频动作：做什么：为新建、关闭、选择、复制、下载、打开详情等动作增加快捷键或 modifier 组合。为什么值得做：Session 明确建议常见操作应提供键盘快捷键，Command tap、Option drag 和 Shift tap 都能提升大屏效率。怎么开始：从菜单命令和批量选择开始，确认这些操作在触控、键盘和触控板下都能完成。

  • 建立 regular 与 compact 的布局检查表：做什么：为 sidebar、toolbar、三列布局、overlay sidebar 和 tab bar 建一组尺寸切换测试。为什么值得做：Session 反复展示 Portrait、Split View 和 compact width 会改变 sidebar 与 toolbar 的呈现。怎么开始：每次改导航结构后，在 regular width、Portrait、Split View 和 iPhone 视图里检查主入口是否一致。

关联 Session

评论

GitHub Issues · utterances