ブログ

[読書会]適応型デザイン（追加リソース）

※https://docs.flutter.dev/ui/adaptive-responsive/more-info のリファレンスBlogです。

１．サンプルコード

　このページで説明したアダプティブとレスポンシブのコンセプトがどのように組み合わされているかをご覧になりたい方は、以下のアプリのソースコードをご覧下さい。

（１）Wonderous

　https://github.com/gskinnerTeam/flutter-wonderous-app

（２）Flutter adaptive demo

　https://github.com/gskinnerTeam/flutter-adaptive-demo

２．ユーザビリティの基本原則について

　もちろん、このページが検討すべきことの全てを網羅しているわけではないのですが、対応するオペレーティングシステム、フォームファクター、入力デバイスが増えれば増える程、設計上のあらゆる順列を仕様化することは難しくなる訳ですよね。

開発者として基本的なユーザビリティの原則を学ぶ時間を取ることで、より良い決断を下すことができるようになり、制作中のデザインとのやり直しを減らし、より良い結果で生産性を向上させることができます。

以下は役に立つかもしれないリソースの紹介になります。

  1. Android 大画面ガイドライン
    • 大画面アプリの品質（TIRE3～1）
    • 大画面互換性のテスト（Android Emulator の各AVDについて）
  2. レイアウト適用に関するマテリアルガイドライン
    • material3/foundations/layout/applying-layout
      • windows size（Compact、Medium、Expanded、Large & extra-large）
  3. 大画面向けのマテリアルデザイン
    • 大画面アプリを準備する為に実行できる５つのこと
      • Conceptualize your column grid
      • Create a composition that scales
        • Layout container
        • Composition
        • Visual grouping
        • Containment
          • 文脈的に関連のある要素を1つのグループとして視覚的にまとめ、要素間の関連性を強調するための手法
          • コンテインメントを行うことで、ユーザーは情報の流れやグループの構造を直感的に理解しやすくなります。例えば、画像とその説明文（キャプション）が一緒に表示されることで、ユーザーはその画像が何を表しているのか、補足情報を得やすくなります。
          • Containment の為の手法
            • Elevation ( 立体感や奥行き )
            • Divider ( 区切り線（または境界線）)
      • Use the right components for the job
        • Visual presentation
          • Size constraints
            • サイズ制約とは、コンポーネントの最小サイズや最大サイズを定義することです。これにより、コンポーネントが異なる画面サイズやデバイスに対して適切に表示され、レイアウトが崩れないようにすることができます。
            • Material Designの各コンポーネントには、推奨される最小値・最大値およびmargin（外側の余白）やpadding（内側の余白）**の基準が定義されています。
            • たとえば、FlutterのContainerウィジェットを使用する場合、heightやwidthプロパティを設定することで、最小・最大サイズを定義できます。また、paddingやmarginプロパティを使って内側と外側の余白を調整し、要素が適切に表示されるようにします。
          • Fixed vs Fluid
            • UI要素の固定幅（Fixed）と流動幅（Fluid）の違いについて説明しています。要素の幅が画面サイズに対してどのように振る舞うかを理解することは、適切なレイアウトを設計するために非常に重要です。
              • 固定幅を使うべきケース
                • ボタンやアイコンなど、一定のサイズを維持したい要素。
                • 画面サイズにかかわらず、デザインを保ちたい部分（例：ロゴやヘッダー部分）。
              • 流動幅を使うべきケース
                • テキストや画像のコンテナ、リストなど、画面サイズに応じて内容の表示幅を調整したい部分。
                • レスポンシブデザインが求められるレイアウト（例：全幅のボックス、パーセンテージでサイズを指定した要素）。
      • Ensure your app maintains continuity
      • Test input support
      • material3/Blog/Introducing Material Design Guidance for Lage Screens
        • 新しいレイアウトガイダンス
        • コンポーネントの更新
        • リソース
        • 始め方
  4. 標準レイアウトに関するマテリアルガイドライン
  5. 高品質なアプリを構築する (Android)
  6. UI デザインのすべきこと、すべきでないこと (Apple)
  7. ヒューマンインターフェースガイドライン（Apple）
  8. レスポンシブ デザイン テクニック (Microsoft)
  9. マシンのサイズとブレークポイント (Microsoft)
  10. Flutter を使用して Adaptive UI を構築する方法（Google I/O 2024 のビデオ）

コメントを残す