中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

通過這些微信元件的組合，我們就可以設計微信相關的頁面原型了。

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

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

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

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

…等等

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

說明：

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

新建元件庫

點擊元件庫的右側下拉菜單，從中選擇“創建元件庫…”：

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

綠色按鈕

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

雙擊“綠色按鈕”打開編輯狀態。

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

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

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

灰色按鈕

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

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

紅色按鈕

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

文本輸入框

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

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

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

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

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

標題欄

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

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

開關按鈕

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

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

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

3）、選中灰色背景和白色圓形，右鍵轉換為動態面板，命名為switch_button。

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

確認彈出窗口

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

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

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

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

4）選中所有元件，右鍵轉換為動態面板，命名為alert，設置動態面板固定到瀏覽器屬性為水平居中、垂直居中

5）、添加確認、取消標簽的單擊事件，都是在單擊后隱藏彈出窗口alert

6）、設置彈出窗口alert初始狀態為隱藏

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

我們可以發現，使用Axure標準的元件，就可以基本完全實現微信的自定義元件庫。

元件庫下載?

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

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

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