设计数据表格、列表与网格时：多视图切换、大热区选择…

当需要展示产品、文件、用户、订单等多项数据集合，并让用户浏览、比较、筛选和批量管理时使用。

适用场景

解决思路

1. 当数据同时具有视觉维度和细节维度时，提供多种视图：Grid 适合视觉型条目（产品、图片、文件、卡片），List 适合中等细节（任务、邮件、文章），Table 适合密集数据（订单、报表、用户管理）。
2. 视图切换控件放在集合右上角、紧邻排序/筛选控件，使用带 tooltip 的图标按钮（grid、list、table），并把用户选择持久化到 localStorage。
3. 移动端折叠为最适合内容的单一视图（视觉型用 grid，文本型用 list）；除非两种视图都真正可用，否则小屏不提供视图切换。
4. 超过大约六个条目时，从卡片降级为表格：行间保留水平分隔线或斑马纹，去掉侧边和外框线；例外是卡片内包含行无法承载的内容（图片、图表、每项控件组、需换行的正文）时保留卡片。
5. 表格化后给表头加强调：更粗字重、或小号大写加字距、或更深底色，按读者浏览列表的需求程度选择。
6. 默认整行或整张卡片都是选择热区：点击行任意位置即选中（背景变化、复选框勾选），复选框只是状态指示而非唯一选择方式。
7. 键盘支持：Space 选中聚焦行，Shift+click 扩展选择，Ctrl/Cmd+click 切换单项选择。
8. 选中状态用背景色变化表达，使用 --color-primary-subtle（品牌主色高度去饱和、提亮到约 5–8% 不透明度），可选加 3px 左侧 --color-primary 边框强调，复选框填充 --color-primary 作为次要信号。
9. 不要用高对比或高饱和背景表示选中，它会与内容竞争、让密集表格难以阅读。
10. 选中一项或多项时，在集合顶部显示上下文工具栏（替换或补充标准工具栏），以选择数量开头（如“3 selected”），只显示适用于当前选择的操作，提供“Clear”取消全部选择并关闭工具栏。
11. 破坏性批量操作（如 Delete）必须弹出确认对话框并写明数量，例如“Delete 3 projects? This cannot be undone.”。
12. 表头复选框实现“全选当前页”，并提供次级操作“Select all 247”扩展到整个数据集。
13. 表格列排序：点击列头升序、再点降序、第三次清除排序；活动排序列显示方向箭头；不可排序列的列头无 hover 状态。
14. 筛选器放在侧边栏或集合上方筛选栏；活动筛选以可单独移除的 chip/tag 显示；提供“Clear all filters”一键清除；有筛选时按钮显示数量徽标如 Filter (3)。
15. 空状态区分处理：筛选无结果显示“No results for these filters. [Clear filters]”，集合本身为空显示引导操作如“No projects yet. [Create project]”。
16. 搜索从第 1 个字符（最多 2–3 个）就开始返回结果，结果实时出现在下拉中，不要求用户输完或按回车。
17. 让每条搜索结果一眼可辨：视觉型条目给缩略图/图片，显示所属分类/区域，对类型化领域（产品、备件、服务）用分类图标和颜色，并高亮匹配文本。
18. 搜索结果下拉中始终提供“See all results for '…'”，打开带筛选的完整结果页。
19. 搜索完全支持键盘导航：方向键移动、Enter 选择、Esc 关闭，同时鼠标也可用。
20. 表格列头在垂直滚动时吸顶，让用户始终知道每列含义。
21. 宽表格水平滚动时第一列（行标识：名称、ID）吸左。
22. 每行操作（Edit、Delete、View）只在 hover 时出现在最右列，静止时不显示以减少视觉噪音。
23. 企业级数据表格允许拖动列头边框调整列宽、拖动列头重排列，并持久化布局。
24. 给数字提供参照：裸值不如带基线（百分比、平均值、增量或对比）的值，如“€48,900 (+12% vs last month)”“72% of target”“avg 3.4 per user”。
25. 当故事是模式时用可视化：趋势、分布、对比、关系用图表比一列数字更快读懂；单个 KPI 可配 sparkline，一组分类用柱状图优于表格。
26. 任何随时间演变的值（收入、用量、状态历史）展示其轨迹而非仅当前快照，用趋势线回答“在变好还是变坏”。
27. 选择人们已熟悉的图表类型：bar、line、area、pie/donut、sparkline，避免 sankey、radar、chord、treemap 等需要先学习才能读的异型图。
28. 图表使用有限且语义化的调色板：最多 2–3 种颜色，每种只表示一个含义（红绿灯或已知惯例，如品牌主色 vs 灰色）；需要更多区分时加图例或 tooltip，而不是增加色相。
29. 仪表盘卡片只做摘要不做罗列：每张卡给两三个数字和最多两行示例作为证据，配“View all (n)”在原位打开完整列表。
30. 仪表盘示例行用两行而非五行：一行像排序偶然，五行则已开始变成卡片本应避免的列表。
31. 按检查清单自检：是否提供视图切换并持久化、整行/整卡是否为选择热区、选中是否用 --color-primary-subtle、批量工具栏是否显示数量、破坏性操作是否确认并写明数量、全选是否分页并可扩展、活动筛选是否可移除、空状态是否区分、行操作是否仅 hover 显示、表头是否吸顶、关键数字是否有参照、趋势/分布/对比是否用图、时间演变是否用时间序列、图表类型是否常见、图表配色是否 ≤2–3 色且语义明确并配图例/tooltip。

适用边界 · 注意事项

• 数据只有单一维度、不需要视觉浏览与细节比较时，不必强行提供多视图切换。
• 小屏幕上两种视图并非都真正可用时，不要提供视图切换，直接折叠为最适合内容的单一视图。
• 当卡片内包含行无法承载的内容（图片、图表、每项控件组、需换行的正文）时，不要套用“超过六个条目降级为表格”的规则。
• 不要用高对比或高饱和背景表示选中状态，也不要用异型图表或过多色相来增加区分度。