リストとグリッド：UX比較

1）リスト時、グリッド時（ルール5の質問）

1.ユーザーの目標：パラメータ（リスト）をすばやく比較するか、ビジュアル/カバー（グリッド）で選択しますか？

2.データ形式：構造フィールド（テーブル/テキスト）→リスト；視覚オブジェクト（スキン、写真）→グリッド。

3.密度と概要：画面（リスト）または均一なショーケース（グリッド）ごとに最大項目が必要ですか？

4.デフォルトのアクション：カード（グリッド）から開く/詳細（リスト）またはインスタント「再生/購入」？

5.デバイスのコンテキスト：モバイルポートレート-通常、カードの2行グリッド。デスクトップ上のレポート/テーブル-list/table。

ショート：比較-リスト；グリッド-あなたの目で選択してください。

2）コンテンツモデルとIA

row-first-メイン信号はtext/fieldsです。に適しています：ログ、トランザクション履歴、レポート、属性検索結果。
Card-first：メイン信号はカバー/プレビューです。のために適した：ゲーム/プロダクト、媒体、コレクション。
ハイブリッド：同じデータソースを持つ「アダプティブラインカード」（モバイル-カード、デスクトップ-列を持つライン）。

3）要素の設計： 行とカード

行（リスト行）

構造：アイコン/サムネイル（オプション）、タイトル、1-3キーフィールド、メタ（日付/ステータス）、コンテキストアクション（⋮）。
強み：可読性、高密度、良好な並べ替え可能な列。
UXのヒント：高さを修正します。グリッドに整列すると、「reveal」内のマイナーフィールドが非表示になります。

グリッドカード

構造： カバー、タイトル、キャプション/ラベル（新しい/ジャックポット）、1つのメインCTA+エクストラアクション「……」

強み：視覚的選択、クイックアクション、感情的なコンテキスト。
UX-tips：アスペクト比を維持する（例：4：3/1：1）、同じ見出しの高さ、ツールチップ付きのテキストクリッピング。

4）運行、分類およびフィルター

一般：フィルターとソートは近くにあり、安定しています（ジャンプなし）。アクティブコンディション-結果を上回るチップ。
リスト：多くのカラム+「freeze」ヘッダーをサポートしています。ヘッダーをクリックしてソートします。
グリッド：ドロップダウンリストによる並べ替え；フィルタ-チップ/パネル。「ビジュアル」検索-ホバー/ロングプレスでプレビューします。

5）モバイルとデスクトップ

• グリッド：2行（電話）、3行（タブレット）。親指エリアの大きなCTA。
• リスト：コンパクトライン（56-72dp）、折りたたみメタフィールド。

• グリッド：≥ 1200pxで4-6-in-a-row、 'min'カード幅で自動入力します。
• リスト：テーブル/行、列のサイズ変更、クイックテーブル検索。

6）国とダウンロード

スケルトン：スケルトンライン（最小3-5）、カバーとテキストプラグ付きスケルトンカード。
空：空の理由とプリセットを提案/フィルタを削除する理由を説明します。
エラー：ユーザーの選択と位置を保存します。リトライしてくれ。
再ロード：「Show more」（ハイブリッド）はカタログの無限のテープに好ましいです。ログの場合-「Pause」で自動スクロールできます。

7）パフォーマンス

ターゲット：INP ≤ 200ms、 CLS ≤ 0。1、 scroll-jank <1％。

リスト：文字列の仮想化、固定高さ、繰延計算。
グリッド：遅延画像（AVIF/WebP）、 'srcset/sizes'、予測可能なサイズ、20-60カードの「バッチ」。
一般：'content-visibility： auto'、プレビューキャッシュ、ヒーロー要素のロード優先度。

8）手頃な価格

リスト：正しい意味論を持つテーブル（'table/thead/tbody'、 'aria-sort'）、行/セルに焦点を当てます。
グリッド：'role="grid'または'role="list"'のあるリスト；order in DOM=visual；画像のキャプション。
キーボード：矢印/タブ；Enter-open；スペース-「お気に入りに」（適切な場合）。
クリックサイズ：≥ 44px；AAの対照；アイコン上の明示的な署名。

9）メトリックとテレメトリー

• 'view_switch（リスト'grid）'、'sort_change'、'filter_apply'、'card_quick_action'、
• 'row_open'、 'compare_open'、 'results_load_batch'、 'error_retry'。

• タイムツーファーストアクション（TTFA）、 qCTR結果、スクロール深度、ゼロ結果率、
• 比較レート（リスト用）、クイックアクションレート（グリッド用）、レイテンシーp 95。

10） A/B実験（何をテストするか）

新規/帰国者のデフォルトビュー（リスト/グリッド）。
画面ごとの項目数、行の高さ、カードサイズ。
フィルター/ソートの順序；チップスvsサイドバー。
カード上のクイックアクション（アイコン/テキスト、1対2 CTA）。
ガードレール：INP/CLS、レイアウトに関する苦情「ジャンプ」、ゼロ結果の成長。

11） iGamingの例

ゲームロビー（B2C）：グリッド-カバー+プレイ/デモ、新しい/ジャックポットラベル、チップフィルター（プロバイダ/カテゴリ/メカニクス）。
プロバイダカタログ：ゲーム数のロゴのグリッド。クリックで-プロバイダのページ（内部-また、ゲームのグリッド）。
レポート/ファイナンス（B2B）： list/table-NGR/GGR/FTD/CR列、タイトル修正、エクスポート。
トランザクション履歴：リスト-高密度シリーズ、ステータス、金額/ID/日付による検索。部品の文字列を展開します。
プロモーション/トーナメント：日付とCTAのバナーグリッド。「Going Now/Coming Soon」でソート。

12）適用範囲が広いスイッチおよび個人化

ユーザーに「List ↔ Grid」ラジオボタンを与え、選択（ユーザー/テナントごと）を記憶します。
パフォーマンスのプリセットを提供：「タイト」、「通常」、「大」。
コンテキストロジック：初めて-ロビーのグリッド；検索から-正確な比較のためのリスト。

13） Antipatterns

固定アスペクト比のないグリッド→「ダンス」カードと高いCLS。
列が多すぎるリストは、必要なく横スクロールです。
カードとホバーの両方に異なる動作を持つアクションボタンの複製。
各負荷でのミキシングソート/フィルター（焦点を壊します）。
隠されたアクティブフィルタ-ユーザーは結果を「失う」。

14）実装チェックリスト（ステップバイステップ）

1.画面が視覚的または属性的比較によって選択されているかどうかを定義します。
2.モデルを定義する：list/grid/hybrid；IAとデータソースに同意します。
3.固定キーゾーン寸法の行またはカードを設計します。
4.並べ替え/フィルタ：可視チップ、安定した並べ替え制御。
5.読み込み/空/エラー：スケルトン、フレンドリーなテキスト、再試行。
6.パフォーマンス：怠惰/仮想化、'content-visibility'、 p95目標。
7.A11y：セマンティクス、キーボード、コントラスト、タップターゲットサイズ。
8.テレメトリー：TTFA、 qCTR、 Zero-Result、 Latency p95。

9.A/Bデフォルトビュー、寸法、クイックアクション

10.［メモリ］：ビューモードと最後のフィルタを保持します。

15）ボトムライン

リストとグリッドは、さまざまなタスクのためのツールです。

属性と比較が重要な場合は、リストを取ります。
視覚が決定し、クイックアクション-グリッドを取る。
目標を定義し、寸法と動作をキャプチャし、インターフェイスを高速かつアクセス可能にします。ユーザーは、不必要な認知ノイズなしで、より少ないステップで結果を達成します。