产品主要是用于开发流程中的团队协作，其中代码相关的陈述是主管特别重视的部分

在B端的规划之中，详情页往往要承载着杂乱信息，而作为查阅者往往也会由于信息杂乱然后导致阅览本钱较高，因而详情页也受到了事务的重视，规划师也有规划难的感触。今天我供给一些古怪的规划思路来谈谈怎么规划得更轻松一些。

一、事务背景

产品主要是用于开发流程中的团队协作，其中代码相关的陈述是主管特别重视的部分，由于代码的规范性以及是否出现bug等情况会影响到产品的运用，也一起是中层主管对上面老板的告知之一。

中层主管除了通过数据概览阅读全体的进度外，还需要检查单个代码的质量陈述来判断属下是否合适自己的团队。

优化前的详情页包括12模块内容从上到下暴力平铺式布局，虽然有锚定导航和标题收起作为帮助办法，但是仍是无法快速阅读与了解全部内容。

二、困难点

1. 表现方式混杂，了解本钱高

包括12模块内容。方式杂乱，既包括多个表单多个表格和可视化，还有一个常规内容几百字左右文本域要出现。表现方式多样化，没有进行过合理的收拾，用户需要在表格/表单/可视化之间穿梭来寻找到自己想看的内容。

2. 内容高度很长，首页曝光度低

内容的排列办法选用的是区分模块之后自上而下的暴力平铺办法，内容多。遇到几个高度较高的表格或者是几个高度较大的折线图，后边的内容虽然有锚定导航帮助定位，但是帮助才能有有限。全体页面的阅览本钱很高。

接下来以“拼乐高”的场景来处理排版问题。

三、怎么处理

1. “拼乐高”的界说是什么？

无论是拼乐高仍是拼积木，假如你想拼的准和洽，那你就得有属于自己的办法办法，笔者将自己总结为：“分”“拆”“找”“选”。

2. 分-剖析图纸全体

事务中，主管看详情页的意图是信息的阅读与修改相关的信息，因而能够把规划定为：提高信息阅读搜索功率，便于执行操作。

3. 拆-怎么进行合理的分组

上一段已经拟定好了全体方针，现在开端将一切的模块开端拆分。

拆分的办法有很多，有：展示方式、时间、功能模块、用户阶段方针等等。

这儿笔者挑选的是多样结合的办法：

1. 以用户的阶段方针方位：用户在不同的重视不同的内容，以事务为例：用户更重视代码质量怎么，多少个，处理了什么有多少bug要处理，是否规范，有没有注释等。
2. 再根据展示方式+时间概念分为：文字定论，成果可视化定论以及全体趋势可视化出现，以及详细表格区域。

分别进行组合：

1. 文字定论：根底信息+文字定论。
2. 成果可视化：未验证，未处理，缺陷图标。
3. 全体趋势分为：全体折线图与损耗人力表工时表。
4. 全部详细：将一切的表格进行组合，以tab栏的方式进行组合进行切换。