Axure 8.0 原型實(shí)例(附rp文件):老虎機(jī)積分抽獎(jiǎng)
本文作者將用axure8.0模擬做一個(gè)老虎機(jī)積分抽獎(jiǎng)的原型。enjoy~
積分抽獎(jiǎng)是現(xiàn)如今很多app用戶成長(zhǎng)激勵(lì)體系中積分模塊中都會(huì)有的手法之一,積分是個(gè)完善的小生態(tài),獲取積分就要考慮到消化積分,通過(guò)積分培養(yǎng)用戶習(xí)慣,增加用戶黏性,那么,如何有效合理的達(dá)到產(chǎn)品目的的去讓用戶去消化部分積分,積分抽獎(jiǎng)是個(gè)不錯(cuò)的方式。
積分抽獎(jiǎng)的形式也有很多,比如轉(zhuǎn)盤,是大多數(shù)app中積分抽獎(jiǎng)的方式,比如老虎機(jī),具有博彩性質(zhì)的小抽獎(jiǎng)更有場(chǎng)景代入感,比如刮刮獎(jiǎng),翻牌,砸金蛋,釣魚~
今天主要講講老虎機(jī)積分抽獎(jiǎng)原型的制作。老虎機(jī),大部分朋友應(yīng)該并不陌生,今天我們一起來(lái)用axure8.0模擬做一個(gè)老虎機(jī)積分抽獎(jiǎng)的原型,使用的主要知識(shí)點(diǎn)有,全局變量、動(dòng)態(tài)面板、函數(shù)。
ps:玲子一直文章是寫行業(yè)分析和產(chǎn)品運(yùn)營(yíng)分析比較多,還從來(lái)沒有放過(guò)原型交互技能文章,此文是玲子第一篇原型技能,寫的不好望多指點(diǎn),哈哈哈哈。
預(yù)覽:
一、元件準(zhǔn)備
第一步:拼一個(gè)老虎機(jī)模型
用矩形、圓形等形狀先拼一個(gè)老虎機(jī)的模型,很好玩的~本篇重點(diǎn)講交互,基礎(chǔ)的元件問(wèn)題和編輯問(wèn)題就簡(jiǎn)化甚至不講了哦。
主要用到的基礎(chǔ)技能如下:
第二步:放入文字和按鈕
注意:剩余抽獎(jiǎng)機(jī)會(huì)次前空3格子,后面要用lable文本標(biāo)簽放次數(shù)數(shù)值
第三步:給主要的元件取名
取名是為了做交互時(shí)候,能夠方面找出元件并加入事件。
第四步:加入老虎機(jī)屏幕
轉(zhuǎn)換為動(dòng)態(tài)面板,6種狀態(tài),不同中獎(jiǎng)項(xiàng),本原型:28積分、88積分、888積分、2元紅包、8元紅包、888元紅包。
復(fù)制粘貼,變成3個(gè)老虎機(jī)屏幕,如下:
第五步:彈窗動(dòng)態(tài)面板元件
8種彈窗狀態(tài):條件滿足1-6(6個(gè)中獎(jiǎng)內(nèi)容)、積分不足、抽獎(jiǎng)不足
3種情況彈窗狀態(tài)分別如下:
二、添加用例
1、首先給“play”按鈕添加用例
點(diǎn)擊“play”判斷積分值是否>=60和抽獎(jiǎng)次數(shù)是否>0
情況一:積分值>=60和抽獎(jiǎng)次數(shù)>0,如下:
- 則開啟抽獎(jiǎng),隨機(jī)1-6產(chǎn)生1個(gè)整數(shù)數(shù)字
- 6個(gè)數(shù)字代表顯示6個(gè)動(dòng)態(tài)面板的狀態(tài)顯示
- 3個(gè)屏幕相隔1000s的分別顯示抽獎(jiǎng)狀態(tài)
- 積分值-60,抽獎(jiǎng)次數(shù)-1
- 抽獎(jiǎng)完畢,顯示彈窗顯示中獎(jiǎng)結(jié)果
情況二:積分值>=60和抽獎(jiǎng)次數(shù)=0,如下:彈窗顯示“積分不足”;
情況三:積分值<60和抽獎(jiǎng)次數(shù)>0,如下:顯示彈窗“抽獎(jiǎng)次數(shù)機(jī)會(huì)用完,明天再來(lái)”。
(1)情況一:積分值>=60和抽獎(jiǎng)次數(shù)>0,那么我們要執(zhí)行以下用例:
1)設(shè)置3個(gè)全局變量,分別取名:jfz(積分值)、cjcs(抽獎(jiǎng)次數(shù))、random(1-6隨機(jī)整數(shù))
2)給全局變量“random”獲取一個(gè)隨機(jī)值,且這個(gè)值有一定的限值條件,這個(gè)值的范圍必須是:1-6的整數(shù)。
- 為什么是這個(gè)范圍?因?yàn)樵O(shè)置了老虎機(jī)屏幕6種狀態(tài),也就是會(huì)出現(xiàn)6種中獎(jiǎng)情況,每個(gè)數(shù)字代表1種中獎(jiǎng)情況。
- 怎么樣獲取這個(gè)數(shù)值?這里要用到數(shù)學(xué)函數(shù)里的隨機(jī)函數(shù)random(),因?yàn)镸ath.random()函數(shù)獲取的是0~1之間的小數(shù),所以就需要通過(guò)特定的處理獲取1-6的整數(shù),通過(guò)Math.random()*6獲取數(shù)值,然后通過(guò)數(shù)學(xué)函數(shù)substring()取第一位有效數(shù)獲取整數(shù),這樣就能取到1-6整數(shù)。
2)把元件“積分值”賦值到“jfz”,元件“抽獎(jiǎng)次數(shù)”賦值“cjcs”
3)滿足條件,觸發(fā)積分值-60,中獎(jiǎng)次數(shù)-1
4)隨機(jī)random產(chǎn)生的數(shù)字,需要處理,當(dāng)random=1,2,3,4,5,6分別產(chǎn)生怎樣的交互
如交互顯示,當(dāng)radom=1,設(shè)置面板為1,向上滑動(dòng)(老虎機(jī)的抽獎(jiǎng)交互),注意,要等待500s,使3個(gè)屏幕的抽獎(jiǎng)顯示有時(shí)間落差,分別顯示,屏幕顯示完畢,等待500s(需要給用戶反應(yīng)時(shí)間),顯示彈窗顯示“恭喜抽中28積分”,其他5個(gè)交互相同,此文略過(guò)。
(2)情況二:積分值<60和抽獎(jiǎng)次數(shù)>0,那么我們要執(zhí)行以下用例:
(3)情況三:積分值>60和抽獎(jiǎng)次數(shù)=0,那么我們要執(zhí)行以下用例:
記得設(shè)置,關(guān)閉“X”和“關(guān)閉”按鈕的隱藏彈窗事件,是基礎(chǔ),此處就不講了。
2、給“再抽一次”按鈕添加用例
點(diǎn)擊抽獎(jiǎng),用例:
- 隱藏彈窗;
- 觸發(fā)“play”按鈕“鼠標(biāo)單擊事件”
三、預(yù)覽
恭喜你,完成了“老虎機(jī)”原型技能,趕緊F5一下吧,看看自己的成果。
對(duì)于原型交互,還是有必要說(shuō)兩句:
- 原型是為了更好的跟開發(fā)表達(dá)出最終的原型思路,切忌不要為了做原型而做原型,根本目的是推進(jìn)項(xiàng)目如期完美上線。
- 原型的學(xué)習(xí)不要一直去模仿,前期學(xué)習(xí)可以模仿,最終是要自己去學(xué)交互思路,學(xué)好了,很有意思的,好好學(xué)習(xí)。
PS:如果有什么問(wèn)題,或者有什么想要實(shí)現(xiàn)的小功能,大家可以給我留言,我們一起學(xué)習(xí)!
rp文件地址:http://pan.baidu.com/s/1c1BV8Us
#專欄作家#
玲子,人人都是產(chǎn)品經(jīng)理專欄作家,微信公眾號(hào):玲子奮斗史。不卑不亢,從容優(yōu)雅,面對(duì)一切,我是玲子。職業(yè)產(chǎn)品經(jīng)理,關(guān)注互聯(lián)網(wǎng)人工智能、商業(yè)產(chǎn)品,擅長(zhǎng)需求挖掘和運(yùn)營(yíng)管理。我是個(gè)勵(lì)志氣質(zhì)聰穎漂亮的女青年。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
您好,rp文件地址已經(jīng)刪除了,能否發(fā)送一份到郵箱584112131@qq.com,謝謝
您好,rp文件地址已經(jīng)刪除了,能否發(fā)送一份到郵箱401404989@qq.com
親愛的,rp文件地址已經(jīng)刪除了,下載不了,能否給我發(fā)送一份183919886@qq.com!謝謝!
您好,rp文件地址已經(jīng)刪除了,下載不了,能否重新發(fā)送一份!謝謝!
按照文章步驟一步一步操作了一遍,得不到想要的效果,邏輯判斷會(huì)有問(wèn)題,問(wèn)題點(diǎn):判斷隨機(jī)變量random的case2與case1并不是并列關(guān)系關(guān)系,而是包含關(guān)系,怎么才能把文中第一個(gè)case2 及省略的5個(gè)case包含于case1中呢?煩請(qǐng)解答。
@玲子,看到請(qǐng)回復(fù)一下,不懂。
這個(gè)交互真的好贊,其實(shí)是一直有個(gè)疑問(wèn),交互這塊的真的要用原型去展示嗎(如果溝通可以完成的話)?很多交互真的要實(shí)現(xiàn)起也不容易有點(diǎn)費(fèi)時(shí),而且后面前端還要對(duì)應(yīng)的實(shí)現(xiàn)一把,看起來(lái)會(huì)不會(huì)是重復(fù)工作呢?
這個(gè)原型,你用了多長(zhǎng)時(shí)間畫完的?
?? 好厲害,都是自己琢磨的嗎
又是你,厲害
哈哈哈哈,看得我笑了~
以前有做過(guò)類似的,不過(guò)沒做這么耗看,點(diǎn)贊。
一般工作里面,運(yùn)營(yíng)項(xiàng)目都很急,需要趕時(shí)間點(diǎn),確實(shí)沒必要做交互,網(wǎng)上也都有固定代碼模版~哈哈哈哈
妹子,不錯(cuò)哦,數(shù)據(jù)分析,產(chǎn)品都會(huì) ??
什么都會(huì)一點(diǎn)點(diǎn),但又不精 ??
T型發(fā)展,我看行 ??