WWDC Quick Look 💓 By SwiftGGTeam
Design for Collaboration with Messages

Design for Collaboration with Messages

观看原视频

Highlight

Apple 在 iOS 16 和 macOS Ventura 中重新设计了协作体验,核心思路是把 Messages 放在协作流程的中心。传统协作工具用邮件发送邀请,但邮件是异步的,沟通效率低。Messages 天然支持实时对话,还能无缝切换到 FaceTime。


核心内容

很多协作产品从邮件邀请开始。发起人要知道对方的邮箱,邀请发出去后,讨论又回到邮件线程里。这个流程适合异步沟通,处理正在编辑的文档时会变慢。(00:51

Apple 在 iOS 16 和 macOS Ventura 中把 Messages 放进协作链路。用户可以直接把协作邀请发到已有对话,不需要再询问邮箱地址。对话还能切到 FaceTime,配合屏幕共享处理更复杂的讨论。(01:10

Session 用 Pages 食谱文档演示完整流程。用户点击工具栏里的分享按钮,在新的系统分享面板中选择“开始协作”,再把邀请发到名为 Cupcake Designers 的群聊。邀请发送后,Pages 工具栏出现群聊头像,表示这个文档已经和该 Messages 对话关联。(01:42

协作开始后,用户可以从文档里的协作按钮回到 Messages 对话,也可以从同一个弹窗发起 FaceTime 音频或视频通话。协作者编辑文档时,Messages 会显示来自协作 App 的通知横幅,用户点开横幅就能回到文档查看更新。(02:55

这场 session 的重点是设计规则:用系统分享面板发起协作,把协作按钮放到显眼位置,给协作弹窗保留清晰结构,并用 Messages 通知让参与者知道文档发生了什么变化。

详细内容

1. 用系统分享面板发起协作

04:38)用户已经熟悉系统分享面板。照片、网页、歌曲都通过它分享。协作也应沿用这个入口,减少学习成本。

新的分享面板允许用户选择两种分享方式:开始协作,或发送副本。如果 App 不支持发送副本,顶部的选择控件可以隐藏。权限摘要会显示在分享方式下方,例如“Everyone can make changes”。这段文字也是进入权限设置的入口。(05:32

分享按钮
  -> 系统分享面板
     -> 选择“开始协作”或“发送副本”
     -> 显示权限摘要
     -> 选择 Messages 对话
     -> 发送邀请

关键点:

  • 分享按钮:入口应放在用户容易找到的位置,工具栏是推荐位置。
  • 系统分享面板:保留系统熟悉的分享体验,也能获得对话建议。
  • 开始协作:用于发送协作邀请,适合多人共同编辑同一份内容。
  • 发送副本:用于发出静态文件,适合不需要共同编辑的场景。
  • 权限摘要:文案要短,避免在分享面板里被截断。

权限设置页也要保持简单。选项结构越复杂,用户越难快速判断谁能访问、谁能编辑。(06:04

2. 让 Messages 输入框成为最后确认点

06:38)协作邀请进入 Messages 输入框后,用户仍然可以调整分享方式和协作权限。这样做的好处是,用户不必回到分享面板重新开始。

拖拽文件到 Messages 对话也可以发起协作。这个动作很符合桌面用户习惯:把文件拖到对话里,确认权限,点击发送。(06:53

Messages 输入框
  -> 展示协作邀请
  -> 允许调整权限
  -> 点击发送
  -> 协作立即开始

关键点:

  • 展示协作邀请:用户在发送前能确认自己要分享的内容。
  • 允许调整权限:权限调整留在当前上下文,减少来回跳转。
  • 点击发送:发送按钮同时承担“发出消息”和“开始协作”的动作。
  • 协作立即开始:发送后,App 内应马上显示协作状态。

3. 把协作按钮放到分享按钮旁边

07:07)协作开始后,App 中会出现协作按钮。它是整个协作体验里最重要的 UI 元素之一。Apple 建议把它放在分享按钮旁边,让用户自然地从“分享”过渡到“管理协作”。

按钮外观来自协作发起方式。一对一 Messages 对话会显示接收人的头像;群聊有照片时显示群聊照片;群聊没有照片时使用系统提供的符号。(07:40

工具栏
  [分享按钮] [协作按钮]

协作按钮
  -> 一对一对话:显示联系人头像
  -> 群聊有照片:显示群聊照片
  -> 群聊无照片:显示系统符号

关键点:

  • [分享按钮] [协作按钮]:两个按钮相邻,降低用户寻找协作状态的成本。
  • 联系人头像:一对一协作中,头像直接提示对方是谁。
  • 群聊照片:群组协作中,群聊照片提示文档关联的对话。
  • 系统符号:没有群聊照片时,系统仍会提供稳定的默认表达。

4. 协作弹窗只放最关键的信息

08:07)协作弹窗分为三段。顶部显示协作者和沟通按钮,系统会从 Contacts 中找到对应头像。中间区域交给 App 自定义。底部是管理共享文件的入口。

Pages 在中间区域显示当前参与者和显示设置。Notes 显示最新活动和两个操作按钮。Reminders 与 Files 没有额外内容时,会把中间区域留空。Apple 的建议很直接:保持可扫读,不要塞入太多信息或太多按钮。(08:30

协作弹窗
  -> 顶部:协作者头像、Messages、FaceTime
  -> 中间:App 自定义的核心信息
  -> 底部:Manage Shared File

关键点:

  • 顶部:负责沟通入口和协作概览,帮助用户快速回到对话或发起通话。
  • 中间:只放当前 App 最需要的协作信息,例如活动列表或参与者列表。
  • 底部:进入协作管理页,处理添加成员、移除成员、修改设置。
  • Manage Shared File:按钮标签可以自定义,但功能应保持清晰。

如果 App 使用 CloudKit sharing,管理页由系统提供。如果 App 没有使用 CloudKit sharing,就需要提供自己的管理页。(09:28

5. 用 Messages 横幅通知协作变化

09:51)Messages 横幅让协作者在不打开文档的情况下知道新变化。系统提供多种横幅模板,例如 edits made、comments added、you were mentioned、files modified。

App 需要告诉 Messages 要显示哪类更新。Messages 会把更新放进正确的对话。如果多人在多个文档里产生大量更新,Messages 会把多个横幅合并成一个,减少对话里的噪音。用户点击横幅里的查看按钮后,再选择要打开的具体更新。(10:21

协作 App 产生更新
  -> 选择通知模板
  -> Messages 显示横幅
  -> 多条更新自动合并
  -> 用户点开并选择具体更新

关键点:

  • 产生更新:只把重要协作变化发到对话,避免打扰。
  • 通知模板:使用系统模板表达更新类型,保持 Messages 内的一致性。
  • 自动合并:多条横幅会被 Messages 合并,降低对话噪音。
  • 具体更新:用户从汇总视图进入某一条更新,回到对应文档上下文。

核心启发

  • 做什么:把协作入口收回到系统分享面板。 为什么值得做: 用户已经熟悉分享面板,系统还能给出常用 Messages 对话建议。 怎么开始: 先梳理 App 里所有“邀请别人一起编辑”的入口,改成从分享按钮进入协作流程。

  • 做什么:给协作状态一个固定的工具栏位置。 为什么值得做: 协作开始后,用户需要随时知道文档和哪个对话关联,以及谁正在参与。 怎么开始: 将协作按钮放在分享按钮旁边,按钮内容使用联系人头像、群聊照片或系统符号。

  • 做什么:为协作弹窗设计一个最小信息区。 为什么值得做: 协作弹窗是快速查看和沟通的地方,信息过多会拖慢判断。 怎么开始: 只选择一个核心模块放进中间区域,例如“当前在线参与者”或“最近三条活动”。

  • 做什么:把重要编辑事件送回 Messages。 为什么值得做: 协作者经常停留在对话里,横幅能让他们从对话直接回到发生变化的文档。 怎么开始: 先定义少量高价值事件,例如评论、提及、文件修改,再映射到 Messages 提供的横幅模板。

  • 做什么:支持从 Messages 拖拽发起协作。 为什么值得做: 桌面用户常用拖拽分享文件,拖到对话后再设置权限能减少流程中断。 怎么开始: 检查 App 的文档对象是否能进入系统分享流程,并保证权限摘要在 Messages 输入框中可读。

关联 Session

评论

GitHub Issues · utterances