EPM 平台 / Design System / UI 重构

Planning 5.5 UI Redesign

作为国内领先的业财一体规划分析平台,Planning 在 5.5 版本进行了全面的 UI 重构。旨在通过建立完善的 Design System,提升产品一致性与开发效率。

Planning Redesign Hero

我的角色

Lead UI/UX Designer

项目周期

2024.10 - 2024.11

核心成就

  • • 构建了覆盖全业务线的 Design System,统一了视觉语言
  • • 重塑了图标与素材库,建立了标准化的绘制规范
  • • 抽象并沉淀了 6 大类业务组件,大幅提升了交付效率

项目背景

随着业务的快速扩张,原有的 UI 系统逐渐难以承载复杂的功能迭代。在 5.5 版本中,我们决定进行系统性的重构,以更好地展现产品能力的升级。

重构目标: 提升技术架构,提高开发效率,优化用户体验,确保产品一致性和灵活性。

Planning Project Cover

Design System 建设

我们统一了各条业务线的设计规范,建立了一套覆盖全面的组件库与样式系统。

基础色板

基础色板

包含品牌主色、辅助色及中性色系统

功能色板

功能色板

用于状态反馈与复杂图表标记

风格样式

风格样式

定义的阴影、模糊及层级规范

素材库与图标规范

设定基础的图标绘制规范,包括线宽、圆角与网格系统,确保所有视觉元素的高度统一。

Icon Specification 1
SPEC_SHEET_01
Icon Specification 2
SPEC_SHEET_02
Icon Specification 3
SPEC_SHEET_03
Icon Specification 4
SPEC_SHEET_04
Icon Specification 5
SPEC_SHEET_05
Icon Specification 6
SPEC_SHEET_06
Icon Specification 7
SPEC_SHEET_07
Icon Specification 8
SPEC_SHEET_08
Icon Specification 9
SPEC_SHEET_09

优化现有素材

在不改变用户心智的前提下,对现有界面元素进行了系统性的风格微调,通过统一的线宽与转角处理,使视觉感官更加现代与一致。

LINE_WEIGHT: 1.5PX
RADIUS: 2PX
Icon Modification Comparison

沉淀业务组件库

针对模型、数据流、报表等 6 大业务场景,抽象出高复用的业务组件,极大缩短了从设计到开发的链路。

绘制规范

设定基础图标的线宽、圆角与尺寸比例

界面元素

在不改变用户心智的前提下优化交互元素

绘制规范
界面元素

示例页面

INTERFACE_SHOWCASE
Showcase 1
Showcase 2
Showcase 3
Showcase 4
Showcase 5
Showcase 6
Showcase 7
Showcase 8
Showcase 9

RETROSPECTIVE

"好的重构不只是视觉的刷新,更是对系统架构的一次深度审视。"

在 Planning 5.5 的重构过程中,我们不仅解决了设计债务,更通过 Design System 为未来的快速迭代奠定了基础。这次重构证明了设计规范在复杂 SaaS 产品中的巨大价值。

EXPLORE_MORE_PROJECTS