<div id = "demo"></div>

<input type = "button" id = "btn1" value = "点个赞吧" />

由于还要引进心的图片，所以在这里我们在设置css样式的时候还要设置图片img的样式。

css代码如下：

<style type="text/css">

*{

margin: 0px

padding: 0px

}

#btn1{

position: absolute

bottom:100px

width: 200px

background-color: lightblue

font-size: 18px

left:45%

}

img{

bottom:100px

margin-left: -15px

width: 20px

height:20px

position: absolute

left: 50%

}

</style>

下来就是要写jquery函数。

(document).ready(function(){

// 1. 首先给按钮绑定点击事件。(“#btn1”).click(function(){

//2. 生成彩色的心，即随机选择图片。

// 2.1 生成随机数

var num = Math.floor(Math.random() * 3 +1)

//2.2 生成一个img元素，并为其添加src属性

var image = $(“”)

//三个图片的名字分别是 1.png\2.png\3.png,所以img的路径和图片名可以进行线面的字符串拼接

image.attr(“src”,”./images/”+num+”.png”)

//3。将生成的img追加到页面上

$(“#demo”).append(image)

//4. 下来就是让心动起来。从点击按钮的地方向上飘。利用jquery的动画函数animate()

//生成随机的距离左边的距离，这样就可以使心有种向上飘的感觉

var left = Math.random() * 800

image.animate({

‘bottom':'800px',

‘left':left,

‘opacity':'0'

},3000)

})

})；

})

ui

打开APP

做个好梦.

关注

UI设计中评分功能设计总结 转载

2020-09-29 12:05:08

做个好梦.

码龄2年

关注

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

评分的作用

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

评分的模式

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

1.单向评分

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

UI设计中评分功能设计总结

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

2.表情评分

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

UI设计中评分功能设计总结

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

3.双向评分

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

UI设计中评分功能设计总结

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

4.等级评分

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

UI设计中评分功能设计总结

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

UI设计中评分功能设计总结

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

划重点

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

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

原文链接：https://www.aaa-cg.com.cn/ui/2761.html

打开CSDN，阅读体验更佳

选手打分系统的设计与实现

运动会比赛中，有10个评委为5个选手打分（最高分为10分），选手最后得分为：去掉1个最高分和1个最低分后的平均分。 具体实现下面功能： （1）输入5个选手姓名和每个评委的评分 （2）求每个选手平均分（去掉1个最高分和1个最低分） （3）按平均分从高到低分排序 （4）按名次输出。 （5）将本次结果保存起来 （6）要求用户界面尽可能美观友好

html实现点赞效果,HTML+CSS入门 点赞功能实现 $(tag).css('属性', '样式')

本篇教程介绍了HTML+CSS入门 点赞功能实现 $(tag).css('属性', '样式')，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1.创建标签document.createElement()2.$(tag).css('属性'，样式)赋予标签属性样式3.设置定时器改变位置大小html>Title.container{padding:50px...

继续访问

使用 HTML CSS 和 JavaScript 创建星级评分系统

各位读者好，今天在本博客中，您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget)。早些时候，我还分享了一篇关于Star Rating Widget 的博客，仅使用 HTML 和 CSS。但是这个程序是先进的，并且比以前的 Star Rating System 具有更多的功能，因为我在这个程序中添加了 JavaScript 以使其更先进。 星级评分是一个评分问题，它为人们提供带有几颗星的产品或服务评分。星数可以从 5 到 10 星不等。星级评分问题是一种评分问题，

继续访问

HTML jQuery实现点赞功能（模仿CSDN的样式）

效果： css代码： #dianzan { width: 55pxheight: 22pxdisplay: flexflex-direction: rowjustify-content: space-betweenmargin: 0 10pxborder-radius: 6pxuser-select: nonec.

继续访问

html5实现评论功能,Z-Blog博客实现回复评论功能

