Redian新闻
>
如何像拼乐高一样,完成详情设计?

如何像拼乐高一样,完成详情设计?

公众号新闻

关注并将「人人都是产品经理」设为 ★ 星标

每天早上更新,与你一起成长

详情页需要承载的信息相对较多,这个情况下,不少设计师可能会觉得详情页设计相对较难,那么,有没有什么好的方法可以优化设计、让设计进行得更轻松一些?本文作者便提供了一种设计思路——“拼乐高”思路,一起来看一下。


在B端的设计之中,详情页往往要承载着复杂信息,而作为查阅者往往也会因为信息复杂从而导致阅读成本较高,因此详情页也受到了业务的关注,设计师也有设计难的感受。

今天我提供一些奇怪的设计思路来谈谈如何设计得更轻松一些。

业务背景

产品主要是用于开发流程中的团队协作,其中代码相关的报告是主管尤其关注的部分,因为代码的规范性以及是否出现bug等情况会影响到产品的使用,也同时是中层主管对上面老板的交代之一。

中层主管除了通过数据概览浏览整体的进度外,还需要查看单个代码的质量报告来判断属下是否适合自己的团队。

优化前的详情页包含12模块内容从上到下暴力平铺式布局,虽然有锚定导航和标题收起作为帮助方式,但是还是无法快速浏览与理解全部内容。

困难点

1. 表现形式混杂,理解成本高

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

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

内容的排列方式采用的是区分模块之后自上而下的暴力平铺方式,内容多。遇到几个高度较高的表格或者是几个高度较大的折线图,后面的内容虽然有锚定导航帮助定位,但是帮助能力有有限。整体页面的阅读成本很高。

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

如何解决

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

无论是拼乐高还是拼积木,如果你想拼的准和好,那你就得有属于自己的方法方式。

笔者将自己总结为:“分”“拆”“找”“选”:

2. 分-分析图纸整体

业务中,主管看详情页的目的是信息的浏览与编辑相关的信息,因此可以把设计定为:提高信息浏览搜寻效率,便于执行操作。

3. 拆-如何进行合理的分组

上一段已经制定好了整体目标,现在开始将所有的模块开始拆分。

拆分的方式有很多,有:展现形式、时间、功能模块、用户阶段目标等等。

这里笔者选择的是多样结合的方式:

  1. 以用户的阶段目标位置:用户在不同的关注不同的内容,以业务为例:用户更关注代码质量如何,多少个,解决了什么有多少bug要处理,是否规范,有没有注释等。

  2. 再根据展现形式+时间概念分为:文字结论,结果可视化结论以及整体趋势可视化呈现,以及详细表格区域。

分别进行组合:

  • 文字结论:基础信息+文字结论。

  • 结果可视化:未验证,未解决,缺陷图标。

  • 整体趋势分为:整体折线图与损耗人力表工时表。

  • 全部详细:将所有的表格进行组合,以tab栏的形式进行组合进行切换。

4. 找-如何将乐高摆放在正确的地方

上面已经区分好了所有的模块分组,接下来就是如何做好定位排布。

排布的发方式根据业务目标已经是“提高信息浏览搜寻效率,便于执行操作”,往下推下一步就是提高首页的曝光度,增强首页的包容性。

这里可以在进行2次分区,分为:基础组,时间组。

基础组只包含文字结论,时间组按照时间排列包含:结果可视化,整体趋势以及全部详细表格。

在排列布局上,微拉提高首页的曝光度,也是采用了左右布局基础组固定居左,时间组滑动居右同时时间上以:现在-未来-复盘的顺序从上之下排列,提高首页承载力与曝光度。

5. 选-搭建中选择合理的模型

这里说的“正确的表现形式”主要是说的是可视化的表现形式。以过程中统计为例:业务目标中既要能直观表现出损耗的人力,还要表现出bug率的呈现,理论上应该将两张表合成为一张表,分别是柱状图和趋势图。

但是实际情况下,表的空间很小,主管对于这张表的关注点也不高,为了阅读性的提高,所以笔者将一张表拆分为两张表进行切换查看。

