Design great widgets

ハイライト

iOS 14 では、ホーム画面とスマート スタックにウィジェットを直接配置できます。 Apple は、カレンダー、写真、天気、地図などのシステム ウィジェットを例として使用して、個人コンテンツ、情報コンテンツ、コンテキスト コンテンツを選択し、それを一目で判読できるインターフェイスに設計する方法を説明しています。

主要内容

ウィジェットがホーム画面に入ると、デザインの問題はさらに深刻になります。ウィジェットはもはやアプリの隣にある単なる補助的な入り口ではなく、ユーザーが毎日繰り返しスキャンする場所にアイコン、他のウィジェット、スマート スタックとともに表示されます。ホーム画面のスペースは限られており、ユーザーがそこに滞在する時間は短くなります。より多くのコントロールを詰め込んでも、自動的にエクスペリエンスが向上するわけではありません。

このセッションの開始点はコンテンツの選択です。Apple は新しいウィジェット システムがコンテンツ中心であることを繰り返し強調しています。開発者はまず質問に答える必要があります。ユーザーがアプリを繰り返し開くとき、最もすぐに知りたいことは何ですか?カレンダーでは次のイベントが表示され、写真では選択した思い出が表示され、天気では現在位置と今後の天気の変化が表示され、地図では駐車場所、ルート、または帰宅の時間が表示されます。

スマート スタックは、この質問をより具体的にします。システムはユーザーの行動とコンテキストに基づいてスタックの上部にあるウィジェットを自動的に切り替えます。そのため、ウィジェットは静的な概要のみを表示することはできません。朝、通勤、午後、夕方などのさまざまなシナリオで最も関連性の高い情報を提供する必要があります。その日のイベントがなくなった場合、カレンダーには明日のスケジュールが表示され、雨が降った場合の天気予報は 1 時間の天気予報の解像度を向上させます。

作成フェーズでは、サイズ、インタラクション、および視覚的なルールに焦点を当てます。小さなウィジェットにはタップ ターゲットが 1 つだけあり、現在表示されているコンテンツを指す必要があります。中サイズと大サイズには複数のタップ ターゲットを含めることができます。レイアウトを単純に小さく拡大することはできません。フォント、余白、色、プレースホルダー、明暗モードはすべて、システム ルールに従って処理する必要があります。

詳細

1. まず 3 つの原則を使用してコンテンツをフィルタリングします

(02:29) Apple が提供するアイデアの原則は、個人的、情報的、および状況に応じたものです。個人的では、ウィジェットをユーザーの既存のコンテンツに接続できます。情報として、ユーザーがアプリを繰り返し開く手順の数が削減されます。コンテキストに基づいて情報を適切なタイミングで表示できます。

キーポイント:

• カレンダーでは、次の会議の時間と場所が最初に表示され、優先度の低い情報が忙しいスケジュールに押し込まれます。
• 写真には、最近の写真だけでなく、過去の写真、思い出、コンテンツがより適切に選択されて表示されます。
• 天気には、都市、現在の気温、最高気温と最低気温、その日の天気予報が表示され、強風、雷雨、降雨の場合の特別な気象現象が強調表示されます。
• マップはまずユーザーのスペースを特定し、駐車場、スケジュール、帰宅ルートに基づいて次のステップの情報を表示します。

このセクションのデザイン チェックは簡単です。ウィジェットの状態によってユーザーがアプリをもう一度開く必要がない場合は、コンテンツを再選択する必要があります。

2. 構成はユーザーに任せ、すべてのエンティティを 1 つのレイアウトに詰め込まないでください。

(06:03) iOS 14 はウィジェットのユーザー編集をサポートしています。天気の例では、ユーザーは長押し後に編集状態に入り、表示場所を現在位置から東京に変更します。次に、別の天気ウィジェットを追加して、サンフランシスコに設定できます。

キーポイント:

• デフォルト設定が役立つはずです。天気予報はデフォルトで現在位置を使用するため、ユーザーは追加後に最初に設定を完了する必要はありません。
• 構成ポータルは、都市、リマインダー リスト、株式、メモ、世界時計などのエンティティの選択に適しています。
• マルチインスタンス機能により、複雑なレイアウトの負担が軽減されます。ユーザーは、すべての都市を同時にカバーするウィジェットを必要とせずに、2 つの都市の天気を並べて表示できます。
• 株式の例は、同じアプリ内で使用できる複数のウィジェットのアイデアを示しています。1 つはウォッチリストの概要を表示し、もう 1 つは個別の株式を追跡します。

