大画面向けに最適化
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Tier 2 - 大小のディスプレイ向けにアプリを準備するための、大画面のアプリの品質に関するガイドライン。
大画面向けに最適化されたアプリは、大画面デバイスの大画面を活用して、生産性が高く魅力的なユーザー エクスペリエンスを実現します。
最適化されたアプリには、縦向きと横向き、マルチ ウィンドウ モード、デバイスの折りたたみ状態と展開状態に対応するレスポンシブ / アダプティブ レイアウトが導入されています。ナビゲーション レールとドロワーは、最適なユーザー エクスペリエンスを実現するために、ボタン、テキスト フィールド、ダイアログなどの要素を動的にフォーマットして配置するユーザー インターフェースを強化します。
大画面向けに最適化されたアプリは、キーボード ナビゲーション、キーボード ショートカット、マウスとトラックパッドのズーム、「右クリック」、ホバー動作をサポートしています。
推奨事項と非推奨事項
- 2 ペイン レイアウトを作成する
- グリッド レイアウトと列レイアウトを使用する
- ナビゲーション バーをナビゲーション レールとドロワーに置き換える
- 従来のマルチアクティビティ アプリにアクティビティの埋め込みを使用する
- キーボード、マウス、トラックパッドの高度な機能をサポートする
- 余分なスペースを埋めるために UI 要素(テキスト フィールド、ボタン、ダイアログ)を拡大する
- 画像の拡大や切り抜きを行う
- パネルまたはシートを全幅にする
ガイドライン
Tier 2 のガイドラインに沿って、アプリを大画面向けに最適化します。
レスポンシブ / アダプティブ レイアウトで最適なユーザー エクスペリエンスを実現し、あらゆる種類のデバイスであらゆるサイズの画面をサポートします。
ガイドライン LS-U1~LS-U4
内容
アプリのレイアウトは大画面のサイズに合わせます。アプリ UI には以下が含まれます。
- 最先端のナビゲーション レールとドロワー
- ウィンドウ サイズの変化に対応するグリッド レイアウト
- 列レイアウト
- 大画面でデフォルトで開く後端パネル
2 ペイン レイアウトは、大画面のスペースを利用しています。マルチアクティビティ アプリは、アクティビティの埋め込みを実装して、アクティビティを並べて表示するマルチペイン レイアウトを作成します。
タップ ターゲットは大きく、到達可能です。インタラクティブなドローアブルはフォーカス可能です。
理由
大画面デバイスには、タブレット、折りたたみ式デバイス、ChromeOS デバイスなど、さまざまなフォーム ファクタがあります。表示サイズはさまざまです。デバイスは多くの場合、横向きで使用されます。
アプリのユーザビリティとユーザーの満足度を高めるために、外部ハードウェア入力デバイスをサポートします。
ガイドライン LS-I3~LS-I9
内容
キーボード、マウス、トラックパッドによる入力のサポートが強化されます。マウスとトラックパッドの右クリック(セカンダリ マウスボタンまたはセカンダリ タップ)操作でオプション メニューにアクセスできます。マウスのスクロール ホイールとトラックパッドのピンチ操作を使用してアプリ コンテンツをズームできます。UI 要素にホバー状態があります。
理由
多くの場合、キーボード、マウス、トラックパッドなどの周辺機器は大画面デバイスに接続されています。ChromeOS デバイスには通常、キーボードとトラックパッドが組み込まれています。ユーザーは、キーボード ショートカット、複数のマウスボタン、マウスのスクロール ホイール、トラックパッドのジェスチャーに慣れています。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2024-06-27 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2024-06-27 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-06-27 UTC。"]]