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

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

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

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

一、效果介紹

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

二、材料準(zhǔn)備

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

中繼器內(nèi)材料需要圖片兩個(gè)（對(duì)方頭像，我方頭像），矩形2個(gè)（對(duì)方對(duì)話內(nèi)容，我放對(duì)話內(nèi)容）。

如下圖所示擺放（實(shí)際是兩個(gè)放在同一y值）：

三、中繼器表格

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

content是對(duì)話的內(nèi)容。

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

四、交互設(shè)置

1. 中繼器每項(xiàng)加載時(shí)

1）隱藏我方或者對(duì)方的頭像+對(duì)話內(nèi)容

因?yàn)橐恍兄荒苡幸环街v話，所以如果who==me，這時(shí)我們需要隱藏左邊對(duì)話（對(duì)方頭像+對(duì)方對(duì)話內(nèi)容）；否則就隱藏右邊對(duì)話（我方頭像+我方對(duì)話內(nèi)容）。

然后我們要將表格中content的內(nèi)容設(shè)置到對(duì)話矩形內(nèi)，如果who==me，這時(shí)我們?cè)O(shè)置我方對(duì)話內(nèi)容的文本==item.content；否則就設(shè)置對(duì)方對(duì)話內(nèi)容==item.content。

2）設(shè)置對(duì)話矩形自適應(yīng)大小

由于axure的矩形在演示的時(shí)候不會(huì)自適應(yīng)文字的大小，所以這里我們要根據(jù)不同的對(duì)話內(nèi)容設(shè)置對(duì)話內(nèi)容矩形的大小，這里面涉及函數(shù)會(huì)有一點(diǎn)難。

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

• 第一種情況：17≥字?jǐn)?shù)，這里高不變?nèi)匀皇?8，寬度是14*字?jǐn)?shù)長度+15
• 第二種情況：34＞字?jǐn)?shù)≥18，這里相當(dāng)于兩行，寬度保持253不變，高度=14*2+24=48
• 第三中情況：51＞字?jǐn)?shù)≥35，這里相當(dāng)于3行，寬度保持253不變，高度=14*3+24=66
• ……
• 第n種情況：17*n＞字?jǐn)?shù)≥17*（n-1），這里相當(dāng)于n行，寬度保持253不變，高度=14*n+24

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

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

這里首先要判斷，輸入框是否為空，如果不為空值是，我們做添加行的交互，who因?yàn)槭俏曳綄?duì)話內(nèi)容，所以填寫me；content的內(nèi)容即輸入框的內(nèi)容，輸入框內(nèi)容我們用局部變量來[[LVAR1]]表示。

以上就是本期分享的全部內(nèi)容，謝謝閱讀。

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

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