構成可能なウィジェットを設計するときは、まずユーザーが個別に追跡する可能性が最も高いエンティティをリストし、次にそれらのエンティティを複数のウィジェットに分割するかどうかを決定します。

3. サイズに応じてインタラクション モデルを決定する

(08:56) 新しいウィジェット システムは、小、中、大の 3 つのサイズをサポートします。小サイズには、アプリ内で最も有用なコンテンツが含まれ、1 つのタップ ターゲットのみをサポートします。中および大は、より多くのコンテンツを表示し、複数のタップ ターゲットをサポートします。

キーポイント:

• 小さなカレンダーをクリックして日表示に入り、現在表示されているイベントの近くまでスクロールします。
• 小さなニュース クリックして、現在表示されているニュース記事を入力します。
• 中規模および大規模のニュースでは、各ニュースが独自のストーリー ページを指すことができます。
• システムには 3 つのタップ スタイルが用意されています。Fill は単一コンテンツのディープ リンクに適しており、Cell は独自のコンテナ形状を持つコンテンツに適しており、Content は独立したコンテナを持たないコンテンツに適しています。

インタラクションのデザインはコンテンツの細分性と一致している必要があります。小さなウィジェットのクリック ポイントは現在のものである必要があります。中および大は、異なる領域に異なるコンテンツを入力できるようにするのに適しています。

4. コンテンツと個性を融合させる

(10:44) クリスチャンは作成段階をコンテンツとパーソナリティに分割しました。コンテンツは「ユーザーがアプリを開いたときに何を探しているのか?」に答えます。パーソナリティは「このウィジェットはあなたのアプリとどのように似ていますか?」と答えます。

キーポイント:

• 天気はおなじみの天気の背景とアイコンを使用し、ニュースはニュース画像を使用し、カレンダーはシンプルなレイアウトと赤の色合いを使用します。
• メモ、ポッドキャスト、ヒントは、アプリ アイコンからイラストのスタイル、グラデーション、または色を抽出しますが、アプリ アイコン自体をウィジェットに含めません。
• 情報を段階的に追加する天気など、一部のレイアウトは小から中、大まで拡張できます。
• 一部のレイアウトは、サイズごとに再設計する必要があります。たとえば、ニュースでは 1 つのリッチ コンテンツを小で表示し、より多くのニュースを中で表示します。
• 小さいサイズには最大 4 つの情報を入れることをお勧めします。より大きなサイズにそれ以上の価値のある情報がない場合は、部分的なサイズのみがサポートされます。

ここでの焦点は情報階層です。小さなウィジェットを拡大しても、通常はギャップや繰り返しが生じるだけです。真に大きなウィジェットは、より大きなサイズでどのような情報が追加されるかを答える必要があります。

5. システムの視覚ルールで終了します

(12:55) Apple は、さまざまな一般的なレイアウト パターンを示し、余白、角丸、フォント、プレースホルダー、ブランドの露出について詳細な制約を与えています。

キーポイント:

• デフォルトのレイアウト余白は 16pt です。円と差し込みプラッターを含むグラフィック レイアウトでは 11pt を使用できます。
• ウィジェットの端に近い形状のコーナーは、ウィジェットの外枠と同心の丸いコーナーを維持する必要があります。セッションでは、SwiftUI が手書きの固定角半径を避けるために対応するコンテナーを提供していると述べました。
• フォントには SF Pro が推奨されますが、SF Mono および SF Pro Rounded も使用できます。カスタム フォントを一緒に配置する場合は、システム ウィジェットと調整する必要があります。
• ウィジェットはプレースホルダーを提供する必要があります。プレースホルダーは、実際のデータが置き換えられたときにレイアウトと色がジャンプしないように、基本的なグラフィックスとテキストのプレースホルダーを表示します。
• 複数のソースからコンテンツを集約するアプリを除き、ロゴの使用は推奨されません。ホーム画面の下部にすでにアプリのラベルがあるため、ワードマーク、アプリのアイコン、またはアプリ名を入力しないでください。
• ユーザーを誘導するための説明文を記述したり、時間情報を表示するために「最終更新」や「最終チェック」などの時間の説明を使用したりしないでください。

