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

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

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

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

2. 添加新?tīng)顟B(tài)，狀態(tài)名改為聊天頁(yè)。雙擊進(jìn)入聊天頁(yè)狀態(tài)。

3. 首先，添加一個(gè)矩形框，長(zhǎng)480，寬60，標(biāo)簽名設(shè)置為“聊天頁(yè)userName”。文字輸入為“請(qǐng)輸入標(biāo)題名稱(chēng)”，設(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è)置一個(gè)矩形框，寬480，高574。標(biāo)簽設(shè)為聊天對(duì)話框，置于導(dǎo)航欄下方。設(shè)置只有下邊框，顏色為“D7D7D7”，填充顏色為“F2F2F2”。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)閱讀

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

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

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