起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)如何優(yōu)雅地做一個(gè)抽獎(jiǎng)轉(zhuǎn)盤
之前出了一個(gè)帖子如何讓你的原型圖動(dòng)起來，很多童鞋問我抽獎(jiǎng)轉(zhuǎn)盤是怎么做的？今天抽空跟大家聊聊。（視頻第22秒見效果）這個(gè)是用Axure7.0做的，稍后介紹一下使用Axure 8.0和Principle來做轉(zhuǎn)盤抽獎(jiǎng)交互~(Principle交互效果)
本文目錄如下：
1. （Principle）使用交互軟件做抽獎(jiǎng)
1.1 準(zhǔn)備材料
1.2 設(shè)置點(diǎn)擊事件
1.3 設(shè)置補(bǔ)間動(dòng)畫時(shí)間
2. （Axure 7.0）使用動(dòng)態(tài)面板做轉(zhuǎn)盤抽獎(jiǎng)效果
2.1 準(zhǔn)備材料
2.1 設(shè)置動(dòng)態(tài)面板
2.3 設(shè)置事件
3. （Axuer 8.0）使用自帶的旋轉(zhuǎn)功能做抽獎(jiǎng)轉(zhuǎn)盤效果
3.1 準(zhǔn)備材料
3.2 添加事件
1. (Principle)使用交互軟件做抽獎(jiǎng)
?1.1 準(zhǔn)備材料
對(duì)Principle不了解的童鞋可以在官網(wǎng)上了解一下，做交互設(shè)計(jì)個(gè)人比較推薦用這款(不過唯一不足的是，它只有Mac版本)? http://principleux.com/
準(zhǔn)備材料(可以將Sketch上的文件直接復(fù)制到Principle中)簡單粗暴，以JO+管家App為例，如下圖
?1.2 設(shè)置點(diǎn)擊事件
點(diǎn)擊圖上的”閃電箭頭”選中Tap，拖拽至想跳轉(zhuǎn)的頁面（此處Tap為點(diǎn)擊事件）。
然后畫布上出現(xiàn)一個(gè)綠色的箭頭，如圖所示：
需求為點(diǎn)擊“抽獎(jiǎng)”按鈕后，視圖將會(huì)不停的切換，所以需要在第二張視圖后設(shè)置一個(gè)事件“Auto”，點(diǎn)擊“Auto”拖拽至下一張視圖，這里重復(fù)的工作較多，就只截一張圖了。
做完上述動(dòng)作后，會(huì)發(fā)現(xiàn)點(diǎn)擊抽獎(jiǎng)，視圖變化太快，交互不好，所以，下面需要設(shè)置補(bǔ)間動(dòng)畫的時(shí)間。
?1.3 設(shè)置補(bǔ)間動(dòng)畫時(shí)間
點(diǎn)擊“Animate”將下面的工作區(qū)顯示出來
然后
點(diǎn)擊箭頭，將這個(gè)時(shí)間用鼠標(biāo)拉長一點(diǎn)，設(shè)置為0.1秒的間隔即可，然后就可以預(yù)覽了Principle交互效果
2. （Axure 7.0）使用動(dòng)態(tài)面板做轉(zhuǎn)盤抽獎(jiǎng)效果
?2.1 準(zhǔn)備材料
拉一個(gè)圓形，和一根直線，多復(fù)制幾根，調(diào)整元件的位置角度，搞定，如圖
?2.1 設(shè)置動(dòng)態(tài)面板
接下來做一個(gè)指針，拉一個(gè)動(dòng)態(tài)面板，在動(dòng)態(tài)面板中，添加若干狀態(tài)，如圖：
在這里選中其中一個(gè)狀態(tài)，在狀態(tài)頁面中移動(dòng)指針位置，按照旋轉(zhuǎn)的方向，來9個(gè)，差不多了。
此處省略….
如上圖，每個(gè)角度變換一下即可
?2.3 設(shè)置事件
設(shè)置“抽獎(jiǎng)”按鈕事件，如圖：
ok，已經(jīng)搞定。
此方法我在Axure 7.0時(shí)用的，更新了Axure到8.0 后 更加方便。下面介紹一下8.0版本的玩法。
3. （Axuer 8.0）使用自帶的旋轉(zhuǎn)功能做抽獎(jiǎng)轉(zhuǎn)盤效果
?3.1 準(zhǔn)備材料
上述2個(gè)例子，一個(gè)是轉(zhuǎn)動(dòng)卡片的效果，一個(gè)是轉(zhuǎn)動(dòng)箭頭的效果，此處介紹哦一下轉(zhuǎn)動(dòng)轉(zhuǎn)盤的效果，轉(zhuǎn)盤動(dòng)箭頭不動(dòng)，先準(zhǔn)備一下材料。
指針固定不動(dòng)即可，首先先將轉(zhuǎn)盤上的元素“組合”起來取個(gè)名稱“轉(zhuǎn)盤”。
然后在“點(diǎn)我”這個(gè)元件上添加事件。
?3.2 添加事件
設(shè)置旋轉(zhuǎn)，參數(shù)為：相對(duì)位置、角度為[[1000+Math.random()*360]]、方向?yàn)轫槙r(shí)針、錨點(diǎn)為中心、動(dòng)畫為線性、事件為1000毫秒。
搞定，預(yù)覽即可。
看到這里Axure7.0基本上可以卸載了，趕緊升級(jí)吧~
若要做復(fù)雜一點(diǎn)的交互，推薦使用Principle，比AE入手快~又簡單~~加油
分享作品
- PRD文檔?干貨分享｜「病利貼」產(chǎn)品需求文檔
- PRD文檔?分享PRD：「我是紅人」產(chǎn)品需求文檔
- 原型技巧?Axure炫技：如何讓你的原型圖動(dòng)起來
- 新手運(yùn)營?「我是紅人」的初步運(yùn)營計(jì)劃
- 產(chǎn)品技能?分分鐘教你使用手機(jī)預(yù)覽原型圖（MAC版）
- 原型技巧?如何優(yōu)雅地做一個(gè)抽獎(jiǎng)轉(zhuǎn)盤
- PRD文檔?分享 | JO+管家智能客服PRD
作者：Bass
本文由 @Bass 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
JO+交互做的確實(shí)不錯(cuò) 感謝分享
??