小雨点

最近在做详情页的设计,做的过程中有个地方布局有点空,就在上面加五颗星星,同事问我,为什么要加评分,而且为什么是五颗星的评分,说实话我没答上来,被怼了一顿。这不禁让我很是费解,评分的到底该不该放啊,放在哪里比较合适呢?今天我们就来研究一下评分这个小组件在工作中要如何更好的设计和使用它。

 

目录

1、评分组件是什么?

2、评分组件的种类和位置

3、划重点

 

评分组件是什么?

评分是直观的显示用户对内容的评价或感想,将用户对于当前产品的评价进行了可视化的处理,使用户对数据有一个感性的认识。除了对内容进行评价之外,还有对发布内容的用户进行反馈、将改内容的评价分享给第三者、作为分类标准供自己参考。

 

评分的种类和位置

很多新手设计师都以为评分就是设计五颗星星而已,其实评分有很多种不同的显示模式,即使评分相同,用户的感受也不同,下面就让我们来看看几种评分的模式。

 

1、标准模式

标准的评分仅仅是对内容进行简单的评价操作,该模式最经典的例子要属Facebook的点赞功能,自从09年Facebook开启了这个创新之举,目前几乎所有的产品都有这个功能,如下图所示:


如上图,都是采用了开关按钮的形式,点击后被选中,再点击就会取消,这种模式仅仅只能反映正面评价,因为大多目前来说这种形式大多都是在UGC内容出现的,正面的评价能够更好的让UGC用户产出内容。现在很多产品在用户执行操作的时候,会增加一些动画效果,来增加用户评分的趣味性,活跃气氛。如下图所示:

抖音比较特殊,用户通过点击心形的点赞按钮,能够将内容标为收藏。如下图所示:


一般会出现的位置:

这种类型的评分我们在产品中是见的最多的,大多都是跟随UGC内容或者产品的详细介绍时会出现,在界面底部出现的概率比较多,如下图所示:


这种模式是最普通的模式,现在几乎每个产品里都会有点赞的评分模块,最常见在评论里和UGC模块。

 

2、表情模式

表情的评分是给用户提供了好多个表情,用户可以借助表情来表达对该内容的心情,以可视化的形式表现出用户评价的细微差别。


Facebook新的点赞就是选择的该模式,虽然提供了多种候选表情,只有后两个 Sad(悲伤)以及 Angry(愤怒)称得上「负面表情」。但是键盘侠抨击的时候,两个表情似乎都不太合适表达这种情绪。如果要选择,所花的时间成本会有点高,因此提高了门槛,减少了不好的情绪表达。

很多产品都有在用户完成一个订单或者阅读之后,使用这种评分模式,如下图所示:


给骑手或者看的作品打分,目前以上的产品使用表情的模式来打分,但是在可选的表情中都不会有很网络暴力或者无法承受的负面评价。

一般会出现的位置:

这种模式出现做多的是两种情况,一种是在打分的时候,比如美团和饿了么在给外卖小哥打分的时候,就是使用的表情模式,让用户给他们打分,如下图所示:


这种情况在消费后评分可以选择这种模式,一般都是会处于界面顶部,让用户对于不同的表情做出选项,给予打分。

第二种情况就是出现在UGC内容的点赞中,只是将点赞的形式变得更多样,选择更多了,如下图所示:


给用户对于当前内容的评分给予更多样性的选择,提高用户互动的积极性,因此这种类型比较适合一些产品核心为新闻或者趣事的产品。

 

3、好评差评模式

好评差评模式的评分控件不仅会显示积极评价,还会显示消极评价,之前第一种模式是仅有点赞的按钮,是因为适用的部分都是UGC产出的内容,但是目前产品中看到的比较少,如下图所示:


从上图中我们可以看出,选择这种模式的是以UGC内容为核心的产品,而且她们有一个共同点,就是用户产出的质量都比较高,因此增加了这个没用或者不赞同的模块,

一般会出现的位置:

如上图所示,在UGC为核心的产品中,好评差评的模式一般会出现在界面底部时,是作为给当前页面看的内容评分。还有一种情况就是以商品为核心的产品,当需要用户给商品做评价时,好评差评会出现在页面的顶部位置,如下图所示:


目前我看到的电商评价商品仅有淘宝和天猫还有好评和差评之分,其他的主流电商评价都是以星星等级作为评价标准。

 

4、等级模式

等级模式是将评分分成了5级,主要也是用户商品或店家开放式内容的评价,相对于上面的三种模式,这种模式能够实现更详细的评分统计,正面和负面的都很详细,如下图所示:


用户评价是个很重要的指数,但如果评分人数太少,该评分的可信度就会降低,因此我们对于显示评分总数和各评分的比例是很有必要的。

一般会出现的位置:

这种设计模式比较简单,从上图中我们可以发现,星星等级评分都是在产品详情页上,大多出现在图片周围或者评论区附近,代表着产品的评分,而这种评分模式的位置分为三种:

1)在图片附近:

2)评论区域:

3)详情页顶部:


星星等级评分是很常见的模式,适用的产品为商品或以内容质量为主的产品,用户需要这些更为详细和客观的评分来判断该产品是否值得下手或者花时间,因此在服务或商品质量为核心的电商、教育、旅游、点评类的产品详情页中使用最多。

 

划重点

赞能够更好的激励用户,表情评分使用在体验某种服务之后以及让用户有更多的评分选择,好评差评更容易体现用户的看法。而等级评分能够体现出来的正负评价,这些数据能够帮助产品更好的统计用户对内容的好恶,同时其他用户的评价也是选择过程中重要的参考。我们在设计的时候要选择好更为恰当的表现形式,来让产品更好,也能够让用户获得最直观准确的衡量标准。

参考引文《App这样设计才好卖》作者:[日]池田拓司

 

原文链接:海盐社(公众号)

作者:潘团子

转载请注明:学UI网 » 为什么他们设计评分都爱用五颗星?

登录收藏
 
你可能喜欢的:
需求落地之信息架构设计需求落地之信息架构设计
设计沉思录|租房业务全流程体验设计设计沉思录|租房业务全流程体验设计
交互设计中让人困惑的三大组件你会用了吗交互设计中让人困惑的三大组件你会用了吗
微信的12大“反人类”设计微信的12大“反人类”设计
Material Design Layout Responsive layout grid  响应式布局网格Material Design Layout Responsive layout grid 响应式布局网格
如何正确制作用户画像如何正确制作用户画像
网格列表,没有你想的那么简单网格列表,没有你想的那么简单
除了下拉菜单之外你还有更好的选择除了下拉菜单之外你还有更好的选择
发布器的常见入口样式总结发布器的常见入口样式总结
58App全新升级:知你所需,予你所求58App全新升级:知你所需,予你所求