準備元件，設置交互樣式

拖動一個矩形至設計區(qū)域，寬和高均設置為50，將其轉換五角星形狀。連續(xù)復制4個相同的五角星，呈水平等距離分布，分別將這個五顆星命名為1、2、3、4、5。拖動文本框至五顆星的下方，輸入文字“點擊星星，給商家評分”，將文本框命名為“評分成績”。

為這五顆星設置選中效果，選中后填充為紅色，線段顏色為無色。

設置交互事件

在設置交互效果前，需要新增一個全局變量score，用來作為評分的定義。首先來分析下有哪些交互動作，不難看出有以下3個交互：鼠標單擊、鼠標移入和鼠標移出。

下面來逐個配置這些交互用例中的動作：

1. 鼠標單擊事件

• 第一顆星：設置變量score=1，第一顆星選中，后四顆星未選中，文本框內(nèi)容為“1分，非常不滿意”；
• 第二顆星：設置變量score=2，前兩顆星選中，后三顆星未選中，文本框內(nèi)容為“2分，不滿意”；
• 第三顆星：設置變量score=3，前三顆星選中，后兩顆星未選中，文本框內(nèi)容為“3分，一般”；
• 第四顆星：設置變量score=4，前四顆星選中，最后一顆星未選中，文本框內(nèi)容為“4分，滿意”；
• 第五顆星：設置變量score=5，五顆星全選中，文本框內(nèi)容為“5分，非常滿意”。

2. 鼠標移入事件

• 第一顆星：第一顆星選中，后四顆星未選中，文本框內(nèi)容為“1分，非常不滿意”；
• 第二顆星：前兩顆星選中，后三顆星未選中，文本框內(nèi)容為“2分，不滿意”；
• 第三顆星：前三顆星選中，后兩顆星未選中，文本框內(nèi)容為“3分，一般”；
• 第四顆星：前四顆星選中，最后一顆星未選中，文本框內(nèi)容為“4分，滿意”；
• 第五顆星：五顆星全選中，文本框內(nèi)容為“5分，非常滿意”。

3. 鼠標移出事件

每顆星的動作設置均相同，設置如下：

• case1：如果變量score=1，則第一顆星選中，后四顆星未選中，文本框內(nèi)容為“1分，非常不滿意”；
• case2：如果變量score=2，則前兩顆星選中，后三顆星未選中，文本框內(nèi)容為“2分，不滿意”；
• case3：如果變量score=3，則后兩顆星未選中，文本框內(nèi)容為“3分，一般”；
• case4：如果變量score=4，則前四顆星選中，最后一顆星未選中，文本框內(nèi)容為“4分，滿意”；
• case5：如果變量score=5，五顆星全選中，文本框內(nèi)容為“5分，非常滿意”。

至此，所有交互動作均配置完畢，預覽查看原型效果，最后為大家分享源文件

鏈接:https://pan.baidu.com/s/1nwDc3cl 密碼:sjfx

本文由 @kevin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖有作者提供