如何验证

目标“提高信息浏览搜寻效率,便于执行操作”,反推回来最后设计做验证的,主要是针对用户的浏览时间/暂留时间。

与前端沟通做了埋点,灰度一个月上线后,用户的暂留时间从原先的8分钟缩短到了4分钟,满意度提高了10%。

一点点总结

本文通过以乐高搭建的方式来拆解详情页面的设计方式,希望能给到同行遇到复杂页面迷惑时一丝丝帮助。

题图来自 Unsplash ,基于 CC0 协议


产品经理是一个充满挑战和创造力的职业,需要不断的摄入新的“营养”,才能跟上时代的浪潮。如果你想提高自己的产品能力以及获得求职上的帮助,让自己在未来更能胜任产品经理的工作。

起点课堂每周开办的产品经理公开课就是你的“不二之选”。

你可以学习到竞品分析、需求分析、作品集制作、面试攻略、职业规划、能力提升等各方面的知识和技巧,让你在产品领域更加游刃有余。

👇限时免费,报完即止,扫码立即报名!

微信扫码关注该文公众号作者

戳这里提交新闻线索和高质量文章给我们。
相关阅读
三访英国湖区(2):两首爱的赞歌做城市设计?这是基本功!如何用生物/化学的概念做艺术设计?双阳台,该如何设计?【装修干货】每月乐高新刊:2023年9月,连续两款中国风独占乐高套装在乐高书刊中登场了!能像乐高一样组合,LoraHub挖掘LoRA 模块化特性甘肃庆阳为何像一个拳头,砸在陕西的肚子上?三句话生成CPU!中科院ChipGPT攻克AI芯片设计?代码量减少近10倍莆田农村自建房外形酷似扎哈设计?现在的农村自建房泰裤辣!i-Motivation | 如何克服“限制性信念”,完成“不可能”的事最后一天|护眼+长高一箭双雕!几十块抱走这个运动神器,完全不费妈!高性能Wi-Fi6/BT射频IP验证系统如何加速芯片设计?没阳台的客厅怎么设计?试试这3种方法超赞!【装修干货】什么是“中古风”设计?【装修干货】不一样,真的不一样!这瓶奶能让你吃到十层奶皮!“如何做出高质量的临床科研设计?”大咖启动青年原创科研系列培训,解读经典试验,启迪研发思路极简风,该如何设计?【装修干货】技术变革如何改变空间设计?清华建筑学院 x D5,一次跨学科联动亚裔哈佛才子做出Lady M, 爆红全球: 如何像卖珠宝一样卖蛋糕?ChatGPT发力《龙与地下城》剧情设计,帮你一步步上手地下城主美国间谍魔高一尺,我们反间谍必须道高一丈!纪念乐高人仔诞生45周年的《乐高日历2024》及限定2888套的乐高新春纪念邮票正式发布!二十岁,飞起来的感觉真棒!《风过留痕》杀青日成岭高考了亚裔哈佛才子做出Lady M,爆红全球:如何像卖珠宝一样卖蛋糕“曲线救国”行不通,课外活动应该如何设计?连这些PS基本功都不知道,你还怎么做设计?水吧区,该如何设计?【装修干货】字节二面:10Wqps会员系统,如何设计?如何基于目标做好临床试验设计?如何选择临床终点事件?如何看待安慰剂效应?答案在这。。。【最新】上海乐高乐园度假区主体设计已基本完成,将于下月全面启动主体工程建设16—21年的龚俊什么是“宋代美学”设计?【装修干货】乐高集团正式发布乐高IDEAS 21343 维京村庄,一款致敬2005年经典乐高北欧海盗系列的套装
logo
联系我们隐私协议©2024 redian.news
Redian新闻
Redian.news刊载任何文章,不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。文章信息的合法性及真实性由其作者负责,与Redian.news及其运营公司无关。欢迎投稿,如发现稿件侵权,或作者不愿在本网发表文章,请版权拥有者通知本网处理。