产品经理每日一念：产品详情页的规划布局

最近在整理产品的一些小东西，所谓“一屋不扫何以扫天下”，话虽有些夸张，却是抱着希望能够在整理这些细节的时候，发现不一样的东西。如果能够收集到一些比较好的规划，借鉴一下，那么对自己在产品设计和规划上也会有更多的进益，也分享出来，供大家参考。

因为本人所在的领域是在线教育，在整理到产品详情页的时候，收集了一下目前网校类产品大多使用的一些布局。但是在研究过后发现，这些布局并不单单出现在网校类产品上，一些知识付费和电商产品内也有所涉及。

一、整体型

在这里收集到的是【分答】、【千聊】、【馒头】APP，这类付费内容平台在布局内容详情页的时候，大多采用整体型，应该是在后台设置富文本格式，通过编辑文字、上传图片和视频，将所想让用户看到的内容全部展示出来。

如下图所示：

以我所见，这样的布局优缺点如下：

优点：

1、采用整体型，“所见即所得”，用户在观看的时候只需要滑动页面，即可将所有内容全部浏览到。

缺点：

1、耽误用户需找到可用信息的时间。因为采用的是整体型，用户在回到顶部和滑到底部的时候，如果需要找到中间位置的内容，那么就需要重新滑动页面到想看的内容，会耽误用户找到可用信息的时间。

2、内容过多容易产生疲累感。页面内如果添加的内容和形式过多，文字、图片、视频叠加在一起，用户就需要不停的滑动手指，多看两个内容就会产生疲累感。

3、容易产生气馁情绪。页面内添加内容过多时，用户不停地滑动，又没有内容轴展示观看的进度，用户不知道还有多少内容没看到，容易产生气馁情绪。

总体来说，该方式形式丰富，“所见即所得”，但是耽误时间、容易产生疲累感、容易产生气馁情绪是该形式需要克服的三个因素。

二、整体型+Tab键

该类型是整体型的一种变形，整体上仍是采用一页到底的形式，所有内容也均是在完整的页面上展示，通过滑动页面浏览全部内容。使用该形式的产品，如【猿辅导】、【作业帮】，而电商，类似【淘宝】【京东】等产品也使用该类型。

如下图所示：

优点：在整体型的基础上，通过在各个不同的模块上添加锚点，点击顶部的Tab键，可快速切换到所要找的内容。

该形式既可以充分展示内容的多样性和全面性，有充分考虑到了用户在使用和查找时的体验，是可取的。

三、半整体+半Tab型

这种类型的详情页是将整体型和Tab型各取了一半，在整体型的内容中，将2个或2个以上并重的内容，使用Tab键的形式，并列展示在页面内。使用该类型的产品主要有【学而思】、【满分班】、【猿题库】。

如下图所示：

优点：既可以让用户看到多种内容形式，又可通过Tab键查看重点内容。

缺点：无法“所见即所得”，用户需要手动切换Tab，查看页面内的其他重要内容

四、内容+Tab键

采用该形式的大多是视频类网课产品，例如【腾讯课堂】【极客】。将视频课程和课程大纲、详情及讲师介绍等其他内容，放在同一个页面内，报名以后可以及时收看。

如下图所示：

优点：用户可在观看视频的同时，查看相应内容。直观且具体。

缺点：由于视频占据了页面的较大篇幅，在查看相应信息的时候会感到狭促。且手指在滑动的时候，操作区域有限。

总结：以上四种形式是网课类产品（包括部分电商类、阅读类产品）详情页所常采用的形式。其中单纯的整体型基于相对缺点较明显，并不建议采用。其他形式可根据相应的产品需求进行调整使用。