在B端的规划之中，详情页往往要承载着杂乱信息

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

一、事务布景

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

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

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

二、困难点

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

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

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

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

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

三、怎么处理

1. “拼乐高”的定义是什么？

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

2. 分-分析图纸全体

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

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

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

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

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

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

别离进行组合：

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

4. 找-怎么将乐高摆放在正确的当地

上面现已区分好了一切的模块分组，接下来便是怎么做好定位排布。

排布的发方法根据事务方针现已是“进步信息阅读搜索功率，便于履行操作”，往下推下一步便是进步主页的曝光度，增强主页的包容性。

这儿能够在进行2次分区，分为：基础组，时刻组。基础组只包括文字定论，时刻组依照时刻摆放包括：成果可视化，全体趋势以及悉数具体表格。在摆放布局上，微拉进步主页的曝光度，也是采用了左右布局基础组固久居左，时刻组滑动居右同时时刻上以：现在-未来-复盘的次序从上之下摆放，进步主页承载力与曝光度。

5. 选-建立中挑选合理的模型

这儿说的“正确的表现方法”主要是说的是可视化的表现方法。以过程中计算为例：事务方针中既要能直观表现出损耗的人力，还要表现出bug率的出现，理论上应该将两张表合成为一张表，别离是柱状图和趋势图。

但是实际状况下，表的空间很小，主管关于这张表的重视点也不高，为了阅览性的进步，所以笔者将一张表拆分为两张表进行切换查看。

四、怎么验证

方针“进步信息阅读搜索功率，便于履行操作”，反推回来最后规划做验证的，主要是针对用户的阅读时刻/暂留时刻。与前端沟通做了埋点，灰度一个月上线后，用户的暂留时刻从原先的8分钟缩短到了4分钟，满意度进步了10%。