之前出了一個帖子如何讓你的原型圖動起來，很多童鞋問我抽獎轉(zhuǎn)盤是怎么做的？今天抽空跟大家聊聊。（視頻第22秒見效果）這個是用Axure7.0做的，稍后介紹一下使用Axure 8.0和Principle來做轉(zhuǎn)盤抽獎交互~(Principle交互效果)

本文目錄如下：

1. （Principle）使用交互軟件做抽獎

1.1 準(zhǔn)備材料

1.2 設(shè)置點擊事件

1.3 設(shè)置補間動畫時間

2. （Axure 7.0）使用動態(tài)面板做轉(zhuǎn)盤抽獎效果

2.1 準(zhǔn)備材料

2.1 設(shè)置動態(tài)面板

2.3 設(shè)置事件

3. （Axuer 8.0）使用自帶的旋轉(zhuǎn)功能做抽獎轉(zhuǎn)盤效果

3.1 準(zhǔn)備材料

3.2 添加事件

1. (Principle)使用交互軟件做抽獎

?1.1 準(zhǔn)備材料

對Principle不了解的童鞋可以在官網(wǎng)上了解一下，做交互設(shè)計個人比較推薦用這款(不過唯一不足的是，它只有Mac版本)? http://principleux.com/

準(zhǔn)備材料(可以將Sketch上的文件直接復(fù)制到Principle中)簡單粗暴，以JO+管家App為例，如下圖

?1.2 設(shè)置點擊事件

點擊圖上的”閃電箭頭”選中Tap，拖拽至想跳轉(zhuǎn)的頁面（此處Tap為點擊事件）。

然后畫布上出現(xiàn)一個綠色的箭頭，如圖所示：

需求為點擊“抽獎”按鈕后，視圖將會不停的切換，所以需要在第二張視圖后設(shè)置一個事件“Auto”，點擊“Auto”拖拽至下一張視圖，這里重復(fù)的工作較多，就只截一張圖了。

做完上述動作后，會發(fā)現(xiàn)點擊抽獎，視圖變化太快，交互不好，所以，下面需要設(shè)置補間動畫的時間。

?1.3 設(shè)置補間動畫時間

點擊“Animate”將下面的工作區(qū)顯示出來

然后

點擊箭頭，將這個時間用鼠標(biāo)拉長一點，設(shè)置為0.1秒的間隔即可，然后就可以預(yù)覽了Principle交互效果

2. （Axure 7.0）使用動態(tài)面板做轉(zhuǎn)盤抽獎效果

?2.1 準(zhǔn)備材料

拉一個圓形，和一根直線，多復(fù)制幾根，調(diào)整元件的位置角度，搞定，如圖

?2.1 設(shè)置動態(tài)面板

接下來做一個指針，拉一個動態(tài)面板，在動態(tài)面板中，添加若干狀態(tài)，如圖：

在這里選中其中一個狀態(tài)，在狀態(tài)頁面中移動指針位置，按照旋轉(zhuǎn)的方向，來9個，差不多了。

此處省略….

如上圖，每個角度變換一下即可

?2.3 設(shè)置事件

設(shè)置“抽獎”按鈕事件，如圖：

ok，已經(jīng)搞定。

此方法我在Axure 7.0時用的，更新了Axure到8.0 后 更加方便。下面介紹一下8.0版本的玩法。

3. （Axuer 8.0）使用自帶的旋轉(zhuǎn)功能做抽獎轉(zhuǎn)盤效果

?3.1 準(zhǔn)備材料

上述2個例子，一個是轉(zhuǎn)動卡片的效果，一個是轉(zhuǎn)動箭頭的效果，此處介紹哦一下轉(zhuǎn)動轉(zhuǎn)盤的效果，轉(zhuǎn)盤動箭頭不動，先準(zhǔn)備一下材料。

指針固定不動即可，首先先將轉(zhuǎn)盤上的元素“組合”起來取個名稱“轉(zhuǎn)盤”。

然后在“點我”這個元件上添加事件。

?3.2 添加事件

設(shè)置旋轉(zhuǎn)，參數(shù)為：相對位置、角度為[[1000+Math.random()*360]]、方向為順時針、錨點為中心、動畫為線性、事件為1000毫秒。

搞定，預(yù)覽即可。

看到這里Axure7.0基本上可以卸載了，趕緊升級吧~

若要做復(fù)雜一點的交互，推薦使用Principle，比AE入手快~又簡單~~加油

分享作品

• PRD文檔?干貨分享｜「病利貼」產(chǎn)品需求文檔
  
• PRD文檔?分享PRD：「我是紅人」產(chǎn)品需求文檔
• 原型技巧?Axure炫技：如何讓你的原型圖動起來
• 新手運營?「我是紅人」的初步運營計劃
• 產(chǎn)品技能?分分鐘教你使用手機預(yù)覽原型圖（MAC版）
• 原型技巧?如何優(yōu)雅地做一個抽獎轉(zhuǎn)盤
• PRD文檔?分享 | JO+管家智能客服PRD

作者：Bass

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