折りたたみ式デバイスの形状と向き

Android の設計は、折りたたみ式デバイスなど、さまざまな独自の側面やデバイスを対象としています。ブレークポイントだけでは十分ではありません。ユーザーは、デバイスでアプリ ウィンドウの調整や向きの変更を行うことができます。折りたたみ式デバイスでは、1 つのデバイスでこれらのユースケースをすべてカバーできます。コンテンツの適応性を考慮するうえで、ペインで考えることが重要です。

画面の向きの変更

アプリを縦向きにロックしないでください。この場合、バグのように見え、マルチタスク時に望ましくないレターボックスが表示されます。

ユーザーは、人間工学やコンテンツの閲覧のためにデバイスの向きを変えることがよくあります。アプリは、これらの画面の向きの変更に対応する必要があります。

大型デバイスでは、縦向きと横向きの切り替えによる効果は、中サイズから大サイズに移行するにつれて微妙になりますが、横向きでは、コンパクトな縦向きビューで中サイズのウィンドウが表示されます。

横向きの設計では、次の設計方法を検討してください。

  • エッジ ツー エッジのシステムバーをサポートします。

  • コンテンツを最もよくサポートするナビゲーション コンポーネント(水平ナビゲーション バーやナビゲーション レールなど)を決定します。

  • コンテンツのリフローや密度の変更を検討してください。

横向きレイアウトでは、中幅の UI を使用できます。

横向きのナビゲーション オプション。

横向きの画面の向きでは、横向きのボトム ナビゲーション バーの高さが低くなることを利用できます。

横向きの全画面コンテンツ

コンテンツについては、コンテナを使用してコンテンツをレターボックス表示するか、縦型動画など、利用可能な場合はコンテンツの向きを変更してみてください。コンパクトな縦向きの全幅コンテンツは、横向きの大きなレイアウトでは画面の大部分を占めます。コンテンツが縦向きでスクロールしない場合は、横向きでスクロールするようにしないでください。ユーザーが混乱する可能性があります。

横向きでのコンテンツのリフロー

ヒーロー画像は目立つスペースに表示され、固定されます。ボトム アプリバーがドッキング解除されます。

横向きでのコンテンツのリフロー

縦向きから横向き: 両方のコンテナ グループがその場で回転します。

レイアウトの変更とコンポーネントの変更

フィルタ シートの場合、シート コンポーネントはサイドシートに変更できます。さらに注意が必要な場合は、シートは全画面表示のままですが、2 列レイアウトに調整されます。

ポスチャー

折りたたみ姿勢(折りたたみ、フラット、卓上)など、ユニークなフォーム ファクタのユースケースを考慮します。

詳しくは、折りたたみ式デバイスのディスプレイをサポートするをご覧ください。

レイアウトの変更とコンポーネントの変更

アプリで各姿勢を個別に考慮する必要はありませんが、アプリで姿勢を活用することを検討してください。たとえば、メディア プレーヤーでは、独自の卓上 UI とカバー UI を表示できます。

フラット

折りたたみ式デバイスは、開いたときに平らな姿勢になります。通常、画面は中または大クラスのサイズです。

レイアウトの変更とコンポーネントの変更

折りたたんだ状態

折りたたみ式デバイスが閉じているときは、折りたたまれた姿勢になります。この姿勢では、通常はコンパクトな外側の画面を操作します。

レイアウトの変更とコンポーネントの変更

テーブルトップ

テーブルトップ形状は、水平方向に部分的に折りたたまれています。この姿勢では、大きなコントロールや横向きの動画など、独自のレイアウトを使用できます。

レイアウトの変更とコンポーネントの変更

ヒンジ

アプリをヒンジ対応にして、コンテンツがスムーズに流れ、ヒンジに隠れないようにします。シングルペイン レイアウトでは必要ない場合があります。ただし、コントロールとテキストがヒンジ スペースを避けるべきかどうかを検討してください。

レイアウトの変更とコンポーネントの変更

レイアウト グリッドとペインを使用して設計する場合は、2 ペインのリストと詳細のレイアウトのように、ヒンジに対応するためにガターを広めに設定します。

三つ折りなどの折りたたみ式デバイスには、複数のヒンジがあります。

カバー

一部の折りたたみ式スマートフォンでは、折りたたみ式スマートフォンのように、正方形のアスペクト比のカバー画面を備えていることがあります。

カバー画面向けに設計する際は、次のガイドラインに従ってください。

  • アプリがエッジ ツー エッジであることを確認します。
  • UI 要素がカメラの切り抜きで隠れないようにします。
  • ユースケースと UI に焦点を当てる。

レイアウトの変更とコンポーネントの変更

たとえば、デバイスがメディア プレーヤーとしてのみ使用されている場合、カバーアートを背景にして、必要な情報が少ないクイック ビューを表示できます。

レイアウトの変更とコンポーネントの変更

画面サイズやアスペクト比が小さい場合は、コンテンツに集中できるエクスペリエンスを検討してください。ヒーロー画像は、視覚的な魅力を高めるためにカバーの大部分を占め、タイトルとコンテンツの一部を表示することで、スクロールしやすく、読みやすくしています。

レイアウトの変更とコンポーネントの変更

カバーは入力に重点を置く必要があります。たとえば、キーボードが表示されている場合、メッセージが主な焦点になります。

レイアウトの変更とコンポーネントの変更

カバーなどの小さい画面では、フィルタ シートは全画面表示になりますが、ボタンの配置とスケーリングは適応します。

レイアウトの変更とコンポーネントの変更

コンパクトなナビゲーション レールは、カバー画面でより使いやすい可能性があります。

大きなカバーでは、どちらのナビゲーションの向きも利用できます。ユーザーがコンテンツをどのように操作するかを検討します。

レイアウトの変更とコンポーネントの変更

ナビゲーション レールを小さくすることで、システム UI とカメラの切り抜きを避けながら、縮小された高さを維持できます。

システム UI の下で UI を妨げられることなく続行します。
システムバーの前に UI を停止します。