文章以騰訊新聞為例，給大家講解一下如何做好樹狀式評論區(qū)設(shè)計(jì)。

騰訊新聞評論區(qū)的樣式：

進(jìn)入騰訊新聞評論區(qū)，最先看到的是一級評論，然后是二級評論，最后是評論小湖泊。上圖是在“騰訊新聞”截取的一個(gè)一級評論頁面，點(diǎn)擊第一段評論的“查看全部3條評論”，會進(jìn)入到騰訊新聞的二級評論區(qū)，如下：

點(diǎn)擊第三段評論的“展開更多3條回復(fù)”，看到下圖：

二級頁面的用戶之間互動，不會再開啟下一個(gè)頁面，全部停留在二級頁面，不會再分枝成更小的支流，反而匯集成一個(gè)小湖泊（淺色陰影區(qū)）。以上就是騰訊新聞評論區(qū)的展示方式了，我稱之為“河流式”，是常說的“樹狀式”。

嘗試著對騰訊新聞評論區(qū)設(shè)計(jì)做了三個(gè)樣式，兩個(gè)一級評論頁面的樣式，一個(gè)二級評論頁面的樣式。

騰訊一級評論頁面，如圖：

手指上滑，會把新聞標(biāo)題隱藏起來，如下圖：

? ? 上圖是“騰訊新聞”評論區(qū)截圖，下圖是“樣式一”。

1. 頂部導(dǎo)航欄，把“評論”修改成評論對應(yīng)的新聞標(biāo)題，同時(shí)把右側(cè)“省略號”刪掉。點(diǎn)擊新聞標(biāo)題，可以進(jìn)入新聞頁面。
2. 導(dǎo)航欄下方，騰訊新聞是新聞標(biāo)題、作者、時(shí)間，還有評論數(shù)量，這些我的設(shè)計(jì)都沒有，全刪了。
3. 頁面評論區(qū)，右上角的點(diǎn)贊移位至該評論文本的下方，時(shí)間移至右上角，不顯示地址信息。二級評論只展示一條，且起始位置左移，和一級評論的文本左對齊。二級評論用戶的名字不用加粗（本文的截圖打了碼，以防侵犯他人隱私，在騰訊評論區(qū)，二級評論用戶的名字是加粗的）。一級評論和二級評論中間有三項(xiàng)，從左至右依次是“回復(fù)TA”，“點(diǎn)贊”，“查看全部X條回復(fù)”，這三項(xiàng)的文字采用和評論文本文字一樣的字體，顏色和大小相同。評論段之間，沒有下劃線。
4. 底部導(dǎo)航欄，“正文”圖標(biāo)顏色改為無色，但是要描邊，描邊線的顏色和文字顏色一致（正常是黑色），“正文”兩字改為數(shù)字，是對應(yīng)新聞的閱讀數(shù)，比如：新聞被閱讀了7531次，則此處“正文”應(yīng)是“7k+”（數(shù)字上千就采用數(shù)字+字母模式），如果新聞被閱讀了693次，則此處正文應(yīng)該是“693”?！拔⑿拧眻D標(biāo)換成倒箭頭圖標(biāo)，點(diǎn)擊倒箭頭圖標(biāo)，可以直接進(jìn)入用戶所在頻道，本評論的對應(yīng)新聞的下一條新聞的評論區(qū)。看下圖：

用戶所在的頻道是“皇馬”專題頻道，當(dāng)前評論對應(yīng)的新聞是“老佛爺執(zhí)掌皇馬16年12換帥 僅2人主動辭職其余全被炒”，那么下一條新聞就是“皇馬主帥洛佩特吉下課 聯(lián)賽5輪不勝國家德比1—5慘敗巴薩”，也就是當(dāng)用戶點(diǎn)擊倒箭頭圖標(biāo)的時(shí)候，進(jìn)入的下一個(gè)評論區(qū)是“皇馬主帥洛佩特吉…”的評論區(qū)。

5. 底部導(dǎo)航欄，透明箭頭圖標(biāo)換成加號圖標(biāo)。

點(diǎn)擊加號圖標(biāo)，彈出對話框，有十個(gè)功能，分別是常見的五個(gè)轉(zhuǎn)發(fā)，還有舉報(bào)，截圖，字體大小，夜間模式。

理由：

（1）“評論”兩字換成新聞標(biāo)題，后面省略號刪除。這個(gè)涉及新聞?lì)l道的改版，解釋起來篇幅較多，暫不解釋。

（2）標(biāo)題移到了導(dǎo)航欄位置。作者和時(shí)間等信息在新聞文本界面有，是用戶進(jìn)入評論區(qū)前就能看到的，所以評論區(qū)不重復(fù)。

（3）右上角的點(diǎn)贊移位至該評論文本的下方，時(shí)間移至右上角，不顯示地址信息。二級評論只展示一條，且起始位置左移，和一級評論的文本左對齊，二級評論用戶的名字不用加粗。一級評論和二級評論中間有三項(xiàng)，從左至右依次是“回復(fù)TA”、“點(diǎn)贊”、“查看全部X條回復(fù)”，這三項(xiàng)的文字采用和評論文本文字一樣的顏色和大小，不要做出顏色的區(qū)分，大小應(yīng)該和二級評論的文字一樣大。

點(diǎn)贊移位，不顯示地址信息，前一篇文章有解釋，本文濾過。時(shí)間移至右上角，是為了對稱，評論文本左上角和右上角對稱。

