很多的APP的樣式，都可以通過Axure的基本元件來自定義元件庫。文章主要分享了利用Axure基本元件自定義微信原件庫的過程，希望大家可以通過文章有所收獲。

作為社交軟件巨頭的微信，我們來研究一下它android版本的界面樣式。

通過觀察和分析微信的界面樣式，我們發(fā)現(xiàn)，完全可以使用Axure的基本元件，就能實現(xiàn)微信的元件庫。

通過這些微信元件的組合，我們就可以設(shè)計微信相關(guān)的頁面原型了。

其實，很多的APP的樣式，都可以通過Axure的基本元件來自定義元件庫。

首先，來看一下微信里的常見樣式：

通過觀察，它們無非是矩形框、文本標(biāo)簽、圖標(biāo)、文本輸入框等，通過設(shè)置元件的交互樣式，簡單的事件處理，就可以實現(xiàn)。

1. 綠色按鈕：綠色背景，白色文字，小圓角
2. 灰色按鈕：灰色背景，白色文字，小圓角
3. 紅色按鈕：紅色背景，白色文字，小圓角
4. 文本輸入框：默認(rèn)狀態(tài)下，輸入框正方是灰色線條，可設(shè)置默認(rèn)文字提示。獲得焦點后，灰色線條呈綠色，例如標(biāo)題欄的搜索框。標(biāo)題搜索欄、登錄界面的名稱輸入等都是在文本輸入框元件下的擴展
5. 標(biāo)題欄：帶有返回箭頭，標(biāo)題文字，以及兩者間的分割線
6. 開關(guān)按鈕：在設(shè)置界面有很多這樣的按鈕，在啟用和禁用之間切換
7. 確認(rèn)彈出窗口：包括提示文字，取消和確認(rèn)的按鈕，例如退出時的確認(rèn)
8. 彈出菜單：在消息列表的消息上長按，彈出功能菜單
9. 消息列表樣式：帶有一個頭像，好友名稱/群名稱/公眾號名稱等，以及最后一條消息的內(nèi)容和消息時間
10. 功能菜單：長矩形背景，一個圖標(biāo)+功能菜單名稱，按下背景呈灰色
11. 文字輸入工具欄：一個語音圖標(biāo)、一個文本輸入框、一個表情圖標(biāo)和一個加號菜單圖標(biāo)
12. 語音輸入工具欄：和文字輸入工具欄類似，一個鍵盤圖標(biāo)，一個按鈕、一個表情圖標(biāo)和一個加號菜單圖標(biāo)
13. 微信導(dǎo)航菜單：微信的四個功能菜單，“微信”、“通訊錄”、“發(fā)現(xiàn)”和“我”

…等等

我們以新建元件庫開始，逐一說明如何通過使用基本的元件來實現(xiàn)微信自定義組件庫，目前所包含的自定義組件不全，你可以在此基礎(chǔ)上擴充。

說明：

• 元件庫中各個元件的大小以寬帶480為基準(zhǔn)，寬度在這個范圍之內(nèi)。
• 限于篇幅，以下各自定義元件的設(shè)計以思路說明為主，有些地方?jīng)]有提供詳細設(shè)置步驟，具體可下載源文件查看。

新建元件庫

點擊元件庫的右側(cè)下拉菜單，從中選擇“創(chuàng)建元件庫…”：

在接下來的文件保存窗口中，給元件庫命名為“微信組件庫”，確認(rèn)后保存，Axure會新打開一個運行實例用于元件庫的設(shè)計。

綠色按鈕

元件庫默認(rèn)新建了一個元件，我們將它命名為“綠色按鈕”：

雙擊“綠色按鈕”打開編輯狀態(tài)。

1）、添加一個無邊框矩形框，大小470*56，綠底白字，文字大小為18，圓角大小為3，綠色背景通過吸管工具吸取微信截圖上的按鈕顏色。

2）、設(shè)置按鈕的交互樣式，鼠標(biāo)按下時背景變深，文字顏色變深，不可用時按鈕為淺綠色，只需要設(shè)置“鼠標(biāo)按鈕”和“禁用”兩種交互樣式的背景顏色和文字顏色，顏色參考微信界面截圖。

