data-display-and-selection

数据展示与选择

复杂的数据集合——产品、文件、用户、订单、任务——没有唯一正确的展示方式。不同任务需要不同的视图。浏览适合使用网格；比较详情适合使用列表或表格；批量管理适合使用带批量操作的密集表格。让用户自行选择。

---

视图模式

当数据同时具有视觉和详细信息维度时，提供多种视图。

视图	适用场景	默认使用的时机
网格	视觉类内容：产品、图片、文件、卡片	内容在视觉上各不相同，且主要任务是浏览时
列表	中等详细程度：任务、电子邮件、文章	选择取决于某个关键信息文本或元数据时
表格	密集数据：订单、报告、用户管理	需要比较多个数据列时

**视图切换器的位置：**放在内容集合的右上角，紧邻排序／筛选控件。使用带有工具提示（grid、list、table）的图标按钮。将用户的选择保存在 localStorage 中。

[Filter ▾]  [Sort ▾]          [⊞ Grid]  [☰ List]  [⊟ Table]

在移动设备上，根据内容选择最合适的视图——视觉类内容用网格，文本用列表。除非两种视图在小屏幕上都确实好用，否则不要提供视图切换器。

项目超过几个后，卡片就会变成表格

当读者要并排比较少数几项内容时，卡片边框才有意义。在页面上重复十五次边框，却毫无区分作用：每一行都被框起来，因此这些框没有传达任何信息，读者还得承受它们带来的视觉噪声。

**项目大约超过六个时，改用表格。**保留行间的横线或使用斑马纹，并彻底去掉侧边线和外边框。在列表中，页面自身的栏宽已经限定了内容范围，垂直边缘没有作用；在需要画线之前，眼睛早已会根据距离和对齐方式进行分组。

**例外情况是卡片包含行无法呈现的内容。**图片、图表、每项独立的控件组、需要换行的正文：无论数量多少，都应保留卡片，因为边框是在组织一个整体布局，而非分隔相邻的两行。产品网格、图库、仪表板磁贴不受此规则约束。判断标准是边框圈住了什么。如果圈住的是一行文本和一个值，那它就是表格行上的装饰；如果圈住的是一个布局，那它就是卡片。

然后，为表头赋予边框原本试图提供的强调效果：加粗、使用较小的全大写字母并增加字距，或采用更深的底色。根据读者浏览列表时需要的导航程度来选择。较长的参考表格需要能让浏览视线定位的表头；较短的表格则可以依靠第一列。

---

选择：优先采用较大的点击区域

复选框的点击目标很小。要求用户必须点中 16×16px 的复选框才能选择一行，会带来不必要的阻碍——尤其是在触屏设备上。

默认设置：整行或整张卡片都是选择目标。

• 点击行内任意位置 → 选中该行（背景变化，复选框勾选）
• 复选框是选择状态的视觉指示器，而非唯一的选择方式
• 键盘：按 Space 选择当前聚焦的行；按 Shift+click 扩展选择范围；按 Ctrl/Cmd+click 切换单项的选择状态

.row {
  cursor: pointer;
  background: var(--color-surface);
  transition: background 100ms ease-out;
}
.row:hover {
  background: var(--color-grey-50);
}
.row.selected {
  background: var(--color-primary-subtle); /* subtle brand tint */
}

对于网格中的卡片，整个卡片都是选择区域，而不只是角落里的复选框。

---

已选状态的视觉表达

已选项通过背景颜色变化来传达状态，而不只是显示复选框勾选。

背景：--color-primary-subtle——将品牌主色大幅降低饱和度并提亮至约 5–8% 的不透明度。效果应清晰可辨，但不刺眼。

**左侧边框强调色（可选）：**使用 --color-primary 绘制 3px 左侧边框，以强化列表和表格行的已选状态。

**复选框：**勾选，并填充 --color-primary。复选框是辅助信号，而非主要信号。

.row.selected {
  background: var(--color-primary-subtle);    /* e.g. hsl(224, 21%, 94%) */
  border-left: 3px solid var(--color-primary);
}

不要在选择状态下使用高对比度或高饱和度的背景色——它会与内容争夺注意力，并降低密集表格的可读性。

---

批量操作

选中一个或多个项目时，会显示批量操作。未选中任何项目时，这些操作会消失。

位置： 选中项目后，在集合顶部显示上下文工具栏（替代或补充标准工具栏）。

