项目背景

介绍

网易互娱游戏制作所涉及到的美术、音频、视频、GUI等资源，除了游戏工作室会承担一部分制作，还会分配给内部的网易互娱「艺术设计中心」和签约的供应商/个人画师。APC平台的核心作用是制作任务单据跟踪管理（流转和审批），使整个资产制作任务链路的拆单、分配、报价、质量审核、业务验收等操作实现数字化管理。

---

改版原因

APC 在2025年有重大的业务变化，其在网易使用了已有十余年，多年来业务持续变化调整，功能也不断累加，系统熵增问题显露，较难及时翻身适配新业务的变化，同时累积了一系列体验等问题，这些已经被高层看在眼里，自上而下的改版。

---

面临困境

前期希望通过换肤和局部交互调整的形式，快速改造 APC 的视觉风格和体验，用低成本的方式先让高层看到有所改动。但这个方向很快被否定，高层希望更彻底地解决。

当时的状态是：大家都知道要改版，但没人知道怎么做！。

前置准备

为了尽快了解和消化 APC 的业务，分别从 「功能矩阵」「业务场景」「用户角色」「关键词」 4个维度作为切入口，构建了一个对 APC 相关业务全貌的认知模型。

维度	作用
功能矩阵	了解系统有哪些功能点、功能之间的关系，包括本体功能和第三方系统的关联。
业务场景	了解用户使用这些功能完成哪些业务述求，同时划分核心场景和基础场景，以及这些场景所对应的业务流程，把更多的精力放在重要的内容上。
用户角色	从业务角度看，不同的用户角色负责不同的业务内容，了解用户分别使用什么功能，参与哪些流程环节，对设计上的思路和决策有影响。我们的用户角色是按业务岗划分的，不同的用户角色实际上是反映了不同的功能集合。
关键词	每个关键词都有它的业务背景、作用意义和交互逻辑，以及它的使用场景和相关联的关键角色。

若需更详细了解 APC 的业务和用户，查看链接。

探索与聚焦问题

随着深入了解业务和真实用户反馈的使用问题，从设计的角度认为，仅优化表现层的视觉风格是治标不治本，系统多年来累积的问题不去解决是不会有实质性的收益，因为这是一个系统性问题，不仅视觉样式问题，还包括业务调整问题、技术历史问题和用户体验问题。

结合用户反馈探索问题

剖析和聚焦问题

以上只是通过指标初步定位问题方向，为了进一步明晰 APC 的问题细节和产生原因，我们设计上做了一系列的前置工作进行深入分析：

• 梳理系统的功能框架，根据业务场景和用户功能明细，对功能进行二次分类。
• 结合具体的页面，系统性去剖析APC的体验问题。

基于设计的角度总结，APC的体验问题主要聚焦于在以下几个方面：全局性问题（业务负担、导航结构、品质感），核心功能问题（工作台、单据/表单详情）。

🚨 全局性问题

一、业务负担

• 过时业务场景：部分历史功能在业务调整后已不存在使用场景，但旧功能仍在系统上保留，所以系统越来越冗肿。

• 定制非核心功能：为极少数团队定制保留一些非核心功能，又与其它功能有耦合，日常迭代的设计和研发都需要额外考虑是否有影响。

• 非业务驱动：某些功能（抢单、内部竞价）是由于领导基于KPI压力拍板去做，实际上做完没几个人用，脱离了实际业务发展需要。

二、导航混乱

主要问题体现在功能的组织逻辑不符合用户认知习惯，导致用户难以理解信息层级、定位目标内容和完成操作。

• 条目过载、层级嵌套过深：单级导航在超过10个以上条目，用户需额外花费时间筛选目标；同时功能层级最深达6层，用户既要学习和记忆也要频繁点击，容易引发“操作疲劳感”。
• 功能分类逻辑混乱：属于同一模块的功能，被收纳到不同的模块，信息组织上违反了“聚类原则”。
• 可发现性低：缺泛直观性和自然映射，用户无法通过常识或逻辑推断快速定位目标功能入口，被迫依赖经验积累形成 “位置记忆” 来完成操作，新用户面临徒峭的学习曲线和过高的认知负荷。

三、品质感

视觉品质过时（包括页面风格上使用了过多的投影、分隔线、高亮颜色，造成视觉干扰）、信息密度大、文案不一致、歧义等问题

