data-display-and-selection

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Data Display and Selection

数据展示与选择

Complex data collections — products, files, users, orders, tasks — have no single correct view. Different tasks call for different views. Browsing benefits from grid; comparing details benefits from list or table; bulk management benefits from a dense table with mass actions. Give users the choice.

复杂数据集合——产品、文件、用户、订单、任务——没有唯一正确的视图。不同任务需要不同的视图：浏览场景适合网格视图；对比详情适合列表或表格视图；批量管理适合带有批量操作的高密度表格。给用户选择的权利。

View Modes

视图模式

Offer multiple views when the data has both visual and detailed dimensions.

View	Best for	When to default
Grid	Visual items: products, images, files, cards	When items are visually distinct and browsing is the primary task
List	Moderate detail: tasks, emails, articles	When a key piece of text or metadata drives selection
Table	Dense data: orders, reports, user management	When multiple columns of data must be compared

View toggle placement: top-right of the collection, adjacent to sort/filter controls. Use icon buttons with tooltips (

grid

list

table

). Persist the user's choice in localStorage.

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

On mobile, collapse to the view that works best for the content — grid for visual items, list for text. Do not offer a view toggle on small screens unless both views are genuinely usable.

当数据同时具备视觉维度和详细维度时，提供多种视图选项。

视图	最佳适用场景	默认启用时机
Grid（网格）	视觉类项目：产品、图片、文件、卡片	当项目具有明显视觉差异且浏览为主要任务时
List（列表）	中等详情类：任务、邮件、文章	当关键文本或元数据主导选择决策时
Table（表格）	高密度数据：订单、报表、用户管理	当需要对比多列数据时

视图切换控件位置： 集合区域的右上角，紧邻排序/筛选控件。使用带提示文本（

grid

、

list

、

table

）的图标按钮。将用户的选择偏好持久化到localStorage中。

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

在移动端，默认使用最适合内容的视图——视觉类项目用网格视图，文本类用列表视图。除非两种视图都真正可用，否则不要在小屏幕上提供视图切换选项。

Selection: Prefer Large Hit Areas

选择：优先使用大点击区域

Checkboxes are small targets. Requiring users to hit a 16×16px checkbox to select a row is unnecessary friction — especially on touch devices.

Default: the entire row or card is the selection target.

Click anywhere on the row → selects the row (background shifts, checkbox checks)
The checkbox is a visual indicator of selection state, not the only way to select
Keyboard: Space selects the focused row; Shift+click extends selection; Ctrl/Cmd+click toggles individual items

css

.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 */
}

For cards in a grid, the entire card is the selection area — not just a checkbox in the corner.

复选框是小目标。要求用户点击16×16px的复选框来选择行是不必要的操作阻碍——尤其是在触控设备上。

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

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

css

.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 */
}

对于网格中的卡片，整张卡片为选择区域——而非仅角落的复选框。

Selected State Visual Language

选中状态视觉语言

Selected items communicate their state through a background colour shift — not just a checkbox tick.

Background:

--color-primary-subtle

— the brand primary colour heavily desaturated and lightened to ~5–8% opacity. Perceptible but not jarring.

Left border accent (optional): A 3px left border in

--color-primary

reinforces the selected state for list and table rows.

Checkbox: Checked and filled with

--color-primary

. The checkbox is a secondary signal, not the primary one.

css

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

Do not use a high-contrast or saturated background for selection — it competes with content and makes dense tables hard to read.

选中项通过背景颜色变化来传达状态——而非仅靠复选框的勾选标记。

背景色：

--color-primary-subtle

——品牌主色大幅降饱和并提亮至约5-8%的透明度。可感知但不突兀。

左侧边框强调（可选）： 3px宽的

--color-primary

左侧边框可强化列表和表格行的选中状态。

复选框： 勾选后填充

--color-primary

。复选框是次要信号，而非主要信号。

css

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

请勿使用高对比度或高饱和度的背景作为选中状态——这会与内容产生视觉冲突，导致高密度表格难以阅读。

Mass Actions

批量操作

When one or more items are selected, mass actions appear. They disappear when nothing is selected.