[✓ 3 selected]  [Delete]  [Archive]  [Export]  [Move to ▾]  [× Clear]

• 首先显示选中数量：“已选中 3 项”——在执行任何操作前确认操作范围
• 仅显示适用于当前选择的操作——如果某些操作要求只选中一项，则在多选时禁用这些操作
• “清除”会取消所有选择并关闭工具栏
• 破坏性批量操作（删除）始终会触发确认对话框，并注明数量：“删除 3 个项目？此操作无法撤销。”

全选： 表格标题中的复选框会选中当前页面上的所有项目。次级操作“全选 247 项”会将选择范围扩展至整个数据集。

[☑ Select all on page]  →  [Select all 247 results]

---

排序和筛选

列排序（表格视图）

• 点击列标题可按升序排序；再次点击可按降序排序；第三次点击可清除排序
• 当前排序列显示方向箭头（↑ ↓）
• 只有可排序的列可以点击——不可排序列的标题悬停时不会改变状态

筛选器

• 获取参数和结果筛选器应放在不同位置。 表单用于填写需要重新获取数据的条件（日期范围、所有者、位置），并提供提交按钮。结果上方的工具栏用于缩小已加载的行范围：包括切换项、分段筛选器、当前显示数量与总数，以及使用结果的操作。混在一起时，用户无法判断哪些控件需要点击提交按钮，结果操作看起来也像搜索的一部分。
• 持久筛选器应放在侧边栏或集合上方的筛选栏中
• 应将已启用的筛选器显示为可逐一移除的标签
• “清除所有筛选器”会一次性移除所有已启用的筛选器
• 启用筛选器时，在筛选按钮上显示筛选数量徽标：Filter (3)

空状态

• 筛选后无结果：“没有符合这些筛选条件的结果。[清除筛选器]”——不要显示通用空状态
• **集合确实为空：**显示创建第一个项目的行动号召：“还没有项目。[创建项目]”

---

搜索和自动补全

搜索是用户在大量内容中查找某一项的方式，因此必须即时响应且易于识别。

从最初的几个按键开始提供建议。 输入 1 个字符，最多 2–3 个字符后就开始返回结果——不要让用户必须输完内容或按 Enter 键才能看到结果。用户输入时，结果会实时显示在下拉列表中。

让有效结果一眼就能认出来。 建议列表的意义在于，用户无需逐行阅读，就能从长列表中找到自己要找的结果。每个结果都应包含不止一个简单字符串：

• 对于视觉类项目（产品、人物、文件），提供缩略图/图片，
• 显示所属的类别/领域；对于有明确类型的领域（产品、备件、服务），还应使用类别图标和颜色，让用户在阅读标签前就能辨别类型——请为这些结果类型寻找合适的品牌图标（参见 [[brand-visual-language]]），
• 在结果中突出显示匹配的文本。

这是一条灵活规则——并非每种搜索都需要图片——但目标始终不变：让用户快速从众多结果中识别出正确的一项（阅读需要时间——参见 [[ui-density]]）。

提供查看完整结果的途径。 下拉列表是快捷方式，而非全部内容。始终提供“查看‘…’的所有结果”，打开一个带筛选器的完整列表/结果页面（采用上述集合模式），以便用户在快速建议不足时使用。

支持完整的键盘导航。 方向键可在建议项之间移动，Enter 键可选择，Esc 键可关闭——同时也必须支持鼠标操作。搜索是高级用户的常用途径；不要强迫用户离开键盘。

---

表格专属模式

粘性标题

纵向滚动时，表格列标题应固定在顶部——用户必须始终能看到每列的含义。

首列固定

对于可横向滚动的宽表格，首列（行标识符——名称、ID）固定在左侧。

行操作

每行的操作（编辑、删除、查看）悬停时显示在最右侧的列中。默认状态下不要显示它们——这些操作会造成视觉干扰。

[Name]  [Status]  [Date]  [Amount]          ← at rest
[Name]  [Status]  [Date]  [Amount]  [Edit] [⋯]  ← on hover

单向操作应在自身位置显示结果。 当行操作无法重复执行（发送、发布、批准）时，用结果替换按钮：创建的引用、时间戳或简短状态。单独的状态列会重复按钮已经表达的信息，并将一条事实拆分到两处。将该位置的宽度设为与按钮相同，确保操作前后各行保持对齐。

