文从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种用法。组件的用法在自己的系统中如何使用，需要定义清楚；如果不定义清楚，也会造成体验的差异。这里只挑选高频使用的组件说明，没有说明的组件可详细阅读Ant Design使用说明。

1. Menu 导航菜单

（1）使用内嵌菜单。

（2）左侧导航栏的收放交互按手风琴样式。

2. Icon 图标

（1）统一使用线框风格图标。

（2）统一使用SVG格式，确保在Retina屏幕上显示清晰。

3. Button 按钮

（1）按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮，主按钮在同一个操作区域最多出现一次。虚线按钮和危险按钮无需使用。

（2）使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到Dropdown.Button 中组合使用。

（3）添加 loading 属性即可让按钮处于加载状态。

（4）在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。『通过』和『驳回』都使用次按钮，系统保持中立。

4. Dropdown 下拉菜单

（1）下拉菜单弹出位置：靠近屏幕左侧的Dropdown按钮统一使用bottomLeft，靠近屏幕右侧的Dropdown按钮统一使用bottomRight，靠近屏幕底部的可使用topLeft或topRight。

（2）同一组按钮需要使用相同的弹出位置。

（3）统一使用移入触发菜单交互。

5. Input 输入框

（1）输入框统一采用默认高度。

（2）当输入内容有可能超出一行时，需采用“适应文本高度的文本域”。

（3）输入手机号码、身份证号码、银行卡号、金额时可结合Tooltip组件实现格式化展示。

6. Radio单选框

（1）用于在多个备选项中选中单个状态。

（2）和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择。当选项≥5时，不能使用Radio单选框，需使用Select选择器。

7. DatePicker 日期选择框

（1）日期选择组件包括以下四种形式：DatePicker、MonthPicker、RangePicker、WeekPicker。DatePicker、MonthPicker、WeekPicker均使用默认样式即可。

（2）RangePicker可以预设常用的日期范围以提高用户体验，统一使用今天、昨天、本周、上周、本月、上月。

8. Pagination 分页

（1）详情可查看下方的样式，包含数据总数、翻页、每页可以显示多少条、快速跳转至某页。

（2）每页可以显示多少条统一使用10、20、50、100。

9. Message 全局提示

（1）自动关闭的延时采用默认的3s。

（2）消息距离顶部的位置采用默认的24px。

10. Switch 开关

switch和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合，所以在表单中慎用switch开关。

三、文案规范

1. 当数据为空时，可使用『- -』来表示暂无数据。
2. 时间格式：年月日之间用半角短横线『-』，时分秒之间使用半角冒号『:』 表示范围之间使用半角波浪线『~』，并在其前后加上间隔以示区分。
3. 金额格式：1,000,000.00 界面显示2位小数。
4. 数量格式：1,000,000.00 界面显示2位小数。
5. 百分比格式：90.0%。
6. 使用『你』代替『您』，以拉近与用户之间的距离。
7. 使用『新建』而不用『新增』。
8. 使用『编辑』代替『修改』。
9. 使用『其他』代替『其它』。
10. 使用『此』代替『该』。
11. 使用『抱歉』而不用『对不起』，如果是我们系统造成的结果，可以使用『抱歉』，如果是用户自己造成的结果，则不使用这类词。
12. 使用『登录』而不用『登陆』，登录是登记记录用户输入信息的意思，切勿用成『着陆』的陆。
13. 专有名词需使用原有格式，如：iOS、iPhone、iPad。
14. 全英文的标题、标签、菜单项等需遵循英文句式中首字母大写的规范。

四、实践案例

1. 表格

（1）样例

（2）善用纵向空间

尽量不要出现横向滚动条，便捷的让用户一屏可以看到所有的信息，如下图所示。

（3）查询

查询字段的顺序需要和列表中字段顺序保持一致。统一使用左对齐，这样可以很好的兼容英语版以及查询标题非常长的场景。

（4）按钮组

使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到Dropdown下拉菜单中组合使用。3个并非绝对数值，可根据实际场景酌情考虑。

（5）单行操作

3个以上操作按钮时把更多操作放到Dropdown下拉菜单中组合使用。

（6）某一项内容过长

表格字段显示不完不折行，可省略显示不下的，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。

2. 表单

表单的规范更复杂一点，包含基础表单、高级表单、分步表单等，对组件的组合运用也要求更高，后续专门发文说明。

