EPM 平台 / Design System / UI 重构
Planning 5.5 UI Redesign
作为国内领先的业财一体规划分析平台,Planning 在 5.5 版本进行了全面的 UI 重构。旨在通过建立完善的 Design System,提升产品一致性与开发效率。
我的角色
Lead UI/UX Designer
项目周期
2024.10 - 2024.11
核心成就
- • 构建了覆盖全业务线的 Design System,统一了视觉语言
- • 重塑了图标与素材库,建立了标准化的绘制规范
- • 抽象并沉淀了 6 大类业务组件,大幅提升了交付效率
项目背景
随着业务的快速扩张,原有的 UI 系统逐渐难以承载复杂的功能迭代。在 5.5 版本中,我们决定进行系统性的重构,以更好地展现产品能力的升级。
重构目标: 提升技术架构,提高开发效率,优化用户体验,确保产品一致性和灵活性。
Design System 建设
我们统一了各条业务线的设计规范,建立了一套覆盖全面的组件库与样式系统。
基础色板
包含品牌主色、辅助色及中性色系统
功能色板
用于状态反馈与复杂图表标记
风格样式
定义的阴影、模糊及层级规范
素材库与图标规范
设定基础的图标绘制规范,包括线宽、圆角与网格系统,确保所有视觉元素的高度统一。
SPEC_SHEET_01
SPEC_SHEET_02
SPEC_SHEET_03
SPEC_SHEET_04
SPEC_SHEET_05
SPEC_SHEET_06
SPEC_SHEET_07
SPEC_SHEET_08
SPEC_SHEET_09
优化现有素材
在不改变用户心智的前提下,对现有界面元素进行了系统性的风格微调,通过统一的线宽与转角处理,使视觉感官更加现代与一致。
LINE_WEIGHT: 1.5PX
RADIUS: 2PX
沉淀业务组件库
针对模型、数据流、报表等 6 大业务场景,抽象出高复用的业务组件,极大缩短了从设计到开发的链路。
绘制规范
设定基础图标的线宽、圆角与尺寸比例
界面元素
在不改变用户心智的前提下优化交互元素
示例页面
INTERFACE_SHOWCASE
RETROSPECTIVE
"好的重构不只是视觉的刷新,更是对系统架构的一次深度审视。"
在 Planning 5.5 的重构过程中,我们不仅解决了设计债务,更通过 Design System 为未来的快速迭代奠定了基础。这次重构证明了设计规范在复杂 SaaS 产品中的巨大价值。