列表和網格：UX比較

1）列表何時列出（問題5規則）

1.用戶目標：快速比較參數（列表）或通過視覺/封面（網格）進行選擇?

2.數據形式：結構字段（表格/文本）→列表；視覺對象（封面，照片）→網格。

3.密度vs概述：需要每個屏幕的最大元素（列表）或均勻的展示（網格）?

4.默認操作：打開/詳細資料（列表）還是從卡（網格）即時播放/購買?

5.設備上下文：移動肖像-通常是卡片的二排網格；臺式機上的報告/表-列表/表格。

簡而言之：比較-列表；用眼睛選擇網格。

2）內容模型和IA

清單（row-first）：主要信號是文本/字段。適用於：邏輯、操作歷史記錄、報告、屬性搜索結果。
網格（card-first）：主要信號是封面/預覽。適用於：遊戲/商品,媒體,收藏品。
混合：具有相同數據源的「自適應卡行」（在移動上為卡，在臺式機上為帶有揚聲器的行）。

3）元素設計： 字符串vs卡

字符串（list row）

結構：圖標/縮圖（可選），標題，1-3關鍵字段，meta（日期/狀態），上下文操作（⋮）。
優點：可讀性，高密度，良好的排序列集。
UX技巧：固定高度；與網格對齊；在「披露」中隱藏次要字段。

卡（網格卡）

結構：封面，標題，簽名/標簽（新/頭獎），一個主要的CTA+附加組件。在「……」中的動作。
強項：視覺選擇，快速行動，情感環境。
UX提示：保持aspect-ratio（請參見4：3/1：1）,相同的標題高度,修剪文本與工具包。

4）導航、排序和過濾器

一般：過濾器和排序-相鄰且穩定（無跳躍）。活動條件是結果上的芯片。
清單：支持許多專欄+「凍結」標題；按上限點擊排序。
網格：用下拉列表排序；過濾器-芯片/面板。對於「視覺」搜索，可以在hover/long-press上進行預覽。

5）移動vs臺式機

• 網格：2行（電話）,3行（平板電腦）。拇指區域的大型CTA。
• 列表：緊湊字符串（56-72dp）,可折叠元字段。

• 網格：≥1200px時為4-6對排，自動膠卷帶有「min」卡寬度。
• 清單：表/行，專欄重新排列，表格快速搜索。

6）狀態和下載

Skeletons：字符串骨架（最低3-5），帶有蓋子和文字的骨架卡。
空白：解釋為什麼是空的，並建議預置/刪除過濾器。
錯誤：保存用戶選擇和位置；回歸。
加載：「顯示更多」（混合體）優於目錄中的無限磁帶；對於博客-您可以從「暫停」自動滾動。

7）生產力

目標：INP ≤ 200毫秒，CLS ≤ 0.1，scroll-jank <1％。

列表：行虛擬化、固定高度、延遲計算。
網格：lazy圖像（AVIF/WebP），「srcset/sizes」，可預測尺寸，「分批」20-60張卡片。
一般：「內容可見性：auto」, kesh預覽,英雄元素的下載優先級。

8）可用性

列表：具有正確語義的表（「table/thead/tbody」，「aria-sort」），按行/單元格排列。
網格：'role='grid'或帶有'role='list'的列表；DOM=視覺中的順序；圖像的簽名。
鍵盤：箭頭/Tab；Enter-打開；太空是「選擇」（如果適用）。
點擊大小：≥ 44px；AA的對比；圖標上的顯式簽名。

9）度量與遙測

• `view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
• `row_open`, `compare_open`, `results_load_batch`, `error_retry`.
• KPI:
• 時間到第一動作（TTFA），qCTR結果，Scroll Depth，零結果率，
• 比較率（用於列表），快速動作率（用於網格），Latency p95。

10） A/B實驗（測試內容）

新/返回的默認視圖（列表/網格）。
每個屏幕的項目數、行高、卡大小。
過濾器/排序順序；芯片vs側板。
卡上的快速動作（圖標/文本，一對兩個CTA）。
Guardrails：INP/CLS，抱怨「跳過」扭曲，零結果增長。

11） iGaming的示例

遊戲大廳（B2C）：網格-封面+「Play/Demo」、「New/Jackpot」標簽、芯片過濾器（提供者/類別/機械師）。
提供商目錄：具有遊戲數量的徽標網格；單擊-提供程序頁面（內部也是遊戲網格）。
報告/財務（B2B）：清單/表-NGR/GGR/FTD/CR欄，標題固定，導出。
交易歷史記錄：列表是一個密集的系列，狀態，搜索金額/ID/日期；顯示部件的行。
股票/錦標賽：帶有日期和CTA的橫幅網格，按「立即進行/即將進行」排序。

12）靈活的開關和個性化

給用戶一個「↔網格列表」單選按鈕,並記住選擇（per user/tenant）。
提供表示預設：緊張，普通，克魯普諾。
上下文邏輯：第一次是大廳中的網格；從搜索-列表進行精確比較。

13）反模式

沒有固定縱橫比的網格→「沙灘」卡和高CLS。
列出過多的列是水平滾動而無需。
復制卡片和卡片中的動作按鈕，並具有不同的行為。
每次裝載時攪拌排序/過濾器（打破焦點）。
隱藏的活動過濾器-用戶「丟失」結果。

14）實施支票（逐步）

1.定義屏幕目標：通過視覺選擇或屬性比較。
2.設置模型：列表/網格/混合體；協調IA和數據源。
3.設計項目：具有固定關鍵區域大小的行或卡。
4.排序/過濾器：可見芯片,穩定排序控制。
5.下載/空白/錯誤：骨架、清晰的文本和復古。
6.表演：lazy/virtualization，「內容可見性」，p95目標。
7.A11y：語義，鍵盤，對比度，引腳目標的大小。
8.遙測：TTFA，qCTR，零結果，Latency p 95。
9.A/B：默認視圖、尺寸、快速動作。
10.選擇內存：保持視圖模式和最近的過濾器。

15）結果

列表和網格-用於不同任務的工具。

當屬性和比較很重要時-選擇列表。
當視覺和快速動作決定時-取網格。
確定目標,記錄大小和行為,保持界面快速且易於訪問,用戶將獲得較少步驟的結果,而無需額外的認知噪音。