Placement: A contextual toolbar that appears at the top of the collection (replacing or supplementing the standard toolbar) when selection is active.

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

Lead with the selection count: "3 selected" — confirms the scope before any action
Show only actions applicable to the selection — if some actions require a single item, disable them for multi-select
"Clear" deselects everything and dismisses the toolbar
Destructive mass actions (Delete) always trigger a confirm dialog naming the count: "Delete 3 projects? This cannot be undone."

Select all: A checkbox in the table header selects all items on the current page. A secondary action "Select all 247" extends to the full dataset.

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

当选中一个或多个项时，批量操作会显示出来。当没有项被选中时，批量操作会隐藏。

位置： 当选中状态激活时，在集合区域顶部显示一个上下文工具栏（替换或补充标准工具栏）。

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

开头显示选中数量：“3 selected”——执行操作前确认选择范围
仅显示适用于当前选中项的操作——如果某些操作仅支持单个项，在多选状态下禁用这些操作
“Clear”按钮取消所有选中并关闭工具栏
破坏性批量操作（如Delete）始终触发确认对话框，并显示数量：“Delete 3 projects? This cannot be undone.”

全选： 表格表头的复选框选中当前页面的所有项。二级操作“Select all 247”可扩展至整个数据集。

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

Sorting and Filtering

排序与筛选

Column sorting (table view)

列排序（表格视图）

Click a column header to sort ascending; click again for descending; third click clears sort
Active sort column shows a directional arrow (↑ ↓)
Only sortable columns are clickable — non-sortable columns have no hover state on header

点击列标题进行升序排序；再次点击切换为降序；第三次点击清除排序
活跃排序列显示方向箭头（↑ ↓）
仅可排序列可点击——不可排序列的表头无悬停状态

Filters

筛选

Persistent filters belong in a sidebar or filter bar above the collection
Active filters should be visible as chips/tags that can be individually removed
"Clear all filters" removes all active filters in one action
Filter count badge on the filter button when filters are active:
```
Filter (3)
```

持久化筛选器位于侧边栏或集合区域上方的筛选栏中
活跃筛选器应显示为可单独移除的标签/芯片
“Clear all filters”按钮可一键清除所有活跃筛选器
当筛选器激活时，筛选按钮上显示筛选数量标记：
```
Filter (3)
```

Empty states

空状态

No results from filter: "No results for these filters. [Clear filters]" — do not show a generic empty state
Genuinely empty collection: show a call to action for the first item: "No projects yet. [Create project]"

筛选无结果： “No results for these filters. [Clear filters]”——不要显示通用空状态
集合为空： 显示首个项目的创建引导：“No projects yet. [Create project]”

Search and Autocomplete

搜索与自动补全

Search is how users find one thing in a large set, so it must feel instant and recognisable.

Suggest from the first keystrokes. Start returning results after 1 character, at most 2–3 — don't make the user finish typing or press enter to see anything. Results appear live in a dropdown as they type.

Make a valid result recognisable at a glance. The whole point of a suggestion list is that the user spots their result in a long list without reading every row. Give each result more than a bare string:

a thumbnail/image where the item is visual (products, people, files),
the category / area it belongs to, and for typed domains (products, spare parts, services) a category icon and colour so the type is legible before the label is read — find good brand-appropriate icons for these result types (see [[brand-visual-language]]),
the matched text highlighted within the result.

This is a soft rule — not every search needs images — but the goal is constant: the user should identify the right result out of many, fast (reading is time — see [[ui-density]]).

Give a way out to the full results. The dropdown is a shortcut, not the whole story. Always offer "See all results for '…'", opening a full listing/results page with filters (the collection patterns above) for when the quick suggestions aren't enough.

Fully keyboard-navigable. Arrow keys move through suggestions, Enter selects, Esc closes — and it must all work by mouse too. Search is a power-user path; don't force the hand off the keyboard.

搜索是用户在大型数据集中查找单个项目的方式，因此必须即时响应且易于识别。

