论坛 › 河北 › 怎么样像拼乐高同样，完成详情设计？

tw4ld6 发表于 2024-8-12 08:41:04

怎么样像拼乐高同样，完成详情设计？

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

听听海 发表于 2024-8-27 02:03:06

感谢您的精彩评论，为我带来了新的思考角度。

情迷布拉格 发表于 2024-8-31 20:25:37

交流如星光璀璨，点亮思想夜空。

1fy07h 发表于 2024-9-27 18:34:11

认真阅读了楼主的帖子，非常有益。

1fy07h 发表于 2024-10-18 20:59:59

你说得对，我们一起加油，未来可期。

查看完整版本: 怎么样像拼乐高同样，完成详情设计？