把一张宽表拆回工艺流程：自动配料页面的 UX/UI 改造

自动配料页面最初的问题，不是字段不够，而是把所有字段同时摊在了一张表里：炉内、炉后、浇注三类配料混在一起；重量、比例、容差、固定比例、价格并列出现；目标成分又在另一张横向大表里同时表达炉前和产品目标。

用户面对的不是“制定一个配方”，而是一张需要不断横向滚动、反复确认列含义的配置表。字段本身有业务价值，但页面没有把业务过程表达出来。

这次改造的目标很明确：让页面按照真实工艺流程组织，让用户在每一步只处理当前阶段需要决策的内容。

原页面的问题：信息完整，但没有工作流

原页面的核心结构是：

基础字段
  ↓
一张配料大表
  ├─ 炉内字段
  ├─ 炉后字段
  ├─ 浇注字段
  ├─ 比例限制
  ├─ 重量 / 百分比 / 容差
  └─ 参考单价
  ↓
一张目标成分大表
  ├─ 炉前目标
  └─ 产品目标
  ↓
计算设置、计算按钮、统计结果

改造前：一张表承载了三个工序

第一张图里，炉内、炉后、浇注的字段被并列塞进同一张配料大表。第二张图继续把炉前目标、产品目标、计算设置和统计结果按宽表方式展开。用户需要在横向扫描中辨别工序、字段归属和下一步动作。

它有三个明显的体验问题。

第一，工艺阶段被表格列打散了。炉内主料、炉后辅料和浇注辅料本质上属于不同工序，用户却需要在同一行里判断多个阶段的输入框。操作时很容易把“本阶段需要填什么”变成“这一整行还有没有漏填”。

第二，主任务和低频配置抢占同一层级。最小比例、最大比例、固定比例是约束能力，不是每次制定配方都必须处理的内容；烧损策略、松弛计算也属于计算策略。它们和配料重量、成分目标并排时，会让页面显得比实际任务复杂得多。

第三，计算结果与成本统计没有形成闭环。页面既有统计结果，又有计算区域，用户很难判断哪些数字是输入、哪些数字是试算结果、哪些数字是最终成本口径。

改造原则：先表达工艺，再暴露参数

新页面不再以“数据库字段”组织，而是以用户的作业路径组织：

01 基础信息
  ↓
02 炉内配料
  ├─ 炉内主料配料明细
  ├─ 炉内铁水成分控制
  └─ 熔炼配料试算
  ↓
03 炉后 / 浇注配料
  ├─ 炉后 / 浇注辅料明细
  ├─ 产品元素成分控制
  └─ 炉后 / 浇注配料试算
  ↓
04 成本预估
  ├─ 全阶段配料明细
  └─ 成本汇总

这不是简单地把一张表拆成四张表，而是把“配方”重新定义为一个有顺序的生产指导过程。

改造后：四个区块表达一条工艺路径

改造后的页面先收口基础信息，再把炉内配料、炉后/浇注配料、成本预估依次展开。每个配料阶段内部使用左右两张表：左侧填写配料明细，右侧控制该阶段对应的元素成分，试算操作放在阶段底部。

炉后/浇注阶段保持与炉内一致的结构，但元素目标切换为产品元素成分控制；最后由成本预估统一汇总三个阶段的用量和成本。

页面结构前后切换动图

下面两张动图只展示真实截图的页面结构切换：第一张对比基础信息与炉内配料，第二张对比计算区域与成本收口。它们用于快速说明“宽表被拆成工艺阶段”这件事，不把静态图片伪装成操作录屏。

真实环境采集：从宽表到分阶段工作台

下面这段由旧版与新版环境的实际页面截图合成，展示同一“新建自动配料配方”入口的首屏变化：旧版将基础信息、配料、目标成分和计算参数连续堆叠；新版先给出基础信息，再把炉内、炉后/浇注和成本预估拆为清晰阶段。

01 基础信息：只保留建立配方所需的入口

基础信息区保留配方名称、配方编码、产品牌号、炉内目标总重等必要字段。配方编码生成动作紧贴编码输入框，不再单独占一行。

低频字段被移出主视线：

• “是否测试配方”移除；
• “炉内目标总重和加料比例只考虑主料”移入计算设置；
• 附加工艺参数改为“附加工艺参数（选填）”，默认收起。

这样做的关键不是减少字段数量，而是降低首次进入页面时的判断成本。用户先完成“这是什么配方、要做多少料”，再处理复杂参数。

02 炉内配料：把主任务放在第一屏

炉内配料是整个页面的主任务，因此采用左右并列布局：

