如何像拼乐高一样，完成详情设计？
详情页需要承载的信息相对较多，这个情况下，不少设计师可能会觉得详情页设计相对较难，那么，有没有什么好的方法可以优化设计、让设计进行得更轻松一些？本文作者便提供了一种设计思路——“拼乐高”思路，一起来看一下。
(相关资料图)
在B端的设计之中，详情页往往要承载着复杂信息，而作为查阅者往往也会因为信息复杂从而导致阅读成本较高，因此详情页也受到了业务的关注，设计师也有设计难的感受。今天我提供一些奇怪的设计思路来谈谈如何设计得更轻松一些。
一、业务背景产品主要是用于开发流程中的团队协作，其中代码相关的报告是主管尤其关注的部分，因为代码的规范性以及是否出现bug等情况会影响到产品的使用，也同时是中层主管对上面老板的交代之一。
中层主管除了通过数据概览浏览整体的进度外，还需要查看单个代码的质量报告来判断属下是否适合自己的团队。
优化前的详情页包含12模块内容从上到下暴力平铺式布局，虽然有锚定导航和标题收起作为帮助方式，但是还是无法快速浏览与理解全部内容。
二、困难点1. 表现形式混杂，理解成本高包含12模块内容。形式复杂，既包含多个表单多个表格和可视化，还有一个常规内容几百字左右文本域要呈现。表现形式多样化，没有进行过合理的整理，用户需要在表格/表单/可视化之间穿梭来寻找到自己想看的内容。
2. 内容高度很长，首页曝光度低内容的排列方式采用的是区分模块之后自上而下的暴力平铺方式，内容多。遇到几个高度较高的表格或者是几个高度较大的折线图，后面的内容虽然有锚定导航帮助定位，但是帮助能力有有限。整体页面的阅读成本很高。
接下来以“拼乐高”的场景来解决排版问题。
三、如何解决1. “拼乐高”的定义是什么？无论是拼乐高还是拼积木，如果你想拼的准和好，那你就得有属于自己的方法方式，笔者将自己总结为：“分”“拆”“找”“选”。
2. 分-分析图纸整体业务中，主管看详情页的目的是信息的浏览与编辑相关的信息，因此可以把设计定为：提高信息浏览搜寻效率，便于执行操作。
3. 拆-如何进行合理的分组上一段已经制定好了整体目标，现在开始将所有的模块开始拆分。
拆分的方式有很多，有：展现形式、时间、功能模块、用户阶段目标等等。
这里笔者选择的是多样结合的方式：
以用户的阶段目标位置：用户在不同的关注不同的内容，以业务为例：用户更关注代码质量如何，多少个，解决了什么有多少bug要处理，是否规范，有没有注释等。再根据展现形式+时间概念分为：文字结论，结果可视化结论以及整体趋势可视化呈现，以及详细表格区域。分别进行组合：
文字结论：基础信息+文字结论。结果可视化：未验证，未解决，缺陷图标。整体趋势分为：整体折线图与损耗人力表工时表。全部详细：将所有的表格进行组合，以tab栏的形式进行组合进行切换。4. 找-如何将乐高摆放在正确的地方上面已经区分好了所有的模块分组，接下来就是如何做好定位排布。
排布的发方式根据业务目标已经是“提高信息浏览搜寻效率，便于执行操作”，往下推下一步就是提高首页的曝光度，增强首页的包容性。
这里可以在进行2次分区，分为：基础组，时间组。基础组只包含文字结论，时间组按照时间排列包含：结果可视化，整体趋势以及全部详细表格。在排列布局上，微拉提高首页的曝光度，也是采用了左右布局基础组固定居左，时间组滑动居右同时时间上以：现在-未来-复盘的顺序从上之下排列，提高首页承载力与曝光度。
5. 选-搭建中选择合理的模型这里说的“正确的表现形式”主要是说的是可视化的表现形式。以过程中统计为例：业务目标中既要能直观表现出损耗的人力，还要表现出bug率的呈现，理论上应该将两张表合成为一张表，分别是柱状图和趋势图。
但是实际情况下，表的空间很小，主管对于这张表的关注点也不高，为了阅读性的提高，所以笔者将一张表拆分为两张表进行切换查看。
四、如何验证目标“提高信息浏览搜寻效率，便于执行操作”，反推回来最后设计做验证的，主要是针对用户的浏览时间/暂留时间。与前端沟通做了埋点，灰度一个月上线后，用户的暂留时间从原先的8分钟缩短到了4分钟，满意度提高了10%。
五、一点点总结本文通过以乐高搭建的方式来拆解详情页面的设计方式，希望能给到同行遇到复杂页面迷惑时一丝丝帮助。如果有不同的思考方式，随时联系与沟通。
专栏作家
一只鸡腿，微信公众号：B端设计一只鸡腿，人人都是产品经理专栏作家。一个吃货的B端设计师。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
标签：
精彩推送
新闻快讯
X 关闭
X 关闭
新闻快讯
- 如何像拼乐高一样，完成详情设计？
- 索尼云串流掌机正式公布：PlayStation Portal、199.99美元
- 2023武汉荷花赏花地点推荐+花期（沙湖公园攻略）
- 加息悬了？欧元区8月PMI创33个月新低，连续三个月低于荣枯线
- 电视广播(00511)发布中期业绩，股东应占亏损4.07亿港元 同比增加81.34%
- 常州计算机考试准考证打印时间(最新)
- 戒色有什么好处医生 戒色明显的好处是什么
- 【聚焦】脐带血干细胞临床应用价值高 我国产业链已基本完善
- 赤影战士重制版！《绝影战士》Steam页面正式公开
- 机器人板块震荡回升 丰立智能20CM涨停
- 深度-海港亚冠遭遇耻辱性败局 哈维尔已经失去未来
- 回购潮！超60家出手 机构预测“市场底”或将到来
- 周冬雨刘昊然疑似相恋已多年，是否假戏真做？
- 甲醛去除的正确方法洋葱（甲醛去除的正确方法）
- “七夕”拉动酒店经济：订单增四成，最贵一单花了82400元
- 儒竞科技中签号出炉 共约2.29万个
- 需求复苏订单量逐步回升 洁美科技第二季度归母净利环比增长118.38%
- 莱芜精瑞模具有限公司(关于莱芜精瑞模具有限公司的简介)
- 我的战友群，沉寂了三年，前天一件事，让它一下子“死灰复燃”
- 罗马的房子开车时间（罗马欲乐园）
- 皖通高速（600012）8月22日主力资金净买入360.75万元
- 日本自卫队内部霸凌问题严重
- 2023海南小客车摇号个人中签率汇总表（持续更新）
- 【2020四川/江苏/山东中考试卷】【平行线等积变换】
- 柬埔寨第七届国民议会正式成立
- 富时中国A50指数期货、恒生指数均转跌
- 冬天龙虾冬眠吗（冬天龙虾出来吗）
- 橘鳌虾怎么养才能活（橘鳌虾怎么养）
- 今年以来登记超2200亿元 险资版ABS延续火热
- 查账征收和核定征收均可享受优惠（查账征收和核定征收的优缺点）
- 孤注一掷诈骗详解 《孤注一掷》里有哪些诈骗黑话 基本情况讲解
- 广联达(002410.SZ)拟3亿元至5亿元回购股份 回购价不超45元/股
- IAI：全球7月原铝产量同比减0.5%
- 全新帕里斯帝鉴赏家黑骑士版潮酷上市售36.88万元
- 宋四家，谁的书法才是第一？米芾：冠绝今古，光彩射人！
- 北京将规划“一南一北”机器人产业园，分别位于这俩地儿
- 片仔癀发生工商变更，林志辉任法定代表人、董事长
- 沪苏的地铁与东北六市的“抱团儿”
- victory少女前线（少女前线Wille简介）
- 备抵科目在报表中怎么体现（备抵科目）
- 关于矿业的股票 (矿业概念股名单)
- 周冬雨俏皮 Y2K 风格大片 完美驾驭芭比粉妆容
- 多吃水果和蔬菜有什么好处
- 全球大米价格达近12年来最高水平
- 见效最快的防诈指南！《孤注一掷》总票房突破26.29亿：进入影史国产片票房榜前二十
- 山东发布雷电黄色和雷雨大风黄色预警 济南、泰安、淄博等市局部地区可能发生山洪灾害
- 从夏威夷到加拿大，北美致命野火敲响全球变暖警钟
- 海伦哲发布战略规划及股权激励计划 致力打造特种高端智能装备制造领军企业
- 强对流蓝色预警！涉及黑龙江此地
- 瑞泰新材：已经进入宁德时代等头部厂商的供应商序列