后台产品设计规范AntDesign实践到落地

后台产品设计规范（Ant Design实践到落地）

本文从Ant Design布局使用说明、Ant DesignVue常用组件使用说明、文案规范、实践案例等方面进行了分析，分享了后台产品设计规范的注意事项。

2016年，我进入一家中型跨境电商公司，开始负责整体电商系统的系统重构产品工作，将原本一套开源的电商系统架构重构解耦成颗粒度更小、松耦合的分布式微服务系统架构，因为原本的系统架构在性能、效率、体验上已经远远不能满足公司的成长速度。

整体系统架构包含类目系统、商品系统、库存系统、促销系统、订单系统、售后系统、会员系统、财务系统、CMS系统、CPS系统等等。

3年过去，全部重构完成。整个过程，就像给一个高速行驶的汽车换轮胎。

重构过程中产生了一些遗留问题：

1. 更关注业务、架构、流程、功能、逻辑，对视觉、交互、体验关注较少。重构中前端开发资源投入较少，所有后台系统均由后端开发直接渲染页面。
2. 后台系统太多，不同产品经理工作习惯、交互能力、审美水平各不一样，各自负责的后台系统用户体验不统一。
3. 所有后台系统虽然都是用Bootstrap这套前端框架，但是Bootsrap组件用法非常多，导致不同产品经理在实践时存在差别。
4. 所有模块的重构产品方案，我虽然都有评审，但是评审时更关注流程、功能、逻辑，对视觉、交互没有制定统一的规范。

以上四点，导致各个后台系统用户体验不统一，与业内优秀的电商系统（如shopify、有赞）差距较大。

基于此，在调研了大量的前端框架情况下，我们决定使用Ant Design Vue这套框架对现有系统再进行一次优化，于是有了这篇设计规范。

一、Ant Design布局使用说明

1. 尺寸

原型稿的页面宽度统一使用1440px，侧边导航宽度的范围计算公式：200+8n，我们统一使用200px。

2. 适配

统一采用自适应界面-撑满式，右边内容区宽度则随浏览器宽度而改变。当内容区宽度不足 1024px 时，浏览器底部出现滚动条。

3. 间距

根据页面信息结构和内容层级，利用大、中、小三种间距来实现信息之间的亲密度区分；在 Ant Design 中，主要有以下三种间距：

二、Ant DesignVue常用组件使用说明

Ant Design Vue总共有57个组件，每个组件至少有5种用法。组件的用法在自己的系统中如何使用，需要定义清楚；如果不定义清：200+8n，我们统一使用200px。

2. 适配

统一采用自适应界面-撑满式，右边内容区宽度则随浏览器宽度而改变。当内容区宽度不足 1024px 时，浏览器底部出现滚动条。

3. 间距

根据页面信息结构和内容层级，利用大、中、小三种间距来实现信息之间的亲密度区分；在 Ant Design 中，主要有以下三种间距：

二、Ant DesignVue常用组件使用说明

Ant Design Vue总共有57个组件，每个组件至少有5种用法。组件的用法在自己的系统中如何使用，需要定义清楚；如果不