|
详情页必须承载的信息相对较多，这个状况下，不少设计师可能会觉得详情页设计相对较难，那样，有无什么好的办法能够优化设计、让设计进行得更容易有些？本文作者便供给了一种设计思路——“拼乐高”思路，一块来看一下。 
前言
在B端的设计之中，详情页常常要承载着繁杂信息，而做为查阅者常常亦会由于信息繁杂从而引起阅读成本较高，因此呢详情页亦受到了业务的关注，设计师亦有设计难的感受。今天我供给有些奇怪的设计思路来谈谈怎样设计得更容易有些。
1、业务背景
制品重点是用于研发流程中的团队协作，其中代码关联的报告是主管尤其关注的部分，由于代码的规范性以及是不是显现bug等状况会影响到制品的运用，亦同期是中层主管对上面老板的交代之一。
中层主管除了经过数据概览浏览整体的进度外，还必须查看单个代码的质量报告来判断属下是不是适合自己的团队。
优化前的详情页包括12模块内容从上到下暴力平铺式布局，虽然有锚定导航和标题收起做为帮忙方式，然则还是没法快速浏览与理解所有内容。
2、困难点
1. 表现形式混杂，理解成本高
包括12模块内容。形式繁杂，既包括多个表单多个表格和可视化，还有一个常规内容几百字上下文本域要呈现。表现形式多样化，无进行过恰当的整理，用户必须在表格/表单/可视化之间穿梭来寻找到自己想看的内容。
2. 内容高度很长，首页揭发度低
内容的摆列方式采用的是区分模块之后自上而下的暴力平铺方式，内容多。遇到几个高度较高的表格或是几个高度很强的折线图，后面的内容虽然有锚定导航帮忙定位，然则帮忙能力有有限。整体页面的阅读成本很高。
接下来以“拼乐高”的场景来处理排版问题。
3、怎样处理
1. “拼乐高”的定义是什么？
无论是拼乐高还是拼积木，倘若你想拼的准和好，那你就得有属于自己的办法方式，笔者将自己总结为：“分”“拆”“找”“选”。
2. 分-分析图纸整体
业务中，主管看详情页的目的是信息的浏览与编辑关联的信息，因此呢能够把设计定为：加强信息浏览搜寻效率，便于执行操作。
3. 拆-怎样进行恰当的分组
上一段已然制定好了整体目的，此刻起始将所有的模块起始拆分。
拆分的方式有非常多，有：展现形式、时间、功能模块、用户周期目的等等。
这儿笔者选取的是多样结合的方式： 以用户的周期目的位置：用户在区别的关注区别的内容，以业务为例：用户更关注代码质量怎样，多少个，处理了什么有多少bug要处理，是不是规范，有无注释等。再按照展现形式+时间概念分为：文字结论，结果可视化结论以及整体趋势可视化呈现，以及仔细表格区域。分别进行组合： 文字结论：基本信息+文字结论。结果可视化：未验证，未处理，缺陷图标。整体趋势分为：整体折线图与损耗人力表工时表。所有仔细：将所有的表格进行组合，以tab栏的形式进行组合进行切换。4. 找-怎样将乐高摆放在正确的地区
上面已然区分好了所有的模块分组，接下来便是怎样做好定位排布。
排布的发方式按照业务目的已然是“加强信息浏览搜寻效率，便于执行操作”，往下推下一步便是加强首页的揭发度，加强首页的包涵性。
这儿能够在进行2次分区，分为：基本组，时间组。基本组只包括文字结论，时间组根据时间摆列包括：结果可视化，整体趋势以及所有仔细表格。在摆列布局上，微拉加强首页的揭发度，亦是采用了上下布局基本组固定居左，时间组滑动居右同期时间上以：现在-将来-复盘的次序从上之下摆列，加强首页承载力与揭发度。
5. 选-搭建中选取恰当的模型
这儿说的“正确的表现形式”重点是说的是可视化的表现形式。以过程中统计为例：业务目的中既要能直观表现出损耗的人力，还要表现出bug率的呈现，理论上应该将两张表合作为一张表，分别是柱状图和趋势图。
然则实质状况下，表的空间很小，主管针对这张表的关注点亦不高，为了阅读性的加强，因此笔者将一张表拆分为两张表进行切换查看。
4、怎样验证
目的“加强信息浏览搜寻效率，便于执行操作”，反推回来最后设计做验证的，重点是针对用户的浏览时间/暂留时间。与前端沟通做了埋点，灰度一月上线后，用户的暂留时间从原先的8分钟缩短到了4分钟，满意度加强了10%。
5、一点点总结
本文经过以乐高搭建的方式来拆解详情页面的设计方式，期盼能给到同行遇到繁杂页面迷惑时一丝丝帮忙。倘若有区别的思考方式，随时联系与沟通。
专栏作家
一只鸡腿，微X公众号：B端设计一只鸡腿，人人都是制品经理专栏作家。一个吃货的B端设计师。
本文原创发布于人人都是制品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅表率作者自己，人人都是制品经理平台仅供给信息存储空间服务。
| 
发表于 2024-8-12 08:41:04
