介紹Axure RP幾個常用小設計(三)
以下介紹幾個常用小教程,還是那句話——內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈
/偷笑。
一.網頁圖片翻牌效果
例如:滑鼠移到圖片上時,該圖片顯現翻牌效果,顯示另外一張圖片。滑鼠移開,恢復原圖

演示
1.拖動1個圖形元件,右鍵設定“轉換為動態面板“,雙擊動態模板,新增“State2”;
2.對State1,和State2匯入圖片,圖片大小要一致;
3.新增滑鼠移入互動動作,並新增動作“設定面板狀態”→“當前元件”→“Next”→{進入動畫}與{退出動畫}均為“向右翻轉”;
4.繼續新增滑鼠移出互動動作,並新增動作“設定面板狀態”→“當前元件”→“Previous”→{進入動畫}與{退出動畫}均為“向右翻轉”;
5.最後把圖片動態面板,複製多幾個,一個個去修改它們的圖片。

步驟1

步驟2
二.網站常見幻燈片
例如:載入網頁,幻燈自動輪轉,點選幻燈號數,直接跳入該號圖片

演示
1.拖進一個動態面板元件,設定尺寸(根據自己愛好定義),我這裡設定的為寬500,高200,雙擊進入面板狀態管理,設定面板名稱,面板狀態新增5個狀態;
2.針對面板內的5個狀態,每個都拖入圖片,並設定好圖片的尺寸,尺寸與動態面板一致;
3.回到index頁,新增頁面載入時互動方式→新增動作設定面板狀態→選擇動態面板→選擇狀態Next→選擇向後迴圈、迴圈間隔2000毫秒、首個狀態延時2000毫秒後切換。設定完成後,可進入頁面測試,檢視幻燈圖是否已自動輪轉;
4.新增矩形元件,設定序號、尺寸、樣式,複製到每張動態狀態上;
5.設定矩形的滑鼠點選互動,新增設定面板狀態動作→選擇序號對應的圖片名稱→新增等待動作→等待時間2000毫秒→新增設定面板狀態動作→設定選擇狀態Next→選擇迴圈間隔2000毫秒。

步驟1

步驟2

步驟3

步驟4
三.網頁常見走馬燈
例如:公司通告、股市資料、購物、博彩等都可使用到

演示
1.拖進一個動態面板元件,設定尺寸和背景色;
2.雙擊動態面板進入面板狀態管理,新增面板名稱,新建一個面板狀態;
3.進入面板狀態state1內,新增文字,文字設定為白色字型,再進入面板狀態state2內,新增文字,文字設定為白色字型;
4.設定互動動作載入時→新增動作設定面板狀態→選擇動態面板→選擇狀態Next→選擇向後迴圈和迴圈間隔30000毫秒→進入動畫從左滑動,時間30000毫秒(建議不要設定太快,否則閃瞎眼)

步驟1

步驟2

步驟3

步驟4
有看不明白的同鞋,可以留言。想要看《介紹Axure RP幾個常用小設計(四)》,請加關注,謝謝!