• 视觉品质过时：表现层的页面视觉风格存在过度装饰性元素（如冗余的投影效果、密集的分隔线、高饱和高亮色的滥用），此类元素缺乏功能性意义，反而形成强烈的视觉干扰，分散用户捕获核心信息的注意力。
• 信息密度失衡：单位视觉空间内承载的信息元素过量，超出合理认知负荷范围，进一步加剧了视觉噪音的负面影响，导致用户难以快速聚焦关键内容。
• 文案一致性：缺泛一致性、连续性，同一个业务概念有不同的名词（如标准工作量、标准人天、标准成本）。

🚨 核心功能问题

「工作台」和「单据」是 APC 系统核心业务的载体，同时也是整个产品体验中问题最突出的所在地方。

一、工作台

• 功能堆砌：当前工作台已成为单纯的业务功能切换入口，主要价值局限于导航与定位。由于聚合逻辑缺乏长期规划，随时间增加不同阶段的所谓 “重点功能入口”，且没有有效的功能迭代与淘汰机制（只增不减），导致用户一进入系统就要面对信息冗余膨胀的界面，已经偏离了工作台“以任务导向的高效操作中枢”设计初衷，削弱了用户对关键任务的快速定位和处理能力。
• 信息与用户需求匹配度低：未基于用户角色实施差异化设计，内容千篇一律，与用户实际需求的匹配度低，忽略了不同用户群体的核心关注焦点差异 —（如采购外包管理人员与接口人，前者更侧重外包单的全链路节点监控，后者则聚焦于职责范围内的任务单处理节点及团队人天数据等信息）。
• 信息筛选成本高：信息架构采用同质化的【选项卡-列表】形式，重要信息无法突出，用户可能需要在大量无关信息中寻找自己需要的，这会增加他们的认知负担，降低办公效率。
• 性能体验问题：从列表进入单据详情页，存在明显的加载延迟（耗时 8-12 秒），导致交互响应滞后，容易引发用户焦虑情绪与操作挫败感，甚至导致任务放弃率上升。（主要原因是每次进入详情需要将列表的全量数据拉取到详情的目录树中）

二、任务单据详情

