スタイル

ウィジェットの効果的なスタイル設定は、視覚的にアピールし、 一貫したユーザーエクスペリエンスを提供できます。このセクションでは、Chronicle SOAR の主なコンセプトと 色とタイポグラフィを定義して、 魅力的な Android ウィジェットです。

色

色を使ってスタイルを表現し、意味を伝えます。適切な色を設定する 見やすく パーソナライズし アプリのブランド アイデンティティを表現するためのコースです。

マテリアル カラーのロールとトークンを使用してユーザー補助のコントラストのガイドラインを満たす ダイナミック カラー機能（ユーザー生成カラーやダークカラー、 カスタマイズします。

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

動的なテーマ

Android 12 以降のウィジェットでは、ボタン、ボタン、ボタン、ボタンにデバイスのテーマカラーを レンダリングできます。これにより、サービス全体にわたって さまざまなウィジェット、ホーム画面のアイコン、壁紙を用意しており、 よりまとまりのあるユーザーエクスペリエンスを実現しますカラートークンを使用すると、 ウィジェットはさまざまなデバイスで提供されるデバイスのテーマにまたがって統合されます メーカー、ユーザーが設定した動的なテーマが含まれます。

<ph type="x-smartling-placeholder">
</ph>
図 1: 色のトークンが強調表示されたウィジェットの画像。

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

ダークモードは、デバイス UI のローライト バージョンで、ほとんどが暗く表示されます。 サーフェス カラーインターネットをより快適に利用するため、ダークモードに切り替えるユーザーが増えている 快適さを追求し続けていますウィジェットがダークモードに適応しない場合は、 不適切に表示されるので ユーザーをフラストレーションさせる可能性があります

<ph type="x-smartling-placeholder">
</ph>
図 2: 左の画面はライトモード、右は暗い色のウィジェット。

タイポグラフィ

タイポグラフィにより、文字が読みやすく美しくなります。フォントサイズや 重みを使用して明確な階層を構築し、ユーザーの目を 重要な要素です。行間隔と文字間隔に注意する（カーニング） 特にスペース内に小さな文字を表示するときに、読みやすくします。 制限されたスペースです。

階層

階層は、フォントの太さ、サイズ、行の高さ、 調整できます新しいタイプスケールでテキスト スタイルを 5 つのロールに整理 それぞれ目的を表す名前が付けられています5 つのテキスト スタイルは、ディスプレイ、 見出し、タイトル、サブタイトル、本文です新しいロールはデバイスに依存しないため、 簡単に適用できます

<ph type="x-smartling-placeholder">
</ph>
図 3: さまざまなタイプスケールの使用を示すウィジェット。