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

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

2018/02/12 评论区

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

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

  • 展示样式
  • 排序规则
  • 操作行为
  • 跳转逻辑
  • 运营操作
  • 被删除/屏蔽后显示逻辑
  • 防呆设计
  • 快捷操作
  • 富媒体支持
  • 细节支持

一. 展示样式

目前市面上流行样式有平铺式、主题式、盖楼式、对话式、混合式几种。

1. 平铺式

指所有评论都在一个层级,包括原评论,和对评论的回复,并行显示。对于回复评论样式,有的是直接显示回复内容,如微信朋友圈的回复样式;有的是把原评论显示出来,如36氪App线上版本的回复样式。

2. 主题式

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

3. 盖楼式

指每次对原评论的回复,都把原评论内容露出,并带上自己的评论,以“圈层”样式呈现,久而久之就形成无限嵌套的方框样式,叫做「盖楼」。将这一样式发扬光大的当属网易新闻,这也是它的特色之一,由此诞生出很多经典评论效果。但是,盖楼式评论在楼层多的情况下势必要进行多层隐藏,且不好对评论进行追踪,视觉效果也容易引起疲劳,不太建议使用。

4. 对话式

指每次对原评论的回复,就是和评论发布者的一次对话,这种对话本身也可分为一级、二级,乃至多级对话,分别是对评论者、评论回复者,回复评论回复者的人,以此类推。知乎就是典型的对话式评论。对话式会让评论互动更鲜明,但其样式的设计却增加了理解成本,慎用。

5. 混合式

指以上几种样式的混合,有的是一级评论用主题式,二级评论用平铺式;有的是一级评论用主题式,二级评论用对话式;还有的是一级主题、二级对话、三级平铺。具体用哪种,也是根据用户理解程度和内容运营倾向性来选择。

二. 排序规则

主流排序规则有按发布时间、按热门程度,再加上人工精选。

1. 按发布时间

通常默认是按发布时间倒序,再进一步可支持用户可选正序、倒序排列。值得注意的是,对主题式评论,通常一级评论默认倒序,目的是让用户看到最新评论,一级评论下的二级评论则是默认正序,目的是让用户理解讨论进展。还有一点,就是一级评论默认倒序的时间,建议取一级评论下,二级评论的最新发布时间,这样能保证一级评论的排序是按评论本身的讨论进展来更新的。

2. 按热门程度

需要计算所有评论的「热度值」,根据此来排序。热度值一般取评论的点赞数、回复数两个维度,按权重进行线性求和计算,有的还支持「点踩数」、「举报数」等负面维度。此外,为了避免马太效应,还要考虑加入时间衰减因子,算法优化方案有很多。

三. 操作行为

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

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

四. 跳转逻辑

跳转逻辑,主要是考虑由于发布了评论,或回复了评论,哪些地方会产生相关入口,以及这些入口点击的跳转位置,包括以下。

1. 我发布的

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

2. 回复我的

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

3. 个人动态

用户发布评论或回复评论,都属于个人行为,如果产品存在个人主页,那应该将该行为记录在个人主页,以「动态」形式出现,其他人可在查看用户动态时,找到该用户对哪个文章发表了哪些评论,并支持评论页跳转和文章页跳转。

五. 运营操作

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

1. 正向干涉

  • 评论加精:支持运营挑选优质评论,在前端给予「精华」的标记,有的App也叫「神评论」、「有用」等。
  • 评论置顶:如字面意思,将某个评论,置顶到评论列表首位,给予公示。

2. 负向干涉

  • 评论屏蔽:将某条评论暂时对他人不可见。体验更好的做法,还可以通知发布评论人其内容被屏蔽,要求其修改后申请解除屏蔽,经审核后评论可重新出现。
  • 评论删除:直接从后台将评论删除,不可恢复。
  • 评论人封禁:通常是和「举报」关联,对于频繁发布垃圾评论者予以封禁,令其不可再发评论。当然也应该允许其申请解封。
  • 敏感词替换:通常做法是构建敏感词库,如果评论某些文字命中词库,则将敏感词替换为「*」。

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

当某条评论被删除,或屏蔽后,可以有两种做法,要么是直接删除,要么是当前区块保留,被删除文字变成「评论已删除」。尤其是主题式评论,由于某条一级评论可能关联多条二级评论,如果一级评论被删除,其二级评论是否需要全部删除,需要产品经理根据评论价值来决策。建议这种情况还是保留二级评论。

七. 防呆设计

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

  • 评论草稿箱:也就是说评论框输入文字,未发送前,如果误点击了取消区域,自动替用户保存当前输入文字,而再次出现评论框时,还能将之前文字恢复。这个功能还有个降级方案,就是用户取消输入框时,弹出Alert告知用户是否要取消。
  • 评论字数提醒:当字数输入过多时,通过红字提醒用户超限,「发送」按钮置灰。

八. 快捷操作

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

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

九. 富媒体支持

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

十. 细节支持

这里就要从用户体验角度,考虑各种特殊情况的产品细节了,我能想到的比如下面这些。

1. 评论支持识别超链接

  • 超链接的识别逻辑:需要头部是http或https,尾部是空格进行识别。
  • 超链接的字数计算:对于限制字数的输入框,超链接可以统一为10个字符。
  • 超链接发布后的显示样式:简单的可以直接显示链接地址。
  • 好一点的显示为「链接地址」四个字。
  • 再好一点的取链接地址对于网址的title显示,如知乎。

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

评论框输入评论时,需要考虑是否将「发布」按钮设置在键盘上。如果需要考虑评论换行,那「完成」键应该作为换行键,否则点击“完成”应该是直接提交。

3. 评论点击区域细节

评论区有很多元素,需要告知开发哪些区域可点,点击跳转到哪些地方。如下图所示:

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

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

「好的交互设计还需要注意这些细节」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/product-review-module-10-key

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 海报设计 神器下载 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里