ハイライト
ライブ アクティビティを使用すると、アプリはロック画面、スタンバイ、スマート アイランドにリアルタイムの情報を表示できます。 Apple は、ユーザーがアプリを終了した後でも進行中のタスクを追跡できるようにすることを中心的な目標として、シナリオごとに独自の設計仕様を提供しています。
主要内容
ロック画面: グラフィカルなレイアウト、重要な情報が一目でわかる
これまでは、テイクアウトの進行状況やゲームのスコアを確認したいユーザーは、携帯電話のロックを解除し、アプリを見つけて開いて表示する必要がありました。ロック画面の通知には静的な情報しか表示できず、更新中にセクション全体が置き換えられるため、エクスペリエンスが硬くなります。
ライブ アクティビティでは、このプロセスが変わります。ロック画面の通知リストの一番上に表示され、豊富なグラフィック レイアウトでリアルタイム データが表示され、コンテンツはシームレスに更新されます。
(01:18) ロック画面のライブ アクティビティでは、通知に合わせて 14 ポイントのマージンが使用されます。ただし、デザインするときは、通知レイアウトをコピーしないでください。表示される情報に固有の独自のレイアウトを作成します。
(01:55) ユーザーが最も必要とする情報は何かを考え、これらの要素を強化することを優先します。タイマーのライブ アクティビティには、名前と残り時間の表示に加えて、一時停止ボタンとキャンセル ボタンもあります。ただし、ボタンは情報を表示するためのスペースを占有するため、アクティビティ自体の中核となるアクションを制御する目的でのみ使用してください。
ブランド パーソナリティ: アプリ アイコンからのビジュアル アイデンティティの継続
(02:27) ライブ アクティビティは、アプリケーションと同じ視覚的個性を共有する必要があります。アプリのアイコンから色とフォントのプロパティを抽出するのが最も簡単な方法です。 TV アプリのライブ アクティビティでは、アプリのアイコンと同じ背景色と前景色が使用されます。
視覚的な関連性が損なわれるため、明るいモードと暗いモードの間で色を変更しないでください。大胆な色を使用してライブ アクティビティを目立たせるか、コンテンツに基づいて色を動的に変更します。
ブランド ロゴを使用する場合は、アプリ アイコン全体を直接使用するのではなく、レイアウト自体にロゴを組み込んでください。
スペース効率: 高さを動的に調整
(03:44) ロック画面には音楽プレーヤー、通知、ライブ アクティビティが同時に表示される場合があるため、レイアウトはできるだけコンパクトにする必要があります。要素のサイズと位置を変更して、より適切に収まるようにします。
(04:05) より高度なアプローチは、高さを動的に変更することです。タクシー アプリはドライバーを待っているときの情報が少なく、レイアウトがコンパクトに保たれています。ドライバーが注文を受けると、展開して詳細情報が表示されます。ゲームがハーフタイムに入ると、クォーターごとのスコアエリアを格納できます。
トランジションアニメーション: 更新をより鮮明にします。
(04:38) 状態が変化するときに高さを調整することに加えて、単一の要素に遷移アニメーションを適用することもできます。
- デジタル変更の場合
numericContentTransition- グラフィックとテキストの置換contentReplace移行 - スケール、不透明度、位置アニメーションの組み合わせをカスタマイズすることもできます
(05:06)近くの友達の例では、マップ上のマーカーは新しい場所にスムーズに移行します。リスト内の項目を移動すると、移動中の行のみがアニメーション化され、他の行は重ならないようにフェードインまたはフェードアウトします。
注意事項と終了
(05:33) ユーザーに重要なアップデートを通知する必要がある場合は、アラート機能を使用します。これにより、画面が点灯し、通知音が鳴ります。リマインダーをトリガーする情報は、レイアウト内で強調表示される必要があります。
(05:49) アクティビティが終了したら時間内に削除する必要があります。また、ロック画面に長時間表示したままにしないでください。そうしないと、ユーザーは毎回手動で閉じる必要があります。
StandBy: 環境情報表示
(06:04) StandBy は iOS 17 の新機能で、iPhone を横置きすると環境情報ディスプレイに変わります。ここではライブ アクティビティが 200% に拡大され、背景色が自動的に全画面に拡大されます。
(06:35) レイアウトにウェルト要素がある場合、それらはズームイン後にセンサー領域によって切り取られます。異なる領域を分離するには、ディバイダーまたはコンテナ形状を使用することをお勧めします。背景色を完全に削除して、レイアウトをデバイスのフレームに溶け込ませて、より大きな表示領域を確保することもできます。
(07:22) StandBy には夜間モードがあり、暗い環境ではディスプレイが赤色に変わります。 Live Activity は自動的に適応しますが、色のコントラストが十分であるかどうかを確認します。
スマート アイランド: 3 つのデザイン形式
(07:42) スマート アイランドは、ソフトウェアとハードウェアを統合し、異なる形式間で有機的に変換できるシステム層です。そのデザインは生物学的な形態と動きからインスピレーションを得ており、弾力性があり生き生きとしたものになっています。
コンパクトビュー
(11:09) 最も一般的な形式。目標は、ユーザーが携帯電話の使用中にバックグラウンドのアクティビティを監視できるようにすることです。コンテンツは、スペースを無駄にすることなくセンサー領域にぴったりと収まる必要があります。左側の空白を避けて、ビュー全体を埋めるようにしてください。複数のセッションを表示する必要がある場合は、交互に表示できます。
(12:18) ユーザーに通知する必要がある場合は、プッシュ通知を送信するのではなく、スマート アイランドの拡張を優先します。
拡大表示
(12:41) ユーザーはスマート アイランドを長押しして入力します。より多くの情報を表示し、中核となる制御を提供します。多すぎず、少なすぎず、アクティビティの本質を捉えます。要素の相対位置をコンパクトとエキスパンド間で一貫して保ちます。
(13:39) レイアウトするときは、センサー領域を強調するために上部に「額」を残さないようにしてください。センサーにぴったりとフィットし、内容物がセンサーを囲んでセンサーがほとんど見えなくなるようにする必要があります。
最小限のビュー
(13:53) 同時に複数のセッションが存在する場合に表示されます。ロゴを使用するだけではなく、この小さなスペースでメッセージを伝え続ける方法を見つけてください。
同心円レイアウトの原理
(09:52) スマート アイランドは、内部要素の形状と位置に敏感です。丸い要素は島の形状と同心であり、均等なマージンを維持する必要があります。非円形要素の視覚的な重心も、スマート アイランド内に快適に埋め込まれる必要があります。
ヒント: オブジェクトをぼかし、結果の形状が外側の境界ボックスとできるだけ同心であるかどうかを確認してください。これにより、コンテンツが視覚的に最も快適な位置に配置されます。
(10:35) コンテンツを配置するときは、角を突かないようにスマート アイランドの端と同心円の余白を維持してください。内容物を内側に押し込んだり、容器の角を丸くすることができます。
詳細
ロック画面レイアウトのポイント
(01:23) ライブ アクティビティは、通知に合わせてロック画面に 14 ポイントのマージンを使用します。レイアウトは異なりますが、要素を両側に揃えることで、一貫した視覚的なリズムを維持できます。
主要な設計原則:
- グラフィカルなレイアウトはテキストリストよりも優れています
- 最も重要な情報を優先する
- ボタンは主要な操作にのみ使用されます
- 情報量に合わせて高さを動的に調整します
色とブランド
(03:24) Live Activity によって提供される背景色と前景色は、システムによって閉じるボタンを生成するために使用されます。生成されたボタンが正しく見えることを確認してください。
// ActivityAttributes 中配置颜色
struct DeliveryAttributes: ActivityAttributes {
public struct ContentState: Codable, Hashable {
var status: String
var eta: Date
}
var orderId: String
var restaurantName: String
}
// 在 ActivityConfiguration 中设置外观
ActivityConfiguration(for: DeliveryAttributes.self) { context in
LockScreenLiveActivityView(context: context)
} dynamicIsland: { context in
DynamicIsland {
// Compact leading
DynamicIslandExpandedRegion(.leading) {
// 内容紧贴传感器
}
// Compact trailing
DynamicIslandExpandedRegion(.trailing) {
// 核心信息
}
// Expanded
DynamicIslandExpandedRegion(.center) {
// 完整布局
}
} compactLeading: {
// 最小化 leading
} compactTrailing: {
// 最小化 trailing
} minimal: {
// 最小视图
}
}重要なポイント:
-ActivityConfigurationライブ アクティビティの外観を定義する
-dynamicIsland3つのクロージャ構成スマートアイランド
-DynamicIslandExpandedRegion展開ビューのゾーニングを定義する
-compactLeading/compactTrailingコンパクトフォームの左側と右側のコンテンツを定義します
-minimal複数のセッションを定義する場合の最小限のビュー
トランジションアニメーションの実装
(04:47) システムはデフォルトのトランジション効果を提供します。
// 数字过渡
text("\(remainingTime)")
.contentTransition(.numericText(countsDown: true))
// 内容替换过渡
text(status)
.contentTransition(.identity)
.transition(.push(from: .bottom))重要なポイント:
-.numericText(countsDown:)タイマーのように数字をカウントダウンさせる
-.identity協力する.transitionカスタマイズ可能な置換アニメーション
- リスト項目を移動すると、対象の項目のみがアニメーションし、他の項目はフェードインまたはフェードアウトします。
スタンバイ適応
(06:18) StandBy のライブ アクティビティは 200% 拡大され、背景色も自動的に拡大されます。次の点に注意する必要があります。
- ウェルト要素は切り取られます。ディバイダーまたはコンテナを使用してください
- 背景を削除して表示領域を大きくします
- すべてのマテリアルは十分に高い解像度である必要があります
- ナイトモードでのコントラストを確認する（赤み）
重要ポイント
テイクアウト/デリバリー アプリにリアルタイム追跡を追加
- やるべきこと: ユーザーが注文すると、配送の進行状況がロック画面とスマートアイランドにリアルタイムで表示されます。
- 実行する価値がある理由: ユーザーはアプリを表示するために繰り返し開く必要がなく、エクスペリエンスがよりスムーズになります。
- 開始方法: を使用します
ActivityKit作成するActivityAttributes、注文確認時に呼び出されますrequest(attributes:contentState:pushType:)
スポーツ/フィットネス アプリケーション向けに設計されたライブ アクティビティ
- 何をすべきか: ランニングまたはサイクリング中に、スマート アイランドにリアルタイムのペース、心拍数、距離を表示します。
- 価値がある理由: ユーザーは他のアプリを使用しながら運動データを追跡できます
- 開始方法:
ActivityConfigurationコンパクトビューと拡張ビューを構成するnumericTextトランジションアニメーション更新データ
イベント アプリケーションのスコア追跡を作成
- やるべきこと: ゲーム中、ロック画面とスマート アイランドでスコアと主要なイベントがリアルタイムで更新されます。
- 価値がある理由: ユーザーは試合の進行状況を見逃さずに他のことができる
- 開始方法: ライブ アクティビティの高さを動的に調整します。通常の試合中は展開して詳細データを表示し、ハーフタイム中に折りたたむことができます。
タクシー配車アプリケーションのステータス フローの設計
- やるべきこと: 配車依頼から到着まで、スマートアイランドでは各段階で異なる情報や操作が表示されます。
- 実行する価値がある理由: ユーザーはさまざまな段階でさまざまな情報に注目するため、レイアウトを動的に調整する方が効率的です。
- 開始方法: 複数の定義
ContentState、ステータスが変化すると更新されますActivityのcontentState,協力するcontentReplaceトランジションアニメーション
関連セッション
- ActivityKit の紹介 — ActivityKit フレームワークの技術実装の詳細
- Spotlight のショートカットのデザイン — ショートカット操作とライブ アクティビティの共同設計
- 優れたロック画面エクスペリエンスを構築する — ロック画面ウィジェットとライブ アクティビティの全体的なデザイン
コメント
GitHub Issues · utterances