我們在淘寶購物或大眾點評點餐時,經(jīng)常需要對商家的服務進行評價。那么這類應用點擊星星進行評分的原型效果,是如何實現(xiàn)的呢?本文在這里向大家分享制作這類原型效果的實現(xiàn)過程。
準備元件,設置交互樣式
拖動一個矩形至設計區(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)許可,禁止轉載
題圖有作者提供
說實話你這個交互有點不對,移入這個效果并沒有必要。而且很你在的太復雜了
還有個case6沒說呀,我看原型才知道。。。 ?
對于我市小白來說是可以練習的,技多不壓身,工作上用不用那是另外一回事,感謝作者分享
感覺在每個星里面設置一個移入,單擊,移出事件比較好;另外這樣子首次進入 移到星星上移出沒反應,必須得點擊后才能移出
做這個是不是太閑了~
是
沒用
技多不壓身,有些演示場合還是需要流暢的交互演示效果的。和普通開發(fā)同事可以不需要。
。。。臥槽哥,你們公司要求這么嚴格的么,需要吧用戶所有交互用原型畫出來?其實像這種的我一般說明幾句就OK了,因為把動畫弄出來不是不會,而是太耗時覺得沒有必要
有些時候給老板看或者投資人看,演示時幾個輕松的點擊動作,可能勝過千言萬語。況且老板們的時間都是寶貴的。和具體干活開發(fā)的兄弟們可以不需要那么多交互。是否有必要做這些交互,主要還是看原型的人是誰。