騰訊新聞的一級評論頁面，二級評論有時(shí)不只一條，會有多條，所以得加粗名字，來區(qū)分兩個(gè)二級評論，或者說是來定位兩個(gè)二級評論。我這里只有一條二級評論，可以不用加粗。二級評論和一級評論的文字大小是不一樣的，從字體的大小，清晰的傳遞給用戶一個(gè)信息，“兩種大小的文字，是兩條評論”。

二級評論和一級評論的文本不對齊，應(yīng)該也是為了提醒用戶，“這是兩條不同的評論”。兩種字體大小的設(shè)計(jì)，已經(jīng)清晰傳遞了這個(gè)信息，所以沒必要再來一次，設(shè)計(jì)成二級評論和一級評論文本左對齊，會漂亮很多。

一級評論和二級評論中間有三項(xiàng)，從左至右依次是“回復(fù)TA”、“點(diǎn)贊”、“查看全部X條回復(fù)”。一級評論和二級評論里，一般都是漢字，很少出現(xiàn)數(shù)字，那么，“點(diǎn)贊”不能排在最左邊，因?yàn)椤包c(diǎn)贊”是數(shù)字+小手圖標(biāo)

如果排在左邊，極有可能會看到一組情況，“點(diǎn)贊”那行開頭是數(shù)字，而它上下兩行都是漢字，這樣就破壞了左側(cè)全是漢字的美感，所以不能讓它排左邊。

“查看全部X條回復(fù)”不能排前面和中間，因?yàn)橛袝r(shí)候，X=0，也就是沒有回復(fù)，那么也就沒有“查看全部X條回復(fù)”這幾個(gè)字出現(xiàn)。假設(shè)“查看全部X條回復(fù)”排中間，上一段評論有回復(fù)，而下一段沒有，就會出現(xiàn)這種情況。上一段可以看到，“回復(fù)TA”，“查看全部X條回復(fù)”，“點(diǎn)贊”，而下一段只有“回復(fù)TA”，“點(diǎn)贊”。下一段的，“回復(fù)TA”和“點(diǎn)贊”之間是空白，這不好。

同理，“查看全部X條回復(fù)”也不可以排前面。那么秩序只有“回復(fù)TA”，“點(diǎn)贊”，“查看全部X條回復(fù)”。

全文的文字應(yīng)該用同一種顏色，“回復(fù)TA”，“點(diǎn)贊”，“查看全部X條回復(fù)”這三項(xiàng)不只有圖標(biāo)，都含有文字，已經(jīng)清晰傳遞給用戶，這三項(xiàng)的非評論。

評論段間隔比較大，可以不用下劃線的定位。

（4）這里也不解釋，解釋篇幅太長。

（5）底部導(dǎo)航欄，透明箭頭圖標(biāo)換成加號圖標(biāo)，點(diǎn)擊加號展開十個(gè)隱藏功能。加號盡量不用十字架，因?yàn)檫吷系膬蓚€(gè)圖標(biāo)都“胖”，十字架太單薄了。

樣式二：在樣式一的基礎(chǔ)上，不顯示二級評論。

兩張圖片，有一個(gè)區(qū)別，第三段評論，上圖有“查看全部0條回復(fù)”，右邊是空白。上圖更對稱些，下圖更實(shí)在些。

理由：二級評論都不顯示，為了美觀。不過少了二級評論的吸引，也許會少一部分用戶。頁面美觀其實(shí)也是為了吸引用戶，這兩者之間的權(quán)衡，看產(chǎn)品的特性了，或者是行業(yè)特性。

樣式三：這次修改的是二級評論頁面。

左側(cè)是一級評論頁面，右側(cè)是二級評論頁面。點(diǎn)擊左側(cè)的第一條評論的“查看全部3條回復(fù)”，進(jìn)入右側(cè)二級評論頁面。一級評論頁面和二級評論頁面有幾處不一樣，頂部和底部的導(dǎo)航欄不一樣，評論區(qū)也不一樣，二級評論頁面有“展開更多x條回復(fù)”，點(diǎn)擊展開后，不新開頁面，而是停留在二級頁面。如下圖，淺灰色陰影區(qū)，像是一個(gè)小湖泊，圈住了評論。

左側(cè)是騰訊二級頁面，右側(cè)是我做的。左側(cè)打了碼，不好識別，如果讀者你感興趣，可以打開騰訊新聞App的評論區(qū)，和右側(cè)圖片比對。

1. 在二級頁面，第一條評論，也就是一級評論，騰訊是用作二級頁面的主題，或者說是標(biāo)題，直接左對齊邊框了。我的沒有，還是和一級評論頁面一樣。
2. 小湖泊區(qū)，區(qū)別評論和名字，騰訊用的是名字加粗，我采用的是名字前面加特定小圖標(biāo)。用戶回復(fù)時(shí)，騰訊區(qū)分兩個(gè)作者，采用的是讓“回復(fù)”字體顏色淺些，我采用的是將“回復(fù)”兩邊空格區(qū)間大些，達(dá)到一個(gè)字的距離。
3. 頂部導(dǎo)航欄和底部導(dǎo)航欄，我都和一級評論區(qū)一樣。

理由：

1. 一級評論區(qū)和二級評論區(qū)，都是評論區(qū)，性質(zhì)一樣，頁面設(shè)計(jì)規(guī)則，盡量追求一致。
2. 同一行里，盡量采用相同的字體（大小和顏色）。
3. 一級評論區(qū)和二級評論區(qū)，都是評論區(qū)，頁面設(shè)計(jì)，盡量追求一致。

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

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