从首次按键开始提供建议。 输入1个字符后开始返回结果，最多不超过2-3个字符——不要让用户输完或按回车才看到结果。结果会在用户输入时实时显示在下拉菜单中。

让有效结果一目了然。 建议列表的核心是让用户无需逐行阅读就能在长列表中找到目标结果。为每个结果提供比纯文本更多的信息：

若项目是视觉类（产品、人物、文件），提供缩略图/图片，
显示其所属的分类/区域；对于特定领域的项目（产品、备件、服务），提供分类图标和颜色，以便用户在阅读标签前就能识别类型——为这些结果类型选择合适的品牌风格图标（参见[[brand-visual-language]]），
在结果中高亮显示匹配文本。

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

提供查看完整结果的途径。 下拉菜单是快捷方式，而非全部内容。始终提供“See all results for '…'”选项，打开带有筛选器的完整列表/结果页面（遵循上述集合模式），以便快捷建议无法满足需求时使用。

完全支持键盘导航。 可通过箭头键浏览建议，回车键选择，Esc键关闭——同时也支持鼠标操作。搜索是高级用户的操作路径，不要强迫用户离开键盘。

Table-Specific Patterns

表格专属模式

Sticky header

粘性表头

Table column headers stick to the top when scrolling vertically — users must always be able to see what each column means.

当表格垂直滚动时，列表头固定在顶部——用户必须始终能看到每列的含义。

Sticky first column

粘性首列

For wide tables that scroll horizontally, the first column (row identifier — name, ID) sticks to the left.

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

Row actions

行操作

Per-row actions (Edit, Delete, View) appear on hover in the rightmost column. Do not show them at rest — they add visual noise.

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

每行操作（Edit、Delete、View）仅在悬停时显示在最右侧列。不要默认显示——这会增加视觉噪音。

[Name]  [Status]  [Date]  [Amount]          ← 默认状态
[Name]  [Status]  [Date]  [Amount]  [Edit] [⋯]  ← 悬停状态

Column resize and reorder

列调整与重排

For enterprise data tables: allow columns to be resized by dragging the header border, and reordered by dragging the header. Persist the layout.

对于企业级数据表格：允许通过拖动表头边框调整列宽，通过拖动表头重新排列列顺序。持久化布局设置。

Making Numbers Comprehensible

让数字更易理解

A raw number is hard to judge on its own — "1,240 users" or "€48,900" means little without a reference. Presenting data is not just laying out the figures; it is giving them the context and shape that let a user understand them at a glance.

Give a number a reference. A bare value communicates far less than a value with a baseline: a percentage, an average, a delta, or a comparison. "€48,900 (+12% vs last month)", "72% of target", "avg 3.4 per user" — the comparison is usually the insight, not the absolute figure.

Visualise when the story is a pattern. Reach for a graph when the message is a trend, distribution, comparison, or relationship the eye reads faster than a column of digits. A single KPI can pair with a sparkline; a set of categories reads better as a bar chart than a table. A table is for looking up exact values; a chart is for seeing the shape.

Show time-series for anything that evolves. If a value lives and changes over time — revenue, usage, a status history — present its trajectory, not just the current snapshot. A trend line answers "is this getting better or worse?" that a single number never can. Whenever something is time-dependent, consider showing its history alongside its current value.

Choose familiar, widely-understood chart types. Pick the chart most people already know how to read — bar, line, area, pie/donut, sparkline — over an exotic one (sankey, radar, chord, treemap) that looks impressive but forces the user to learn the chart before they can read the data. Novelty in a chart type is a tax on comprehension; spend it only when a common chart genuinely can't tell the story.

Limited, semantic palette. At most 2–3 colours; each means exactly one thing (see [[status-colors-and-errors]]). Traffic-light or a known convention (brand-primary vs grey). Need more distinctions? Add a legend or tooltips — don't add hues. Chart craft (axes, legends, light/dark):

dataviz

. Pairing a chart with its table: [[coordinated-data-views]].

原始数字很难单独判断——“1,240 users”或“€48,900”在没有参考的情况下意义不大。展示数据不仅是罗列数字，还要为其提供上下文和呈现形式，让用户一目了然地理解。

