アプリの設計に関するベスト プラクティス

縦向きレイアウト向けに最適化する

縦向きレイアウトを使用してアプリのデザインを簡素化できます。これにより、ユーザーは一方向にスクロールしてコンテンツ間を移動できます。

このアプリの目的は、ユーザーをポイント A からポイント B に導くことです。
縦方向と横方向の両方のスクロールは使用しない。アプリを操作する際に混乱が生じる可能性があります。

時刻を表示する

上部に時刻(オーバーレイ)を表示する。これにより、ユーザーは決まった場所で時刻を確認できるようになります。

オーバーレイの上部に時刻を表示する。これにより、ユーザーは決まった場所で時刻を確認できるようになります。
一時的なダイアログ、確認オーバーレイ、選択ツールに時刻を表示する。たとえば、ユーザーが確認画面をごく短時間しか表示しない可能性がある場合などです。

ユーザー補助用のインライン エントリ ポイント

ユーザー補助用の明確なアイコンとラベルを使用して、すべてのアクションがインラインで表示されるようにします。これには、設定のエントリ ポイントが含まれます。

可能な場合は、アイコンとラベルの両方を使用する。
アイコンのみを使用してユーザーにアクションを促すプロンプトを表示する。

ラベルを使用してユーザーが適応できるようにする

ダイアログが長い場合は、ラベルを使用してユーザーがコンテンツをスクロールするのをサポートします。

セクション区切り、ラベル、その他のキューを使用してコンテンツを整理することで、ユーザーが混合コンテンツが配置された長いビューをスクロールするのをサポートする。
コンテンツ タイプが 1 つしかないダイアログにラベルを追加する。

メイン アクションの優先順位を引き上げる

メイン アクションをオーバーレイの一番上に配置して、ユーザーがアプリ内でアクションを簡単に実行できるようにします。

曖昧さのないメイン アクションを一番上に配置する。
非常に長いページの一番下にメイン アクションを配置する。

スクロール画面にスクロールバーを表示する

スクロール インジケータは、スクロールする画面でのみ使用し、誤った操作を想定しないようにしてください。同様に、スクロール画面にはスクロール インジケーターを追加して、画面のどの部分が表示されているかを示すようにしてください。

ビュー全体をスクロールする場合に、スクロール インジケーターを表示する。
スクロールしないビューにスクロール インジケーターを表示するか、スクロールするビューにスクロールバーを表示しないか。

大画面向けにレスポンシブに設計する

使用するコンポーネントが使用可能な幅に収まるようにし、スクロールしないレイアウトの高さも考慮します。

すべての Compose コンポーネントはレスポンシブにビルドされますが、大きなディスプレイでデザインを高め、付加価値を追加するためのカスタマイズは推奨されます。

コンテンツが利用可能な幅と高さいっぱいに表示されるようにし、全画面要素(ProgressIndicators、TimeText など)がスクロールしないレイアウトに応じて適切に適応するようにします。
固定幅のコンポーネントを使用して、画面をレスポンシブに埋め尽くしたり、使用可能なスペースを埋めるためにコンテンツの動作を調整したりしない。

レスポンシブ(パーセンテージ)の余白を使用する

マージンのサイズがディスプレイの拡大曲線に合わせて調整されるように、パーセンテージ マージンを使用することをおすすめします。

コンテンツが上下で切り取られないように、追加のパーセンテージ マージンを使用します。
コンポーネントは、余分な余白なしで使用可能なスペースを埋めるようにスケーリングするだけではありません。