導(dǎo)讀

詳情頁是內(nèi)容型產(chǎn)品設(shè)計中最常遇到的頁面之一。不同的產(chǎn)品，詳情頁的內(nèi)容不一樣，但結(jié)構(gòu)基本相同。那在設(shè)計詳情頁時，有哪些需求點呢？這2篇文章我們以今日頭條的圖文資訊詳情頁為例來詳細分析。

功能名稱

內(nèi)容詳情頁

使用場景

在一個頁面中，顯示某個信息的詳細內(nèi)容。

常見案例

幾乎所有的內(nèi)容型產(chǎn)品，如今日頭條、人人都是產(chǎn)品經(jīng)理app、簡書等。

需求點描述

內(nèi)容詳情頁的需求主要包括4部分：內(nèi)容主體信息、內(nèi)容附屬信息、衍生內(nèi)容、操作：

1.內(nèi)容主體信息：即文本、圖片等信息；

2.內(nèi)容附屬信息：內(nèi)容來源等信息；

3.衍生內(nèi)容：評論；

4.操作：點贊、評論、收藏、分享、舉報等。

今日頭條有多種類型的內(nèi)容詳情頁，每一種的內(nèi)容詳情頁都不一樣。我們以圖文資訊詳情頁為例，我們來詳細分析。

由于需求點過多，我們將分2篇文章來分析該頁面涉及到的需求，這篇文章先分析公共模塊的需求。這些需求將會在多個地方被引用，為了避免重復(fù)地描述同樣的需求點，造成需求點冗余，我們先將公共模塊提煉出來。

>>>詳情頁中，多個地方用到了頭像。包括標(biāo)題欄中的頭條號頭像、標(biāo)題下的頭條號頭像、評論中的用戶頭像、點贊數(shù)描述中的用戶頭像。需求描述如下：

相關(guān)截圖如下：

>>>與頭像類似，關(guān)注按鈕、發(fā)布時間、評論回復(fù)按鈕也在多個地方被使用。需求描述如下：

相關(guān)截圖如下：

>>>點贊功能，在文章點贊、評論點贊、回復(fù)評論內(nèi)容點贊都有用到。由于需求點比較多，故升維為需求模塊。需求描述見下表：

相關(guān)截圖，可查看上一張截圖。

>>>詳情頁中，有多個彈窗模塊。如表達態(tài)度類彈窗、提交意見類彈窗、評論/回復(fù)彈窗、分享彈窗。以下是前3種彈窗的需求描述：

相關(guān)截圖如下：

>>>分享彈窗，會在底部懸浮操作欄和評論詳情頁中被使用。由于分享彈窗需求點較多，故升維為需求模塊。需求描述如下：

相關(guān)截圖如下：

>>>網(wǎng)絡(luò)異常，會在使用任何需要訪問服務(wù)器的功能時被引用。需求描述如下：

注：以上需求點僅針對今日頭條進行反推分析，僅作為學(xué)習(xí)交流所用，請勿直接使用于某項目。（相同功能在不同產(chǎn)品里仍存在部分差異。）

下一篇文章，將分析今日頭條圖文資訊詳情頁的非公共模塊需求，敬請期待！