调整列宽和重新排序

对于企业数据表：允许通过拖动表头边框调整列宽，并通过拖动表头重新排序。保存布局。

空单元格

绝不要写“N/A”。 这是无法翻译的英文行话，而且有两种含义（不适用、不可用）；在一列中反复出现时，它占据的视觉分量会超过实际值。缺失值应使用颜色柔和的短横线（–）标记，与该列的值保持对齐，并为屏幕阅读器提供“No value”之类的文本替代。连字符紧挨数字时会被看作减号。

仅当稀疏列中的大多数行都没有值时，才将单元格留空；其他情况下，空白会让人以为仍在加载或出现故障。零是一个值：写作 0。需要说明原因时，请用文字表达：“未测量”“待处理”。已存在但未知的值可以显示为“?”；即便如此，它传达的信息也比“N/A”更多。

---

让数字易于理解

单看一个原始数字，很难判断其意义——没有参照时，“1,240 位用户”或“€48,900”几乎说明不了什么。呈现数据不只是列出数字，还要提供背景和形式，让用户一眼就能理解。

给数字一个参照。 与带有基准的数值相比，单独的数值传达的信息少得多：百分比、平均值、差值或对比都可以。“€48,900（较上月增长 12%）”“达到目标的 72%”“平均每位用户 3.4”——通常，对比才是洞察所在，而不是绝对数值。

故事呈现的是模式时，就用可视化。 当信息是趋势、分布、对比或关系，且眼睛读图比扫视一列数字更快时，就选择图表。单个 KPI 可以搭配迷你图；一组类别用条形图比用表格更易读。表格适合查找精确数值；图表适合观察整体形态。

凡是会随时间变化的内容，都展示时间序列。 如果数值会随着时间变化——例如收入、使用情况或状态历史——就展示其变化轨迹，而不只是当前快照。趋势线可以回答“情况是在变好还是变差？”，单个数字却做不到。只要某项内容与时间有关，就考虑在展示当前值的同时展示其历史记录。

选择熟悉、广为人知的图表类型。 优先选择大多数人已熟悉的图表类型——条形图、折线图、面积图、饼图／圆环图、迷你图，而不是看起来很炫、却迫使用户先学习如何读图的冷门图表（桑基图、雷达图、弦图、矩形树图）。新颖的图表类型会增加理解成本；只有常见图表确实无法讲清楚时，才值得付出这份成本。

配色应精简且语义明确。 最多使用 2–3 种颜色；每种颜色只表示一种含义（参见 [[status-colors-and-errors]]）。使用红黄绿灯配色或已知的惯例（品牌主色与灰色）。需要表达更多区别？添加图例或工具提示，而不是增加颜色。图表设计（坐标轴、图例、浅色／深色）：dataviz。图表与表格的搭配：[[coordinated-data-views]]。

一个指示器承载其主题的全部信息；每页最多一个图例。 描述同一事物（行、卡片、记录）的内容，都放在同一个指示器中：数值和标识应直接显示在图形上，而不是分别放在条形图和旁边的列表或图例里。空间不足时，分步简化：先显示完整标签，再只显示数字，最后不显示任何可见内容；完整文本则放在工具提示或 title 中，并包含在无障碍名称里。每页最多放一个图例，用来说明图形本身无法表达的内容（通常是颜色的含义）；行、卡片或组件中不要放小图例。在每个指示器旁都放图例，会让视线来回移动，还要把对应关系记在脑中；旁边的列表则会用文字重复指示器的内容。

并排放置两个图形，会让信息分散。 一个图形用位置编码（数值在刻度上的位置），另一个用距离编码（数值与参照之间的距离）。两个都用位置编码的图表，只是在重复传达同一件事。

仪表板用于总结，而不是罗列

每张仪表板卡片展示两三个数字，最多加两行示例作为佐证，并提供一个可在原处打开完整列表的“查看全部（n）”。把完整列表从上到下堆在页面上，得到的只是一个碰巧放了卡片的报告。

首页如果展示其包含的每一行内容，就会迫使读者通读所有内容，才能找到与自己有关的那一行；而仪表板存在的目的，恰恰是免去这项工作。堆叠的列表之间也没有层级：没有任何一项显得比其他项更重要，页面读起来就像数据堆，人们也会学会直接滚动略过。数字为页面提供一层便于浏览的概览，而示例行能证明数字并非虚构，又不会喧宾夺主。