今天将月光博客的评论功能进行了增强，实现了用户能够对已有评论进行回复讨论的功能，并将结果嵌套显示，实现这样的功能可以形成很好的互动讨论气氛，最终的现实效果不错。这种回复评论的功能是Z-Blog自带的，但是和WordPress的Thread Comment插件还是有区别的，Z-Blog的评论表中没有一个记录父评论的字段，因此实现的方法是直接修改需要回复的评论字段，然后将新的内容附加到后面。而Word...

继续访问

python四瓣花图形_JavaScript图形实例：四瓣花型图案

设有坐标计算公式如下：X=L*(1+SIN(4α))*COS(α)Y=L*(1+SIN(4α))*SIN(α)用循环依次取α值为0~2π，计算出X和Y,在canvas画布中对坐标位置（X,Y）描点，可绘制出一个曲线图形。编写HTML文件内容如下：曲线图形function draw(id){var canvas=document.getElementById(id)if (canvas==null...

继续访问

JS实现简单的点赞与踩功能示例

本文实例讲述了JS实现简单的点赞与踩功能。分享给大家供大家参考，具体如下： HTML部分： 赞:<button id="btn_zan">0</button>踩:<button id="btn_cai">0</button>JS部分： function dianZan(){ var i = 0return function(){ this[removed] ="+"+ ++i} } btn_zan.onclick = dianZan()function caiZan(){ var i = 0return function(){ this[removed] = --

HTML5弹幕感恩墙文字评论代码.zip

HTML5弹幕感恩墙文字评论代码基于jquery.1.8.3.js制作，输入文字就会出现在弹幕感恩墙上哦~

【数据结构】树状数组 -笔记

树状数组 树状数组的基本用途是：维护序列的前缀和。 基本思想是：对于给定的序列a，建立一个数组c，其中c[x]保存序列a在区间[x-lowbit(x)+1, x]中所有数的和。 int lowbit(int x)//返回lowbit的位数 { return x &(-x)} 可以想象一个树形结构（如果N不是2的整数次幂，则为森林结构）。 每个内部节点c[x]保存以它为根节点的子树中所有叶子节点的和。 每个内部节点c[x]的子节点的个数等于lowbit(x)的位数。 除了根节点外，每个内部节

继续访问

退出按钮加一个清空localstorage_Django搭建个人博客：基于 LocalStorage 的点赞功能

假设你的博客已经顺利部署到了线上。你写了很多好文章，和粉丝们互动并感受成就感。现在你想更进一步，努力提高文章质量，使其更受读者欢迎，打造圈内一流博客。问题是该如何判断一篇文章是“受欢迎的”？靠浏览量是个方法，但是并不能区分出内容花拳绣腿的标题党。靠评论数也是个好方法，但个人博客通常读者不多，好文章零评论是很正常的。这时候“点赞”功能就显得重要了。如果大部分读者都给了一个赞，那就表明文章确实还不错。...

继续访问

评价页面html代码,HTML5 评论列表界面模板

HTML导入代码模板：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat...

继续访问

h5、jq 移动端评论点攒功能

h5、jq 移动端评论点攒功能 平时做的项目中大部分都会涉及到评论的功能，之前用angular写的项目，功能写起来很方便，但是对于一个单页来说，angular有点大材小用了，所有今天分享一个关于jq制作评论点赞的移动端展示功能。 效果如下图： 关于效果就是上图所示，现在分析一下代码的部分吧！ html部分 <ul id="comments_list">...

继续访问

jQuery实现评论 的添加

本文用内部追加的方式添加评论：代码如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>评论</title>&a

继续访问

html5点赞仿抖音,仿抖音之——点赞动画

我这里做的是一个仿抖音点赞的动画，监听双击事件，在双击位置添加图片，对其进行一系列的缩放、移动、旋转、透明度的动画从而达到效果。效果图：制作思路：1.将该ViewGroup的事件通过touch方法传递给创建的SimpleOnGestureListener，将双击事件回调给onDoubleTap方法。2.在双击的坐标位置，添加一个ImageView，并设置大小和正确的左上边距。3.观察抖音点赞动画，...

继续访问

HTML+CSS 实现一个评分 (一）

HTML+CSS 实现一个评分 效果 HTML HTML 部分还是比较简单直接的 <body><ul><li class="rank-rated">