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

下篇講解的是微信以下自定義元件的實(shí)現(xiàn)過程：

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

彈出菜單

為了更通用，可以使用中繼器來實(shí)現(xiàn)，菜單數(shù)根據(jù)中繼器的數(shù)據(jù)多少，自動(dòng)顯示對(duì)應(yīng)的菜單。

• 添加一個(gè)中繼器，命名menus
• 給中繼器menus添加兩個(gè)屬性menu_id和menu_name，三條數(shù)據(jù)

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

• 設(shè)置矩形的交互樣式的鼠標(biāo)按下狀態(tài)時(shí)背景為深灰色

• 修改中繼器的“每項(xiàng)加載時(shí)”事件

• 選中中繼器menus，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為popup_menu，設(shè)置動(dòng)態(tài)面板的“固定到瀏覽器”屬性為水平居中和垂直居中

• 最后，像彈出窗口一樣，設(shè)置彈出菜單默認(rèn)為隱藏狀態(tài)

在使用時(shí)，顯示此動(dòng)態(tài)面板，并設(shè)置為“燈箱效果”即可。

如果想添加多個(gè)菜單項(xiàng)，只需要添加中繼器的數(shù)據(jù)，樣式不需要修改。

消息列表樣式

消息列表里每一項(xiàng)有一個(gè)頭像，好友名稱/群名稱/公眾號(hào)名稱等，以及最后一條消息的內(nèi)容和消息時(shí)間。

同樣，對(duì)于這樣的列表類數(shù)據(jù)，我們建議使用中繼器來實(shí)現(xiàn)。

• 添加個(gè)中繼器，命名為msg_list，雙擊中繼器進(jìn)入編輯狀態(tài)，選擇默認(rèn)的矩形框，命名為msg_item，調(diào)整大小480*80，保留下邊框，顏色為淺灰色，設(shè)置交互樣式里鼠標(biāo)按下時(shí)背景為深灰色

• 添加消息中的幾個(gè)元件，一個(gè)頭像和三個(gè)文本標(biāo)簽

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

• 準(zhǔn)備幾條模擬數(shù)據(jù)，在實(shí)際使用時(shí)，根據(jù)需要多添加些數(shù)據(jù)

雙擊標(biāo)題欄，添加了4列數(shù)據(jù)如下：

• 修改中繼器的“每項(xiàng)加載時(shí)”事件，分別設(shè)置元件對(duì)應(yīng)的列信息，預(yù)覽效果如下

功能菜單

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

• 添加一個(gè)中繼器，命名為menu_list，雙擊中繼器進(jìn)入編輯狀態(tài)，選擇默認(rèn)的矩形框，命名為menu_item，調(diào)整大小480*56，白色背景，保留下邊框，顏色為淺灰色，設(shè)置交互樣式里鼠標(biāo)按下時(shí)背景為深灰色

• 添加功能菜單中的圖標(biāo)和菜單名

添加一個(gè)占位符，大小32*32，放在矩形框左側(cè)作為菜單圖標(biāo)；

添加一個(gè)文本標(biāo)簽，命名為txtMenuName，文字大小為18，放在圖標(biāo)右側(cè)；

• 添加中繼器數(shù)據(jù)，實(shí)際使用根據(jù)需要修改

• 修改中繼器menu_list的“每項(xiàng)加載時(shí)”事件

文字輸入工具欄

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

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

• 從微信截圖中截取語音、表情和加號(hào)圖標(biāo)，再復(fù)制一份前面設(shè)計(jì)的文本輸入框元件

• 擺放好各個(gè)圖標(biāo)位置，調(diào)整文本輸入框的寬度為300，取消默認(rèn)的文本輸入提示

語音輸入工具欄

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

微信導(dǎo)航菜單

使用動(dòng)態(tài)面板來表現(xiàn)每個(gè)按鈕的選中狀態(tài)和非選中狀態(tài)，背景使用帶有上下邊框的矩形。

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

• 以“微信”按鈕為例，分別截取選中狀態(tài)、未選中狀態(tài)時(shí)的圖標(biāo)

• 添加一個(gè)動(dòng)態(tài)面板，命名為menu_weixin，大小為120*60，添加兩個(gè)狀態(tài)，將上面兩個(gè)圖標(biāo)分別放到state1和state2中，每個(gè)狀態(tài)的圖標(biāo)下面添加個(gè)文本標(biāo)簽，顏色分別設(shè)置為灰色和綠色

• 同理，添加“通訊錄”、“發(fā)現(xiàn)”和“我”四個(gè)按鈕圖標(biāo)，順序排列

• 添加事件處理，點(diǎn)擊“微信”按鈕時(shí)，設(shè)置當(dāng)前按鈕的動(dòng)態(tài)面板狀態(tài)為state2，其它三個(gè)動(dòng)態(tài)面板的狀態(tài)為statet1，可以發(fā)現(xiàn)這個(gè)按鈕的事件是通用的，其它幾個(gè)按鈕可以直接復(fù)制這個(gè)按鈕的事件即可。

• 其它三個(gè)按鈕復(fù)制第一個(gè)按鈕的單擊事件即可。

結(jié)束語

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

甚至，有些圖標(biāo)，我們也可以利用圖形的組合也能完成。因此，充分利用Axure的基本元件，特別是矩形框、動(dòng)態(tài)面板、中繼器，是學(xué)習(xí)Axure的基礎(chǔ)。

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

本文由 @ Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。