「评论设计」的 8 个思考维度

作者:沁园

原文地址:zhuanlan.zhihu.com/p/37169989

未经允许请勿转载,感谢您对作者版权的尊重。


近些年,各类移动应用都或多或少的融入了社交属性。其中,“评论”功能作为人与人、人与内容、人与产品之间交流的工具,已成为不可或缺的一部分。

最近我负责的社区类产品就涉及评论模块的设计,结合网上的相关文章整理了一套评论设计的思考维度。

v2-ca5b2fb066fc0c891e294540299ddb7e_r.jpg

1. 内容元素

1.1  入口

一般有以下表现形式:

  • 图标+标签+数量:加入标签这样的文字说明可以更清晰地表意

  • 图标+数量:在图标表意清晰的情况下使用

  • 图标+数量角标:需要更节省空间的情况下,可以将数量设计成小角标的形式

(注:此处需注意数量的位数,一般做多展示4位,5位以上展示“X万+”)

1.2  评论部分

一般包括:

  • 头像

  • 昵称

  • 头衔:例如微博会有会员标识

  • 评论发布时间:要注意时间的展示规则,例如是展示“XX小时前”还是展示“XX时XX分”?

  • 评论内容:一般是文字,也可以支持图片和视频

  • 互动:例如回复、点赞

  • 操作:复制、举报、删除……

1.3 输入评论部分

一般包括:

  • 输入框

  • 添加图片按钮

  • 添加表情按钮

  • 艾特按钮

  • 发送按钮

v2-c07b0a36d79a1df358d71c0e567ee5f7_r.jpg

2. 展示形式

目前常见的样式有两级式、引用式、盖楼式、平铺式(都是我自己起的名字)。

2.1 两级式——小红书

所谓两级,主动发出的评论算一级,这条评论的所有回复算二级,且回复按时间顺序排列。这种形式使回复的内容更聚焦于该条评论的“主题”,可以很顺畅地浏览并理解回复。并且让优质评论更能浮出水面,形成讨论氛围。

2.2 引用式——网易云音乐

回复和评论都算一级,且回复的内容会引用被回复的内容。这种形式可以让回复更多地被曝光,也能适当了解是针对什么内容进行的回复。

v2-fe2b87bb95779dce41b3597e738fb11e_r.jpg

2.3 盖楼式——网易新闻

网易新闻无意中创造的“盖楼式”评论成为其一大特色,以层层嵌套的方式把每一层回复都露出,盖楼在视觉上气势磅礴,但是看多了也显得过于复杂,容易视觉疲劳。虽然信息连贯,但是前面的信息几乎都是一样的,只是最后一条不同,导致大量信息重复。解决方法是由前端判断重复的楼层,默认收缩隐藏。

2.4 平铺式——知乎

注重单条信息(评论/回复)的展示,不重视信息的连贯性,增加了理解成本。知乎就是典型的平铺式,但是它在每条评论/回复下都有“查看对话”的按钮,点击可以查看上下文,一定程度上弥补了这方面的不足。

v2-11af93c200d227c280824cbd12dba14f_r.jpgv2-ff97f86cf37441efb88047385fb0aae8_r.jpg

3. 操作

这部分仅讨论和用户有关的操作,不包括后台编辑人员的操作。操作主要有以下几种:

3.1 回复:

  • 不允许回复。

用户是否可以自行设置允不允许别人回复?例如微博和知乎都允许用户自行设置别人不可以评论自己发布的帖子,给予用户表达自己观点但是不接受评价的权利。

还有一种情况是由于一些特殊原因,产品暂时关闭了评论功能,例如抖音最近因为评论的审查监管问题关闭了评论功能。

  • 只允许作者回复。例如微信公众号的文章,通过筛选的留言才能被公开,并且只允许作者回复。这样设计也许是为了让公众号能更好地维护自身的形象。

  • 允许所有人回复。最常见的一种情况,有利于营造自由讨论的氛围。

3.2 点赞:

让用户可以快速表达正面的反馈。不仅是点赞,还可以是点爱心、支持、顶、鼓掌等。

反对:快速表达负面反馈。还可以是踩、不喜欢等。一般负面反馈都会隐藏得比较深。

3.3 转发:

让评论更广地传播,例如微博和知乎想法都有转发的功能。

3.4 删除:

  • 是否允许自己删除自己的评论/回复

  • 是否允许作者删除别人的评论/回复

3.5 复制

3.6 举报

……

v2-3d1ec4a205f2f18961e607399e2c2714_r.jpg

4. 防错设计

4.1 提示用户字数限制。

