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

微信是一個負(fù)責(zé)龐大的系統(tǒng)，制作微信原型需要分模塊，逐漸完善，本章完成原型的第三大部分，聊天信息的跳轉(zhuǎn)和設(shè)置。

第一步：設(shè)置聊天狀態(tài)頁

1. 聊天頁和聊天列表首頁為不同的頁面，因此最合理的原型是將聊天列表轉(zhuǎn)變?yōu)榭刂泼姘?，聊天頁和首頁為不同的狀態(tài)。在前兩章原型的基礎(chǔ)上，全部選擇“導(dǎo)航頁標(biāo)題欄”、“窗口動態(tài)面板”、“menu”以及四個子menu。按住Ctrl，鼠標(biāo)點擊右鍵，選擇轉(zhuǎn)換為動態(tài)面板。動態(tài)面板的標(biāo)簽明設(shè)置為“首頁動態(tài)面板”，state1設(shè)置為“導(dǎo)航頁”。

2. 添加新狀態(tài)，狀態(tài)名改為聊天頁。雙擊進(jìn)入聊天頁狀態(tài)。

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

4. 從微信中截圖返回箭頭和設(shè)置圖標(biāo)，放置到相應(yīng)位置，如圖。返回圖標(biāo)標(biāo)簽設(shè)置為“返回鍵”，設(shè)置圖標(biāo)標(biāo)簽設(shè)置為“設(shè)置”，如圖：

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

第二步：構(gòu)建聊天欄原型

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

2. 截圖微信聊天的三個圖標(biāo)，以此擺好，如圖：

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

4. 全部設(shè)置完效果圖如下：

第三步：設(shè)置頁面跳轉(zhuǎn)交互

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

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

3. 設(shè)置返回交互。為聊天頁面的返回鍵圖標(biāo)添加交互。單擊時–>設(shè)置面板狀態(tài)–>首頁動態(tài)面板，選擇狀態(tài)為導(dǎo)航頁，向右滑動，300ms。

第四步：設(shè)置聊天欄交互

1. 為了更逼真模擬聊天欄，為其增加交互動作。進(jìn)入聊天輸入控制面板，文字輸入狀態(tài)，為語音輸入鍵添加交互，鼠標(biāo)單擊時–>設(shè)置面板狀態(tài)–>set聊天輸入動態(tài)面板–>選擇狀態(tài)為語音輸入，無動畫。

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

3. 進(jìn)入語音輸入狀態(tài)，為文字輸入鍵添加交互，鼠標(biāo)單擊時–>設(shè)置面板狀態(tài)–>set聊天輸入動態(tài)面板–>選擇狀態(tài)為文字輸入，無動畫。

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

全部設(shè)置完，可預(yù)覽效果。

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

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

相關(guān)閱讀

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

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

本文由 @有趣的程序員 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。