恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
「评论设计」的8个思考维度
0.0°
2018-08-22 原创文章 经验/观点 举报 1268 16 9 1

最近结合网上的相关文章整理了一套评论设计的思考维度。



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


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

Image title


01  内容元素


1.1 入口

一般有以下表现形式:

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

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

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


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

Image title



1.2 评论部分

一般包括:

- 头像 昵称 头衔:例如微博会有会员标识

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

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

- 互动:例如回复、点赞

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

Image title



1.3 输入评论部分

一般包括:输入框 添加图片按钮 添加表情按钮 艾特按钮 发送按钮

Image title



02  展示形式 

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

Image title

2.1 两级式——小红书

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


2.2 引用式——网易云音乐

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

Image title


2.3 盖楼式——网易新闻

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


2.4 平铺式——知乎

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

Image title




03  操作

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

Image title


3.1 回复:

- 不允许回复。

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

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


- 允许作者回复。

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


- 允许所有人回复。

最常见的一种情况,有利于营造自由讨论的氛围。


3.2 点赞

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

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


3.3 转发:

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


3.4 删除:

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


3.5 复制

3.6 举报

……


04  防错设计

Image title


4.1 提示用户字数限制

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

Image title



4.2 保存功能

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

Image title



05  情感化

Image title


5.1 情感化动效

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

Image title



5.2 多种互动方式

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

Image title



5.3 情感化文案

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

Image title



5.4 情感化Toast提示

Image title


5.5 视觉样式

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

Image title


06  后台逻辑

Image title


6.1 编辑权限:

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

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

- 删除:永久删除

- 隐藏:隐藏不展示



6.2 审核机制:

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


- 先发送后审核


6.3 敏感词过滤:

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



07  排序规则


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

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

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

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

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

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

- 小红书:回复数从多到少+时间倒序排序 豆瓣:时间顺序排序



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

Image title


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

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

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

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

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

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

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

……



08  消息提醒


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


Image title



8.1 消息分类:

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

Image title


8.2 聚合逻辑:

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

Image title


8.3 已读/未读:

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


8.4 过期时间:

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

……



总结

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


谢谢阅读!

沁园



参考文章:

实例分析:4种常用的评论结构设计 http://www.woshipm.com/pd/572400.html

《10个关键点,告诉你如何设计产品评论模块》http://www.sohu.com/a/194400984_114819

《Facebook:除了点赞我还想点点儿别的》http://www.ui.cn/detail/107706.html




作者:沁园

更多文章请关注 —— 知乎专栏:沁园的设计小跑








更新:2018-08-22

收藏

16人已收藏

沁园Qinyuan

交互设计师/摄影重度爱好者。

  • 2

    作品

  • 11

    粉丝

  • 8

    关注

  • Banner也需要交互设计?

    猜你喜欢

      2018-08-22 原创文章 经验/观点 举报 1268 16 9 1

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

      0.0°

      你确定要举报「评论设计」的8个思考维度

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      16
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录