参考资料

[1]Ant Design设计规范

[2]Ant Design 设计模式

[3]Ant Design of Vue组件

[4]Ant Design 设计基础简版

[5]Ant Design of Vue定制主题

作者：Alvens，公众号：产品随笔（ID：bymono）

本文由 @Alvens 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

一下这条线，这些项目都选中，刚才应该选一个镶嵌曲线，现在都选上了。中心线就选择下面这条线，点击确定。草图还是完全定义，就完成草图。开始拉伸，就是操作拉伸，选择拉伸命令。

·首先看一下耳朵多厚，耳朵是在这里有一个厚度，这是五十七，先把耳朵拉伸五十七，之后选择分别把这些旋都选上，把中间孔也选上。看一下这个程，再选这边，无非就是拉伸的操作了，点击应用。

·之后再看一下耳朵拉伸成功了，这一面就是斜面，或者是这个面是个斜面，这边肯定是有个斜面，因为前视图的看了这面是多宽，这面是多长？这边是八十八，这边高度是九十六，看到了是吧九十六，八十八到这里，九十六，给它输一个九十六，有一点慢，给加快一下操作速度。

·刚才分析的有点慢，选错了，当选错的时候按住shift把它取消，出去选择，这里输入九十六，这边也是一样，还少选一块，点击应用。

·之后再拉伸一个，这边是有一个台阶孔，最高的也就是里侧，里侧是多少？是二百三，就直接输入二百三，二百三也就是这里边出一个二百三，重新取消选择一下，把这里选择一个相切曲线，让它快一点选，这样一个比较好。

·之后再选择中间这两个点，再把这个点选上，点击应用，外面是多少？外面是比较矮，是二百，能看出来，同样还是相继选的选这个，再选它，把这里输入二百，让它有个效果。

·看下这里没选到，还有哪里没选到？这条线没选上，点击应用，这个图基本上就是画完，画完了还差一个什么？检查一下，先把这个线隐藏一下，把它隐藏了好观察。

·看一下这个图，首先正是这是俯视图，看俯视图是没有什么区别的，看一下前视图，前视图差一个什么？差这个斜面是吧？斜面是四十七乘二十七的一个斜面，直接还是用拉伸命令，拉伸命令就选择这个面，画一条斜线，用斜线来代替，随便画一条斜线，然后就标注它的尺寸。

·这个横向是二十七，纵向的是多少？高度是四十七，完成草图，完成扫图，看它方向反了，拉伸朝那个方向，然后同样选择曲线，把它改成单条曲线，选谁？选这个线，长度是不是有点太长了？给它选一个结束的命令，要直至延伸部分，然后支付大家计算，选择无，因为一会要镜像，点击确定。

·之后再点选择插入关联复制镜像特征，把这个特征选上，之后就选择面就是y z 面，x z 面，不好意思，y x z 面，刚才没看，没看好，点击确定。

·之后给它一个合并，合并之后选择把它框选，点击确定。

这个图基本就画完了，画完了之后给大家简单验证一下。比如给大家看一下，前十图是这样的，这么看就是上面这张图是这样的，看的还是有一点不太清清楚，给它转换成线框模式，看一下是这样的，这里有些虚线，这两条虚线说明是耳朵的孔。

再换一种式图，给大家看一下，选择样是选择静态线框，看到了虚线，看一下俯视图俯视是什么样的，俯视也是一样的，也就说这图基本上是没有画错。

如果还想验证一下，随便验证一下，点击一下测量，点击分析，点击测量，测量一下台阶的高度，比如台阶高度是多少？看一下，三十，没有问题。

之后再测量一下宽度，这两个面宽度是一百二十二，就点这里，再点这里，看一下一百二十二。

.纸幅面按尺寸大小可分为5种，图纸幅面代号分别为A0、A1、A2、A3、A4。图框右下角必须要有一标题栏，标题栏中的文字方向为与看图方向一致。

2.图线的种类有粗实线、细实线、波浪线、双折线、虚线、细点划线、粗点划线、双点划线等八类。

3.图样中，机件的可见轮廓线用粗实线画出，不可见轮廓线用虚线画出，尺寸线和尺寸界线用细实线画出来，对称中心线和轴线用细点划线画出。虚线、细实线和细点划线的图线宽度约为粗实线的1/3。

