Return

Planning 5.5 UI Redesign

项目背景

XXXX 是国内领先的 EPM 业财一体规划分析平台,经过几个版本的迭代,原有的UI系统渐渐过时,为了更好的产品发展,故在5.5 版本将对 UI 进行优化,以更好地展现产品能力的升级。

设计目标

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

重构方案

建立Design System

统一各条业务线中的设计规范,建立一套覆盖全面的design system。

建立素材库

建立统一的素材库、根据现有的业务素材,调整视觉元素。

建立业务组件库

在基础组件之上,根据业务需求,抽象出符合公用的业务组件。

Design System

figma

基础色板

包含主要色、次要色、中性色、强调色,分别用于品牌主色调、辅助色、背景和文字、吸引注意力。

figma

功能色板

包含功能色、图表色,分别用于状态信息展示和图表标记。

figma

风格样式

包含、阴影、模糊等样式。

建立素材库

设定基础的icon绘制元素规范

修改现有素材

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

➡️

建立业务组件库

业务组件库里主要是包含了3个产品线中共有的一些业务场景,按照业务类型可以分为6大类,模型、数据流、报表、页面表格、成员选择、可视化。

figma

设定模板

设定基础的icon绘制元素尺寸,比如线宽、圆角、样式等。

figma

修改现有素材

在不影响用户理解的情况下,调整现有界面元素。

示例页面