评论区的七要素

前言

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

image

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

目录

1.评论排序

2.用户名与头像

3.评论内容

4.输入区

5.点赞

6.转发

7.加载样式

要素一:评论排序

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

image

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

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

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

要素二:用户名与头像

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

image

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

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

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

要素三:评论内容

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

image

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

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

要素四:输入区

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

1、输入区功能

image

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

2、字符限制

image

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

3、删除功能

image

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

要素五:点赞

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

image

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

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

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

要素六:转发

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

image

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

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

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

要素七:加载样式

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

image

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

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

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

总结

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,050评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,711评论 2 59
  • 人生固然要锐意进取,追求上进,努力向成功进发,但很多的时候,还要知退,能退,更要善退。退让,很多时候是前进的一种姿...
    渴望硕壮的成熟阅读 477评论 3 4
  • 刚一结束训练,一直紧盯屏幕精神紧张的众人终于松了口气。年龄才15、16岁的少年再怎么摆出一副老成的模样,每到这种时...
    朝雾里出逃阅读 634评论 0 1
  • 《依依不舍》 舍不得你走 没有原因 好比花香伴我 永远念你 看那累累硕果 花香丰硕 只是因为你 笑的诱惑
    向昕阅读 330评论 2 2