4.比例是指图中图形尺寸与实物尺寸之比。

5.比例1：2是指实物尺寸是图形尺寸的2倍，属于缩小比例。

6.比例2：1是指图形尺寸是实物尺寸的2倍，属于放大比例。

7.在画图时应尽量采用原值比例的比例，需要时也可采用放大或缩小的比例，其中1：2为缩小比例，2：1为放大比例无论采用那种比例图样上标注的应是机件的实际尺寸。

8.图样中书写的汉字、数字和字母，必须做到字体工整，笔画清楚，间隔均匀，排列整齐，汉字应用长仿宋体书写。

9.标注尺寸的三要素是尺寸界限、尺寸线、尺寸数字。

10.尺寸标注中的符号：R表示圆半径，ф表示圆直径，Sф表示球直径。

11.图样上的尺寸是零件的实际尺寸，尺寸以毫米为单位时，不需标注代号或名称。

12.标准水平尺寸时，尺寸数字的字头方向应向上；标注垂直尺寸时，尺寸数字的字头方向应朝左。角度的尺寸数字一律按水平位置书写。当任何图线穿过尺寸数字时都必须断开。

13.斜度是指斜线对水平线的倾斜程度，用符号∠表示，标注时符号的倾斜方向应 与所标斜度的倾斜方向一致。所标锥度方向一致。

14.符号“∠1：10”表示斜度1：10，符号“ 1：5”表示锥度1：5。

15.平面图形中的线段可分为已知线段、中间线段、连接线段三种。它们的作图顺序应是先画出已知线段，然后画中间线段，最后画连接线段。

16.已知定形尺寸和定位尺寸的线段叫已知线段；有定形尺寸，但定位尺寸不全的线段叫中间线段；只有定形尺寸没有定位尺寸的线段叫连接线段。

17.主视图所在的投影面称为正投影面，简称正面，用字母V表示。俯视图所在的 投影面称为水平投影面，简称水平面，用字母H表示。左视图所在的投影面称为侧投影面，简称侧面，用字母W表示。

18.三视图的投影规律是，主视图与俯视图等长；主视图与左视图等高；俯视图与左视图等宽。

19.零件有长、宽、高三个方向的尺寸，主视图上能反映零件的长和高，俯视图上只能反映零件的长和宽，左视图上只能反映零件的高和宽。

20.零件有上、下、左、右、前、后六个方位，在主视图上只能反映零件的上，下，左，右方位，俯视图上只能反映零件的前，后，左，右方位，左视图上只能反映零件的上，下，前，后方位。

21.基本视图一共有三个，它们的名称分别是主视图，俯视图，左视图。

22.除基本视图外，还有仰视图，右视图和后视图三种视图。

23.按剖切范围的大小来分，剖视图可分为全剖视图、半剖视图、局部剖视图三种。

24.剖视图的剖切方法可分为全剖、半剖、局部剖、阶梯剖、组合剖五种。

25.剖视图的标注包括三部分内容：①表示剖切平面位置的符号（剖切线），并在 两端标有字母②表示投影方向的箭头③在剖视图上方注写有“×——×”字样。

26.省略一切标注的剖视图，说明它的剖切平面通过机件的对称平面进行剖切后而后画出的 。

27.剖面图用来表达零件的内部形状，剖面可分为实体部分和空心部分两种。

28.移出剖面和重合剖面的区别是：移出剖面-画在视图轮廓外面的剖面，重合剖 面-画在视图轮廓里面的剖面。

29.图样中的图形只能表达零件的结构形状，零件的真实大小应以图样上所标注的尺寸为依据。

30.标注尺寸的数字称为尺寸基础，机器零件长，宽，高三个方向上，每个方向至少有一个尺寸基准。

31.螺纹的五要素是螺纹牙型，直径，螺距，导程，线数，旋向。

32.只有当内、外罗纹的牙型，直径，螺距，线数，旋向一致时，他们才能互相旋合。

33.螺纹的牙型、直径、螺距都符合国家标准规定的称为标准螺纹；牙型不符合国家标准的称为非标准螺纹；牙型符合国家标准，但直径、螺距不符合国家标准的称为特殊螺纹。

34.外螺纹的规定画法是：大径用＿d＿＿＿表示，小径用＿d1＿表示，终止线用 粗 实线 表示。

