设计动态实时活动

♪ ♪

Mac Tyler： 欢迎来到 “设计动态实时活动”。 我是 Mac， 稍后我的同事 Chan 会加入， 今天，我们将介绍设计实时活动时 需要考虑的所有内容， 涵盖整个系统。 我们从锁屏开始， 然后简要介绍 Standby 功能， 最后， 由 Chan 深入介绍灵动岛。 我们讨论每项内容时， 会专注于该空间的独特考虑因素， 采用最佳设计调整方案。 在开始之前， 让我们更多地了解实时活动本身。 我们的目标是更好地适应一些 突破通知限制的现有体验， 并创建一个新系统， 让您以更强大和直观的方式 跟踪正在进行的活动。 实时活动使用丰富的图形布局 展示信息， 并以有趣、生动的方式实时更新。 体育赛事、打车服务、快递追踪 和实时健身等领域是一些 可以充分利用 这些新功能的典型示例。 但是，任何需要在几分钟到几小时内 进行跟踪的内容 都可以成为一个实时活动， 并且还有许多令人兴奋的新想法 可以探索。 我们开始吧。 在锁定屏幕上，实时活动和通知 一同位于列表顶部。 它们的外边距相同，均为 14 点， 即使使用不同的布局， 元素也可以在每一侧保持对齐 并在您扫视整个列表时 保持一致的视觉节奏。 在锁定屏幕上为您的实时活动 布局信息时， 重要的是 不要尝试复制通知布局本身。 相反，您需创建一个独特 且特定于所要显示信息的布局。 实时活动的主要优势之一是 图形布局丰富， 因此花时间做好这一步非常重要。 思考一下您认为最有用的信息， 并优先考虑这些元素的大小和比例， 以便界面一目了然。 除了显示名称和剩余时间， 计时器实时活动提供快速控制按钮， 用于暂停或取消计时器。 按钮是实时活动中 提供交互功能的理想方式， 但只有在 控制活动的关键部分时才会使用， 因为它们会占用 本可以显示有用信息的大量空间。 接下来， 我们谈谈实时活动的个性化。 设计图形布局时，考虑 App 中 可以使用的颜色、图像、 字体和其他属性。 目标和最佳结果是 让您的实时活动和 App 在视觉美感和个性化上保持一致。 从您的 App 图标中汲取灵感 往往是将实时活动设计与 App 关联起来的理想方法之一。 这里，TV 的实时活动和 App 图标的背景和前景色相同， 可以帮助将这两个设计联系在一起。 保持这种联系非常重要。 在浅色模式和深色模式之间 不要更改颜色， 这样做会破坏视觉关联。 在实时活动设计中加入鲜明的颜色 可以帮助创造独特的个性， 使其与其他活动有所区分。 您还可以根据显示内容更改颜色， 创建更具动态和吸引力的 可视化信息。

如果您使用 logo 标记 作为品牌的一部分， 请确保将它完全整合到布局中， 而不仅仅使用整个 App 图标。 在锁定屏幕上滑动移除实时活动时， 系统会利用实时活动提供的背景 和前景色 自动生成与之相匹配的关闭按钮。 请确保检查生成的按钮是否正确， 并提供与您的设计相匹配的颜色。 接下来，我们讨论如何在布局中 最有效地利用空间。 由于锁定屏幕可能同时显示 许多不同的信息， 例如音乐播放器、通知和实时活动， 因此确保您的布局尽可能紧凑， 以避免占用不必要的额外空间， 这十分重要。 通过调整元素大小和位置， 寻找减小设计高度的方法， 以便各元素更加配适，更加紧凑。 另一种有效利用空间的方法是， 根据要显示信息量的大小， 在不同时刻 动态调整实时活动的高度。 在该例子中，搜索空闲司机时， 并没有太多详细信息需要显示， 因此，乘车请求被接受后 布局可以保持紧凑， 然后随相关信息的出现 逐渐显示其余内容。 在该例子中，比赛进入中场休息时， 播报部分不再相关， 因此可以折叠， 比赛恢复后再次显示。 接下来是过渡效果。

在实时活动中， 不同时刻实时更新时， 除了改变布局的高度， 还可以对单独元素应用过渡效果。

