SuperAPI AI 工具集

operational-expert-tool-ui

设计与创作

查看项目

更新于 10-15 16:32

技能介绍

用途

运营专家工具是指受训领域专家(仓库操作员、调度员、规划师、分析师等)作为主要工作界面使用的软件,通常全天使用。这些用户不是正在探索产品的新手,而是以工具为执行手段完成既定工作的专业人员。

这与消费者软件或偶发使用的 SaaS 是根本不同的设计语境:设计优先级相反,信息密度和操作速度优先于可发现性和视觉宽敞感。

主要设计原则

1. 信息优先于留白

专家用户不需要呼吸空间来定位,他们熟悉工具。每一个空白像素都是错失展示其需要据以行动的数据的机会。

  • 数据表格使用紧凑行高(28–36px)
  • 行内显示次要属性(状态、类型、日期),而非悬停或详情面板
  • 优先使用文字标签而非仅图标:专家阅读快,纯图标界面在细节处拖慢他们

2. 工作流线性

专家工具用于完成既定任务序列,而非浏览。布局应反映工作流顺序:从左到右,或从上到下,匹配任务的心智模型。

[步骤 1:选择项目] → [步骤 2:配置] → [步骤 3:执行]

界面应让下一步在每个节点都显而易见,不隐藏在菜单后,也不要求离开当前上下文导航。

3. 持久状态

筛选、列宽、视图模式和面板开合状态是操作员工作上下文的一部分。它们应在页面重载后保留,并在会话之间保持一致,除非用户明确重置。不要每次访问都重置界面——专家已花时间将其配置为符合自己的工作流。

层级手风琴表格

许多运营领域具有天然的层级数据:订单包含行;路线包含站点;项目包含任务。正确的模式是就地手风琴,而非跳转到独立页面。

示例:

▶ 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 一致:绿色表示就绪/完成,琥珀色表示警告/待处理,红色表示错误/阻塞,灰色表示非活动。

工作流状态筛选 vs. 搜索筛选

专家工具通常有两种不同类型的筛选,应在界面中区别对待:

工作流状态筛选将数据集缩小到操作员当前的工作范围。它们持久、宽泛,代表一个决定(“我正在处理今天尚未分配的订单”)。将这些放在永久筛选栏或侧边栏中,始终可见。

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

不要将它们合并为单一筛选界面——操作员在“我在什么范围内工作?”和“那个特定项目在哪里?”之间切换心智模式。

示例:

[Workflow scope: Today ▾] [Status: Unassigned ▾] [Stock: Available ▾] ↑ 持久的工作流状态筛选

Search within scope: [___________]
                                                 ↑ 临时搜索

键盘导航

专家用户会学习键盘快捷键。它们不应是必需的,但能显著提升受训用户的吞吐量。

  • 方向键在表格中导航行
  • 空格或回车展开手风琴行
  • Escape 关闭打开的面板或对话框
  • 常用操作具有可发现的快捷键(在工具提示中显示:Delete [Del]、Include [Space])

不要依赖右键上下文菜单作为操作的唯一路径——它们不可发现,且会破坏纯键盘工作流。

规模化操作反馈

当操作影响多个项目时(批量分配、批量状态更新),反馈必须与规模成比例:

  • 少于约 10 项:行内确认即可
  • 10–100 项:带计数的 toast 通知(“42 orders updated”)
  • 100 项以上:操作期间显示进度指示,完成后显示摘要

绝不要在无反馈的情况下静默完成批量操作——专家需要确认操作已生效。

审查清单

  • 信息密度是否适合受训的日常用户(紧凑行、行内状态)?
  • 布局是否反映工作流顺序(从左到右或从上到下的任务流)?
  • 筛选、视图模式和打开的面板是否跨会话持久?
  • 层级数据是否以就地手风琴呈现,而非独立页面?
  • 每行加入控件是否始终可见,而非悬停时才显示?
  • 状态指示是否无需交互即可见?
  • 工作流状态筛选是否与临时搜索筛选分离?
  • 常用操作是否可通过键盘访问?
  • 批量操作反馈是否随受影响项目数量分级?