35.在剖视图中，内螺纹的大径用＿D＿＿＿表示，小径用＿D1＿＿＿表示，终止 线用粗实线表示。不可见螺纹孔，其大径、小径和终止线都用粗实线表示。

36.常见的螺纹联接形式有螺栓连接、双头螺柱连接和螺钉连接。

37.常用键的种类有普通平键、半圆键、钩头楔键、花键。

38.圆柱齿轮按齿轮的方向可分为直齿、斜齿和人字齿。

39.齿轮轮齿部分的规定画法是：齿顶圆用粗实线绘制；分度圆用细点划线绘制；齿根圆用细实线绘制，也可省略不画。在剖视图中，齿根圆用粗实线绘制。

40.当零件所有表面具有相同的表面粗糙度要求时，可在图样右上角统一标注；当零件表面的大部分粗糙度相同时，可将相同的粗糙度代号标注在右上角，并在前面加注其余两字。

41.一张完整的装配图应具有下列四部分内容；①一组视图；②必要尺寸；③技术 要求；④零件序号和明细栏。

42.装配图中的尺寸种类有①规格尺寸②装配尺寸③安装尺寸④外形尺寸⑤其它 重要尺寸。

机械制图中常见的符号及意义：

直度-一个条件，一个面元素或轴是一条直线。

平整度-是条件，表面有所有的元素在一个平面。

圆度-描述条件对革命的表面（圆柱，圆锥，球）在所有点的表面相交的任何飞机。

圆柱度-描述了一个条件的旋转面，使所有的点面距离相等，一个共同的旋转轴。

线轮廓度-是条件允许量相同的剖面变化，醚单边或双边，沿着一条线元素的特征。

面轮廓度-是条件允许量相同的剖面变化，醚单边或双边，上表面。

周围标志-表明公差适用于所有周围的部分表面。

倾斜度-是表面，轴，或中线，这是从某一特定角度基准平面或轴。

垂直度-条件是表面，轴，或线，这是90度的基准平面或基准轴

平行度-一个表面，线，或轴，这是等距离的所有点，基准平面或轴。

位置公差-定义一个区域内的轴或中心平面的一个特点是允许不同的真正的（理论上精确）位置。

同心度-描述在其中一个条件的2个或更多的功能，在任何组合，有一个共同的旋转轴。

对称度 -是一种状况，其中一个功能（或功能）是处理有关对称中心平面基准特征。

跳动-是复合偏离理想形式的一部分表面上通过革命旋转（360度）的一部分，在基准轴

全跳动-是同时复合控制所有表面元素在所有圆轮廓测量位置的部分是通过旋转360。

最大材料状态（三菱）-是条件的一部分功能其中包含的最高金额

材料在规定的极限尺寸。那就是：最小孔尺寸和最大轴尺寸。

最小材料状态（落马洲）-意味着条件的一部分功能的大小，其中也包含了最小（最低）的材料，例子，最大孔尺寸和最小轴径。它的对面是最大材料状态。

投影公差区-适用于孔内的销，螺栓，螺钉，等等，是插入。它控制孔的垂直度的程度的预测从洞，因为它涉及到交配的一部分清除。投影公差区延伸高于地面的部分功能的针的长度，螺栓，螺钉相对于其组装与交配的一部分。

切平面-切面显示。该标志被放置在特征控制框后表示宽容。

自由状态的变化-是一个用来描述失真部分去除后的部队在加工过程中的应用

直径-圆形特征时使用的显示领域的绘图或表明，宽容是针锋相对的当用在特征控制框架

基本尺寸-用来描述的确切尺寸，轮廓，方向或位置的一个特征。一个基本的层面总是与特征控制框架或基准目标。（理论上精确尺寸标准）

参考尺寸-尺寸通常不容忍使用，仅供参考。它不适用于生产或检验业务。（辅助尺寸标准）

基准特征-实际是用来建立一个基准组件特征.

尺寸源-表示维源于飞机由短和三维表面的限制适用于其他表面

特征控制框-矩形盒包含几何特征符号，和形式，或位置公差。如果需要，参照基准和改性剂适用于功能或数据也包含在箱。

圆锥锥度-是用来表明锥度锥度。这个符号是始终显示垂直腿向左。

斜坡度-是用来表明坡平锥度。这个符号是始终显示垂直腿向左。

沉孔或锪平-是用来表示一个扩孔或空口平面。符号之前的尺寸的扩孔或空口平面，没有空间

