忙しい人向けの Design great widgets: Part 2 - #WWDC20
Part 1 からの続き。
次に、作成について見ていく。
Sizes and Interactions
ウィジェットは、Small / Medium / Large の3つのサイズをサポートする。
Small は、アプリで最も役立つコンテンツが、実際にどれくらいで収まるかという制限でデザインした。
Small はシングルタップをサポートしており、アプリへの Deep Link が行える。例えば、カレンダーアプリでタップすると・・・
今日の直近のイベントまで移動する。
ニュースの場合は・・・
ニュースの詳細に移動する。
Medium / Large は似たような形状で、どちらも複数の位置をタップできるようになっている。
ニュースアプリでは、タップした記事の詳細画面が表示されることになる。
ウィジェットは3つの異なるタップスタイルがサポートされている。「Fill style」では全体がタップ領域になる。Small はこのタップスタイルしかサポートしていない。
「Cell style」は、ファイルウィジェットのようにコンテンツを選択する場合に有用。
「Content style」は、内容のないコンテンツを選択する時に有用。
Content and Personality
ウィジェットをデザインする際は、コンテンツ（Content）と個性（Personality）を一緒に考えることが大切
”人々は私のアプリを起動する時に、何を見つけようとしているのか？”を自問するとよい。
天気ウィジェットでは、おなじみの天気の背景やアイコンを利用している。
ニュースウィジェットでは、記事のイメージからインスピレーションを受けている。
カレンダーでは、シンプルな外観と馴染みのある赤からインスピレーションを受け、次のイベントを表示するようにした。
個性を見つけるもう一つの方法は、アプリのアイコンからインスピレーションを受けること。例えば、ノートではメモ帳のような外観になっている。
Podcast では、紫のグラデーションの背景になっており・・・
ヒントでは、黄色のグラデーション。
私達はウィジェット内のレイアウトを考える際に、2つのパターンがあることを見つけた。1つは天気アプリのように、3つのサイズにまたがって展開するレイアウトで、各サイズで追加の情報を表示する。
2つ目は、ニュースアプリのように各サイズ毎に独自のレイアウトを持つもの。Small ではリッチなコンテンツを表示することを優先し・・・
Medium 以上ではより多くのニュースを表示することを優先している。
単純に表示を拡大することはせずに・・・
各サイズで意味のある情報を表示するようにすること。これは Screen Time の例。なお、より大きいサイズで表示すべきものが無ければ、特定のサイズだけをサポートする形でも全く問題ない。
Small に含めるコンテンツは、最大で4つにすることを推奨する。
Patterns
私達がウィジェットをデザインする際、いくつかの共通的なレイアウトパターンがあることに気づいた。これらは最初の出発点として役立つはず。
他のウィジェットと並べて表示した時に違和感が無いように、16pt の余白サイズを利用すること。
円形のレイアウトの場合は 11pt。
シェイプの角の部分に関しては、外側のエッジと同心円状にすること。これは端末のサイズによって変化するが、SwiftUI には自動計算する仕組みが用意されている。
フォントは SF Pro などの San Francisco を利用すること。カスタムフォントを使用する場合、他のウィジェットとの親和性を考えること。
ウィジェットは Light / Dark モードの両方で、見栄えが良くなるようにすること。
ウィジェットはプレースホルダを提供する必要がある。テキストの部分をブロックで塗りつぶすような表示にすることで、
実際にデータが表示できるようになった段階で、スムーズに移行できる。
Tips
最後にいくつかの注意点を解説する。
アイコンは、異なるソースからのコンテンツの場合のみ利用し、必ずウィジェットの右上に表示すること。
アプリのアイコンを表示しないこと。
アプリ名も同様に表示しないこと。
ユーザに指示するような文章を表示しないこと。
”最終更新”といったラベルを含めないこと。
免責
・本記事は公開情報のみに基づいて作成されています。
・要約（意訳）のみなので、詳細はセッション動画をご確認ください。
関連記事
役に立った記事などありましたらサポート頂けると嬉しいです。