• 字段缺少组织逻辑：
  • 没有基于业务属性分类，增量式无序堆砌(新增字段没有分类组织），布局分散导致信息间关联性缺失；
  • 没有基于用户角色与任务阶段的信息差异化展示，增加用户的信息检索成本与认知负荷。
• 信噪比低：存在大量冗余过时字段（已失效的业务字段未移除）和杂乱的视觉细节，无效信息干扰用户对有效信息的识别与获取。
• 布局缺陷-阅读与填写冲突：空间利用和布局缺陷，信息阅读区与操作区存在空间侵占冲突，有效信息可视区域和真正的作业区域变少，直接导致阅读流畅性下降与信息输入效率低2大问题并存，造成用户操作过程中的交互摩擦感与情绪不适感。
• 视觉层级混乱：从视觉呈现上，页面元素（文字大小、颜色、间距、区块划分）未通过视觉权重区分优先级，导致用户无法快速识别关键信息。例如，目录树与内容详情区域、按钮与背景色对比微弱，用户难以判断操作焦点。

设计思考

至此，APC的重点问题已经清晰明确了，那接下来我们该如何解决？？

首先，我们应该要先明确用户真正需要的是什么？不同的用户群体对上述问题有什么不一样的期望？

其次，基于用户的角度去思辨业务，结合问题找出具备业务价值的体验目标

最后，确定设计改进大方向/策略。根据前期对业务的理解、对问题的探索和聚焦收敛，圈定了4个有比较高价值的方向进行设计，包括功能框架和导航结构、重构工作台、优化单据详情、提升整体品质感。

基于 APC 的重点问题源于各种历史包袱，我们整个设计过程上遵循两个基本设计法则：减法和分类。
目的是将复杂功能和信息逻辑揉碎后再重组，降低体验摩擦。

一、减法：功能上做减法，砍掉不存在业务场景的历史功能；信息上做减法，删减冗余字段。可以很大程度降低系统的复杂性，不管是业务层面、技术或设计层面。（这一块最终由产品跟业务方沟通决定）。

二、分类：功能导航优先按业务性质做聚合，属于同一业务模块的功能应该要放在一起，能让用户轻松记忆的触达路径；同样，字段上也要做分类，将字段属性或业务上强关联的字段组合在一起。

整体的思路是要做到「化繁为简」，这实际上是一个降维过程，将复杂功能和逻辑揉碎后再重组，能让用户更多容易理解的界面/信息载体，然后按照他们自己的认知和习惯高效达成使用目的。

设计策略

重组功能框架和导航结构

一、导航框架

APC系统产品功能架构有延伸多级的功能菜单。旧版使用侧边导航单一结构，子层级放右侧内容区的顶部，用户对产品功能缺少全局认知，导航效率低。

重新规划整体的系统信息框架时，主要考虑保持业务功能的同时能让用户从已习得的使用习惯中快速适应，另外要更有利于各模块的规划分类和后续的扩展性。

二、内容结构

精简化：删减不存在业务场景的历史功能和部分定制化功能，如工时登记、周报/月报、成本管理等。

导航分类场景化：按业务场景重新分类和聚合，主要分为七大工作场景：任务单据跟踪管理、费用结算、供应商管理、项目相关配置、查看报告、艺设团队管理，有效帮助用户记忆和定位，解决过往功能分散的问题。

按用户群体的权限划分范围：结合业务调整，导航菜单根据角色权限划分范围，看到的更简洁且符合期职责所需，解决过往菜单权限混乱的问题。

缩短核心功能触达路径：任务单据的跟踪管理是APC的主干业务，将其从原工作台拆出来放在一级菜单，并将单据类型作为子级菜单，功能路径更清晰，同时也缩短用户触达目标的路径。

– 效果图展示 –

重新定义工作台

设计之前：基于用户的角度去思辨业务，工作台在用户使用APC的整个链路中承载着什么作用？各类角色的用户需要的是什么？

一、了解工作台的作用

原工作台是一个「做事的地方」，把各类业务场景的主要功能通过页面顶部的tab组件集中在一块，各项需要处理的事务直接以列表的形式平铺展示给用户，强调功能性和效率，目的是让用户可以直接操作，进来就是干活的，在APC系统中充当着一个任务中枢的作用。

原工作台本质上是一个功能视角下的产物，而且让用户进入系统就要直接面对堆满功能入口的顶部导航和冰冷且同质化的内容列表，是很容易迷失方向性和目的性。

二、从功能视角转换为用户视角

用户角色图

通过对业务的调研和访谈发现，APC有超过10类的用户角色，不同的用户使用 APC 的功能跟其岗位职责有强关联，主要有以下几点体现：

• 一个角色兼顾多个业务场景：如采购外包管理组，既要跟踪任务单据，也要管理外派人员和供应商打分等；接口人除了要拆单、评估标效等单据相关的处理，也要为团队人员评估绩效。
• 信息关注点差异：每个类型的用户角色所关注的信息点不同，如采购外包管理组和商务组，对任务单据的跟踪是有差异的，前者关注验收前所有制作链路的环节，后者关注结算相关的环节。
• 内容颗粒度差异：兼顾多个业务场景的用户会更倾向于对负责的工作内容有全貌的了解，而偏执行的用户侧更倾向于快速完成任务。

基于上述对用户的分析，我们提供给APC用户的应该是一种基于用户角色实行差异化信息的设计，以信息展示为核心，聚焦信息传递和导航引导，在APC系统中起到能满足不同用户工作场景的需要。

同时，对于兼顾多业务场景的用户（如采购外包、采购商务、接口人、APM等），工作台作为一个信息中枢，于用户而言是一个「找路的地方」，为该类用户提供职责相关的工作全貌总览的信息内容，而单一业务场景的用户直达相应的功能模块，无需提供工作台。

各角色的关注内容由产品提供

单据详情优化

APC 的单据是业务核心载体，单据详情的设计难点主要来源于业务上的复杂性，所以在开始设计之前就优先拆解各类业务表单的复杂性。

复杂内容	描述
字段概念	数量多达100多个字段，垂直领域的字段晦涩难懂，要通过背后的其业务含义了解。
单据类型	- 按业务内容可划分为3种类型的单据：需求单、任务底单、结算单。 - 按表单类型可划分为2种：流程类单据和阅读类单据。 - 流程类单据按分配对象划分为4种类型：内包单、国内供应商单、国外供应商单、个画单。
角色和节点	流程类单据不同类型的单据有不同业务节点线，不同的用户会关注不同的单据和流程节点，每个流程节点所填写/阅读的信息均有差异。

---

APC 的单据是业务核心载体，基于用户使用表单的行为，将表单的交互拆分为3个关键设计点：阅读、编辑和提交，结合上述探索聚焦的问题制定相对应的设计目标和设计策略。

结合对单据设定的设计目标和策略，以下是对单据详情做的具体优化：

统一表单结构

• 一种载体框架，适用于APC多种类型的业务表单。
• 结合阅读场景提供「抽屉形式」和「独立页面」2种查看形式，前者便捷填单和切换，后者专注沉浸式查看。

信息分组

• 结合业务属性，将字段大致分为几大类：标题区、基本信息、成本信息、制作信息、底部操作等，遵循格式塔-接近性原理，将零散的字段信息有规律的组织，并且同时考虑不同类型的业务单据。
• 分角色、阶段重点信息及状态突出展示：结合业务流程，针对不同阶段、不同用户展示所需关注信息。
• 重点内容：根据用户业务派单的场景可得知，在填单前就已经清楚是分配内包还是外包（国内供应商/国外供应商/个画），但原单据上仅凭最终的分配人标记，其它阅读的人不能完全全了解。

---

表单轻量化

• 结构轻量化：

  • 丢弃让用户难受的占了半屏的节点信息填写区域，降低页面布局的复杂性。
  • 结合用户的填单习惯，简化单据的目录树层级结构（从4层简化为3层，大大减少数据量），默认仅展示需求单所关联的任务底单，目录树可根据需要收纳或展开。

• 内容轻量化：

  • 删减冗余字段（这部分主要与产品决定），以卡片化的形式组织和展示字段，提升阅读效率。
  • 分角色和节点动态展示信息，定位和展开当前角色和节点所关注的卡片内容。
  • 减少填写工作量：任务底单在待分配的节点自动继承需求单的字段信息，无需用户二次重复填写。

• 视觉轻量化：

  • 通过优化色彩体系、精简视觉元素和优化信息密度等，降低用户的视觉认知负担。
  • 同时保持重要信息的清晰传递和界面的呼吸感。

制定阅读和编辑的交互范式

• 【流程类单据】：当各流程节点需展示/填写不同内容时，根据用户角色和节点状态共同判断可编辑字段，平铺展示，整个填写过程所见即所得，提升阅读和填写效率，解决表单因空间布局结构缺陷导致的阅读区与填写区域互相侵占的问题。

• 【展示类单据】：以阅读为主要述求，默认状态下更聚集于阅读，如有编辑需要，通过提供独立的编辑入口触发编辑态。

品质感提升

提升 APC 整体的品质感，从各种设计细节入手，主要有以下几类设计策略：

• 设计语言升级和规范统一
  • 层级化色彩体系：明确的「主色+辅助色+中性色」体系，符合Web WCAG 2.1 标准。
  • 样式梯度：颜色、圆角、阴影、字体大小、间距留白等有具体层级关系，并且针对不同场景有适配的参数。
  • 图标：统一图标风格。
  • 统一的组件：Web端交互所涉及的基础组件和业务组。
• 边缘场景覆盖
  • 极端内容适配：目录树标题自动换行+中省略，最多2行，末尾保留5个字符。
  • 金额超万显示：数值底部金额标识符。
  • 分辨率适配：高分屏和低分屏自动或手动调整内容显示大小。
• 文案
  • 贴近业务目标：节点文案结合业务场景重新命名，格式统一。
  • 术语统一：同一概念的内容统一叫法，减少用户认知的成本。
  • 精简表达：删除冗余词汇，控制长度。
• 内容结构化与可读性
  • 复杂内容“模块化”拆解：表单详情的字段信息以卡片形式重新分类组合。
  • 信息展示优先级：列表内容、表单详情等通过 “字号 + 字重 + 颜色” 建立内容层级。
• 简化视觉噪音
  • 去除冗余元素：以内容为中心，删除不必要的分割线、阴影（可用留白或分层底色替代）。
  • 克制的视觉层级：通过大小对比、留白、字体层级等突出核心内容，减少高亮颜色的使用。
  • 隐藏次要功能：非高频操作放入下拉菜单或“更多”按钮。

总结

一、设计不应局限于需求的接收方，可以是产品的共同缔造者，利用一切可能够改进的方式的方式去提升体验。

二、走近和聆听用户，结合业务思考设计，运用设计思维工具（如 双钻模型），提供一个结构化的流程，在设计过程中有全局性的节凑把握，进行广泛的探索和深入的聚焦，先保证设计正确的东西（方向），再到做正确的设计（结果）。

三、要精准还原业务和流程逻辑，更要思考用户如何与信息交互。例如在任务单据分配和查看时没有直观的信息体现它供应商单还是个画单，这对用户来说是较难通过分配对象来识别的，所以在“分配给”字段这里加上分配对象的来源选择。