Axure教程:原型設計之轉盤抽獎

9 評論 30904 瀏覽 82 收藏 3 分鐘

轉盤抽獎一般會出現在一些金融類網站中,通過轉盤抽獎來激活用戶瀏覽行為,后來又多用于微信的公眾號運營中,通過轉盤抽獎來宣傳活動,從而達到吸粉的目的。這一章就教大家如何使用axure原型工具制作轉盤抽獎原型。

第一步:拖拉擺放好相關控件

1、轉盤:300X300的白底黑框圓形,一條垂直線、一條45度垂直線、一條水平線、一條45度水平線,四線交叉組合居中放于白底黑框圓形上方,將白底黑框圓形等分切割成八份,每一份放一個文本標簽,文本標簽的文字角度可通過鍵盤微調適當即可,文本標簽的文字有三個分別是“一等獎”,“二等獎”和“三等獎”,其余的皆為“謝謝惠顧”,將以上元件組合并命名為“轉盤”。

2、抽獎按鈕:100X100的灰底黑框圓形,中間文字為“抽獎”,將此元件命名為“抽獎按鈕”,并居中置于“轉盤”上方。

3、抽獎指針:10X32的灰底黑框三角形,將此元件命名為“抽獎指針”,并置于“抽獎按鈕”的正上方。

第二步:為“抽獎按鈕”添加鼠標單擊時用例

此用例中只添加一個動作,即:相對旋轉轉盤,角度為[[100000+Math.random()*360]],方向為順時針,錨點為中心,動畫為線性,時間為2000毫秒。

好了,預覽并點擊“抽獎按鈕”即可以看到轉盤抽獎效果。

效果圖:axure原型設計之轉盤抽獎

附件下載:轉盤抽獎rp文件

 

作者:維度,個人博客:http://weidublog.com

本文由 @維度 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 角度為什么是[[100000+偽隨機數*360]]??

    來自廣東 回復
  2. 為啥我下的rp文件在原型里打不開呢?

    來自北京 回復
  3. 小白一個,請問一下,最后一步是怎么跳轉的,需要先添加嗎?

    回復
    1. 什么意思?沒看懂你的問題

      來自廣東 回復
    2. 我把所有的做好以后,為抽獎按鈕添加鼠標單擊時用例,也就是您文章里的第二步,不知道該怎么操作了

      回復
    3. 好了,調整好了,謝謝

      回復
  4. 樓主您好!我想問下如何將轉盤里的每一個扇形設置不同顏色?

    來自江西 回復
    1. 拖一個矩形,選擇形狀為“扇形”,設置扇形的角度為45度,顏色隨便設置,復制8個這樣的扇形調整角度即可

      來自廣東 回復
    2. 沒有扇形這個形狀

      來自北京 回復