在有限制字数的情况下,实时提醒用户已经输入了几个字,超出字数时给予明显提示。

4.2 保存功能。

在做出删除等不可恢复的操作之前,给予用户是否保存的提示,例如微博;而某些产品则提供了自动保存草稿的功能,例如知乎。

v2-4abe7c20a305f6b1d465c85617803561_r.jpg

5. 情感化

5.1 情感化互动

许多产品会让反馈结合动效来展现,增加愉悦感。

v2-43789b3219c708b68b54a78a6b8f1e28_r.jpg

5.2 多种互动方式

Facebook花了1年多的时间重新设计了互动反馈功能。在项目前期,他们做了许多调研工作来寻找人们最常表达哪些情绪,最终确定了6种情感反馈,分别是喜欢、爱、哈哈、惊讶、生气和伤心。结合表情设计和动效设计,让用户之间的互动反馈更加精准、多元且有趣。

v2-684a5227386b66cce4b8e3d4ea5b886d_r.jpg

5.3 情感化文案

有趣的文案可以更好地引发用户评论的兴趣。

v2-b5d653d290ad2c7b4997f37713c51452_r.jpg

5.4 情感化Toast提示

v2-b350034f2b58740e2f4d08773a5ce608_r.jpg

5.5 视觉样式

Facebook在改版后将评论的UI设计成类似聊天气泡的样式,增添了一种大家在聊天的感觉,增加用户的参与感。

v2-f7d8a86c9a1b76ac95d07ffc7f505f6c_r.jpgv2-0490fe6894daabc8c5a17769189765b2_r.jpg

6. 后台设计

6.1 编辑权限:

  • 标记:将评论标记为精华或者热门

  • 人工排序:置顶或者指定序列

  • 删除:永久删除

  • 隐藏:隐藏不展示

6.2 审核机制:

  • 先审核后发送。提示用户评论的内容会经过审核或筛选之后才会可见,例如对微信公众号的评论。还有一种做法是在审核速度很快的情况下,在前端先让用户以为发送成功了。

  • 先发送后审核

6.3 敏感词过滤:

考虑评论中如果有违禁词该怎么处理,是屏蔽违禁词还是屏蔽整条评论。

v2-02a6f94ea3edc9cf9ca67ef46f5b6a40_r.jpg

7. 排序规则

整理了几个App的评论排序:

  • 知乎:精选评论+ 时间顺序排序

  • 抖音:3条热门评论+时间倒序排序

  • 网易新闻:热门评论(点赞数最高)+精彩盖楼(回复数最多)+时间倒序排序

  • 网易云音乐:精彩评论(点赞数从高到低)+近期热评(点赞数从高到低)+时间倒序排序

  • 微博:热度排序/时间倒序排序(用户可手动切换)

  • 小红书:回复数从多到少+时间倒序排序

  • 豆瓣:时间顺序排序

排序规则可以从以下几个角度来制定:

  • 时间:分为顺序排序和倒序排序。评论一般是倒序排序,用户每次都能看到不一样的最新评论;回复一般是顺序排序,符合信息阅读顺序。

  • 点赞数:点赞数最多的在前。

  • 评论字数:例如淘宝的评价列表页里,排在前几个的都是字数多、并且带图片的。

  • 回复数:回复数最多的在前。

  • 评论人身份:比如优先展示大V、明星的评论。

  • 人工排序:置顶或者指定序列

  • 权重值算法: 举个例子,权重值=(评论字数*点赞数)+(关注数+15)*(关注/粉丝值+0.1)*10%+被回复数*15

……

v2-46d1fa9a18bb19b6b57f9f8a44b595af_r.jpg

8. 消息提醒

评论模块和消息提醒功能密不可分,需要给用户发送消息来提醒Ta有人评论了或是有人回复了,对社区的活跃度至关重要。

8.1 消息分类:当消息的种类有很多时,就需要对消息进行分类。

v2-ceadb746fbad2fbae32463d6f16934d7_r.jpg

8.2 聚合逻辑:当同类消息过多时,为了避免让用户一次性看到N条相似的详细,需要对同类型的消息进行聚合展示,例如知乎。

v2-1b89c5a3f08c00187337d59d51adfa58_r.jpg

8.3 已读/未读:区分已读和未读消息,考虑是否提供用户”全部设置成已读“的按钮。

8.4 过期时间:过期意味着消息消失,需要考虑用户已读的内容多长时间会过期。

……


总结

本文总结了评论设计的8个思考维度。在具体的评论设计时,需要基于【产品特性】和【评论目的】来思考各个细节。


参考文章


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与各种线下设计、聚会活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们