使用数字内容过渡效果 逐渐增加或减少活动的 重要数字。 对于图形元素和文本的 淡入淡出动画， 请使用内容替换过渡效果。 这些是系统提供的默认过渡效果， 您也可以通过融合元素的比例、 不透明度和位置等不同动画 自己创建过渡效果。 在 Nearby Friends 示例中，随着地图的更新， 标记可以平滑地过渡到 它们的新位置。 通过更新动画元素的位置 活动可以有效地产生 更多视觉上的表现。 若您要对列表中的条目位置 进行动画处理，请避免元素重叠， 只对移动到新位置的单行 做动画效果， 并淡入淡出其他行。 接下来，我们讨论提醒功能。 当有需要用户留意的更新时， 实时活动会提醒通知用户。 提醒功能会点亮屏幕 并播放标准的通知声音， 以确保用户不会错过更新。 确保在此过渡期间 在布局中突出显示提示信息。 最后， 若您的实时活动已结束且不再相关， 请确保在短时间内将其 从锁定屏幕中移除， 因为如果停留太久， 每次都需手动移除， 可能会有点烦人。 接下来，让我们看看如何调整 Standby 的设计。 Standby 是一项新功能， 允许您将 iPhone 用作 环境信息显示屏。 您可以将它放在厨房台面、 办公桌或床边， 并选择想要显示的信息， 所以它非常适合用来展示实时活动。 在 Standby 功能下， 布局会被放大 200%， 最大化其尺寸， 同时避免将布局中的任何内容绘制 在设备的传感器区域下方。 如果在实时活动中使用了背景颜色， 系统会自动将该颜色 延伸填充到剩余空间中， 创建一个无缝全屏设计。 若您的实时活动中 有绘制到边缘的图形元素， 当背景延伸时，它们会被截断， 显示不完整。 考虑使用分割线或包含形状 将布局的不同区域分隔， 以避免出现该问题。 根据实时活动显示的信息， 您可能会考虑在 Standby 功能下完全去除背景， 并选择将布局与设备边框无缝融合， 以获得更柔和的视觉外观。 该设计的另一个好处是， 它不再需要考虑设备传感器的边距， 因此可以使您的布局 以稍大的比例显示。 您还可以在 Standby 功能下对实时活动进行其他调整， 但最重要的是要确保 您在设计中使用的所有资源和图像 具有足够高的分辨率， 以便在较大的尺寸下显示。 Standby 功能 还有优雅的夜间模式， 在低光环境下将显示屏过渡为 美丽的红色调。 您的实时活动将自动接受这种处理， 当该模式激活时， 值得检查 以确保颜色具有足够的对比度。 接下来，我们讨论灵动岛。 现在请 Chan 为大家详细介绍 相关内容。 Chan Karunamuni：谢谢 Mac。 灵动岛的创建是 为一天使用设备过程中 出现的各种提醒和活动指示 提供主屏幕界面。

它是硬件和软件的融合， 提供了一个独特的系统层， 可以在各种不同的提醒和指示之间 进行形态转换。 其主要目标是 关注手机后台正在进行的活动， 并为您提供快速交互方式。 灵动岛的各个元素设计颇具特色， 外观、触感和动画虽独具一格， 但仍相互关联。 通过为每个灵动岛设计 独特而充满活力的体验， 它们可以拥有独特的风格。 体验的多样性 帮助您在大脑中牢记每个灵动岛， 并减轻一眼分辨的认知负担。 这些灵动岛的性能和特质 也十分关键。 受生物形态和运动的启发， 灵动岛的设计 感觉就像生动的有机体， 有种从容不迫的韧劲， 与其所代表的硬件的固定性 形成有趣对比。 同样的原则也适用于您的 App。 要探讨这点， 这里有一个骑行 App 的示例。 活动正在此处进行， 当您离开 App 去其他界面时， App 会向上滑入灵动岛中。 该设计是为了让 App 感觉像真实地进入并占据那个空间。 它还延续了 App 的 字符和风格。 在这些例子中， 这些体验外观是为了感受 灵动岛与 App 一样 多样和丰富， 同时以一种独特的方式相互关联。 在这里使用动画和持续更新的数据 使其感觉更加生动。 同时，使用更圆润、厚实的形状， 以及大号、粗体的 易读文字也很有效， 此外，使用颜色传达应用的风格 也是不错的选择。 设计灵动岛时， 内容融合至关重要。 它对内置事物的形状和排列位置 非常敏感。 将对象和信息 和与其形状保持和谐的方式排列 这点非常重要。 内容在灵动岛中适配的关键是 与其形状保持中心相同 就是指圆形彼此嵌套， 并且四周间距平均。 确保将圆形放置在其中时 实现该目标， 以达到最佳适配效果。 这也适用于非圆形形状。 形状的视觉质量或质心 应与灵动岛的边界相吻合。 一个技巧是将对象模糊处理， 并确保最终的形状尽可能 与外边界保持同心。 这样可以将内容 放置在视觉上的良好位置， 让它在灵动岛内看起来尽可能舒适。 在放置对象或文本时，确保 在灵动岛的边界内保持同心的边距， 避免它们挤到角落， 并与侧壁保持适当距离， 避免产生视觉紧张。 您可以将内容向内推动 或使其容器变为圆形，要实现这点 请确保在整体形状内 获得和谐的适配。

