评论区的七要素

前言

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

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

目录

1.评论排序

2.用户名与头像

3.评论内容

4.输入区

5.点赞

6.转发

7.加载样式

要素一：评论排序

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

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

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

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

要素二：用户名与头像

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

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

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

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

要素三：评论内容

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

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

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

要素四：输入区

输入区的设计要注意三点，一个是输入区的功能，比如是否支持多功能如@的功能，添加图片的功能，添加表情的功能。第二点是要注意文字的字符限制。第三点是评论删除功能的设计。

1、输入区功能

以豆瓣、微博为例，豆瓣的回复内容形式单一，表情的添加等都依靠输入法来完成。而微博的回复形式则多样，不但支持@功能，还提供了添加表情、#等功能，具有更强的互动性。是否需要强互动性还需要跟具产品的需求来定，有的时候功能多也不见得用户都会使用。

2、字符限制

以微博、小红书为例，微博是在输入框右侧以红色文字提示用户应删减多少字符，红色醒目且即时提醒用户字符数量。而小红书则是以Toast弹窗的形式告诉用户字符应在多少文字以内,实时提醒，更为醒目不宜被用户忽视。

3、删除功能

以微信公众号与微博为例，二者评论形式的不同，导致删除评论的设计样式也有所不同，但是都是支持用户删除评论的。在设计的时候不能忽略。

要素五：点赞

点赞的设计需要注意两个方面，一个是点赞的图标设计，一个是点赞所在的位置。

以小红书为例，点赞的设计形式为一个“爱心”，设计在右侧与头像平行的位置。这样做的好处是节省了空间又突现了点赞的位置。

以微博为例，点赞的形式是竖大拇指，设计在底部右侧的位置。微博是讲副功能放在了底部展现，可以同时支持三个功能。

以虎扑为例，点赞的形式是一个“灯泡”，设计在底部左侧的位置。

要素六：转发

转发的设计不是必须的，有一些转发的实际是与点赞、回复同级，而有的转发则是隐藏在更多的功能之中。

以小红书与为例，小红书并不支持评论转发，只支持评论回复。

以微博为例，微博的转发、评论、点赞为同级。

以虎扑为例，虎扑的转发隐藏在了更多的功能里。

要素七：加载样式

加载设计的形式一般有三种，一种是点击加载。一种是无加载样式，直接滑动直到底部。还有一种是下拉加载刷新。

以微博为例，微博的加载样式是点击加载，这样做的好处是给用户一个缓冲，当用户想看的时候才会点击，缺点是当用户沉浸浏览时会影响用户的沉浸体验。

以微信公众号为例，微信公众号的无加载样式，直接可以下拉滑到底部，没有加载反馈。

以小红书为例，小红书是下拉刷新的加载样式，每隔一些评论便会自动加载更多的评论。

总结

以上就是我总结的七个评论区的组成要素，它们分别是评论排序、用户名与头像、评论内容、输入区、点赞、转发、加载样式。这七个要素可以随机组合成一个评论区，有的要素也不是必须出现的，比如微信就不支持多项互动的功能，也不支持评论转发的功能。有的则根据产品功能展现不同的样式，比如点赞的设计样式与位置。这七个要素可以让你根据自己产品的需要，自由的筛选组合。

参考链接：

《评论区怎么设计？哪种评论类型才是合适你？》

http://www.woshipm.com/pd/1073178.html

《3招搞定评论区设计》

http://www.ui.cn/detail/336547.html

《你真的了解评论区么？》

http://i.ui.cn/ucenter/292869.html