起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：模擬微信切換菜單欄
本文作者用Axure來模擬微信切換菜單欄。enjoy~
先講思路
主頁轉換為動態面板，總共4個狀態，按鈕轉換為動態面板，分別兩個狀態，設置交互，點擊白色按鈕時，主頁動態面板切換為對應狀態，當前按鈕面板轉換為綠色背景按鈕狀態，其他四個按鈕則變成白色背景按鈕的狀態。
再詳細解釋
1. 首先做一個主頁（聊天界面），四個等大按鈕至于底部并輸入文字。
2. 將主頁轉換為動態面板，再添加3個狀態（取消勾選自動調整為內容尺寸）每個狀態下做一個主頁，分別為聊天頁，通訊頁，發現頁，我的頁，每個頁加文字，設置背景顏色以區分。
3. 將每個按鈕轉換為動態面板，每個動態面板分別再添加1個狀態，，復制粘貼原來按鈕矩形，并設置白字綠色背景。白色背景的狀態命名為未選中，綠色背景的命名為選中。
注意：第一個聊天按鈕，選中狀態位于未選中狀態之上。
4. 好了，開始交互，這里主要的交互事件觸發器就是按鈕，所以為每個按鈕添加事件。
點擊白色（未選中）按鈕時，屏幕動態面板切換為對應狀態，比如點擊通訊，則主頁面板切換到通訊狀態
當前按鈕面板轉換為綠色背景按鈕狀態，其他四個按鈕則變成白色背景按鈕的狀態。
比如雙擊發現按鈕未選中狀態，再雙擊右邊交互欄中的“鼠標單擊時”添加動作1：左邊點擊“設置面板狀態”，勾上右邊“主頁面板”，選擇發現狀態。
以此類推，設置四個按鈕面板狀態：
然后類推到其他按鈕未選中狀態，添加事件。
然后設置四個選中按鈕的單擊事件：
比如單擊聊天按鈕時，設置主頁為聊天頁。
ok，就此完成，預覽試試吧。
首秀，共同學習。
本文由 @kevin?原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
評論
真心覺得這個邏輯很亂！！！
寫的好亂
珉迫
一個選項組就可以解決啊 設置選中時和未選中時樣式 而且寫在動態面板里你不往下做交互了么。用個內聯單擊時更換載入界面，每個頁面想怎么設計就怎么設計比動態面板方便很多
好的 其實我不太懂你說的 我還在學習 謝謝 我這就去google一下 ?
一個選項組可以解決的問題，你非要弄四個動態面板 ?? ，做這么多交互事件不麻煩嗎 ??
嗯嗯 挺麻煩
我想問一下 字體顏色怎能解決呢，設置按鈕選項組，點擊白色按鈕變綠色，字體顏色變白色要怎么設置？有什么比較快的方法？
我一般這么玩：
1.先做一個按鈕，設置好選中效果（就是選中時改變字體顏色什么的），然后在選項組里隨便輸個名稱，
2.做交互事件：鼠標點擊時選中當前元件，同時設置動態面板狀態為##狀態1##。
3.把按鈕復制三個，改下按鈕上的文字和交互事件里的面板狀態就好了
好的 謝謝 請問當我點擊時黑色字體要怎么隱藏掉呢 ??
大哥你這個一點也不清晰啊，菜鳥的我完全沒搞懂
清晰啊 每次點一下白色的按鈕，就換主頁，當前按鈕換成綠色，其他的按鈕都換成白色
??