產品經理就業特訓營，專門為大學生和準備轉型做產品的人量身定制，60天線下培訓，包就業！瞭解詳情
axure功能太強大，動態面油煙靜電機板已經搞得我頭暈@_@眼花瞭，更別提7.0版本的中繼器瞭。。。
廢話不多說，還是和大傢分享一下動態面板實現banner輪播的效果，對動態面板還不熟的，像我一樣的axure初學者，不妨來看看這個效果的制作過程，然後自己試著做一做，絕對增加自己的信心^_^
就拿大淘寶首頁banner輪播效果為例說明：
前期線稿圖，部件準備
1. 先畫個大概的位置線框圖，如下圖所示，做瞭3張banner的輪播效果
2.banner位置的占位符轉換為動態面板（鼠標右鍵，轉換動態面板），給面板命名→_→這個不強制，在右側面板區找到動態面板（圖中為首頁banner），選中，添加2個狀態，分別放banner2，banner3。
雙擊狀態名進入對應的面板頁面，會看到有藍色的框框，框內的部件將會在面板裡顯示，框外的不顯示。可以給狀態修改名稱（選中狀態，然後單擊名稱即可修改，圖中狀態名稱修改為1,2,3對應第幾張banner）
3.添加banner輪播時，banner上面的狀態按鈕（圖中的圓點，會跟隨banner切換，顏色變化），添加矩形部件，右鍵選擇形狀，然後選擇橢圓，然後在工具欄裡修改橢圓的寬和高，變成一個圓（w：10，h：10），復制部件2次，在右側部件名稱和註釋處給3個圓點分別命名圓點1，2，3
前期準備差靜電排油煙機不多瞭，現在開始動態效果準備
1. 準備工作差不多完成瞭，現在開始動態搭配效果。首先是banner要設置成自動輪播的。這要腫麼設置呢？先給面板加動態效果：選中面板，在右側交互欄的“顯示”一項下添加用例，雜項裡選擇等待2秒（用來展示banner，時間長短自行設置），然後在動態面板下選擇”設置面板狀態“，選擇狀態“下一步”，設置進入退出動畫“向左滑動”，動作時間設置為500毫秒。重復“等待”， 設置面板狀態 兩次。
註意：banner輪播到第三張時，下一張連接第一張banner，在設置面板狀態時，勾選”從最後一個到第一個自動跳轉“，這樣才能實現banner1，2，3，1，2，3這樣的輪播順序。
2. 做到這裡，在瀏覽器裡預覽，發現banner怎麼不動？莫急，要讓banner動，得有個觸發條件，首先將banner動態面板設置為不可見（選中動態面板右鍵，設為不可見），然後在”頁面交互“中設置當頁面載入是，添加用例，顯示動態面板
3. 做到這裡，你再試一試預覽，驚奇的發現，banner可以輪播瞭，是不是很開森？然後。。。。。。。停瞭？這是什麼鬼？？？？？告訴你，還沒做完，頁面加載隻觸發瞭開始的輪播，一直重復還需要再觸發，要腫麼再觸發呢？？？？嗯，簡單，動態面板隱藏再顯示就又觸發瞭，有木有很神奇，哇哈哈。。。
在動態面板”顯示“一項的用例裡最後添加隱藏面板，顯示面板，保存後預覽即可輪播
4. banner終於可以輪播瞭，開森！But，banner上的狀態圓點還木有變，都是一樣的狀態，現在來修改這3個圓點，讓3個圓點對應各自的banner。
給3個圓點添加交互樣式（選中圓點，右鍵添加交互樣式），在 選中 下設置圓點樣式，選擇填充個顏色（紅色，自行設置），3個圓點同理設置。
5. 然後將圓點的效果和動態面板聯系起來，在動態面板“顯示”一項的用例裡繼續添加內容，部件裡選擇“設置選擇/選中”，banner1顯示時，選中圓點1（選定狀態值：true），圓點2和3為未選中狀態（選定狀態值：false），以此類推設置即可。
註意：用例是一項一項執行，不要把圓點的狀態放錯位置喲~圓點狀態要和對應的banner狀態一致哦~
6. 全部完成後，預覽原型，wow，輪播效果完成咯~~~~~~~~~~
PS：淘寶頭條的文字動態效果和banner效果制作相同，有興趣的童鞋再多聯系下~
原型分享地址：http://9u4exk.axshare.com/
本文由 @Lprecious 原創投稿，並經人人都是產品經理編輯。未經許可，禁止轉載。
按照你的步驟來的，除瞭沒找到什麼雜項裡選擇等待2秒這一步，現在可以輪播瞭，但是輪播一圈回到第一頁又停止瞭，求教！
感謝！最後一張圖最下面的紅線框裡的內容包括上一行設置動態面板到下一頁沒必要瞭吧，最後頁已經實現循環瞭，不需要再把動態面板第一個頁面再設置一次瞭吧
是我理解能力有問題嗎？為什麼我卡在開頭瞭 ，怎麼我點擊狀態的時候並沒有出現藍色的框框啊
隱藏和顯示，作用是用來觸發循環播放banner的。
PS：我是照自己的步驟寫的說明，每個人制作步驟略有不同，能理解制作原理就行瞭
早知道我就看評論瞭，原來那個原點真的隻能輪播一次，我還以為我邏輯出問題瞭。。。。。。。。。。。。。
你好 我實現瞭輪播效果 並實現瞭輪播過程中圓點的變色 但是無法實現選中變色 還有選中圓點呈現該圓點所在的banner，請教一下
樓主，第五步我按照你的示例，可是功能無法實現。輪播是正常的，鼠標點擊圓點可以變紅，但是就是無法實現圓點隨banner輪播而變紅，求指導
今天才開始用這個軟件，謝謝博主，非常好，適合初學者，一下就明白很多，成功瞭。樓上圓點不能正常滑動的，一定是其中某些點看漏瞭（比如說設置圓點的交互樣式為【選中】的填充顏色，而不是默認【鼠標懸停】的填充顏色）
前半截怪詳細，後半截幾句話帶過瞭，還得自己研究~關鍵是我沒有研究出來。
不會營業用抽油煙機自動輪播，隻會做帶按鈕的~
有個疑問，實現輪播為何在用例1裡的最後需要同時添加隱藏和顯示，而不能單單添加顯示就實現不瞭呢
想問一下作者，我的Axure7.0並沒有“從最後一個到第一個跳轉”這個選項是因為版本的問題麼？還有，隱藏再顯示面板後我的依然不會自動輪播……
人人都是產品經理（woshipm.com）是中國最大、最活躍的以產品經理、互聯網運營為核心的學習、交流、分享社群，集媒體、教育、招聘、社群活動為一體，全方位服務產品經理和運營人，微信公眾號woshipm。成立7年以來舉辦在線講座500餘期，線下活動300+場，覆蓋北京、上海、廣州、深圳、杭州、成都等10餘城市，在互聯網業內得到瞭廣泛關註和高度好評。社區目前擁有300萬忠實粉絲，其中產品經理占比70萬， 中國75%的產品經理都在這裡。
AUGI SPORTS｜重機車靴｜重機車靴推薦｜重機專用車靴｜重機防摔鞋｜重機防摔鞋推薦｜重機防摔鞋
AUGI SPORTS｜augisports｜racing boots｜urban boots｜motorcycle boots
文章標籤
全站熱搜
留言列表
