2024年5月26日发(作者：)
评论区设计（二）：如何做好树状式评论？
文章以腾讯新闻为例，给大家讲解一下如何做好树状式评论区设计。
腾讯新闻评论区的样式：
进入腾讯新闻评论区，最先看到的是一级评论，然后是二级评论，最后是评论小湖泊。
上图是在“腾讯新闻”截取的一个一级评论页面，点击第一段评论的“查看全部3条评论”，
会进入到腾讯新闻的二级评论区，如下：
点击第三段评论的“展开更多3条回复”，看到下图：
二级页面的用户之间互动，不会再开启下一个页面，全部停留在二级页面，不会再分
枝成更小的支流，反而汇集成一个小湖泊（浅色阴影区）。以上就是腾讯新闻评论区的展示
方式了，我称之为“河流式”，是常说的“树状式”。
尝试着对腾讯新闻评论区设计做了三个样式，两个一级评论页面的样式，一个二级评
论页面的样式。
腾讯一级评论页面，如图：
手指上滑，会把新闻标题隐藏起来，如下图：
上图是“腾讯新闻”评论区截图，下图是“样式一”。
顶部导航栏，把“评论”修改成评论对应的新闻标题，同时把右侧“省略号”删掉。
点击新闻标题，可以进入新闻页面。
导航栏下方，腾讯新闻是新闻标题、作者、时间，还有评论数量，这些我的设计都没
有，全删了。
页面评论区，右上角的点赞移位至该评论文本的下方，时间移至右上角，不显示地址
信息。二级评论只展示一条，且起始位置左移，和一级评论的文本左对齐。二级评论用户
的名字不用加粗（本文的截图打了码，以防侵犯他人隐私，在腾讯评论区，二级评论用户
的名字是加粗的）。一级评论和二级评论中间有三项，从左至右依次是“回复TA”，“点赞”，
“查看全部X条回复”，这三项的文字采用和评论文本文字一样的字体，颜色和大小相同。
评论段之间，没有下划线。
底部导航栏，“正文”图标颜色改为无色，但是要描边，描边线的颜色和文字颜色一致
（正常是黑色），“正文”两字改为数字，是对应新闻的阅读数，比如：新闻被阅读了7531
次，则此处“正文”应是“7k+”（数字上千就采用数字+字母模式），如果新闻被阅读了
693次，则此处正文应该是“693”。“微信”图标换成倒箭头图标，点击倒箭头图标，可
以直接进入用户所在频道，本评论的对应新闻的下一条新闻的评论区。看下图：
用户所在的频道是“皇马”专题频道，当前评论对应的新闻是“老佛爷执掌皇马16
年12换帅 仅2人主动辞职其余全被炒”，那么下一条新闻就是“皇马主帅洛佩特吉下课 联
赛5轮不胜国家德比1—5惨败巴萨”，也就是当用户点击倒箭头图标的时候，进入的下一
个评论区是“皇马主帅洛佩特吉…”的评论区。
底部导航栏，透明箭头图标换成加号图标。
发布者：admin，转转请注明出处：http://www.yc00.com/news/1716698097a2730346.html
评论列表（0条）