炉内配料
├─ 左：炉内主料配料明细
│   ├─ 原料、别名
│   ├─ 配料重量、占总重、容差
│   └─ 新增炉内配料
│
└─ 右：炉内铁水成分控制
    ├─ 元素
    ├─ 最低、最优、最高
    ├─ 炉内熔炼元素增减率
    └─ 新增元素

配料明细不再显示“是否主料”。炉内配料在业务上就是主料，把一个必然成立的选项继续暴露给用户，只会制造无意义的确认动作。

重量和占总重也被视为同一个业务对象：修改任一值，另一个值自动换算；任何阶段的重量变化，所有配料的占总重都会按总配料重量重新计算。用户不需要理解两套独立字段，只需要表达“我准备加多少”。

成分控制则把“最低、最优、最高”收紧为一组连续关系：

最低值 ≤ 最优值 ≤ 最高值

填写最优值时，尚未填写的上下界自动补齐；已经有人工范围时，只在范围无法覆盖最优值时修正。这样既减少录入，又不会静默覆盖已有工艺目标。

03 炉后 / 浇注：独立于炉内，而不是炉内表的后半截

炉后和浇注属于后置工序，不能反向影响炉内目标。因此新页面把它们单独作为第二个阶段：

炉后 / 浇注配料
├─ 左：炉后 / 浇注辅料明细
│   ├─ 原料、别名
│   ├─ 加料阶段：炉后 / 浇注
│   ├─ 配料重量、占总重、容差
│   └─ 新增炉后 / 浇注配料
│
└─ 右：产品元素成分控制
    ├─ 元素
    ├─ 最低、最优、最高
    ├─ 炉外处理元素增减率
    ├─ 一键复制炉内成分目标
    └─ 新增元素

“一键复制炉内成分目标”不是强绑定。它只是为常见场景提供起点：把炉内已有的元素和填写值复制到产品目标；后续用户仍可按炉后、浇注工艺独立调整。炉后新增辅料也不会再反向往炉内成分表塞元素。

这条边界很重要：前置工序决定初始铁水状态，后置工序在此基础上调整。页面结构应当帮助用户理解这个因果顺序，而不是让数据在两个区域里互相污染。

操作优化：把系统动作放在用户动作之后

页面分区只能降低阅读负担，真正减少操作的是把重复判断交给系统，并把系统反馈放回用户刚刚完成操作的位置。这里的自动化有两个边界：它只补齐能从当前数据直接推导出的内容；凡是会改变工艺目标的动作，始终由用户确认。

用户动作	系统反馈	少掉的心智负担
在炉内或炉后阶段新增原料	自动汇总该阶段已选原料的元素；缺失元素加入对应成分控制区	不再需要先查原料成分、再手工新增元素
删除原料	重新汇总剩余原料元素；没有原料来源且未填写控制目标的元素随之移除	不必自己判断哪些空元素已经失效
首次填写最优值	自动补齐最低值和最高值	不必重复输入同一个目标三次
修改最优值	仅在现有上下界无法覆盖最优值时修正，始终保持“最低 ≤ 最优 ≤ 最高”	不会被静默覆盖人工范围，也不会留下无效区间
炉内填写成分目标	自动补齐尚未填写的炉后/产品目标，不反向污染炉内	前后工序有默认衔接，但仍保留各自的工艺边界
需要统一产品目标	用“一键复制炉内成分目标”显式复制元素和值	用户能区分“默认带入”和“主动覆盖”

这类自动化的关键是单向、可预期。炉内目标可以为后置工序提供起点；炉后辅料不能反向改变炉内目标。系统可以减少重复输入，但不替用户做跨工序的隐式决策。

换句话说，系统负责“带出已有事实”，用户负责“确认工艺意图”。这比单纯给表单增加联动更重要：它让自动化可解释，也让用户知道自己始终握有最后的控制权。

真实录制中，选择一条含 Mn、Si、C 的原料后，炉内成分控制立即补齐三种元素；配料明细、成分控制和成本预估也同步出现同一条原料。这是“选原料”这个动作应有的完整反馈，而不是让用户再去三个区域重复建立数据。

首次填写最优值时，系统自动补齐最低与最高；对应的炉内目标也按工序方向带入产品成分控制。用户只填写一次目标，系统只做可推导的同步。

当需要主动覆盖产品成分时，“一键复制炉内成分目标”明确完成这一步，而不是让两个阶段隐式双向绑定。

推荐值必须出现在决策点旁边

求解器给出的松弛建议不再放在远处的报告正文或独立结果区，而是显示在对应元素的最低值、最高值输入框旁。

元素目标输入框
  ├─ 当前填写的最低 / 最优 / 最高
  └─ 橙色建议值
       ├─ 悬浮后显示“应用”
       └─ 点击后只更新当前边界并移除该建议

