原型設(shè)計(jì)：如何實(shí)現(xiàn)淘寶的五星好評(píng)？

10 評(píng)論 12985 瀏覽 36 收藏 5 分鐘

對(duì)購(gòu)買(mǎi)后的物品進(jìn)行評(píng)分，是常有的事，那么這類(lèi)應(yīng)用點(diǎn)擊星星進(jìn)行評(píng)分的原型效果，是如何實(shí)現(xiàn)的呢？

我們?cè)谔詫氋?gòu)物或大眾點(diǎn)評(píng)點(diǎn)餐時(shí)，經(jīng)常需要對(duì)商家的服務(wù)進(jìn)行評(píng)價(jià)。那么這類(lèi)應(yīng)用點(diǎn)擊星星進(jìn)行評(píng)分的原型效果，是如何實(shí)現(xiàn)的呢？本文在這里向大家分享制作這類(lèi)原型效果的實(shí)現(xiàn)過(guò)程。

準(zhǔn)備元件，設(shè)置交互樣式

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

為這五顆星設(shè)置選中效果，選中后填充為紅色，線段顏色為無(wú)色。

設(shè)置交互事件

在設(shè)置交互效果前，需要新增一個(gè)全局變量score，用來(lái)作為評(píng)分的定義。首先來(lái)分析下有哪些交互動(dòng)作，不難看出有以下3個(gè)交互：鼠標(biāo)單擊、鼠標(biāo)移入和鼠標(biāo)移出。

下面來(lái)逐個(gè)配置這些交互用例中的動(dòng)作：

1. 鼠標(biāo)單擊事件

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

2. 鼠標(biāo)移入事件

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

3. 鼠標(biāo)移出事件

每顆星的動(dòng)作設(shè)置均相同，設(shè)置如下：

  • 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分，非常滿意”。

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

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

 

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

題圖有作者提供

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
拼搏的80后
簡(jiǎn)書(shū)互聯(lián)網(wǎng)優(yōu)秀作者，高級(jí)產(chǎn)品經(jīng)理
22篇作品 374908總閱讀量
08-095108 瀏覽
瑞幸與蜜雪冰城，一對(duì)新冤家
09-255284 瀏覽
又摳門(mén)又愛(ài)買(mǎi)？這屆年輕人成功帶火了“平替”
05-293283 瀏覽
AHP層次分析法在委外渠道評(píng)估的應(yīng)用
10-133058 瀏覽
MarTech?-CDP實(shí)戰(zhàn)手冊(cè)-CDP交付驗(yàn)收（十三）
12-25785 瀏覽
實(shí)力強(qiáng)的大模型都有哪些超能力？
評(píng)論
評(píng)論請(qǐng)登錄

  1. 說(shuō)實(shí)話你這個(gè)交互有點(diǎn)不對(duì)，移入這個(gè)效果并沒(méi)有必要。而且很你在的太復(fù)雜了

    來(lái)自江西 回復(fù)

  2. 還有個(gè)case6沒(méi)說(shuō)呀，我看原型才知道。。。 ?

    來(lái)自廣東 回復(fù)

  3. 對(duì)于我市小白來(lái)說(shuō)是可以練習(xí)的，技多不壓身，工作上用不用那是另外一回事，感謝作者分享

    來(lái)自廣東 回復(fù)

  4. 感覺(jué)在每個(gè)星里面設(shè)置一個(gè)移入，單擊，移出事件比較好；另外這樣子首次進(jìn)入 移到星星上移出沒(méi)反應(yīng)，必須得點(diǎn)擊后才能移出

    來(lái)自浙江 回復(fù)

  5. 做這個(gè)是不是太閑了~

    來(lái)自浙江 回復(fù)

    1. 是

      來(lái)自山東 回復(fù)

  6. 沒(méi)用

    回復(fù)

    1. 技多不壓身，有些演示場(chǎng)合還是需要流暢的交互演示效果的。和普通開(kāi)發(fā)同事可以不需要。

      回復(fù)

  7. 。。。臥槽哥，你們公司要求這么嚴(yán)格的么，需要吧用戶所有交互用原型畫(huà)出來(lái)？其實(shí)像這種的我一般說(shuō)明幾句就OK了，因?yàn)榘褎?dòng)畫(huà)弄出來(lái)不是不會(huì)，而是太耗時(shí)覺(jué)得沒(méi)有必要

    來(lái)自四川 回復(fù)

    1. 有些時(shí)候給老板看或者投資人看，演示時(shí)幾個(gè)輕松的點(diǎn)擊動(dòng)作，可能勝過(guò)千言萬(wàn)語(yǔ)。況且老板們的時(shí)間都是寶貴的。和具體干活開(kāi)發(fā)的兄弟們可以不需要那么多交互。是否有必要做這些交互，主要還是看原型的人是誰(shuí)。

      回復(fù)