Android の設計は、さまざまな独自の側面とデバイスを対象としており、ブレークポイントだけでは十分ではありません。ユーザーは、デバイス上のアプリ ウィンドウを調整して向きを変更できます。折りたたみ式デバイスを使用すると、1 つのデバイスでこれらのユースケースすべてに対応できます。コンテンツの適応性を考慮して、ペインで考えることが重要です。
画面の向きの変更
アプリを縦向きにロックしないでください。ロックするとバグのように見えることがあり、マルチタスク時に不要なレターボックスが表示されます。
ユーザーは、操作性やコンテンツの表示のためにデバイスの向きを変更することがよくあります。アプリは、これらの画面の向きの変更をサポートする必要があります。
大型デバイスでは、中サイズから大サイズに移行する際に縦向きと横向きの効果が微妙に変化しますが、横向きにすると、縦向きのコンパクトなビューで中サイズのウィンドウが表示されます。
横向きの設計では、次の点を考慮してください。
エッジ ツー エッジのシステムバーをサポートします。
水平ナビゲーション バーやナビゲーション レールなど、コンテンツを最適にサポートするナビゲーション コンポーネントを決定します。
コンテンツのリフローや密度の変更を検討します。
横向きのレイアウトでは、中程度の幅の UI を使用できます。
横向きの画面の向きは、横向きのボトム ナビゲーション バーの高さが低くなることを活用できます。
コンテンツについては、コンテナを使用してコンテンツをレターボックス表示するか、横向きの動画ではなく縦向きの動画など、利用可能な場合は別のコンテンツの向きを使用してください。コンパクトな縦向きの全幅コンテンツは、大きな横向きのレイアウトでは画面の大部分を占めます。縦向きでコンテンツがスクロールしない場合は、横向きでもスクロールしないようにしてください。ユーザーが混乱する可能性があります。
ヒーロー画像は目立つスペースに固定されます。ボトム アプリバーはドッキング解除されます。
縦向きから横向きにすると、両方のコンテナ グループがその場で回転します。
フィルタシートの場合、シート コンポーネントをサイドシートに変更できます。より注意が必要な場合は、シートは全画面表示のままですが、2 列レイアウトに適応します。
ポスチャー
折りたたみ式デバイスのポスチャー（折りたたみ、フラット、テーブルトップ）など、独自のフォーム ファクタのユースケースを考慮します。
アプリで特定のポスチャーを考慮する必要はありませんが、アプリでポスチャーを活用することを検討してください。たとえば、メディア プレーヤーでは、独自のテーブルトップ UI とカバー UI を表示できます。
フラット
折りたたみ式デバイスを開くと、フラット ポスチャーになります。通常、画面は中サイズまたは大サイズのクラスです。
折りたたんだ状態
折りたたみ式デバイスを閉じると、折りたたんだ状態になります。このポスチャーでは、通常はコンパクトな外側の画面を操作します。
テーブルトップ
テーブルトップ ポスチャーは、水平位置で部分的に折りたたまれています。このポスチャーでは、大きなコントロールや横向き動画など、独自のレイアウトを使用できます。
ヒンジ
アプリをヒンジ対応にすると、コンテンツがスムーズに流れ、ヒンジで失われることがなくなります。シングルペイン レイアウトでは必要ない場合があります。ただし、コントロールとテキストがヒンジ スペースを避ける必要があるかどうかを検討してください。
レイアウト グリッドとペインを使用して設計する場合は、2 ペインのリストと詳細のレイアウトなど、ヒンジに対応できるようにガターを広くします。
折りたたみ式デバイスの中には、3 つ折りなど、複数のヒンジを備えたものもあります。
カバー
折りたたみ式スマートフォンの中には、折りたたみ式スマートフォンと同様に、正方形のアスペクト比の外側のカバー画面を備えたものもあります。
カバー画面を設計する場合は、次のガイドラインに従ってください。
- アプリがエッジ ツー エッジであることを確認します。
- UI 要素がカメラの切り欠きで覆われていないことを確認します。
- ユースケースと UI に焦点を当てます。
たとえば、デバイスをメディア プレーヤーとしてのみ使用する場合、カバーアートを背景にして、必要な情報が少ないクイック ビューを表示できます。
画面やアスペクト比が小さい場合は、フォーカスされたコンテンツのエクスペリエンスを考慮してください。ヒーロー画像は、視覚的な魅力を高めるためにカバーの大部分を占め、スクロールと判読性を高めるためにタイトルとコンテンツを簡単に確認できます。
カバーは入力に重点を置く必要があります。たとえば、キーボードが表示されると、メッセージが主な焦点になります。
カバーなどの小さな画面では、フィルタシートは全画面表示されますが、ボタンの配置とスケーリングは適応します。
コンパクトですが、カバー画面ではナビゲーション レールの方が操作しやすい場合があります。
大きなカバーでは、どちらのナビゲーションの向きも活用できます。ユーザーがコンテンツを操作する方法を検討してください。
小さなナビゲーション レールを使用すると、高さが縮小されていても、システム UI とカメラの切り欠きを回避できます。
すべきこと
