operational-expert-tool-ui

运营专家工具 UI

运营专家工具是受过培训的领域专家（仓库操作员、调度员、规划人员、分析师等）使用的软件，通常是他们整个工作日的主要工作界面。这些用户不是刚开始了解产品的新手，而是借助工具执行明确工作的专业人士。

这与消费级软件或偶尔使用的 SaaS 有着根本不同的设计背景。设计优先级也正好相反：信息密度和操作速度优先于易发现性和视觉留白。

---

主要设计原则

1. 信息优先于留白

专家用户不需要留出空间来熟悉界面——他们了解这款工具。每一像素的空白都意味着错失了展示行动所需数据的机会。

• 数据表使用紧凑的行高（28–36px）
• 将次要属性（状态、类型、日期）直接显示在行内，而不是悬停时显示或放在详情面板中
• 尽量使用文字标签，而非单独使用图标——专家阅读速度很快，只有图标的 UI 会拖慢他们的操作

2. 工作流线性化

专家工具用于完成明确的任务序列，而非浏览。布局应反映工作流顺序：从左到右或从上到下，与任务的思维模型一致。

[Step 1: Select items]  →  [Step 2: Configure]  →  [Step 3: Execute]

UI 应在每个环节清楚显示下一步操作，不要将其藏在菜单后，也不要要求用户离开当前上下文进行导航。

3. 状态持久化

筛选条件、列宽、视图模式以及面板的展开/折叠状态，都是操作员工作上下文的一部分。除非用户明确重置，否则这些状态应在页面重新加载后保留，并在不同会话间保持一致。

不要每次访问时都重置 UI——专家已花时间将其配置为符合自己的工作流。

---

分层手风琴表格

许多运营领域的数据天然具有层级结构：订单包含订单行，路线包含停靠点，项目包含任务。适合的模式是就地展开的手风琴，而不是跳转到单独的页面。

▶ Order #1042   ACME Corp    3 lines    Pending
▼ Order #1089   Globex       2 lines    Ready
    ├─ Line 1   Widget A    Qty: 12    ✓ In stock
    └─ Line 2   Widget B    Qty:  4    ✗ No stock
▶ Order #1091   Initech      5 lines    Pending

相比页面导航，手风琴模式的优势：

• 保留上下文——操作员可以同时查看多个订单
• 无需返回即可查看同级项目的状态
• 使用键盘导航（通过方向键展开/折叠）可让双手留在键盘上

**逐行包含切换项：**在规划和备货工作流中，可能需要明确选择每一行是否纳入批量操作。为每行设置始终可见的复选框或切换项，不要将其隐藏在悬停状态下。

---

一目了然的状态指示器

操作员根据状态做出决策。状态应无需交互即可查看。

推荐做法	避免
在行内始终显示彩色圆点或胶囊标签	只有悬停时或在工具提示中才显示状态
使用 2–3 种颜色各异的状态	使用超过 5 种状态颜色（难以记忆）
在颜色旁显示状态标签，以提升无障碍性	仅用颜色作为指示
在整个工具中保持颜色语义一致	同一颜色在不同表格中代表不同含义

状态颜色约定应与 status-colors-and-errors 保持一致——绿色表示就绪/完成，琥珀色表示警告/待处理，红色表示错误/阻塞，灰色表示非活动。

---

工作流状态筛选与搜索筛选

专家工具通常包含两种不同类型的筛选条件，在 UI 中应区别处理：

工作流状态筛选用于将数据集缩小到操作员当前的工作范围。它们会保留、覆盖范围较广，并代表一种决策（“我正在处理今天尚未分配的订单”）。将它们放在固定筛选栏或侧边栏中，并始终保持可见。

搜索筛选用于在当前范围内查找特定项目。它们是临时的。将它们放在可快速清除的搜索输入框中。

不要将这两类筛选合并为一个筛选 UI——操作员会在“我正在处理什么范围？”和“那个特定项目在哪里？”两种思维模式之间切换。

[Workflow scope: Today ▾]  [Status: Unassigned ▾]  [Stock: Available ▾]
                                                     ↑ Persistent workflow-state filters

    Search within scope: [___________]
                                                     ↑ Transient search

---

键盘导航

熟练用户会学习键盘快捷键。快捷键不应是必需的，但能显著提高熟练用户的效率。

• 使用方向键在表格的各行之间导航
• 按空格键或 Enter 展开手风琴行
• 按 Escape 关闭打开的面板或对话框
• 常用操作应提供易于发现的快捷键（显示在工具提示中：Delete [Del]、Include [Space]）

不要将右键上下文菜单作为执行操作的唯一途径——这类菜单不易被发现，也会妨碍仅使用键盘的工作流。

---

大规模操作的反馈

当操作影响许多项目时（批量分配、批量更新状态），反馈应与影响规模相称：

• 少于约 10 个项目：行内确认即可
• 10–100 个项目：显示带数量的 Toast 通知（“已更新 42 个订单”）
• 100 个以上项目：操作期间显示进度指示器，完成后显示摘要

批量操作完成后，绝不能不提供任何反馈——熟练用户需要确认操作已生效。

---

评审清单

• 信息密度是否适合每天使用的熟练用户（紧凑行、行内状态）？
• 布局是否体现了工作流顺序（从左到右或从上到下的任务流程）？
• 筛选器、视图模式和打开的面板是否会跨会话保留？
• 层级数据是否以内嵌手风琴的形式展示，而非单独的页面？
• 每行的纳入控件是否始终可见，而非仅在悬停时显示？
• 状态指示器是否始终可见，无需交互即可查看？
• 工作流状态筛选器是否与临时搜索筛选器分开？
• 是否可通过键盘访问常用操作？
• 批量操作的反馈是否会随受影响项目的数量而相应调整？