閱讀本篇之前，如果沒有了解上篇，請點擊這里查看《自定義微信元件庫：Axure基本元件的應用（上）?》。

下篇講解的是微信以下自定義元件的實現過程：

• 彈出菜單
• 消息列表樣式
• 功能菜單
• 文字輸入工具欄
• 語音輸入工具欄
• 微信導航菜單

彈出菜單

為了更通用，可以使用中繼器來實現，菜單數根據中繼器的數據多少，自動顯示對應的菜單。

• 添加一個中繼器，命名menus
• 給中繼器menus添加兩個屬性menu_id和menu_name，三條數據

• 雙擊中繼器menus進入編輯狀態，設置矩形框名稱為menu_item，修改默認矩形框的樣式，大小為300*50，只保留下邊框，邊框顏色為淺灰色。

• 設置矩形的交互樣式的鼠標按下狀態時背景為深灰色

• 修改中繼器的“每項加載時”事件

• 選中中繼器menus，右鍵轉換為動態面板，命名為popup_menu，設置動態面板的“固定到瀏覽器”屬性為水平居中和垂直居中

• 最后，像彈出窗口一樣，設置彈出菜單默認為隱藏狀態

在使用時，顯示此動態面板，并設置為“燈箱效果”即可。

如果想添加多個菜單項，只需要添加中繼器的數據，樣式不需要修改。

消息列表樣式

消息列表里每一項有一個頭像，好友名稱/群名稱/公眾號名稱等，以及最后一條消息的內容和消息時間。

同樣，對于這樣的列表類數據，我們建議使用中繼器來實現。

• 添加個中繼器，命名為msg_list，雙擊中繼器進入編輯狀態，選擇默認的矩形框，命名為msg_item，調整大小480*80，保留下邊框，顏色為淺灰色，設置交互樣式里鼠標按下時背景為深灰色

• 添加消息中的幾個元件，一個頭像和三個文本標簽

1. 添加一個占位符，大小55*55，放在矩形框左側作為頭像，雙擊設置文本為“頭像”；
2. 添加一個文本標簽，命名為txtName，文字大小為20，放在頭像右側；
3. 添加一個文本標簽，命名為txtLastMsg，表示最后一條消息，放在txtName下方，文字大小14，灰色；
4. 添加一個文本標簽，命名為txtDatetime，表示最后一條消息的發送時間，放在背景框最右側；

• 準備幾條模擬數據，在實際使用時，根據需要多添加些數據

雙擊標題欄，添加了4列數據如下：

• 修改中繼器的“每項加載時”事件，分別設置元件對應的列信息，預覽效果如下

功能菜單

同樣，功能菜單和上面的消息列表非常的類似，我們也使用中繼器來完成。

• 添加一個中繼器，命名為menu_list，雙擊中繼器進入編輯狀態，選擇默認的矩形框，命名為menu_item，調整大小480*56，白色背景，保留下邊框，顏色為淺灰色，設置交互樣式里鼠標按下時背景為深灰色

• 添加功能菜單中的圖標和菜單名

添加一個占位符，大小32*32，放在矩形框左側作為菜單圖標；

添加一個文本標簽，命名為txtMenuName，文字大小為18，放在圖標右側；

• 添加中繼器數據，實際使用根據需要修改

• 修改中繼器menu_list的“每項加載時”事件

文字輸入工具欄

在發送消息時，我們可以選擇輸入文字，或者語音輸入，先說一下文字輸入工具欄。

• 添加個有邊框矩形，大小480*55，背景色取自微信截圖，保留上、下邊框，邊框色為灰色

• 從微信截圖中截取語音、表情和加號圖標，再復制一份前面設計的文本輸入框元件

• 擺放好各個圖標位置，調整文本輸入框的寬度為300，取消默認的文本輸入提示

語音輸入工具欄

新加一個元件，復制一份上面“文本輸入工具欄”中的所有元件，粘貼到“語音輸入工具欄”中，刪除掉語音圖標和文本輸入框，添加一個鍵盤圖標截圖，和前面制作的灰色按鈕元件，調整灰色按鈕元件大小為300*40，設置按鈕文字內容為“按住 說話”。

微信導航菜單

使用動態面板來表現每個按鈕的選中狀態和非選中狀態，背景使用帶有上下邊框的矩形。

• 添加一個矩形框，大小為480*65，保留上、下邊框，背景色取自微信截圖

• 以“微信”按鈕為例，分別截取選中狀態、未選中狀態時的圖標

• 添加一個動態面板，命名為menu_weixin，大小為120*60，添加兩個狀態，將上面兩個圖標分別放到state1和state2中，每個狀態的圖標下面添加個文本標簽，顏色分別設置為灰色和綠色

• 同理，添加“通訊錄”、“發現”和“我”四個按鈕圖標，順序排列

• 添加事件處理，點擊“微信”按鈕時，設置當前按鈕的動態面板狀態為state2，其它三個動態面板的狀態為statet1，可以發現這個按鈕的事件是通用的，其它幾個按鈕可以直接復制這個按鈕的事件即可。

• 其它三個按鈕復制第一個按鈕的單擊事件即可。

結束語

到這里，我們完成了例舉的所有示例元件的實現過程，從始至終，除了圖標外，其它部分我們都是利用了Axure的基本元件的屬性和樣式，交互事件完成了自定義元件的實現過程。

甚至，有些圖標，我們也可以利用圖形的組合也能完成。因此，充分利用Axure的基本元件，特別是矩形框、動態面板、中繼器，是學習Axure的基礎。

下載鏈接：https://pan.baidu.com/s/1pKGi6Jx 密碼：d447

本文由 @ Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。