Axure教程:原型設計之轉盤抽獎
轉盤抽獎一般會出現在一些金融類網站中,通過轉盤抽獎來激活用戶瀏覽行為,后來又多用于微信的公眾號運營中,通過轉盤抽獎來宣傳活動,從而達到吸粉的目的。這一章就教大家如何使用axure原型工具制作轉盤抽獎原型。
第一步:拖拉擺放好相關控件
1、轉盤:300X300的白底黑框圓形,一條垂直線、一條45度垂直線、一條水平線、一條45度水平線,四線交叉組合居中放于白底黑框圓形上方,將白底黑框圓形等分切割成八份,每一份放一個文本標簽,文本標簽的文字角度可通過鍵盤微調適當即可,文本標簽的文字有三個分別是“一等獎”,“二等獎”和“三等獎”,其余的皆為“謝謝惠顧”,將以上元件組合并命名為“轉盤”。
2、抽獎按鈕:100X100的灰底黑框圓形,中間文字為“抽獎”,將此元件命名為“抽獎按鈕”,并居中置于“轉盤”上方。
3、抽獎指針:10X32的灰底黑框三角形,將此元件命名為“抽獎指針”,并置于“抽獎按鈕”的正上方。
第二步:為“抽獎按鈕”添加鼠標單擊時用例
此用例中只添加一個動作,即:相對旋轉轉盤,角度為[[100000+Math.random()*360]],方向為順時針,錨點為中心,動畫為線性,時間為2000毫秒。
好了,預覽并點擊“抽獎按鈕”即可以看到轉盤抽獎效果。
效果圖:axure原型設計之轉盤抽獎
附件下載:轉盤抽獎rp文件
作者:維度,個人博客:http://weidublog.com
本文由 @維度 原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
評論請登錄
角度為什么是[[100000+偽隨機數*360]]??
為啥我下的rp文件在原型里打不開呢?
小白一個,請問一下,最后一步是怎么跳轉的,需要先添加嗎?
什么意思?沒看懂你的問題
我把所有的做好以后,為抽獎按鈕添加鼠標單擊時用例,也就是您文章里的第二步,不知道該怎么操作了
好了,調整好了,謝謝
樓主您好!我想問下如何將轉盤里的每一個扇形設置不同顏色?
拖一個矩形,選擇形狀為“扇形”,設置扇形的角度為45度,顏色隨便設置,復制8個這樣的扇形調整角度即可
沒有扇形這個形狀