歡迎來到上海仝薪網絡科技有限公司官網,上海網站建設公司上海網站制作公司微信網站上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 網站建設知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

原型設計:如何實現淘寶的五星好評?

作者/整理:admin 來源:互聯網 2019-05-22

注:對購買后的物品進行評分,是常有的事,那么這類應用點擊星星進行評分的原型效果,是如何實現的呢?

我們在淘寶購物或大眾點評點餐時,經常需要對商家的服務進行評價。那么這類應用點擊星星進行評分的原型效果,是如何實現的呢?本文在這里向大家分享制作這類原型效果的實現過程。

準備元件,設置交互樣式

拖動一個矩形至設計區域,寬和高均設置為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

重庆时时彩官方网站app