本文作者用Axure來模擬微信切換菜單欄。enjoy~

先講思路

主頁轉(zhuǎn)換為動態(tài)面板，總共4個狀態(tài)，按鈕轉(zhuǎn)換為動態(tài)面板，分別兩個狀態(tài)，設(shè)置交互，點擊白色按鈕時，主頁動態(tài)面板切換為對應(yīng)狀態(tài)，當(dāng)前按鈕面板轉(zhuǎn)換為綠色背景按鈕狀態(tài)，其他四個按鈕則變成白色背景按鈕的狀態(tài)。

再詳細(xì)解釋

1. 首先做一個主頁（聊天界面），四個等大按鈕至于底部并輸入文字。

2. 將主頁轉(zhuǎn)換為動態(tài)面板，再添加3個狀態(tài)（取消勾選自動調(diào)整為內(nèi)容尺寸）每個狀態(tài)下做一個主頁，分別為聊天頁，通訊頁，發(fā)現(xiàn)頁，我的頁，每個頁加文字，設(shè)置背景顏色以區(qū)分。

3. 將每個按鈕轉(zhuǎn)換為動態(tài)面板，每個動態(tài)面板分別再添加1個狀態(tài)，，復(fù)制粘貼原來按鈕矩形，并設(shè)置白字綠色背景。白色背景的狀態(tài)命名為未選中，綠色背景的命名為選中。

注意：第一個聊天按鈕，選中狀態(tài)位于未選中狀態(tài)之上。

4. 好了，開始交互，這里主要的交互事件觸發(fā)器就是按鈕，所以為每個按鈕添加事件。

點擊白色（未選中）按鈕時，屏幕動態(tài)面板切換為對應(yīng)狀態(tài)，比如點擊通訊，則主頁面板切換到通訊狀態(tài)

當(dāng)前按鈕面板轉(zhuǎn)換為綠色背景按鈕狀態(tài)，其他四個按鈕則變成白色背景按鈕的狀態(tài)。

比如雙擊發(fā)現(xiàn)按鈕未選中狀態(tài)，再雙擊右邊交互欄中的“鼠標(biāo)單擊時”添加動作1：左邊點擊“設(shè)置面板狀態(tài)”，勾上右邊“主頁面板”，選擇發(fā)現(xiàn)狀態(tài)。

以此類推，設(shè)置四個按鈕面板狀態(tài)：

然后類推到其他按鈕未選中狀態(tài)，添加事件。

然后設(shè)置四個選中按鈕的單擊事件：

比如單擊聊天按鈕時，設(shè)置主頁為聊天頁。

ok，就此完成，預(yù)覽試試吧。

首秀，共同學(xué)習(xí)。

本文由 @kevin?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議