本章完成微信聊天原型的第三個主要部分，聊天信息的跳轉。如果你希望跟著操作，需要根據前兩章的內容，首先完成之前的原型。

微信是一個負責龐大的系統，制作微信原型需要分模塊，逐漸完善，本章完成原型的第三大部分，聊天信息的跳轉和設置。

第一步：設置聊天狀態頁

1. 聊天頁和聊天列表首頁為不同的頁面，因此最合理的原型是將聊天列表轉變為控制面板，聊天頁和首頁為不同的狀態。在前兩章原型的基礎上，全部選擇“導航頁標題欄”、“窗口動態面板”、“menu”以及四個子menu。按住Ctrl，鼠標點擊右鍵，選擇轉換為動態面板。動態面板的標簽明設置為“首頁動態面板”，state1設置為“導航頁”。

2. 添加新狀態，狀態名改為聊天頁。雙擊進入聊天頁狀態。

3. 首先，添加一個矩形框，長480，寬60，標簽名設置為“聊天頁userName”。文字輸入為“請輸入標題名稱”，設置樣式，填充顏色為“393A3F”，字體顏色“FFFFFF”。填充：70，上2，右2，下2。

4. 從微信中截圖返回箭頭和設置圖標，放置到相應位置，如圖。返回圖標標簽設置為“返回鍵”，設置圖標標簽設置為“設置”，如圖：

5. 設置一個矩形框，寬480，高574。標簽設為聊天對話框，置于導航欄下方。設置只有下邊框，顏色為“D7D7D7”，填充顏色為“F2F2F2”。

第二步：構建聊天欄原型

1. 下面構建一個聊天欄的原型。設置一個矩形面板，只有下邊框，顏色為“D7D7D7”。填充顏色為“F2F2F2”，位于聊天對話框下面。然后設置一個文本框，位于面板中間位置。

2. 截圖微信聊天的三個圖標，以此擺好，如圖：

3. 將這些組件全選后，右鍵，轉換為可控制面板。面板標簽名設置為“聊天輸入動態面板”，state1改為“文字輸入”，然后增加state2。改名為語音輸入。雙擊進入語音輸入狀態，將“文字輸入”狀態里的全部組件復制過來，刪掉語音圖標和文本輸入框，截圖微信的鍵盤圖標地帶語音圖標，然后設置一個矩形框，邊框顏色為“D7D7D7”，填充顏色為“F2F2F2”,標簽設置為button，替代文本輸入框，文本設置為按住 說話，如圖：

4. 全部設置完效果圖如下：

第三步：設置頁面跳轉交互

1. 根據微信實際操作可知，當點擊聊天列表時，會進入該聯系人的聊天頁面。進入到消息列表動態面板的state1，進入中繼器msg_list，進入msg_item。為msg_item設置點擊事件。添加用例–>鼠標單擊時–>設置面板狀態–>選擇首頁動態面板–>選擇狀態為“聊天頁”–>進入動畫和退出動畫均為向左滑動300ms。

2. 接著上一個case繼續設置，設置文本–>選擇“聊天頁userName”–>值等于，此處選擇fx–>插入變量或函數，選擇Item.name。

3. 設置返回交互。為聊天頁面的返回鍵圖標添加交互。單擊時–>設置面板狀態–>首頁動態面板，選擇狀態為導航頁，向右滑動，300ms。

第四步：設置聊天欄交互

1. 為了更逼真模擬聊天欄，為其增加交互動作。進入聊天輸入控制面板，文字輸入狀態，為語音輸入鍵添加交互，鼠標單擊時–>設置面板狀態–>set聊天輸入動態面板–>選擇狀態為語音輸入，無動畫。

2. 為文本輸入框添加屬性，選擇隱藏邊框，背景填充顏色為“F2F2F2”，設置一條橫線放在文本框下面，標簽設為line1，顏色設置為“cccccc”，在設置一條橫線與line2重合，顏色選綠色，設為隱藏。為文本框添加交互，獲取焦點時–>顯示line2，隱藏line1。失去焦點時–>顯示line1，隱藏line2。

3. 進入語音輸入狀態，為文字輸入鍵添加交互，鼠標單擊時–>設置面板狀態–>set聊天輸入動態面板–>選擇狀態為文字輸入，無動畫。

4. 選中按鈕，添加交互屬性，鼠標按下時–>設置文本–>button =”松開 發送”。鼠標松開時–>設置文本–>button =”按住 說話”。

全部設置完，可預覽效果。

該原型鏈接為：http://interestingprogrammer.coding.me/yanjingProject/微信聊天3

經過這三張的介紹，微信原型用到的主要實現方法基本已經介紹完畢，當然還有很多功能還未實現，后面文章還會繼續介紹，大家也可以自己根據理解自己實現，多動手才是最快的進步方法。

相關閱讀

Axure教程：微信聊天列表原型制作（二）

Axure教程：微信聊天列表原型制作（一）

本文由 @有趣的程序員 原創發布于人人都是產品經理。未經許可，禁止轉載。