前言

在设计评论区的时候，我发现尽管产品各相不同，但是评论区的功能组成大体是相同的，比如都包含头像、用户名（匿名）、评论内容、点赞等。在综合了不同产品评论区的组成之后，我将评论区拆分成了 7 个不同的组成要素，他们分别是评论排序、用户名与头像、评论内容、输入区、点赞、转发、加载样式（如下图）。

通过这七个要素，便可以根据产品的要求将其中的某几个功能提取出来组成一个符合自己产品需求的评论区。接下来我们就着重的说一下这七个功能的不同表现形式。

目录

1.评论排序

2.用户名与头像

3.评论内容

4.输入区

5.点赞

6.转发

7.加载样式

要素一：评论排序

评论排序在评论区是非常重要的功能，一般有三种设计形式，一种是将热门评论与全部评论分开，这样设计的目的是为了精彩的回复不会下沉，将优质内容优先曝光从而增强用户互动。一种是以按钮的形式将热度与时间进行筛选，这样设计可以的目的是为了让用户自己去主动选择想要排序的方式。另一种是默认按时间倒序排列，用户不能选择排序规则。

以爱奇艺为例，它将评论区设计为两个部分，上半部分是精彩评论，下半部分是全部评论。这样做的好处是将热门与全部分开，将有趣的内容提炼出来增强用户之间的互动。将全部评论单独设计一个区域，以时间倒序的方式展示，用户评论之后便能查看到，避免用户评论之后找不到自己的评论。

以微博为例，微博将排序设计在评论区顶部供用户选择。默认为按热度排序，但也支持筛选按最新时间排序。这样做将所有的评论整合到一块，看起来更整体。缺点是排序功能会经常会引起忽视。

以小红书为例，小红书的评论区不支持筛选，是单一的按照时间倒序的方式排序。这么做的好处是功能单一，缺点是互动性不强，很多精彩的评论莫名其妙的就下沉了。当然这也需要根据产品的战略来决定，看产品是否需要强互动性。

要素二：用户名与头像

用户头像的设计有圆有方、有大有小，为了避免头像影响视觉一般不会将头像设计的过大，这里我可以提供一个经验数值在60px-120px之间。用户名的设计要看产品是否会为用户设置等级，如果有则会在用户名后方设计用户的等级标签。

以微信公众号为例，微信公众号的头像设计也延续了微信头像的设计采用了的小圆角矩形，微信的用户名并无用户等级设计。

以虎扑为例，虎扑的头像设计采用了大圆角矩形，用户名并无用户等级设计。值得注意的是在用户名的下方设计了发布时间。

以爱奇异泡泡为例，爱奇艺泡泡的头像是圆形设计且带1px的灰色描边，用户名则有等级之分，比如初级粉、中级粉等等。

要素三：评论内容

评论区内容的设计要根据功能来决定，有的评论区只支持双向互动即用户与作者之间的互动。有的评论区则支持多向互动，所有用户均可互相评论。

以微信公众号为例，微信公众号的评论区只支持用户与作者之间的评论互动，而不支持用户之间的互动的，所以在设计上只展示了用户评论的内容与点赞。

以小红书为例，小红书是支持用户之间的互动的，所以在设计上就会设计回复条数，及其展开页面。这样做的好处就是可以清楚的看到每一条有多少评论。