提示：完成后刪除設(shè)計界面中用來參考的微信截圖截面。

灰色按鈕

新建一個元件，大小同綠色按鈕方式一致，只需要設(shè)置一下按鈕交互樣式中的背景色和文字顏色。

提示：完成后刪除設(shè)計界面中用來參考的微信截圖截面。

紅色按鈕

新建一個元件，大小同綠色按鈕方式一致，只需要設(shè)置一下按鈕交互樣式中的背景色和文字顏色。

文本輸入框

使用一個透明無邊框的文本輸入框，加上一個水平線組成，并設(shè)置文本輸入框的獲得焦點和失去焦點事件，分別在兩個事件中來改變水平線的樣式，達到輸入框獲得焦點時的樣式效果。

1）、添加一個文本輸入框，大小350*40，隱藏邊框，并設(shè)置無填充色，設(shè)置文字提示為“請輸入文字”。

2）、添加一個水平線，寬帶和輸入框一致，寬度350，線的顏色為灰色，放在文本輸入框下方，命名為line，并設(shè)置交互樣式的選中狀態(tài)時，線的顏色為綠色。

3）輸入框事件處理，添加獲得焦點和失去焦點事件，獲得焦點時設(shè)置邊框line為選中狀態(tài)，失去焦點時，邊框為取消選中狀態(tài)。

當(dāng)前元件中選中所有子元件，按ctrl+G將它們編組。

標(biāo)題欄

標(biāo)題欄主要是設(shè)置矩形框的樣式，黑底白字，文字左對齊，左邊距為60，前面留出的空白用來放返回箭頭圖標(biāo)，返回箭頭和分割線從截圖中截取，移到標(biāo)題欄最左側(cè)。

在當(dāng)前元件中選中所有子元件，按ctrl+G將它們編組。

開關(guān)按鈕

開關(guān)按鈕點擊后在啟用與禁用之間切換，主要是按鈕樣式的設(shè)置以及單擊時的切換事件處理。

1）、添加一個矩形框，大小54*28，灰色背景，圓角大小為20，設(shè)置交互樣式中選中時背景為綠色，矩形框命名為button_bg。

2）、添加一個白色圓形，不顯示邊框，大小為24*24，位置在（2，2），命名為round_button。

3）、選中灰色背景和白色圓形，右鍵轉(zhuǎn)換為動態(tài)面板，命名為switch_button。

4）、給動態(tài)面板添加單擊事件處理，單擊時切換button_bg的選中狀態(tài)，同時來回移動圓形按鈕round_button，配合線性動畫。

確認(rèn)彈出窗口

微信的確認(rèn)彈出窗口比較簡潔，只有文字內(nèi)容和兩個按鈕。在使用時只需要顯示此彈出窗口，并設(shè)置燈箱效果。

1）、添加個無邊框矩形作為彈出窗口的窗體，白色背景，圓角大小為3

2）、添加文本段落，命名為txtMsg

3）、添加兩個文本標(biāo)簽，文字對齊方式為水平居中，垂直居中，并設(shè)置兩個標(biāo)簽的鼠標(biāo)按下時，背景顏色為灰色

4）選中所有元件，右鍵轉(zhuǎn)換為動態(tài)面板，命名為alert，設(shè)置動態(tài)面板固定到瀏覽器屬性為水平居中、垂直居中

5）、添加確認(rèn)、取消標(biāo)簽的單擊事件，都是在單擊后隱藏彈出窗口alert

6）、設(shè)置彈出窗口alert初始狀態(tài)為隱藏

限于篇幅，上篇先介紹到這里，下篇待續(xù)。

我們可以發(fā)現(xiàn)，使用Axure標(biāo)準(zhǔn)的元件，就可以基本完全實現(xiàn)微信的自定義元件庫。

元件庫下載?

作者鏈接：https://pan.baidu.com/s/1dFAD0Ed 密碼: 74m4

官方鏈接：https://pan.baidu.com/s/1eRQArj8 密碼: fe2j

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