列表和网格：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）结果

列表和网格-用于不同任务的工具。

当属性和比较很重要时-选择列表。
当视觉和快速动作决定时-取网格。
确定目标,记录大小和行为,保持界面快速且易于访问,用户将获得较少步骤的结果,而无需额外的认知噪音。