本篇文章以網(wǎng)易新聞評論區(qū)為例，為大家講解了五種評論區(qū)的設(shè)計(jì)模式，并且講述了使用每種模式的原由，供大家參考。

評論區(qū)設(shè)計(jì)有多種模式，本文以網(wǎng)易新聞評論區(qū)為例，只討論蓋樓模式。

網(wǎng)易評論區(qū)，分三部分：熱門跟帖——精彩蓋樓——最新跟帖。有時沒有“精彩蓋樓”、“最新跟帖”部分，如果跟帖數(shù)超過7層，就會折疊。

如下圖：

和大多數(shù)評論區(qū)一樣，“網(wǎng)易新聞評論區(qū)”采用的是頭像（包含名字，時間）在左上角，點(diǎn)贊在右上角，評論文本在頭像和點(diǎn)贊的下方。這種設(shè)計(jì)很常見，大家都很適應(yīng)，也喜歡。

下文是我小改的五個樣式：

樣式一：

1. 頭像從評論文本的左上角移至右下角；
2. 頭像從圓形變成方形；
3. 點(diǎn)贊從評論文本右上角移至中下邊（評論文本的中間下邊）；
4. 刪掉一些信息（地址等），只保留頭像，名字，時間；
5. 每一條評論的都顯示樓層。

如下圖：

理由：

1. 頭像從評論文本左上角移至評論文本右下角。

熟人社交里，頭像有識別作用，有展示個性作用，陌生人的即時通社交領(lǐng)域，也有這兩個作用，但是陌生人評論區(qū)卻沒有。在陌生人評論區(qū)，用戶在意的是評論內(nèi)容。

名字和頭像在評論區(qū)，不做識別作用，是定位作用，定位上一段評論的結(jié)束和新一段評論的開始。

放左上角，表示“上一段評論結(jié)束（如有上一段），這一段要開始了”；放在右下角，表示“這一段評論結(jié)束了，下一段評論要開始了（如有下一段）”。

對比頭像放在左上角和右下角：

上面這張圖里，圓頭像傳遞出——上一段評論“哈哈哈哈”結(jié)束了，這一段評論“亞里士多德哲學(xué)……”開始了。

上面這張圖里，方頭像傳遞出——這一段評論“據(jù)大量的歷史……”結(jié)束了，下一段評論“感謝所有，不曾擁有”要開始了。

兩個位置的頭像，都起到了非常清晰的定位作用，也就是這兩個位置都可以。

每個評論前的數(shù)字，既標(biāo)注樓層，也起到分段的作用。

樓層數(shù)字嵌入評論中，評論區(qū)左側(cè)看起來整齊，很漂亮。

頭像下移，評論文本上移，用戶第一時間就能看到評論，提升閱讀效率，從而提升閱讀體驗(yàn)。

2. 頭像從圓變成方。

文本和頭像都用方形，界面好看點(diǎn)。

3. 點(diǎn)贊從右上角移至中下邊。點(diǎn)贊放中間，對于左撇子和右撇子的用戶，都容易觸發(fā)點(diǎn)贊；點(diǎn)贊的左邊空白，利于用戶定位下一段評論?？词謾C(jī)，我們習(xí)慣性從上往下，點(diǎn)贊放下面，也是利于觸發(fā)。

4. 刪掉一些信息，只保留頭像，名字，時間。

5. 每一個層評論的都會顯示樓層，而且放在評論開頭。

樓層數(shù)字有兩個作用：

1. 定位，看到“1.”就表示開啟新的評論；
2. 用來告訴用戶跟帖總數(shù)，比如下圖，第二段評論的“41.”，第三段評論的“3.”，是告訴用戶，這段評論共“41條”，“3條”。

樣式二：

如上圖，在“樣式一”的基礎(chǔ)上對多樓層評論做一個折疊，超過兩層的評論（不含兩層），就會只展示最早的評論和最新的評論。

用戶點(diǎn)擊“點(diǎn)擊展開隱藏評論”就可以看到所有的評論。展開后，會在展開頁面懸浮一個倒箭頭符號，本文圖一就有。點(diǎn)擊倒箭頭符號，收起隱藏評論。

理由：對多樓層跟帖做折疊處理，利于用戶觀看效率，如果用戶不感興趣這條評論，可以一個上滑操作輕松跳過。選擇第一條評論展示，是為了定位，告訴用戶，這個評論樓是哪條帖子開始的。

比如上圖第二段評論的第一條：

這是告訴用戶，樓層是又這條評論引發(fā)的。

“點(diǎn)擊展開隱藏評論”，左對齊，形式上美觀，同時減少對用戶定位的干擾。

樣式三：

在“樣式一”的基礎(chǔ)上，把超過兩層評論的長評論段的樓層隱藏起來，只展示最后一條。有隱藏樓層的，會在最新評論用戶頭頂做一個箭頭符號，，點(diǎn)擊正箭頭符號，評論會展開成本文圖一的樣子。

理由：只顯示最后一條，很漂亮。但會給用戶造成閱讀困惱，不支持用在新聞評論區(qū)。

樣式四：

在“樣式三”的基礎(chǔ)上，把頭像縮小，去掉姓名和時間。

理由：陌生人評論區(qū)，姓名和頭像都是起定位作用，頭像往往能清晰的起到定位作用，所以只保留頭像就可以了。這個界面很簡單，也很漂亮，有些評論區(qū)是可以用的。

樣式五：

在“樣式二”的基礎(chǔ)上，把把頭像縮小，去掉姓名和時間。

理由：頁面簡潔，定位清晰，點(diǎn)贊順手。這個模式我算是最喜歡了，簡介又不混亂，本人手小，點(diǎn)贊放在中間，真是很順手。

樣式暫時做到這里吧，還有幾個樣式，都是微改，沒什么大變化。對于以上的五個樣式，核心的是頭像形狀的變化，頭像位置的變化，點(diǎn)贊位置的變化，樓層數(shù)字。

關(guān)于“熱門跟帖”和“精彩蓋樓”的設(shè)計(jì)，本文暫不討論。

本文由 @言吉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議