2B制品设计招数三：详情页设计
<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><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1Dcp7BYZvBt~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=lQmkUvQWFcxdF8dk8kGqeUrYxSE%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;">几个详情页的例子</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><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1DdfBNDH4eY~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=JtE6J53lvAWg47FTxqxxmKUpjMw%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（某宝网页）</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><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1DeS2r0wdwR~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=csEA9YsONgEGvzwd6RtdVZp8XUk%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（某股票网页）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">再举个栗子，<span style="color: black;">便是</span>项目管理软件中某个项目的详情。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1Dg3IPxup7v~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=mpe8Joko2knoqQvbYIENOn4esZQ%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（teambition）</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>共性~</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">详情页的入口</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>一个入口。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">这个入口很大几率是在表格页中的。</strong><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;">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>进入详情页；还有些内容比较少的详情页是以弹窗、折叠面板等形式展现的。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1DgiANre849~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=samCzQQ2tK%2B6LFUrbRkgqDfcP%2FI%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;">分块</h1>
<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;">首要</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>信息就被分<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>的时候<span style="color: black;">亦</span>是分为四块来<span style="color: black;">表示</span>，<span style="color: black;">这般</span>看起来就一目了然了。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RolEihpA5I0Vbw~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=wPJwfXozetmV2ppx8hk7aMcCIkw%3D" style="width: 50%; margin-bottom: 20px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1EjoGn5Jmlf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=mpbyWCtBg1WecwOdkBPv5Q7V%2FAA%3D" style="width: 50%; margin-bottom: 20px;">
<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>采用tab分页的形式。<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>采用tab分页，<span style="color: black;">能够</span>灵活的在这几个模块间切换。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1EkX8gBR3LZ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=3ccyglmO7Fag0AN%2BqjCg4lOhrdQ%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><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><span style="color: black;">经过</span>元素的位置、<span style="color: black;">体积</span>、颜色等来实现，这是更偏重UI设计的范畴了，我就不展开啦</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">举个栗子吧，用户<span style="color: black;">第1</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/pgc-image/Rqp1El79iiarHw~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=ZBA9yW0wgvxMaO6skQ%2BziMkv04M%3D" style="width: 50%; margin-bottom: 20px;">
<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><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1Elu59Ztcse~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=2T3dqSSwRuKZ3s690PrX3ij6xBY%3D" style="width: 50%; margin-bottom: 20px;">
<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><img src="https://p3-sign.toutiaoimg.com/pgc-image/Rqp1Eo0G2s4gLY~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723667733&x-signature=dI7EW7f2Of39EvKVyT0nLtaiMrE%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;">详情+编辑</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>符合用户的操作流程。</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>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">关联</span>阅读</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2B<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;">2B<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;">本文由 @LCC 原创发布于人人都是<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>
同意、说得对、没错、我也是这么想的等。 太棒了、厉害、为你打call、点赞、非常精彩等。 感谢您的精彩评论，为我带来了新的思考角度。 i免费外链发布平台 http://www.fok120.com/ 祝福你、祝你幸福、早日实现等。
页:
[1]