編輯導語：我們經常用的各種APP里都有聊天界面，比如最常見的微信聊天、淘寶客服的溝通等等，這都是溝通聊天的界面；本文作者分享了關于用中繼器做聊天APP原型，我們一起來看一下。

APP聊天的界面可以說是APP里面最常用的原型頁面之一，除了我們熟知的社交APP，例如微信、QQ外，其實基本上所有APP里面都有聊天的原型頁面；例如美團餓了么外賣軟件，我們可以和騎手溝通；淘寶京東電商軟件，我們可以和店家溝通；其他的軟件，我們也能夠和客服溝通。

以上所有的溝通頁面，都能用到聊天APP的原型；所以今天作者就教大家，如何用中繼器做一個高保真的聊天對話原型。

一、效果介紹

原型預覽地址：https://mz57nt.axshare.com/#g=1

二、材料準備

中繼器1個，圖片兩個，矩形兩個，輸入框1個，語音圖標一個，發(fā)送按鈕一個。

中繼器內材料需要圖片兩個（對方頭像，我方頭像），矩形2個（對方對話內容，我放對話內容）。

如下圖所示擺放（實際是兩個放在同一y值）：

三、中繼器表格

WHO是分清誰的對話，如果值為me，就是我方說的，否則則為對方說的，下面交互會詳細說明。

content是對話的內容。

如下圖所示填寫完整即可：

四、交互設置

1. 中繼器每項加載時

1）隱藏我方或者對方的頭像+對話內容

因為一行只能有一方講話，所以如果who==me，這時我們需要隱藏左邊對話（對方頭像+對方對話內容）；否則就隱藏右邊對話（我方頭像+我方對話內容）。

然后我們要將表格中content的內容設置到對話矩形內，如果who==me，這時我們設置我方對話內容的文本==item.content；否則就設置對方對話內容==item.content。

2）設置對話矩形自適應大小

由于axure的矩形在演示的時候不會自適應文字的大小，所以這里我們要根據不同的對話內容設置對話內容矩形的大小，這里面涉及函數(shù)會有一點難。

我們默認設兩個對話矩形的尺寸為253，高是38。用14號字；然后我們發(fā)現(xiàn)一行可以寫17個中文漢字，然后手機端輸入對話輸入框一般是少于80個字的，所以我們可以分一下幾種情況：

• 第一種情況：17≥字數(shù)，這里高不變仍然是38，寬度是14*字數(shù)長度+15
• 第二種情況：34＞字數(shù)≥18，這里相當于兩行，寬度保持253不變，高度=14*2+24=48
• 第三中情況：51＞字數(shù)≥35，這里相當于3行，寬度保持253不變，高度=14*3+24=66
• ……
• 第n種情況：17*n＞字數(shù)≥17*（n-1），這里相當于n行，寬度保持253不變，高度=14*n+24

這里要提到一個函數(shù)length，他可以計算文本的長度，結合上面的條件，就可以完成對話內容的自適應，完成后如下圖所示。

2. 發(fā)送按鈕事件

這里首先要判斷，輸入框是否為空，如果不為空值是，我們做添加行的交互，who因為是我方對話內容，所以填寫me；content的內容即輸入框的內容，輸入框內容我們用局部變量來[[LVAR1]]表示。

以上就是本期分享的全部內容，謝謝閱讀。

本文由 @做產品但不是經理 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。