輪播圖是網頁設計或者APP設計常見的元素，學會使用axure原型工具制作輪播圖對制作PC端或者移動端的原型都非常有幫助?，F(xiàn)在講講如何使用axure8.0制作輪播圖原型~~

步驟一：（輪播圖動態(tài)面板）

首先，拖一個動態(tài)面板至畫布中間，設置大小為670X320，命名為“輪播圖”；

然后，為該動態(tài)面板設置3個面板狀態(tài)，分別為圖1，圖2和圖3，并分別在每個面板狀態(tài)分別放一張圖片；

最后，為該動態(tài)面板添加一個“載入時”用例，在用例中設置面板狀態(tài)為：

• 選擇狀態(tài)：Next，向后循環(huán)，循環(huán)間隔4000ms；
• 進入動畫：向左滑動700ms；
• 退出動畫：向左滑動700ms。

步驟二：（輪播按鈕動態(tài)面板）

首先，拖一個動態(tài)面板至“輪播圖”動態(tài)面板的正下方適當位置，設置大小為134X11，命名為“輪播按鈕”；

然后，為該動態(tài)面板設置3個面板狀態(tài)，分別為輪播按鈕1，輪播按鈕2和輪播按鈕3，并在每個面板狀態(tài)分別放3個白色矩形。輪播按鈕1狀態(tài)中的第1個白色矩形透明度設置為50%，輪播按鈕2狀態(tài)中的第2個白色矩形透明度設置為50%，輪播按鈕3狀態(tài)中的第3個白色矩形透明度設置為50%；

最后，為該動態(tài)面板添加一個“載入時”用例，用例中設置面板狀態(tài)為：

• 選擇狀態(tài)：Next，向后循環(huán)，循環(huán)間隔4000ms；
• 進入動畫：逐漸700ms；
• 退出動畫：逐漸700ms。

好了！預覽即可以看到輪播圖自動輪播的效果了，同時輪播按鈕也跟隨著變化。

效果圖：http://ahzcnr.axshare.com/

本文由 @維度 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載