これらのルールは一貫性に対処します。ユーザーが複数のアプリのウィジェットを同じページに配置する場合、システムの余白、フォント、明るい色と暗い色、およびプレースホルダーによって、それらが全体のように見えるかどうかが決まります。

重要ポイント

1. 次のイベントウィジェット

やるべきこと: 次の予定の名前、時間、場所のみを表示する、カレンダー、コース、会議、または予定のアプリ用の小さなウィジェットを作成します。

実行する価値がある理由: カレンダーの例は、ユーザーが繰り返し確認する最も一般的なことは、「次の試合が何、何時、どこで行われるか」であることを示しています。この情報がホーム画面に表示された後、アプリを開いてスケジュールを確認する手順を保存できます。

開始方法: まず小さいサイズの状態を定義します。次のイベントがあるときにタイトル、時間、場所を表示します。その日にイベントがない場合は、明日の最初のものが表示されます。ドロップ ポイントをクリックして対応する日付ビューに入り、イベントの近くまでスクロールします。

2. 降雨や異常状態リマインダーウィジェット

やるべきこと: 例外が発生した場合の情報密度を高めるために、天気、交通、在庫、サービス ステータスなどのアプリ用のコンテキスト認識ウィジェットを作成します。

実行する価値がある理由: 天気サンプルでは、​​強風、雷雨、雨が発生した場合のイベントが強調表示され、雨が降っている場合は 1 時間先のより詳細な予報が表示されます。ウィジェットの価値は、データそのものだけではなく、タイミングからもたらされます。

開始方法: 正常状態と異常状態を異なる表示テンプレートに分割します。正常状態にはコア値が表示されます。異常状態には、イベントの種類、開始時刻、終了傾向、およびユーザーが次に知る必要がある変化が表示されます。

3. 複数の都市または複数のオブジェクトの追跡ウィジェット

機能: ユーザーが同じアプリに複数のウィジェットを追加し、各インスタンスが都市、株式、リスト、プロジェクト、またはメモを追跡できるようにします。

実行する価値がある理由: 天気と株価の例は、複数のインスタンスを構成することで複雑な大きなテーブルを置き換えることができることを示しています。ユーザーは、どのオブジェクトを並べて表示するかを自分で決定します。

開始方法: まずエンティティを小さいまたは中程度の明確なウィジェットに作成し、次に編集インターフェイス用のエンティティ選択リストを準備します。デフォルト値では、追加後に空の状態がユーザーに表示されないように、有用なコンテンツをすぐに表示できる必要があります。

4. 個人的な思い出または選択したコンテンツのウィジェット

やるべきこと: 写真、読書、音楽、メモアプリ用に選択したコンテンツ ウィジェットを作成し、ユーザーが戻りたくなる可能性が高いコンテンツを定期的に表示します。

実行する価値がある理由: 写真の例では、単にレイアウトを最新のコンテンツで埋めるのではなく、より良い写真、注目の写真、過去数年の思い出を選択します。パーソナライゼーションにはスクリーニングの品質が必要です。

開始方法: まず、お気に入り、再視聴回数、記念日、編集者のおすすめなど、「表示に値する」ランキング シグナルを定義します。プレースホルダーはレイアウトの骨格のみを保持し、実際のコンテンツが読み込まれたときに全体の構造は変更しません。

関連セッション

• WidgetKit について — WidgetKit の定義、タイムライン、プレースホルダー、更新戦略、ディープ チェーン モデルを理解します。
• ウィジェット用の SwiftUI ビューの構築 — SwiftUI を使用して、時間テキスト、プレースホルダー、およびさまざまなサイズを操作してウィジェット ビューを構築する方法を学びます。
• ウィジェットに構成とインテリジェンスを追加 - 構成インターフェイス、Siri の提案、スマート スタックの関連性、タイムリーな情報を詳しく調べます。
• ウィジェット コードと一緒に、パート 1: 冒険が始まります — スターター プロジェクトに従って、ウィジェット拡張機能、プロバイダー、およびベース タイムラインを最初から作成します。
• ウィジェット コードアロング、パート 2: 代替タイムライン — 複数のサイズ、構成、システム インテリジェンスに関連するタイムライン動作の継続的な実装。