当多个元素都有建议值时，阶段试算按钮旁才出现“一键应用建议值”，并要求二次确认。没有松弛建议时不显示该按钮。这样既支持逐项判断，也支持在用户明确知晓影响范围后批量处理。

推荐值的意义不是“计算失败后的报错文本”，而是把求解器发现的可行边界翻译成用户能直接处理的下一步。建议贴着元素目标出现、可悬浮查看、可单项应用、可确认批量应用，用户不需要在报告和表格之间来回找答案。

实际试算中，页面把建议值放在对应最低/最高值旁，并只在有建议时显示“一键应用建议值”。批量应用前出现二次确认；确认后当前输入框更新、建议标签消失，整个过程不需要离开当前阶段。

非常用参数不再和主任务竞争

计算方法、炉内烧损、炉外烧损、松弛开关和用量限制属于求解策略，不是每次制定配方都要处理的内容。它们被收进各阶段试算按钮旁的“配料计算设置”：默认收起，需要时就近展开。

这样，用户的主路径变成“填配料 → 填成分 → 试算”，而不是先被一组求解器参数要求做选择。配置没有消失，只是从每次必经的障碍，变成需要时才打开的专业工具。

真实交互：把低频策略收进就近入口

“配料计算设置”默认收起；用户点击试算按钮旁的设置入口后，才显示用量限制、成分松弛、计算方法和烧损策略。这段动图采集自新版真实页面，说明复杂策略没有被删除，而是从主路径中后置。

最值得展示的六个微交互

这些不是“锦上添花”的动效，而是把原本分散在用户脑内的判断变成可见反馈。每段操作控制在 5 到 8 秒，足以用于产品演示、方案汇报或交付培训：

1. 新增原料后，元素自动进入对应阶段的成分控制区；
2. 首次填写最优值，最低值和最高值自动补齐；
3. 炉内目标自动带入炉后，再通过“一键复制”完成显式同步；
4. 悬浮推荐值，点击“应用”后只更新当前元素边界；
5. 点击“一键应用建议值”，确认后批量更新所有建议值；
6. 展开再收起计算设置，说明专业参数始终可用但不抢占主任务。

试算设置：默认隐藏，但计算能力必须可见

计算设置从大块展开区域改成试算按钮旁的白底设置按钮。默认不展开，避免在填写配方时抢占注意力；需要调整策略时，用户可以就近打开。

每个阶段都有自己的：

• 配料试算按钮；
• 计算设置；
• 计算报告入口；
• 松弛建议。

熔炼试算只计算炉内配料；炉后 / 浇注试算则以炉内试算得到的重量和成分为基础继续调整。用户不需要再猜“这个计算按钮到底算了哪些料”。

松弛建议也不直接改写用户输入。系统把建议值显示在对应最低值、最高值旁边，用户可以逐项应用，或在确认后“一键应用建议值”。如果用户选择不应用，保存时会明确提醒：当前实际元素目标无法完全满足，但仍允许保存为待确认配方。

这里的原则是：计算器可以给建议，不能偷偷替用户改作业指导书。

04 成本预估：从重复统计改成可核对的收口

原页面的统计结果与成本预估职责重叠。新页面移除重复统计，最后只保留一个成本预估阶段。

左侧汇总炉内、炉后、浇注全部配料明细，动态跟随上方输入和试算结果；右侧用轻量指标区展示：

• 炉内配料总重；
• 炉后配料总重；
• 浇注配料总重；
• 总配料重量；
• 总成本；
• 吨产单价。

成本区不做重卡片，不再制造新的视觉层级。它的职责是核对和收口，而不是成为页面上第二个“主界面”。

这次改造真正减少的是什么

这次没有减少自动配料的业务能力，减少的是用户在每一步需要同时理解的东西。

原页面	新页面
按字段和表格列组织	按工艺阶段组织
炉内、炉后、浇注混在同一张表	每个阶段独立输入、独立试算
高频输入与低频约束并列	低频设置默认收起
重量、百分比像两个字段	视为同一个用量，双向换算
炉前、产品目标共用一张宽表	每个阶段各自拥有成分控制
松弛值可能只是计算结果	松弛建议可查看、可逐项应用、可确认保存
统计与成本信息重复	成本预估统一收口

工业软件的复杂性通常不能被删除，但可以被安排到正确的时机和正确的位置。自动配料页面不应该让用户先理解求解器、约束和全部字段；它应该先帮助用户完成一次清晰的工艺决策，再让计算能力在恰当的位置出现。

这次改造值得被展示的地方，不只是把宽表拆得更整齐。它把原本依赖经验、反复核对和跨区域找答案的配方制定过程，收敛成一条可理解、可试算、可回看、也可由用户最终确认的工艺工作流。求解器仍然复杂，但用户不必再替系统承担这份复杂。