赞助商
立即赞助

10个关键点,告诉你如何设计产品评论模块

产品经验3年前 (2021)发布 流光
2.4K 0 0

两天一直在构思36氪评论优化方案,也就整理行业内做评论的常见方法,篇文章我们就来聊聊设计评论功能时,需要考虑那些事儿。

总的来看,评论功能的设计,需要考虑下10个关键点:

  • 展示样
  • 排序规则
  • 操作行
  • 跳转逻辑
  • 营操作
  • 被删除/屏蔽后显示逻辑
  • 防呆设计
  • 捷操作
  • 媒体支持
  • 细节支持

一. 展示样式

目市面流行样式平式、主题式、盖式、对话式、混合式几种。

1. 平式

指所论都一层级,包括原论,对论的回复,并行显示。对于回复论样式,的直接显示回复内,如微信朋友圈的回复样式;的把原论显示出,如36氪App线版本的回复样式。

10个关键点,告诉你如何设计产品评论模块

2. 主题式

指把原评论为一级评论,对原评论的回复,为二级评论,排在一级评论下方。也就是说,将一级评论为「主题」,允许针对某个「主题」展开讨论。相比平铺式评论,主题式评论能让讨论主题更聚焦,让优质评论更能浮出水面,形成讨论氛围。对运营而言,还以针对优质评论展开讨论,促进曝光,提高运营效果。市面上很注重评论的内容平台均选用该样式,贴吧、最右、简书、微博等。

10个关键点,告诉你如何设计产品评论模块

3. 盖楼

指原评论回复,都把原评论内容露出,并带上自己评论,以“圈层”样呈现,久而久形成限嵌套框样,叫做「盖楼」。将这样发扬大属网易新闻,这也是它特色,由此诞生出很多经典评论效。是,盖楼评论在楼层多情况下势必要进多层隐藏,不好评论进追踪,视觉效也容易引起疲劳,不太议使用。

10个关键点,告诉你如何设计产品评论模块

4. 对话式

指每次对原评论的复,就是和评论发布者的一次对话,这种对话本身可分为一级、二级,乃至多级对话,分别是对评论者、评论复者,复评论复者的人,此类推。知乎就是典的对话式评论。对话式会评论互更明,但样式的设计却增了解成本,慎。

10个关键点,告诉你如何设计产品评论模块

5. 混式

指以上种式的混,有的是一评论用主题式,二评论用铺式;有的是一评论用主题式,二评论用对话式;还有的是一主题、二对话、三铺。体用哪种,也是根据用户理解程度和内容运营倾向性来选择。

10个关键点,告诉你如何设计产品评论模块

二. 排序规则

主流排序规则按发布时间、按门程度,再加人精选。

1. 按发布时间

通常默认按发布时间倒序,再一可支持用户可选序、倒序排列。得注意的,对主题式论,通常一级论默认倒序,目的让用户看到新论,一级论下的二级论则默认序,目的让用户理解讨论展。还一点,就一级论默认倒序的时间,建议取一级论下,二级论的新发布时间,这样能保证一级论的排序按论本身的讨论展新的。

2. 按门程度

需算所论的「度」,根据此排序。度一般取论的点赞数、回复数两维度,按权重行线性求算,的还支持「点踩数」、「举报数」负面维度。此外,了避免马太效应,还考虑加入时间衰减因子,算法优化方案很多。

三. 操作行为

主流操作行点赞、回复、复制、举报、删除、分享。

  • 点赞:要考虑点赞、取消点赞的赞数变更逻辑,是否需要服务端同步更新,点击的动效,点赞的消息提醒机等。
  • 回复:考虑回复弹窗的出、收起时机,回复字符限制,回复否支持换行符,否支持键盘提交,否允许空字符提交,回复页面弹窗小,按钮布局。
  • 复制:要考虑可复制域,复制交互(长按/点击),复制后的提示效果等。
  • 举报:要考虑是举报字还是举报人,举报后的示,举报后的数据审核等。
  • 删除:要考虑发布支持删除功能,删除时是否出现弹窗提醒?删除后状态何时步?删除是硬删除是软删除?等等。
  • 分享:要考虑分享平台,分享文案,分享的打开样式,是分享成网页还是分享成图等。

四. 跳转逻辑

跳转逻辑,要是考虑由于发布了评论,或复了评论,哪些地方会产生相入口,及这些入口点击的跳转位置,包括。

1. 我发布的

通会在「我的」里面,或者「消息中心」,可查自己发布过的评论,这些评论点击后可跳转到对应评论页面。如果是题式评论,对应跳转到评论二级页。

2. 复我的

有人复我的评论,在「我的」或「消息中心」会收到消息,该消息需要可点击跳转到评论页面。

3. 个人态

户发布评论或复评论,都属于个人行为,如果产存在个人页,那应该将该行为记录在个人页,「态」形式现,他人可在查看户态时,到该户对哪个章发表了哪些评论,并支持评论页跳转和章页跳转。

