このドキュメントでは、Android プラットフォーム設定、GMS コア設定 (Google 設定) を設計しているすべての人、または Android アプリの設定を設計している開発者向けの原則とガイドラインを強調しています。
設計原則
概要を説明する
ユーザーは、設定画面を一目で確認し、個々の設定とその値をすべて理解できる必要があります。
図 1.設定とその現在の値がトップレベルの画面に表示されます
アイテムを直感的に整理
よく使う設定を画面上部に配置。 1 画面での設定数を制限します。 10 ～ 15 個を超えるアイテムを表示すると、圧倒される可能性があります。一部の設定を別の画面に移動して、直感的なメニューを作成します。
図 2.共通設定は画面の上部にあります
設定を見つけやすくする
場合によっては、2 つの異なる画面で個々の設定を複製すると便利な場合があります。さまざまな状況でユーザーが設定を変更する可能性があるため、複数の場所に設定を含めると、ユーザーがこの項目を見つけやすくなります。
設定を複製する場合は、設定用に別の画面を作成し、別の場所からのエントリ ポイントを用意します。
 |  |
図 3 & 4. 「通知」画面と「音」画面の両方に「デフォルトの通知音」が表示される
明確なタイトルとステータスを使用する
設定のタイトルは簡潔で意味のあるものにしてください。 「一般設定」のようなあいまいなタイトルは使用しないでください。タイトルの下にステータスを表示して、設定の値を強調表示します。タイトルを説明するだけでなく、具体的な詳細を表示します。
タイトルは次のようにする必要があります。
- ラベルの最も重要なテキストを最初に置きます。
- 「しない」や「絶対にしない」などの否定的な言葉を、「ブロックする」などの中立的な言葉に言い換えます。
- 「通知してください」の代わりに「通知」などの非個人的なラベルを使用します。例外: 設定を理解するためにユーザーに言及する必要がある場合は、一人称 (「私」) ではなく二人称 (「あなた」) を使用してください。
タイトルは避けるべきです:
- 設定、変更、編集、変更、管理、使用、選択、選択などの一般的な用語。
- セクション区切りまたはサブスクリーン タイトルからの単語の繰り返し。
- 技術用語。
ページの種類
設定一覧
これは、最も一般的なタイプのスクリーンです。複数の設定をまとめて配置できます。設定リストには、スイッチ、メニュー、スライダーなどのコントロールを組み合わせることができます。
1 つのカテゴリに多くの設定がある場合は、それらをグループ化できます。詳細については、グループ化と仕切りを参照してください。
図 5.設定リストの例
リストビュー
リスト ビューは、アプリ、アカウント、デバイスなどのアイテムのリストを表示するために使用されます。フィルタリングまたはソートするためのコントロールを画面に追加できます。
図 6.リスト ビューの例
エンティティ画面
エンティティ画面は、アプリ、アカウント、デバイス、Wi-Fi ネットワークなどの個別のアイテムの設定を表示するために使用されます。
視覚的には、エンティティはアイコン、タイトル、およびサブタイトルと共に上部に表示されます。この画面のすべての設定は、このエンティティに関連している必要があります。
図 7.アプリ情報で使用されるエンティティ画面の例
図 8. Storage で使用される Entity 画面の例
マスター設定
マスター設定は、Wi-Fi や Bluetooth など、機能全体をオンまたはオフにできる場合に最適です。画面上部のスイッチを使用することで、ユーザーはこの機能を簡単に制御できます。マスター設定を使用して機能を無効にすると、他のすべての関連設定が無効になります。
機能に長いテキスト説明が必要な場合は、マスター設定を使用できます。この画面タイプでは、フッター テキストを長くすることができます。
複数の画面から設定を複製またはリンクする必要がある場合は、マスター設定を使用します。マスター設定は別の画面であるため、同じ設定に対して別の場所に複数のスイッチを配置することは避けられます。
図 9.アプリ通知画面で使用されるマスター設定の例。マスター トグルをオフにすると、このアプリの機能全体がオフになります
図 10.マスター トグルがオフになっているアプリ通知画面で使用されるマスター設定の例
ラジオボタン選択画面
この画面は、ユーザーが設定の選択を行う必要がある場合に使用されます。ラジオ ボタンは、ダイアログまたは別の画面に表示できます。ラジオ ボタンは、スライダー、メニュー、またはスイッチと一緒に使用しないでください。
ラジオ ボタン画面には、上部に画像、下部にフッター テキストを含めることができます。個々のラジオ ボタンには、タイトルと共にサブテキストを含めることができます。
図 11.設定リストではラジオ ボタンを使用しないでください
図 12.設定でラジオ ボタンを正しく使用する方法
コンポーネント
ヘッダ
Android 8.0 以降では、アクション ツールバーに検索とヘルプが、他の関連するアクションと共に表示されます。ユーザーがこれらのメニューに隠されているアクションを発見できない可能性があるため、オーバーフロー メニューは推奨されません。
画面固有のアクションを持たないツールバー用。検索およびヘルプ アクションを表示します。
図 13.検索およびヘルプ アクションを含むツールバー
アクションが 1 つのツールバーの場合: 検索の前にアクションを表示します。
図 14.検索およびヘルプ アクションの前に 1 つのアクションがあるツールバー
複数のアクションがあるツールバーの場合: 検索の前にプライマリ アクションを配置し、オーバーフロー メニューに高度なアクションを配置することを検討してください。
すべてのアクションが高度な場合、または少数のユーザーにのみ役立つ場合は、すべてのアクションをオーバーフロー メニューに配置することを検討してください。
図 15.アクション用のオーバーフロー メニューを備えたツールバー
エンティティ ヘッダー
エンティティ ヘッダーには、見出しのみを表示することも、サブテキストを含む見出しを表示することもできます (サブテキストには複数の行を使用できます)。以下のアクションはオプションです。最大 2 つのアクションを実行できます。
図 16.エンティティ ヘッダー
アイコンと見出し (App1) の部分は、ヘッダー (アプリ情報) の下にスクロールされます。
図 17.アプリ情報のタイトルはツールバーの一部であり、画面の残りの部分はその下にスクロールされます
メニューリンク
タイトルは必須です。設定のステータスを強調するサブテキストも表示する必要があります。アイコンの使用はオプションです。
タイトル テキストは簡潔にするようにしてください。タイトルが長い場合、切り捨てられるのではなく、次の行に続くことができます。長押しでメニューやアクションを有効にしないでください。
例:
図 18.アイコン、タイトル、およびサブテキストを含むメニュー リンク
図 19.タイトルとサブテキストを含むメニュー リンク
図 20.タイトルのみのメニュー リンク
右側にアイコン、タイトル、サブテキスト、個別のヒット ターゲットを含むメニュー リンク
他のタップ ターゲットでは、テーマ カラーを使用する必要があります。
図 21. 2 タップ ターゲット メニューの例
アイコン、タイトル、サブテキスト、および統計/数値/アラート アイコンを含むメニュー リンク
パーセンテージや時間などの数値はサブテキストとともに右側に表示でき、棒グラフは下に表示できます。
通常、数値は右側に表示されるため、ユーザーは簡単に一目で比較できます。
図 22.アイコン、タイトル、統計、グラフを含むメニューの例
グループ化と仕切り
画面に多数の設定がある場合は、それらをグループ化して仕切りで区切ることができます。古い Android バージョンとは異なり、個々の設定を分離するのではなく、グループ内の設定をクラスター化するために仕切りが使用されるようになりました。
グループ内の設定が密接に関連している場合は、グループの見出しを追加できます。グループ見出しを使用する場合は、常に仕切りを含める必要があります。
図 23.仕切りでグループ化された設定
スイッチ
アイコン、タイトル、サブテキストで切り替える
図 24.アイコン、タイトル、およびサブテキストを使用した切り替え
タイトルとサブテキストで切り替える
図 25.タイトルとサブテキスト付きのスイッチ
タイトルのみで切り替える
タイトルには、左側のアイコンを付けることができます。
図 26.タイトルのみのスイッチ
リスト項目 + スイッチ
リスト項目とスイッチを組み合わせることができます。縦線の左側をタップすると、リンクのように機能し、ユーザーは次の画面に移動します。右側は標準のスイッチのように動作します。
左側のリスト アイテムの場合、タイトルは必須です。アイコンとサブテキストはオプションです。
図 27.リスト項目とスイッチ
スライダー
スライダーのアイコンはオプションです。
図 28.スライダー
オンスクリーンボタン
肯定的なアクションはテーマ カラーを使用し、否定的なアクションは灰色を使用します。ポジティブ アクションには、アプリを開く、アプリをインストールする、新しいアイテムを追加するなどが含まれます。ネガティブ アクションには、データを消去する、アプリをアンインストールする、アイテムを削除するなどがあります。
図 29. 「アンインストール」と「強制停止」の灰色のボタン
図 30. 「今すぐオンにする」の青いボタン
プログレッシブ開示 (上級)
頻繁に使用しない設定は非表示にする必要があります。非表示にするアイテムが 3 つ以上ある場合にのみ、[詳細] を使用します。
ここで、サブテキストには、非表示になっている設定のタイトルが表示されます。サブテキストは 1 行のみにする必要があります。追加のテキストは省略記号で切り捨てられます。
図 31. 「表示」画面で使用される詳細設定
ドロップダウンメニュー
ドロップダウン メニューも使用できますが、代わりにダイアログまたはラジオ ボタンの選択画面を使用するのが理想的です。単一選択には現在3つの異なるパターンがあるため、これは設定を簡素化するために推奨されます。
設定に単純なオプションがある場合は、必要に応じてドロップダウン メニューを使用できます。
図 32.ドロップダウン メニュー
チェックボックス
可能な場合は、チェックボックスを切り替えて使用してください。
チェックボックスは次のように使用できます。
- アプリの制限やサービスのブロックなどの否定的なアクション。
- 画面上にスイッチが多すぎないようにするため。
図 33.チェックボックスを使用して、この画面のスイッチの数を減らしています
リンク
設定でリンクを使用することはお勧めしません。絶対に必要な場合にのみリンクを使用してください。リンクは、下線のないアクセント カラーを使用する必要があります。
図 34.設定で使用されるリンク
フッター
フッター テキストを使用して、説明コンテンツを追加できます。フッターの上部には常に仕切りが必要です。フッターは画面の下部に表示されます。必要に応じて、フッターにリンクを含めることができます。
図 35.フッター テキスト
パターン
データ
重要なデータは、棒グラフや円グラフなどのグラフで表示できます。このデータは、エンティティ ヘッダーに表示できます。例には、モバイルデータとストレージが含まれます。
その他のそれほど重要でないデータは、通常のリスト ビューを使用して表示できます。
図 36.ストレージを示す例
図 37.ネットワークを示す例
ユーザー教育
一部の機能については、説明やユーザー教育が必要な場合があります。アニメーションや画像をテキストと共に使用できます。アニメーションまたは画像は画面の上部に表示し、フッター テキストを使用して説明を追加できます。
図 38.アニメーションとフッター テキストを使用した設定
フォーム
フォームに 1 つの入力フィールドがある場合は、通常のダイアログを使用します。これにより、ユーザーは単一の入力を簡単に入力できます。
ただし、フォームに複数のフィールドがある場合は、フルスクリーン ダイアログの使用を検討してください。これにより、フィールドを明確なパターンで配置するためのより多くの画面スペースが提供されます。
図 39.通常のダイアログを含むフォーム
の検索結果
検索結果には、タイトル、サブテキスト (利用可能な場合)、および設定のブレッドクラムの場所が表示されます。
図 40.検索結果