企业艺术采购系统重构:以任务为中心的体验设计

项目概述

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


APC 在2025年有重大的业务变化,其在网易使用了已有十余年,多年来业务持续变化调整,功能也不断累加,系统熵增的结构性问题逐渐显露:历史功能难以清理、导航层级复杂、工作台信息冗余、业务表单难以理解,以及页面性能和视觉体验不足,较难及时转变适配新业务的变化。


项目最初考虑通过视觉换肤和局部交互调整快速改善体验,但深入分析后发现,问题并非来自界面本身,而是长期业务演变与功能累积共同造成的系统性负担。

所以,这次改版的核心目标不再是局部优化,而是重新梳理系统的业务结构、信息组织方式与关键操作流程,在保留必要业务能力的前提下,降低系统的理解成本和操作摩擦。

前置准备

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

key_dimension

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

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

探索与聚焦问题

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

结合用户反馈探索问题

issue_discover

结合系统功能和流程分析问题

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

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

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

question_focus

🚨 全局性问题

一、业务负担

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

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

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

二、导航混乱

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

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

三、品质感

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

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

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

一、工作台

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

二、任务单据详情

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

问题根源

以上问题的产生均可追溯,而且并非独立存在,而是构成了一条问题链:

question_chain

所以,如果只调整颜色、间距、字体与组件样式,或者局部的交互体验,用户仍然还需要面对不断堆叠的功能、相同的业务复杂度,以及相同的信息组织问题。

因此,设计的第一步不是重新绘制界面,而是重新理解业务,并判断哪些复杂性应该被消除,哪些应该被重新组织。

设计思考

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

design_thinking

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

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

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

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

design_principle

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

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

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

设计策略

重组功能框架和导航结构

核心指引:从功能罗列到业务场景分类组织

APC 系统采用混合导航结构(左侧栏主菜单+顶部子菜单),功能层级较深,用户难以获得完整的系统认知。并将长期累积的功能直接暴露给用户,导致用户需要记忆功能所在的位置,而不是依据业务目标找到对应操作。

解决上述问题,不能只通过单纯收起菜单或减少导航视觉层级来实现,而是重新组织功能与业务任务之间的关系。

具体有以下3个方向:

  • 精简化:删减不存在业务场景的历史功能和部分定制化功能,如工时登记、周报/月报、成本管理等,减少用户浏览的无关入口。
  • 业务场景分类:主要分为七大工作场景:任务单据跟踪管理、费用结算、供应商管理、项目相关配置、查看报告、艺设团队管理,有效帮助用户记忆和定位,解决过往功能分散的问题。
  • 调整入口层级:任务单据的跟踪管理是APC的主干业务,将其从原工作台拆出来放在一级菜单,并将单据类型作为子级菜单,功能路径更清晰,同时也缩短用户触达目标的路径。

navigation_role

同时,结合用户群体权限划分,用户看到的导航菜单更简洁并符合岗位职责所需,解决过去菜单混合不同职责内容的问题。

整体的设计逻辑是

design_logic

另外,在规划整个系统导航结构的表现层时,要充分考虑保持业务功能的同时能让用户从已习得的使用习惯中快速适应,也要有利于各模块的规划分类和后续的扩展性。

navigation_constructure


重新定义工作台

核心指引:从「做事的地方」转变为「找路的地方」

基于用户的角度去思辨业务,工作台在用户使用APC的整个链路中承载着什么作用?各类角色的用户需要的是什么?

一、旧工作台

将不同业务的功能入口与待处理事项集中展示,强调进入系统后即可开始操作。

各类业务场景的主要功能通过页面顶部的tab组件集中在一块,各项需要处理的事务以列表的形式平铺展示给用户,让用户进来直接干活。

随着功能持续增加,工作台逐渐成为一个混合了导航、任务列表与业务信息的页面。由于不同角色看到的内容高度相似,用户仍然需要自行筛选信息,判断哪些内容与自己的职责相关。

旧工作台

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

homepage_role

用户角色图

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

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

这意味着,工作台的问题不只是信息太多,而是信息展示方式没有充分与用户的工作职责匹配。

三、新的方向

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

homepage_redefine

这一设计思路并不是简单地为不同用户制作不同首页,而是根据工作场景重新定义工作台的职责:有些用户需要通过它理解全局,有些用户只需要快速进入工作。

例如:

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

homepage_show

各角色的关注内容示例:设计上通过建立共享框架,通过调整信息模块、入口以匹配不同角色职责

设计的关键不在于展示多少信息,而在于让每一类用户都能快速识别与自己相关的信息,并知道下一步应该做什么。


单据详情优化

核心指引:从字段堆积向围绕业务组织信息

表单的易用性不仅取决于页面是否整洁、内容多与少,更取决于用户是否能理解字段含义、判断当前状态,以及容易找到并完成自己负责的操作。

旧详情页

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

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

form_complexity