为数字提供参考。 单纯的数值远不如带有基准的数值传达的信息多：百分比、平均值、差值或对比值。比如“€48,900 (+12% vs last month)”、“72% of target”、“avg 3.4 per user”——通常对比才是洞察点，而非绝对数值。

当数据呈现规律时使用可视化。 当信息是趋势、分布、对比或关联时，图表比一列数字更易被眼睛识别。单个关键绩效指标（KPI）可搭配迷你折线图；一组类别用柱状图比表格更易读。表格用于查找精确值；图表用于识别数据形态。

随时间变化的数据展示时间序列。 如果数值随时间变化——收入、使用量、状态历史——展示其变化轨迹，而非仅当前快照。趋势线能回答“情况在变好还是变坏？”，而单个数字永远做不到。只要数据与时间相关，就考虑在当前值旁展示其历史变化。

选择熟悉、广泛理解的图表类型。 选择大多数人已经知道如何阅读的图表——柱状图、折线图、面积图、饼图/环形图、迷你折线图——而非那些看起来炫酷但需要用户先学习图表用法才能读取数据的小众图表（桑基图、雷达图、弦图、树状图）。图表类型的新颖性是理解成本；只有当常见图表无法传达信息时才使用小众图表。

有限的语义色彩 palette。 最多使用2-3种颜色；每种颜色代表明确的含义（参见[[status-colors-and-errors]]）。使用交通灯配色或已知约定（品牌主色 vs 灰色）。需要更多区分？添加图例或提示框——不要增加色调。图表设计（坐标轴、图例、明暗）：

dataviz

。图表与表格搭配：[[coordinated-data-views]]。

Review Checklist

审核清单

Is a view mode toggle offered when data has both visual and detail dimensions?
Is the user's preferred view persisted across sessions?
Is the entire row or card the selection hit area — not just the checkbox?
Does selected state use a subtle background colour shift (
```
--color-primary-subtle
```
)?
Does a mass action toolbar appear when items are selected, showing the selection count?
Do destructive mass actions require a confirm dialog naming the item count?
Does "Select all" work per page, with an option to extend to the full dataset?
Are active filters visible as removable chips?
Does the empty state differ between "no results" and "genuinely empty"?
Are per-row actions shown on hover only, not at rest?
Is the table header sticky when the table scrolls vertically?
Are key numbers given a reference (%, average, delta, comparison) rather than shown bare?
Is a graph used where the story is a trend/distribution/comparison, and is time-evolving data shown as a time-series, not just a snapshot?
Are chart types familiar and widely understood (bar/line/area/pie/sparkline) rather than exotic ones that must be learned before they can be read?
Does a chart/infographic use a small, semantic palette (≤2–3 colours, traffic-light or a known convention), with each colour meaning one thing — and a legend/tooltips where the encoding isn't self-evident?

当数据同时具备视觉和详细维度时，是否提供了视图模式切换？
用户偏好的视图是否在会话间持久化？
是否将整行或整张卡片作为选择点击区域——而非仅复选框？
选中状态是否使用细微的背景颜色变化（
```
--color-primary-subtle
```
）？
选中项时是否显示批量操作工具栏，并展示选中数量？
破坏性批量操作是否需要显示项目数量的确认对话框？
“全选”是否支持按页选择，并提供扩展至整个数据集的选项？
活跃筛选器是否显示为可移除的标签？
“无结果”和“完全为空”的空状态是否区分开？
行操作是否仅在悬停时显示，而非默认显示？
表格垂直滚动时，表头是否固定？
关键数字是否提供了参考（%、平均值、差值、对比），而非仅显示原始数值？
当数据呈现趋势/分布/对比时是否使用了图表？随时间变化的数据是否展示为时间序列，而非仅快照？
是否使用了熟悉且广泛理解的图表类型（柱状/折线/面积/饼图/迷你折线图），而非需要学习才能理解的小众图表？
图表/信息图是否使用了少量语义色彩（≤2-3种颜色，交通灯或已知约定），每种颜色代表明确含义——且当编码不直观时是否添加了图例/提示框？