首页 > 建站资源 > 网站运营 > 设计分析:评论区的七要素

设计分析:评论区的七要素

时间:2018-10-30    来源:海盐社

前言

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

1.jpg

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

目录

1.评论排序

2.用户名与头像

3.评论内容

4.输入区

5.点赞

6.转发

7.加载样式

要素一:评论排序

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

640.jpg

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

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

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

要素二:用户名与头像

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

640.jpg

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

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

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

要素三:评论内容

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

640.jpg

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

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

相关推荐
国内知名网站的404错误页面分析
页面策划:空白页面应该如何设计?
注册登录流程有哪些学问?一文讲透注册登录的内容
设计分享:如何搞定页面视觉风格统一性?
网站入口页面如何根据流量统计数据做优化?
这1000个顶级着陆页案例,告诉你 5 个转化率优化的秘诀!
暖岛网:小而美的创意类电商网站
Dribbble:最具影响力的平面设计师社区
互联网产品设计理念:产品即有机生命体
创意设计电商:追随者少 被看好的潜力市场
Fab追随者稀品网:创意设计电商的变身样本
Quirky:以社区众包的力量快速实现创意
Win8之父辛诺夫斯基:如何培养创新思维
产品设计:日本做了哪些我们没做的事?
电子商务网站设计分析系列之二:首屏设计
电子商务网站设计分析五:商品列表页设计
如何才能设计出“以用户为中心”的网站?
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
实现网上11个创意爆棚项目
向Booking学习:设计最具说服力的页面
为什么说左图右文字比右图左文字要好?
产品实用技巧:交互说明中容易忽略的几件事
干货:设计APP产品不得不知的4个心理学原理
超实用干货!视觉设计师的五项技能修炼方法
创意盘子:让爱晒照的吃货拍出大师级美食照
华为总监:18条交互设计和心理学之间的联系
网页配色技巧:解析网页设计之色彩学问
这些邮件设计好厉害 魔鬼藏在细节中!
从需求到内容:网站导航设计总结
APP产品设计:让用户看见 才是王道!
简约之道:极简风格界面设计的起源与发展
还在犯这错吗?让你网站看起来不专业的十个误区
如何发现交互设计中的思维盲区
如何通过H5页面走入用户内心

精彩推荐

热门教程