基于 APC 业务单据的复杂性,在设计上主要考虑点不应是如何把更多字段放进一个页面,而是如何让用户在正确的业务阶段,理解并处理正确的信息。

于是,根据用户使用表单的行为,将表单的通用交互拆分为3个关键设计点:阅读、编辑和提交,结合上述探索聚焦的问题制定相对应的设计目标和设计策略。

form_design_keypoint

所以对单据详情的优化有以下4项重点内容:

01.统一信息结构,共享页面布局

原有表单在长期迭代中不断增加字段,缺乏稳定的分类方式。用户需要在分散的信息之间建立联系,也难以快速识别重点。

设计上首先建立统一的表单框架,并根据业务属性将字段划分为标题区、基本信息、成本信息、制作信息与操作区域等模块,将零散的字段信息有规律的组织。

这并不意味着所有表单必须完全相同,而是为不同业务类型建立共同的组织规则,一种载体框架,适用于APC多种类型的业务表单,让用户能够逐步形成稳定的阅读预期。

另外,结合阅读场景提供「抽屉形式」和「独立页面」2种查看形式,前者便捷填单和切换,后者专注沉浸式查看。

form_layout_example

form_layout_fileds

02.根据角色与业务阶段决定信息优先级

不同角色关注的字段不同,同一用户在不同业务节点需要完成的操作也不同。

因此,在共享的表单结构之上,应该根据当前角色、单据类型和流程状态,分角色和节点动态展示与当前任务相关的信息,并明确哪些字段可以可查看或编辑。

例如:上游用户在派单前已经知道任务属于内部制作还是外包制作,但旧表单并没有以足够直观的方式呈现,导致下游用户并不一定清晰,仅凭最终的分配人识别推断。

设计上需要把业务上已经明确的属性转化为界面中可直接识别的信息,而不是让每个用户通过其它字段信息间接推断。

03.表单轻量化:降低单据的阅读和填写成本

面对字段繁多、层级复杂的业务单据,从结构、内容和视觉三个层面进行轻量化重构,减少冗余信息与不必要的操作,让用户更聚焦于当前任务。

  • 结构轻量化:简化信息层级,释放页面空间
    • 精简填写区域:丢弃让用户难受的占了半屏的节点信息填写区域,释放更多空间用于信息阅读和填写。
    • 简化目录结构:结合用户的填单习惯,默认仅展示需求单所关联的任务底单,将目录树从4层简化为3层,目录树可根据需要收纳或展开,在降低目录复杂度的同时,减少默认加载的数据量。
  • 内容轻量化:精简冗余信息,简化用户填写
    • 删减冗余字段:协同产品梳理并删减冗余字段,以卡片化布局组织信息,提升内容的可读性与查找效率。
    • 减少重复填写:任务底单在待分配的节点,自动继承需求单的字段信息,无需用户二次重复填写,降低操作负担。
  • 视觉轻量化:弱化干扰,建立清晰的信息层级
    • 通过优化色彩体系、精简视觉元素和优化信息密度等,降低用户的视觉认知负担。
    • 同时保持重要信息的清晰传递和界面的呼吸感。

04.交互范式重构:让阅读与编辑适配不同业务场景

针对流程类与展示类单据在使用目的上的差异,分别建立对应的阅读与编辑模式,避免以单一交互方式处理不同的业务需求。

  • 流程类单据:阅读与填写一体化

针对不同流程节点需要展示和填写不同内容的特点,结合用户角色与节点状态,动态控制字段的可编辑范围,并采用平铺展示的方式,让用户在阅读信息的同时即可完成填写,实现所见即所得。

这一方式减少了阅读区与填写区之间的空间争夺,降低阅读与编辑之间的切换成本,让信息理解与业务操作自然衔接。

  • 展示类单据:以阅读为主,按需进入编辑

对于以信息查阅为主要目的的单据,默认采用更适合阅读的信息呈现方式,避免编辑控件持续干扰内容浏览;当用户需要修改信息时,再通过独立的编辑入口进入编辑状态,兼顾日常查阅效率与必要的编辑需求。

form_edite&read


品质感提升

在完成信息架构和核心业务流程的重构后,视觉规范才真正有了稳定的基础,从以下几个方面提升 APC 整体的品质感:

design_quality

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

总结

这次 APC 改版的核心价值,在于设计介入的深度。

面对一个长期迭代、业务规则复杂、功能不断累积的企业系统,我们不应只停留在视觉换肤和局部交互修补,而是从业务、角色、功能与信息结构入手,重新梳理系统应该如何服务于用户的工作。

通过清理历史功能、重组导航、重新定义工作台、优化复杂表单和建立统一设计规范,项目尝试将一个以功能堆积为特征的系统,转变为一个以用户职责和工作任务为中心的工作环境。

这一案例也验证了企业级 UX 设计中的一个普遍现状:

复杂系统的体验问题,往往不是因为用户看到的信息不够漂亮,而是系统没有以用户能够理解和使用的方式组织业务。