LESSON 28 / 575 分钟
iPadOS:分栏、多窗口与指针
iPad 的重点不是把手机界面放大,而是根据可用空间组织工作。
用你的前端经验理解
响应式思维依然有用,但还要考虑分屏、窗口、键盘、指针和 Apple Pencil。
01 / 理解问题
为什么需要它
iPad 的区别不只是屏幕更大,它也支持可变化窗口、键盘、指针和多任务。以设备型号判断“应该显示两栏”会在窄窗口失效。布局应该响应实际可用空间:宽时显示列表与详情,窄时把同一信息结构收拢为可导航的层级。
它是怎样工作的
NavigationSplitView 可以表达列表、内容与详情关系,但选中项仍应由业务状态明确管理。多个窗口通常共享仓库,却各有自己的选择和编辑状态。键盘快捷键要与当前焦点和功能对应,拖放则要明确接收的数据类型、重复导入与异步加载失败行为。
02 / 掌握要点
把关键概念连起来
1
布局
NavigationSplitView 可表达侧栏、列表和详情;空间不足时让导航自然收拢。
2
输入
提供硬件键盘快捷键、拖放和指针交互;与 Pencil 相关的创作需求再引入 PencilKit。
3
场景
多窗口可能同时查看或编辑同一数据。界面状态可独立,业务数据需要一致。
03 / 案例推演
把手机阅读列表扩展为 iPad 工作区
- 宽窗口展示列表与文章,窄窗口先展示列表,选中后进入详情;不要复制两份互不关联的页面数据。
- 为每个窗口维护独立 selection,在共享仓库删除文章时,相关窗口都安全清理失效选择。
- 补上键盘添加与搜索入口,并测试指针悬停不能是唯一发现操作的方式,触控用户仍要可完成任务。
这里需要你亲自判断
不要只通过“是不是 iPad”决定布局;可用窗口宽度和 size class 更重要。
04 / 动手验证
做一个小练习
画出阅读清单在窄窗口与宽窗口时的两种信息布局。
- 在宽、窄窗口切换时保持选中文章与未提交草稿。
- 打开两个窗口选择不同文章,检查是否发生不必要的联动。
展开参考思路与验收标准
宽窄布局应是同一任务的不同呈现,而不是两个行为不同的产品。选中项属于窗口,共享文章属于仓库;清楚分层后,多窗口会比堆尺寸判断更容易维护。
05 / 检查理解
iPad 布局应主要依据什么?
答对理解题后即可标记完成