埋头孔-是用来表示一个锪。符号之前的尺寸的锪没有空间。

深度-是用来表明，一方面适用于深度的特征。这个符号之前的深度值之间没有空间。

正方形-是用来表明，一个单一的尺寸适用于方形。符号之前的尺寸之间没有空间。

相同的地方-是用来与一个值显示的次数维度或特征是反复的绘制。

电弧长度-表明，维弧长度测量曲面轮廓。符号放在上面的维度。

半径-创建一个区域定义的弧（最大和最小半径）。零件表面必须躺在这个区域。

δ

厚度 新代词（t）

球面半径-之前的价值维度或耐受性。

EQS

均布-平均分布到某各部位

球形直径公差值-前应在指定的公差值代表球区。此外，一个位置公差可能被用来控制的位置，一个球形特征相对于其他特征的一部分。符号为球形直径之前的尺寸大小的特征和位置公差值，表明一个球形公差带

控制半径-创造了一个宽容的定义双圆弧（最大和最小半径），切向相邻表面。其中一个控制半径是指定的，部分轮廓公差带内的月牙形必定是一个公平的曲线没有单位或逆转。此外，半径在所有点上的部分轮廓不应小于规定的最低限额也不大于最大限度。

C

45°倒角

之间-表明一个外形公差适用于几个连续的功能，可以指定在外形公差的开始和结束。这些信件是参考使用符号（1994）或词之间的图纸发到早期版本的标准。

统计公差-是分配公差相关装配部件的基础上，统计（如装配公差等于平方根的平方和个别公差）。应用统计公差，公差个别组件可以增加或间隙配合的零件可减少。增加容忍或改进适合可能降低制造成本和提高产品的性能，但只应在适当的统计过程控制将被使用。因此，应考虑到指定所需的处长和/或血清或其他过程性能指数。

基准目标-是一个指定的点，线，或地区的一部分，用于建立基准参考飞机制造及检验业务。

靶点显示的基准目标点三维位于直接表面的看法。

1 三视图的位置关系的口诀：

正面画出主视图，俯视图就画在它下边。
右边画着左视图，三个视图位置不能变。

2 三视图的投影关系的口诀：

主视俯视长对正，主视左视高平齐；
俯视左视宽相等，三个视图相联系。
平面平行投影面，整个投影原形现；
平面垂直投影面，投影结果变成线；
平面倾斜投影面，形状大小有改变。

3 视图的线框与物体表面的关系口诀：

物体表面图上见，每个线框都是面。
线框表示什么面？三图配合来分辨。
主视绘出长高面，俯视画出长与宽。
左边显示宽和高，它们各自有关连。

4 线与投影的关系口诀：

直线平行投影面，它的长短不会变，
直线倾斜投影面，它的长度有改变，
倾斜角度越大线越短，
直线垂直投影面一条直线变成点。

5 剖面图面与物体的关系口诀：

圆柱立着切一刀，剖口变成矩形面；
越近中心面越大，斜剖上下有变化。
剖切平面注意选，通过轴线对称面；
若要切口原形现，切面平行投影面。
剖开物体画后部，切口画上剖面线；
剖视一般要标注，逢中剖切不标注。
外形简单宜全剖，对称视图可半剖；
局部剖切很灵活，如果需要就可剖。

6 标注尺寸的要领：

图中尺寸很重要，标注齐全不可少；
分析结构明制造，选好基准顺序标；
尺寸安排要醒目，方便看来容易找；
过细检查防差错，制造才能快又好。

7 CAD软件制图方法：

CAD软件本领大，什么图形全能画；
直线正交画平直，直线斜画角度拉。
先输一点定起点，再输数据到终点；
先按 @ 输数据，再按＜把度数插。
要想画圆定直径，找准基点把 D插。
矩形图形最好画，快捷菜单矩形拿，
抓住基点输长度，然后再把宽度画。
上机画图心别荒，选定方案再动手；
上下左右均匀布，图面美观又结清。
先画边框后细分，上下左右顺序画；
看的见的绘实线，摸不着的画虚划。
剖面要画粗实线，剖面填充图案见；
绘完图形标尺寸，清楚全面不露边。

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删除。

加入【制造交流圈】领5000个机械视频；

领1000个机械动图，领5000个机械图纸；

领上千G 机械资料，和机械老兵学机械。