五. 运营操作

谓营操作,是指营可从后台干涉户的评论行为和评论结果。正向干涉包括:评论精、评论置顶;负向干涉包括:评论屏蔽、评论删除、评论人封禁、敏感词替换等。

1. 正向干涉

  • 论加精:支持运营挑选优质论,端给予「精华」的标记,的App也叫「神论」、「用」。
  • 评论置顶:如字面思,将某个评论,置顶评论列表首位,给予公示。

2. 负向干涉

  • 评论屏蔽:将某条评论暂时对他人可见。体验更好的做法,还可通知发布评论人容被屏蔽,要求修改后申请解除屏蔽,经审核后评论可重现。
  • 评论删除:接从后台将评论删除,不可恢复。
  • 评论人封禁:通常是和「举报」关联,对频繁垃圾评论者予以封禁,令其不评论。当也应该允许其申请封。
  • 敏感词替换:通常法构建敏感词库,如果论某些文字命中词库,则将敏感词替换「*」。

六. 被删除/屏蔽后显示逻辑

某条评论被删除,或屏蔽后,可以有两做法,要么是接删除,要么是前区块保留,被删除文变成「评论已删除」。尤其是主题评论,由于某条级评论可能关联多条级评论,如级评论被删除,其级评论是否需要全部删除,需要品经理根据评论价值来决策。议这情况是保留级评论。

七. 防呆设计

所谓防呆设计,是指需要思考如何过品设计,防止用户误操作。括:

  • 评论草稿箱:就是说评论框输入字,未发送前,如果误点击了取消区域,自替户保存当前输入字,而再次现评论框时,还将之前字恢复。这个功还有个降级方案,就是户取消输入框时,弹Alert告知户是否要取消。
  • 评论数提醒:数输入过多时,过红提醒用户限,「发送」按钮灰。

八. 快捷操作

输入文字对用户而言是个高成本的事,而评论本身是个表达度的渠道,那是否可以计一些简的交互行为帮助用户迅速表呢?所谓快捷操作,就是针对这点的解决方案。可以是:

  • 速表态:论区设表态按钮,比如,踩、一般、赞、太棒了,用户直接点击即可,类似投票行。典型案例如天天报、橘子娱乐。
  • 评论直输入表情/颜文字:用户可在发评论,选择表情图发布,或快速选择颜文字发布。像搜狐新闻、凰新闻、网易新闻都可以直发表情。

九. 富媒体支持

对某UGC向的内容产品,评论区甚至支持静态图、音频、GIF动图、视频,时也就需要对应的流程设计和台存储逻辑。

十. 细节支持

里就要从用户验角度,考虑各种特殊情况的产品细节,我能想到的比下面。

1. 评论支持识别超链接

  • 超链接的识别逻辑:需要头是http或https,尾是空格进行识别。
  • 链接数计算:于限制数输入框,链接可以统为10个符。
  • 超链接的显示样式:简单的以直接显示链接地址。
  • 好一点的显示「链接址」四字。
  • 再好一点的取链地址对于网址的title显示,如知乎。

2. 评论时,键盘设置问题

评论框输评论时,需要考虑是否将「」按钮设置在键盘上。果需要考虑评论换行,「完成」键应该为换行键,否则点击“完成”应该是直接提。

3. 评论点击区域细节

评论区有很元素,需要告开哪区域点,点击跳转到哪地方。下图所示:

10个关键点,告诉你如何设计产品评论模块

以上就是我能想到的所有做评论功能时,需要注意的方面,希望对大家有帮助。有问题欢迎随时给我留言。

欢迎关注作者的微信公众:「互联网悦读笔记」

10个关键点,告诉你如何设计产品评论模块

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

APP和网站这样的数字产品中所包含的有效的交互系统,通常是由包含不同任务和功能的小元素组合到一起的。想要让整套交互系统无...
CTA按钮
「界面中存在的每一个元素,都是有意义的。」这是我进行产品设计时的一贯主张。 小到一个标点符号、一根分割线,大到一个图...
icon图标
在前边的文章中我们已经全方位立体式的讲解了系统图标的相关知识点。即讲到了系统图标的设计风格,也讲到图标设计的栅格体系...
Icon设计
在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设...
可用性测试
针对设计师评审时常见的情况,我整理了一下关于评审的方法,希望对大家有用,可以帮大家早一点下班~ 欢迎关注作者...
ui设计
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标
Tubik Studio :我们的日常生活中总是面临着无尽的选择,大量的挑战。设计的决策也是如此,一个正确的决策会受到很多不同因素...
ui设计
越来越多的设计师开始从 Sketch 切换到 Figma,基础功能上没得说,但是确实缺少 Sketch 上丰富多彩的插件支持。作为一个发展...
Figma