展示两行，不要展示五行。 一行看起来像是排序偶然造成的。五行则已经开始罗列卡片原本要避免的列表。深入查看的内容应放在 [[coordinated-data-views]]。

当用户操作的是行时，行就是表格行

如果用户会选择、编辑和统计各行，就让行保留为表格行，并将分组显示为轻量的分组标题行，同时提供分组切换选项。不要把行嵌套在必须先打开的父项下：手风琴会让父项成为操作单位，每个分组都要多点一次，行也无法参与排序，而且只要有一行离开父项，结构就会失效。标题行能保留一个可排序的列表，仍支持按组全选，也能让同一份数据按其他键重新分组。

标记只表达数据所表达的内容

内部评分绝不显示为百分比。 用于排名或加权的计算数值，并不是读者可以核验的测量值：屏幕上没有任何对象是某物的 21％。用文字显示结论，并在下方列出实际比较的数值。那些才是用户可以据此采取行动的内容。

只有每个元素都携带数据时，才绘制重复标记。 时间线、迷你图或网格只有在每个条或单元格都编码了某种信息时，才值得占用空间。八个空条加一个亮起的条看起来仍像图表，会让读者以为存在一段从未测量过的历史。等数据齐备，或直接将单个值显示为文本。

加号和减号表示前后对比。 只有在两个时间点比较同一事物时，才使用新增和移除标记。当相同层级的项目并排展示时，如果某一侧缺少某个值，就用直白的文字说明其缺失，不要使用差异标记：“− shop：没有渐变”表示 shop 移除了渐变，但根本没人做过这件事。

标题是链接，卡片不承担交互

在记录列表中，点击记录名称即可打开记录。将整个卡片都设为链接，会导致无法添加第二个目的地（除非嵌套锚点），让整个区域都应用悬停样式，还会让每次选择文本都触发导航。第二个目的地（例如实时网站）应使用独立图标，放在名称旁边。

---

审核清单

• 当数据同时具有可视化和详情维度时，是否提供视图模式切换？
• 是否在不同会话间保留用户偏好的视图？
• 整行或整张卡片是否都可作为选择点击区域，而不只是复选框？
• 选中状态是否使用柔和的背景色变化（--color-primary-subtle）？
• 选中项目后，是否显示批量操作工具栏并注明选中数量？
• 批量破坏性操作是否需要确认对话框，并注明项目数量？
• “全选”是否仅对当前页生效，并提供扩展到整个数据集的选项？
• 活跃筛选条件是否显示为可移除的标签？
• 空状态是否区分“无结果”和“确实为空”？
• 每行操作是否仅在悬停时显示，而非默认显示？
• 每个指标是否携带自身的值和标识符，每页最多只有一个图例，且行或组件内没有图例？
• 表格垂直滚动时，表头是否固定？
• 缺失值是否显示为颜色柔和的短横线，并提供文本替代，绝不显示“N/A”；零是否写作 0？
• 关键数字是否附有参考信息（%、平均值、差值、比较），而非孤立显示？
• 当要表达的是趋势、分布或比较时，是否使用图表；随时间变化的数据是否以时间序列呈现，而非仅显示快照？
• 图表类型是否熟悉且易于理解（条形图／折线图／面积图／饼图／迷你图），而非必须先学习才能读懂的冷门类型？
• 需要重新获取数据的控件是否放在表单中，而针对已加载行的筛选条件是否放在结果上方的工具栏中？
• 单向行操作是否在按钮原先所在的位置显示操作结果，而非使用单独的状态列？
• 图表／信息图是否使用精简、语义明确的配色方案（≤2–3 种颜色，遵循红黄绿或已知惯例），每种颜色是否只表示一种含义；编码含义不言自明时，是否提供图例／工具提示？
• 当行是基本单位时，分组是否以表头行的形式显示在一张平铺表格中，而非使用折叠面板？
• 屏幕上每个百分比是否都表示某项实际占比，而非展示内部评分？
• 重复标记中的每个条形或单元格是否都携带一个值；否则是否移除该标记？
• + 和 − 是否仅用于表示随时间的变化；同类对象之间的缺失是否不带差值标记而直接说明？
• 卡片和行是否仅通过标题链接；第二个目标位置是否使用独立图标？