中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文章以騰訊新聞為例，給大家講解一下如何做好樹狀式評論區設計。

騰訊新聞評論區的樣式：

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

點擊第三段評論的“展開更多3條回復”，看到下圖：

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

嘗試著對騰訊新聞評論區設計做了三個樣式，兩個一級評論頁面的樣式，一個二級評論頁面的樣式。

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

手指上滑，會把新聞標題隱藏起來，如下圖：

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

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

用戶所在的頻道是“皇馬”專題頻道，當前評論對應的新聞是“老佛爺執掌皇馬16年12換帥 僅2人主動辭職其余全被炒”，那么下一條新聞就是“皇馬主帥洛佩特吉下課 聯賽5輪不勝國家德比1—5慘敗巴薩”，也就是當用戶點擊倒箭頭圖標的時候，進入的下一個評論區是“皇馬主帥洛佩特吉…”的評論區。

5. 底部導航欄，透明箭頭圖標換成加號圖標。

點擊加號圖標，彈出對話框，有十個功能，分別是常見的五個轉發，還有舉報，截圖，字體大小，夜間模式。

理由：

（1）“評論”兩字換成新聞標題，后面省略號刪除。這個涉及新聞頻道的改版，解釋起來篇幅較多，暫不解釋。

（2）標題移到了導航欄位置。作者和時間等信息在新聞文本界面有，是用戶進入評論區前就能看到的，所以評論區不重復。

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

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

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

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

一級評論和二級評論中間有三項，從左至右依次是“回復TA”、“點贊”、“查看全部X條回復”。一級評論和二級評論里，一般都是漢字，很少出現數字，那么，“點贊”不能排在最左邊，因為“點贊”是數字+小手圖標

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

“查看全部X條回復”不能排前面和中間，因為有時候，X=0，也就是沒有回復，那么也就沒有“查看全部X條回復”這幾個字出現。假設“查看全部X條回復”排中間，上一段評論有回復，而下一段沒有，就會出現這種情況。上一段可以看到，“回復TA”，“查看全部X條回復”，“點贊”，而下一段只有“回復TA”，“點贊”。下一段的，“回復TA”和“點贊”之間是空白，這不好。

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

全文的文字應該用同一種顏色，“回復TA”，“點贊”，“查看全部X條回復”這三項不只有圖標，都含有文字，已經清晰傳遞給用戶，這三項的非評論。

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

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

（5）底部導航欄，透明箭頭圖標換成加號圖標，點擊加號展開十個隱藏功能。加號盡量不用十字架，因為邊上的兩個圖標都“胖”，十字架太單薄了。

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

兩張圖片，有一個區別，第三段評論，上圖有“查看全部0條回復”，右邊是空白。上圖更對稱些，下圖更實在些。

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

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

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

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

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

理由：

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

本文由 @言吉 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議