后台产品设计规范（Ant Design实践到落地）
本文从Ant Design布局使用说明、Ant DesignVue常用组件使用说明、文案规范、实践案例等方面进行了分析，分享了后台产品设计规范的注意事项。
2016年，我进入一家中型跨境电商公司，开始负责整体电商系统的系统重构产品工作，将原本一套开源的电商系统架构重构解耦成颗粒度更小、松耦合的分布式微服务系统架构，因为原本的系统架构在性能、效率、体验上已经远远不能满足公司的成长速度。
整体系统架构包含类目系统、商品系统、库存系统、促销系统、订单系统、售后系统、会员系统、财务系统、CMS系统、CPS系统等等。
3年过去，全部重构完成。整个过程，就像给一个高速行驶的汽车换轮胎。
重构过程中产生了一些遗留问题：
- 更关注业务、架构、流程、功能、逻辑，对视觉、交互、体验关注较少。重构中前端开发资源投入较少，所有后台系统均由后端开发直接渲染页面。
- 后台系统太多，不同产品经理工作习惯、交互能力、审美水平各不一样，各自负责的后台系统用户体验不统一。
- 所有后台系统虽然都是用Bootstrap这套前端框架，但是Bootsrap组件用法非常多，导致不同产品经理在实践时存在差别。
- 所有模块的重构产品方案，我虽然都有评审，但是评审时更关注流程、功能、逻辑，对视觉、交互没有制定统一的规范。
以上四点，导致各个后台系统用户体验不统一，与业内优秀的电商系统（如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,000,000.00 界面显示2位小数。
- 数量格式：1,000,000.00 界面显示2位小数。
- 百分比格式：90.0%。
- 使用『你』代替『您』，以拉近与用户之间的距离。
- 使用『新建』而不用『新增』。
- 使用『编辑』代替『修改』。
- 使用『其他』代替『其它』。
- 使用『此』代替『该』。
- 使用『抱歉』而不用『对不起』，如果是我们系统造成的结果，可以使用『抱歉』，如果是用户自己造成的结果，则不使用这类词。
- 使用『登录』而不用『登陆』，登录是登记记录用户输入信息的意思，切勿用成『着陆』的陆。
- 专有名词需使用原有格式，如：iOS、iPhone、iPad。
- 全英文的标题、标签、菜单项等需遵循英文句式中首字母大写的规范。
四、实践案例
1. 表格
（1）样例
（2）善用纵向空间
尽量不要出现横向滚动条，便捷的让用户一屏可以看到所有的信息，如下图所示。
（3）查询
查询字段的顺序需要和列表中字段顺序保持一致。统一使用左对齐，这样可以很好的兼容英语版以及查询标题非常长的场景。
（4）按钮组
使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到Dropdown下拉菜单中组合使用。3个并非绝对数值，可根据实际场景酌情考虑。
（5）单行操作
3个以上操作按钮时把更多操作放到Dropdown下拉菜单中组合使用。
（6）某一项内容过长
表格字段显示不完不折行，可省略显示不下的，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。
2. 表单
表单的规范更复杂一点，包含基础表单、高级表单、分步表单等，对组件的组合运用也要求更高，后续专门发文说明。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/181706.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
