本文將從設(shè)計(jì)角度深度剖析聊天區(qū)。

直播浪潮來襲，大家在看直播的時(shí)候是否感覺頁面很“亂” ？特別是占比例最大的聊天區(qū)（除了占滿屏幕的豪華禮物），大家看到更多的是如下圖，體驗(yàn)很糟糕。

?聊天區(qū)簡介

1、全屏和半屏

國內(nèi)外的直播界面主要有全屏和半屏兩種樣式，全屏有Periscope、BIGO、Live.me、映客等， 半屏有Twitch、facebook live、YouNow、斗魚等。半屏的聊天區(qū)域相對單一，本文不做分析。

2、全屏占比／系統(tǒng)消息分類

聊天區(qū)占比較大，一般占直播頁面的1/4，共6行左右。聊天區(qū)分聊天消息和系統(tǒng)消息。聊天消息是用戶主動(dòng)發(fā)的聊天內(nèi)容，系統(tǒng)消息是系統(tǒng)給出提示，主要有系統(tǒng)公告、關(guān)注提示、分享提示等。

3、用戶瀏覽順序

用戶進(jìn)入直播間的瀏覽順序是主播 — 聊天區(qū) — 禮物 。優(yōu)質(zhì)的主播資源是吸引用戶的最大因素，其次就是一直處于更新和變化且占比較大的聊天區(qū)，再次就是去看該APP的特色禮物。

聊天區(qū)的三個(gè)層面

1、視覺層

視覺樣式分三類：純文字、框與文字、純框。

其中框與文字結(jié)合的方式中有2種常見樣式：一種是半框（等級和昵稱在框中，聊天內(nèi)容緊跟其后）＋系統(tǒng)消息；另外一種是全框＋系統(tǒng)消息。

顏色：目前國內(nèi)外很多聊天區(qū)的文字顏色有4～6種。昵稱、聊天文字、系統(tǒng)消息（進(jìn)房、送禮、公告）等的顏色各不相同，視覺混亂（如映客等）。其實(shí)總結(jié)歸納到2～3種顏色同樣也可以表達(dá)清楚，系統(tǒng)消息和輸入內(nèi)容作顏色區(qū)別即可。

字體：粗細(xì)層度、字號、投影。根據(jù)多次嘗試，發(fā)現(xiàn)32號字體在閱讀上最舒服；對昵稱采用加粗或不同顏色的設(shè)計(jì)方式，也能提高可閱讀性；投影可以根據(jù)整體視覺風(fēng)格進(jìn)行相應(yīng)的設(shè)計(jì)。

2、動(dòng)態(tài)層

（1）聊天區(qū)運(yùn)動(dòng)軌跡：都是底部往上滑動(dòng)；

（2）聊天區(qū)消失方式：一種是向上滾動(dòng)，到達(dá)區(qū)域臨界點(diǎn)后漸變消失，只有一條消失時(shí)不消失；一種是向上滾動(dòng)，透明度降低，只有一條消息時(shí)，也會(huì)降低透明度后消失；

（3）聊天區(qū)運(yùn)動(dòng)速率：實(shí)時(shí)全部顯示，將最新消息放在最底部，滾動(dòng)速度快慢是根據(jù)消息數(shù)量決定，消息多是滾動(dòng)速度快，消息少的滾動(dòng)速度慢。滾動(dòng)時(shí)可以在客戶端分屏顯示，按固定時(shí)間間隔，每次顯示固定數(shù)量的消息。當(dāng)相同的系統(tǒng)消息（比如用戶進(jìn)入房間）相連時(shí)，可以折疊顯示。

3、操作層

（1）查看歷史消息：有4種階梯式樣式，一是不支持查看歷史聊天記錄；二是向下滑動(dòng)，底部有臨界點(diǎn)，沒有任何反饋；三是向下滑，底部有臨界點(diǎn)，有新消息時(shí)，給出提醒；四是向下滑，高亮顯示聊天區(qū)，底部有臨界點(diǎn)，有新消息時(shí)，給出提醒。

（2）回復(fù)/查看資料：有3種樣式，一是不支持回復(fù)用戶和查看資料；二是單擊給出選擇，并且可以左右滑動(dòng)選擇昵稱進(jìn)行針對性的操作；三是長按昵稱，可以回復(fù)該用戶；單擊昵稱，可以查看個(gè)人資料和相應(yīng)操作。

（3）消失方式：有2種樣式，一是左右滑動(dòng)，只顯示或是隱藏聊天區(qū)域；二是左右滑動(dòng)，顯示或是隱藏全部內(nèi)容。

最好的聊天區(qū)體驗(yàn)：

1.視覺整體統(tǒng)一

使用框與文字結(jié)合的方式，或者純框的樣式；顏色方面2～3種，字體粗細(xì)結(jié)合；

2.運(yùn)動(dòng)節(jié)奏合理

自下而上滾動(dòng)，滾動(dòng)速率不宜太快。

3.方便快捷操作

需要支持聊天區(qū)的操作，特別是查看資料。

4.人性化的細(xì)節(jié)

在查看歷史消息時(shí)，可以讓用戶更加專注聊天區(qū)域，有新消息時(shí)給出提醒。

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