博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html实现点赞评论功能_UI设计中评分功能设计总结
阅读量:5223 次
发布时间:2019-06-14

本文共 1543 字,大约阅读时间需要 5 分钟。

  很多 APP 中都有评分功能,比如豆瓣的按照 1-5 颗星给电影评分,或者知乎中按照赞同或反对给答案的评分等等。这篇文章主要分享一下评分功能的作用以及常见的模式。今天我就针对UI设计中评分功能设计总结进行简单的说明。

  评分的作用

  主要作用有三个:1.对评价进行可视化处理,便于查看和理解,让用户对内容有一个感性的认知;2.给内容创造者给予反馈,比如 QQ 空间的点赞让人获得成就感;3.供他人作参考,帮助他人做决策,比如根据一部电影的评分决定要不要看。

  评分的模式

  不同的评分展现模式,具有不同的特点和使用场景,也会给别人带来不同的感受和认知。主要的展现模式有四种:

  1.单向评分

  这种模式只能表达正面的想法,常见的有“点赞”或“喜欢”,适用于只鼓励用户表达积极评价的场景。比如好友之间的交流,没有负面评价,可以使交流氛围更加融洽。如下图:

a1e13e2f44eec480d52eeeacd9a12976.png

  以 QQ 和微信为例,基本上都是朋友或同事,尽管设置一个和点赞相对立的按钮,就算有负面的想法但是出于礼貌可能也不会去点。还有值得注意的一点就是,点赞数在一定程度上会影响人的判断。QQ 的点赞数所有人都可见,但微信的点赞数只有相同好友可见。比如看到 QQ 好友的动态那么多人都点赞了,也会忍不住点一下,点赞的动机可能是出于礼貌。但每当面对朋友圈,我都认为自己是一个孤独的点赞战士,丝毫不受他人点赞或评论的影响~可能会更加注重内容一些。

  2.表情评分

  这种模式通常使用多个表情让用户来选择,做出评价。一般都会采用正面、积极的表情,具有多种样式,用户可以表达出相对详细的想法,比如大笑、笑哭、吃瓜等等。如下图:

4a67ace2c0ffb7b335f5d649b73e2321.png

  以QQ 和飞聊为例,他们都可以进行表情评论,长按点赞呼出表情选项,不同的是飞聊选择表情评论后会以选择的表情代替点赞图标,但 QQ 选择完表情后仍然会显示点赞的图标。

  3.双向评分

  这种模式能让用户表达“正面”和“反面”两种想法,UI设计中评分功能设计总结https://www.aaa-cg.com.cn/ui/2761.html适用于鼓励用户进行讨论、表达不同想法的场景。这种模式可以帮助用户了解内容的质量好坏,也可以起到一个排序筛选的作用。如下图:

2338a57cedf2ad536464c15032d97edd.png

  以知乎为例,用户可以对内容表达赞同或反对,大家都不认识,可以畅所欲言地表达自己的想法或观点。赞同数较高的内容排序更加靠前,便于用户首先看到高质量的内容。

  4.等级评分

  这种模式通常会将评分分为5个等级,适用于对开放式内容的评价,比如电影、商品、服务等等。这种模式的评分系统更加详细,同时也可以表达负面评价。如下图:

7d077fb19c8577151224d06f1a19abba.png

  以豆瓣为例,给豆瓣的电影评分是打 1-5 颗星,然后系统会把 1-5 颗星的评价换算成 1-10 分,再除以总评价人数,最后得出平均分,平均分可以帮助用户了解一部电影整体水平。再例如 App Store,在打分时往往会伴有评价输入框,让用户写下自己的想法或观点,既可以帮助别人作参考,也可以帮助开发人员进行改进。如下图:

065a91d8a8b925d4b531cdfccb9b4f51.png

  所以等级评分是一个更加详细的评分系统。

  划重点

  评分功能是用户对内容的一个简略的想法或评价,能帮助用户在第一时间对内容作出一个感性的认知,并不能帮助用户了解更加具体详细的内容。想了解更具体的内容还要看评价信息。

  由于不同评分模式的特点及使用场景都不同,所以需要根据具体需求选择最适合的评分模式。因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请给我点个关注,我之后还会发包含有关在该领域工作的更多相关文章。

UI设计中标签栏总结

UI设计中按钮场景分析

UI设计中置灰功能总结

UI设计中异常状态设计总结

UI设计中的作品集避坑指南

转载地址:http://paatv.baihongyu.com/

你可能感兴趣的文章
UIImage 和 iOS 图片压缩UIImage / UIImageVIew
查看>>
MongoDB的数据库、集合的基本操作
查看>>
ajax向后台传递数组
查看>>
疯狂JAVA16课之对象与内存控制
查看>>
[转载]树、森林和二叉树的转换
查看>>
WPF移动Window窗体(鼠标点击左键移动窗体自定义行为)
查看>>
软件测试-----Graph Coverage作业
查看>>
django ORM创建数据库方法
查看>>
创建Oracle synonym 详解
查看>>
php7 新特性整理
查看>>
RabbitMQ、Redis、Memcache、SQLAlchemy
查看>>
linux查看端口占用
查看>>
Sql常见面试题 受用了
查看>>
知识不是来炫耀的,而是来分享的-----现在的人们却…似乎开始变味了…
查看>>
CSS背景颜色、背景图片、平铺、定位、固定
查看>>
口胡:[HNOI2011]数学作业
查看>>
我的第一个python web开发框架(29)——定制ORM(五)
查看>>
中国剩余定理
查看>>
基础笔记一
查看>>
uva 10137 The trip
查看>>