分离出一块内容时， 不要将其绘制到容器边缘， 而是将内容放置在内嵌的形状内， 或者使用分隔线进行分隔。 灵动岛有三种不同的尺寸。 它可以水平扩展为紧凑视图， 也可以变为更大的扩展视图。 最后，还可以变为小巧的最小视图。 紧凑视图是最常见的视图。 该视图的目的是让人们在使用手机时 密切关注某个活动。

它不止是返回 App 的 静态链接， 更是为了提供信息， 传达活动的最重要内容。 同时，它应清晰地反映出 各种 App 的风格。 一个关键目标是 尽可能使胶囊容器更窄， 不浪费空间。 确保内容与传感器区域紧密贴合。 这样，灵动岛的宽度 不会超过必要的范围。 并且尽可能填充视图的空白区域。 请注意，左侧有一些空白区域。 需考虑截断或缩小单位， 或者无需展示精确的数据 以避免显示过宽或不平衡。

当您想同时显示 App 的 多个会话时， 考虑在它们之间进行切换， 让用户知道正在进行的活动。 如果您需要在会话期间 向用户发送事件通知， 而不是发送推送通知， 请尽可能地展开灵动岛， 呈现该信息。 值得注意的是，就像通知一样， 灵动岛悬浮在 App 的上方图层。 App 不应该绘制指向灵动岛 或与其交互的 UI。 接下来我们讨论扩展视图。

除了提醒的用途， 用户还可以按压灵动岛使其放大成为扩展视图， 查看更多信息，并访问基本控件。 此处尽量展示活动的核心内容， 不要过于简略或繁杂。 机会难得， 可以展现您的 App 特色， 让用户感觉 他们能够参透其中的活动。 同样重要的是 此处与灵动岛的视觉语言保持一致， 强调圆润、厚实的形状， 以及大量使用颜色创建独特风格。 给人一种在空间中 存在微小版本的 App 的感觉。

在布局扩展视图时， 尽量保持两个视图之间的相对位置。 这样可以增加它们之间的一致性。 扩展视图的高度根据需要而变化， 较高的视图可以容纳更多内容， 较短的胶囊式视图 可以实现更紧凑的显示。 您自己决定所需空间大小， 但要避免高度 正好处于它们之间的边缘位置。

在布局内容时，避免在顶部 出现“额头” ， 这会引起用户对传感器区域的注意。 相反，尽量紧密地贴合传感器， 将内容完全围绕在其周围。 这样可以几乎让传感器消失不见。 最后，灵动岛还有一个最小视图。 该视图在同时处理多个会话时显示。 在该视图中， 避免只显示 logo， 而是考虑如何让会话在微小状态下 继续传达信息。 正如我们今天讨论的， 灵动岛是一个独特的全新系统层， 您的 App 可以在其中运行。 在设计时，需要记住很多东西， 例如您的 App 风格 要与空间适配， 使其在展示独特性的同时 也能融入灵动岛的环境中。 还需要慎重考虑元素的配合和布局， 使其与灵动岛的圆形形状协调一致。 所有在灵动岛内构建的体验 可以被视为一种新型多任务处理和 与 App 交互的全新方式， 解锁前所未有的体验 和使用设备的方式。

期待看到您对其应用的创意和实践。 谢谢大家！