スタイル

ウィジェットを効果的にスタイル設定することは、視覚的に魅力的で一貫したユーザー エクスペリエンスを実現するために重要です。このセクションでは、色とタイポグラフィを定義し、最も便利で魅力的な Android ウィジェットを作成するための重要なコンセプトと手法について詳しく説明します。

色を使用してスタイルを表現し、意味を伝える。ウィジェットの色に適切な色を設定することは、読みやすさ、パーソナライズ、そしてもちろんアプリのブランド アイデンティティを表現するために非常に重要です。

マテリアル カラーロールとトークンを使用して、ユーザー補助のコントラスト ガイドラインを遵守し、ユーザー生成の色やダークまたはライトのテーマなどのダイナミック カラー機能をサポートします。

詳しくは、マテリアル デザインのカラーに関するガイダンスをご覧ください。

ダイナミック テーマ

Android 12 以降のウィジェットでは、ボタン、背景、その他のコンポーネントにデバイスのテーマカラーを使用できます。これにより、さまざまなウィジェット、ホーム画面アイコン、壁紙の間で視覚的な一貫性が保たれ、Android ユーザーに一貫性のあるユーザー エクスペリエンスを提供できます。提供されたカラートークンを使用することで、さまざまなデバイス メーカーが提供するデバイステーマや、ユーザーが設定した動的テーマ全体でウィジェットが統一されたように見えるようになります。

図 1: カラートークンが呼び出されたウィジェットの画像。

ライトモードとダークモード

ダークモードとは、主に暗いサーフェス色を表示する低光量バージョンのデバイス UI です。バッテリー駆動時間を延ばし、より快適な視聴を実現するため、ダークモードに切り替えるユーザーが増えています。ウィジェットがダークモードに対応しないと、画面の色ずれしてユーザーの不満につながる可能性があります。

図 2: 左側の画面はライトモードで、右側はダークモードのウィジェット。

タイポグラフィ

タイポグラフィを使うと、文字が読みやすく、美しくなります。フォントサイズと太さを利用して明確な階層を確立し、ユーザーの視線を最も重要な要素に導くことができます。行間隔と文字間隔(カーニング)に注意して読みやすくし、特にウィジェットの限られたスペース内に小さなテキストを表示する場合は特に注意してください。

階層

階層は、フォントの太さ、サイズ、行の高さ、文字間隔の違いによって伝えられます。更新されたタイプスケールでは、テキスト スタイルが目的を説明する名前が付けられた 5 つのロールに整理されています。テキストスタイルはディスプレイ、見出し タイトル、サブタイトル、本文の 5 つです新しいロールはデバイスに依存しないため、さまざまなユースケースに簡単に適用できます。

図 3: さまざまなタイプのスケールの使用を示すウィジェット。