公告:网站目录不再提供免费收录网站服务( 在线充值获取积分)进行自助审核服务(快审10元/站);

点击这里在线咨询客服 点击这里在线咨询客服
首页 ›  策划 › 正文

注:对购买后的物品进行评分,是常有的事,那么这类应用点击星星进行评分的原型效果,是如何实现的呢?

我们在淘宝购物或大众点评点餐时,经常需要对商家的服务进行评价。那么这类应用点击星星进行评分的原型效果,是如何实现的呢?本文在这里向大家分享制作这类原型效果的实现过程。

准备元件,设置交互样式

拖动一个矩形至设计区域,宽和高均设置为50,将其转换五角星形状。连续复制 4 个相同的五角星,呈水平等距离分布,分别将这个五颗星命名为1、2、3、4、5。拖动文本框至五颗星的下方,输入文字“点击星星,给商家评分”,将文本框命名为“评分成绩”。

为这五颗星设置选中效果,选中后填充为红色,线段颜色为无色。

设置交互事件

在设置交互效果前,需要新增一个全局变量score,用来作为评分的定义。首先来分析下有哪些交互动作,不难看出有以下 3 个交互:鼠标单击、鼠标移入和鼠标移出。

下面来逐个配置这些交互用例中的动作:

1. 鼠标单击事件

  • 第一颗星:设置变量score=1,第一颗星选中,后四颗星未选中,文本框内容为“ 1 分,非常不满意”;

  • 第二颗星:设置变量score=2,前两颗星选中,后三颗星未选中,文本框内容为“ 2 分,不满意”;

  • 第三颗星:设置变量score=3,前三颗星选中,后两颗星未选中,文本框内容为“ 3 分,一般”;

  • 第四颗星:设置变量score=4,前四颗星选中,最后一颗星未选中,文本框内容为“ 4 分,满意”;

  • 第五颗星:设置变量score=5,五颗星全选中,文本框内容为“ 5 分,非常满意”。

2. 鼠标移入事件

  • 第一颗星:第一颗星选中,后四颗星未选中,文本框内容为“ 1 分,非常不满意”;

  • 第二颗星:前两颗星选中,后三颗星未选中,文本框内容为“ 2 分,不满意”;

  • 第三颗星:前三颗星选中,后两颗星未选中,文本框内容为“ 3 分,一般”;

  • 第四颗星:前四颗星选中,最后一颗星未选中,文本框内容为“ 4 分,满意”;

  • 第五颗星:五颗星全选中,文本框内容为“ 5 分,非常满意”。

3. 鼠标移出事件

每颗星的动作设置均相同,设置如下:

  • case1:如果变量score=1,则第一颗星选中,后四颗星未选中,文本框内容为“ 1 分,非常不满意”;

  • case2:如果变量score=2,则前两颗星选中,后三颗星未选中,文本框内容为“ 2 分,不满意”;

  • case3:如果变量score=3,则后两颗星未选中,文本框内容为“ 3 分,一般”;

  • case4:如果变量score=4,则前四颗星选中,最后一颗星未选中,文本框内容为“ 4 分,满意”;

  • case5:如果变量score=5,五颗星全选中,文本框内容为“ 5 分,非常满意”。

至此,所有交互动作均配置完毕,预览查看原型效果,最后为大家分享源文件

链接:https://pan.baidu.com/s/1nwDc3cl 密码:sjfx

    管理员

    站长目录网
  • 0

    网站

  • 0

    文章

赶快注册账号,推广您的网站吧!
站长推荐
中国画家网

中国画家网2018-04-08

打造中国最大、最全的著名画家数据库和网上交流平台,包括画家(16675) ……

私人飞机网

私人飞机网2018-04-08

航趣私人飞机网是飞机、私人飞机、直升机、公务机行业门户网站,关注私人飞机 ……

华夏收藏网

华夏收藏网2018-04-08

华夏收藏网(cang.com)是古玩鉴定估价、艺术品在线拍卖、收藏品交易 ……

古诗文阅读网

古诗文阅读网2018-04-08

免费提供古诗文阅读资源 ……

中国古诗文网

中国古诗文网2018-04-08

古诗大全栏目提供古代经典古诗的原文和翻译,包括唐诗三百首、宋词精选、元曲 ……

历史春秋网

历史春秋网 2018-04-08

历史春秋网是一个以历史为核心的文化资讯门户网站,提供中国古代历史、政治军 ……

中医世家

中医世家2018-04-08

中医世家(王氏)的记录;中医相关的理论、方剂、药材、医案等信息的收集发布 ……

养生之道网

养生之道网2018-04-08

养生之道网作为养生门户网站,和口号“养生之道,我们知道”一样,致力于为网 ……

中华康网

中华康网2018-04-08

中华康网致力于打造最权威、全面、专业的健康资讯门户,全心全意为网友提供健 ……

网易体育

网易体育2018-04-08

体育,体育频道,包含体育新闻,NBA,CBA,英超,意甲,西甲,冠军杯, ……