责任编辑作者在对一个B2C控制系统展开控制系统解构的操作过程中，发现存有着许多问题，引致各前台控制系统的采用者新体验不标准化，与业界杰出的B2C控制系统差异非常大。只好下定决心采用 Ant Design Vue 这套架构对原有控制系统再展开一次强化，责任编辑讲诉了这之中详细情况页的导则化，一起来看一下吧。
2016 年，我进入一家小型跨境B2C子公司，开始负责管理总体B2C控制系统的控制系统解构商品组织工作，将原先两套开放源码的B2C控制系统构架解构解耦成微粒度更小、松谐振的分布没落服务控制系统构架，因为原先的控制系统构架在操控性、工作效率、新体验上早已相比之下不能满足子公司的成长速度。
总体控制系统构架包涵品类控制系统、商品控制系统、库存量控制系统、打折控制系统、订货控制系统、售后服务控制系统、团体会员控制系统、财务管理控制系统、CMS 控制系统、CPS 控制系统等等。
2019 年，全部解构完成。整个操作过程，就像给一个高速运行的汽车换车胎。
解构操作过程中产生了许多欠账：
投入较少，大部份前台控制系统均由后端开发直接图形网页。
前台控制系统太多，相同商品副经理组织工作生活习惯、可视化能力、审美观水平各不一样，各别负责管理的前台控制系统采用者新体验不标准化。
大部份前台控制系统虽然都是用 Bootstrap 这套后端框架，但是 Bootstrap 模块用语非常多，引致相同商品副经理在课堂教学时存有差异。
以上五点，引致各前台控制系统采用者新体验不标准化，与业界杰出的B2C控制系统（如 shopify、有赞）差异非常大。
如前所述此，在考察了大量的后端架构情况下，我们下定决心采用 Ant Design Vue 这套架构对原有控制系统再展开一场强化，只好有了这篇导则化。
如上 “前台商品开发规范化 -Ant Design 课堂教学到破冰” 中早已说明了 ” 产业布局 “、” 网络连接 “、” 宽度 “、” 常见模块 “、” 美术设计 ” 等基础规范化，详细情况可查阅前文并浏览示例。
如上“前台商品开发规范化 -Ant Design 课堂教学到破冰 – 表第二篇“中早已说明了 ” 表单分区 “、” 表单设计原则 “、”Ant Design Vue 表单常见模块采用说明 “、” 表单课堂教学案例 “。
此文专门讲诉详细情况页的导则化。
一、详细情况页分区
详细情况页分区是如前所述产业布局、网络连接、宽度规范化之上，经过大量分析原有前台详细情况网页，最后总结的两套详细情况页分区规则。
可查阅下图：
1. 详细情况页分区讲解
（1）表单产业布局：画布 1440px，导航区 200px，详细情况区两侧宽度分别 24px，详细情况区 1192px。
（2）详细情况页分为通栏、两栏、三栏、四栏四种样式。为了保持结构化的格式，防止多种详细情况页样式交错而出现的设计原则与视觉不标准化问题，此处约定” 一个信息分组只能选择一种样式，尽量避免一个信息分组出现两种详细情况页样式 “。
（3）单个详细情况页中尽量避免同时出现两栏样式、三栏样式、四栏样式，也就是在单个详细情况页中通栏样式 + 两栏样式、通栏样式 + 三栏样式、通栏样式 + 四栏样式可以结合起来采用，但是避免通栏样式 + 三栏样式 + 四栏样式结合起来采用。例如三栏样式和四栏样式同时出现在一个样式，会存有多个信息分组对齐线不一致的问题，看起来样式比较混乱，不利于提高浏览工作效率。
（4）经过大量分析前台字段长度，推荐详细情况页样式的采用频率如下：
2. 通栏规范化 & 通栏样例
3. 两栏规范化 & 两栏样例
4. 三栏规范 & 三栏样例
5. 四栏规范化 & 四栏样例
二、详细情况页设计原则
1. 是否需要详细情况页？
很多场景下，其实并不需要规划、开发详细情况页，用编辑表单也可以满足业务需求。那么具体是哪些场景不需要详细情况页呢？
总结原则就是：如果网页只需要编辑功能且没有查阅编辑操作日志的需求，可以不需要详细情况页，直接用编辑网页代替，节省开发成本。
如果网页里需要承载更多的功能，那么就需要设计详细情况页，并将功能归纳于按钮组中。如果网页需要展示操作日志，也需要设计详细情况页展示操作日志。
2. 按钮组
我们固定将详细情况页的按钮操作放置于网页右上角。按钮组分为常规操作和主操作，如下图所示：
如果有需要特别突出的功能，可以采用主操作按钮；如果没有需要突出的功能，按钮组可以不采用主操作按钮。常规操作的排序需要按操作的优先级依次排序。
3.Tab 分区
当网页非常长，浏览非常耗时的场景下，可以采用 Tab 分区功能。切换 Tab 可以快速切换至网页设置的锚点处，提高浏览工作效率。
4. 信息分组
信息分组在表单中也有提到此原则，详细情况页信息分组的归类需要和表单保持一致，不能出现 A 字段在表单中属于 ” 信息分组一 “，在详细情况页中属于 ” 信息分组二 “。
5. 字段顺序
查询栏、列表页、详细情况页的字段顺序尽量保持一致，避免字段过多时找不到对应的字段信息。
6. 数据脱敏
7. 折叠
在表单的设计原则中有提到，当同一个信息分组内内容非常多时，可根据采用频率将低频采用的内容折叠起来，提高高频内容的操作工作效率。详细情况页同理，也可以根据需要采用此功能。
8. 复制
详细情况页可以在高频复制字段右侧增加 ” 复制 ” 功能，方便采用者操作。例如订货号、快递单号等。
9. 操作日志
操作日志固定按列表展示 ” 操作类型 “、” 操作内容 “、” 操作人 “、” 操作时间 “，需要在 PRD 中详细说明相同操作所对应的 ” 操作类型 ” 和 ” 操作内容 “。如下图所示：
三、课堂教学案例
1. 商品详情
2. 优惠券详细情况
3. 订货详细情况
4. 欢迎语详细情况
四、结语
以上是详细情况页的商品开发规范化，案例中只列举了最复杂的高级详细情况页，简单详细情况页没有做更多的阐述，大家可以运用自己的理解，结合子公司的实际情况，制定自己团队的导则化。
Ant Design 的采用规范化，从第一篇的通用规范化，到第二篇的表单规范化，到这篇的详细情况页规范化，核心内容基本上就介绍完了。
最重要的是：要遵循规范化，但是又不能局限于规范化之中，要在理解规范化的基础上根据自身业务场景灵活变通，提升采用者新体验，提升采用工作效率。
接下来的系列主题是 ” B2C前台商品开发指南 “，我会从基础分类、运营分类、商品、库存量、营销、推广、装修、采用者、订货、售后服务、物流、财务管理、数据、权限等模块一一讲诉商品开发思路、功能点以及详细的商品开发方案、核心功能逻辑。
责任编辑由 @城雨尘 原创发布于人人都是商品副经理。未经许可，禁止转载
题图来自 Unsplash，如前所述 CC0 协议
