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

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

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

如下圖：

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

下文是我小改的五個(gè)樣式：

樣式一：

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

如下圖：

理由：

1. 頭像從評(píng)論文本左上角移至評(píng)論文本右下角。

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

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

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

對(duì)比頭像放在左上角和右下角：

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

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

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

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

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

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

2. 頭像從圓變成方。

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

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

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

5. 每一個(gè)層評(píng)論的都會(huì)顯示樓層，而且放在評(píng)論開(kāi)頭。

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

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

樣式二：

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

用戶點(diǎn)擊“點(diǎn)擊展開(kāi)隱藏評(píng)論”就可以看到所有的評(píng)論。展開(kāi)后，會(huì)在展開(kāi)頁(yè)面懸浮一個(gè)倒箭頭符號(hào)，本文圖一就有。點(diǎn)擊倒箭頭符號(hào)，收起隱藏評(píng)論。

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

比如上圖第二段評(píng)論的第一條：

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

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

樣式三：

在“樣式一”的基礎(chǔ)上，把超過(guò)兩層評(píng)論的長(zhǎng)評(píng)論段的樓層隱藏起來(lái)，只展示最后一條。有隱藏樓層的，會(huì)在最新評(píng)論用戶頭頂做一個(gè)箭頭符號(hào)，，點(diǎn)擊正箭頭符號(hào)，評(píng)論會(huì)展開(kāi)成本文圖一的樣子。

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

樣式四：

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

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

樣式五：

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

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

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

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

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

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