
导读
详情页是内容型产品设计中最常遇到的页面之一。不同的产品,详情页的内容不一样,但结构基本相同。那在设计详情页时,有哪些需求点呢?这2篇文章我们以今日头条的图文资讯详情页为例来详细分析。
功能名称
内容详情页
使用场景
在一个页面中,显示某个信息的详细内容。
常见案例
几乎所有的内容型产品,如今日头条、人人都是产品经理app、简书等。
需求点描述
内容详情页的需求主要包括4部分:内容主体信息、内容附属信息、衍生内容、操作:
1.内容主体信息:即文本、图片等信息;
2.内容附属信息:内容来源等信息;
3.衍生内容:评论;
4.操作:点赞、评论、收藏、分享、举报等。
今日头条有多种类型的内容详情页,每一种的内容详情页都不一样。我们以图文资讯详情页为例,我们来详细分析。

由于需求点过多,我们将分2篇文章来分析该页面涉及到的需求,这篇文章先分析公共模块的需求。这些需求将会在多个地方被引用,为了避免重复地描述同样的需求点,造成需求点冗余,我们先将公共模块提炼出来。
>>>详情页中,多个地方用到了头像。包括标题栏中的头条号头像、标题下的头条号头像、评论中的用户头像、点赞数描述中的用户头像。需求描述如下:

相关截图如下:


>>>与头像类似,关注按钮、发布时间、评论回复按钮也在多个地方被使用。需求描述如下:


相关截图如下:

>>>点赞功能,在文章点赞、评论点赞、回复评论内容点赞都有用到。由于需求点比较多,故升维为需求模块。需求描述见下表:


相关截图,可查看上一张截图。
>>>详情页中,有多个弹窗模块。如表达态度类弹窗、提交意见类弹窗、评论/回复弹窗、分享弹窗。以下是前3种弹窗的需求描述:







相关截图如下:




>>>分享弹窗,会在底部悬浮操作栏和评论详情页中被使用。由于分享弹窗需求点较多,故升维为需求模块。需求描述如下:




相关截图如下:

>>>网络异常,会在使用任何需要访问服务器的功能时被引用。需求描述如下:

注:以上需求点仅针对今日头条进行反推分析,仅作为学习交流所用,请勿直接使用于某项目。(相同功能在不同产品里仍存在部分差异。)
下一篇文章,将分析今日头条图文资讯详情页的非公共模块需求,敬请期待!
网友评论