深度剖析|直播页面中的聊天区

本文将从设计角度深度剖析聊天区。


本文将从设计角度深度剖析聊天区。

深度剖析|直播页面中的聊天区

直播浪潮来袭,大家在看直播的时候是否感觉页面很“乱” ?特别是占比例最大的聊天区(除了占满屏幕的豪华礼物),大家看到更多的是如下图,体验很糟糕。

深度剖析|直播页面中的聊天区

 聊天区简介

1、全屏和半屏

国内外的直播界面主要有全屏和半屏两种样式,全屏有Periscope、BIGO、Live.me、映客等, 半屏有Twitch、facebook live、YouNow、斗鱼等。半屏的聊天区域相对单一,本文不做分析。

深度剖析|直播页面中的聊天区

2、全屏占比/系统消息分类

聊天区占比较大,一般占直播页面的1/4,共6行左右。聊天区分聊天消息和系统消息。聊天消息是用户主动发的聊天内容,系统消息是系统给出提示,主要有系统公告、关注提示、分享提示等。

深度剖析|直播页面中的聊天区

3、用户浏览顺序

用户进入直播间的浏览顺序是主播 — 聊天区 — 礼物 。优质的主播资源是吸引用户的最大因素,其次就是一直处于更新和变化且占比较大的聊天区,再次就是去看该APP的特色礼物。

聊天区的三个层面

1、视觉层

视觉样式分三类:纯文字、框与文字、纯框。

深度剖析|直播页面中的聊天区

其中框与文字结合的方式中有2种常见样式:一种是半框(等级和昵称在框中,聊天内容紧跟其后)+系统消息;另外一种是全框+系统消息。

颜色:目前国内外很多聊天区的文字颜色有4~6种。昵称、聊天文字、系统消息(进房、送礼、公告)等的颜色各不相同,视觉混乱(如映客等)。其实总结归纳到2~3种颜色同样也可以表达清楚,系统消息和输入内容作颜色区别即可。

深度剖析|直播页面中的聊天区

字体:粗细层度、字号、投影。根据多次尝试,发现32号字体在阅读上最舒服;对昵称采用加粗或不同颜色的设计方式,也能提高可阅读性;投影可以根据整体视觉风格进行相应的设计。

2、动态层

(1)聊天区运动轨迹:都是底部往上滑动;

(2)聊天区消失方式:一种是向上滚动,到达区域临界点后渐变消失,只有一条消失时不消失;一种是向上滚动,透明度降低,只有一条消息时,也会降低透明度后消失;

(3)聊天区运动速率:实时全部显示,将最新消息放在最底部,滚动速度快慢是根据消息数量决定,消息多是滚动速度快,消息少的滚动速度慢。滚动时可以在客户端分屏显示,按固定时间间隔,每次显示固定数量的消息。当相同的系统消息(比如用户进入房间)相连时,可以折叠显示。

深度剖析|直播页面中的聊天区

3、操作层

(1)查看历史消息:有4种阶梯式样式,一是不支持查看历史聊天记录;二是向下滑动,底部有临界点,没有任何反馈;三是向下滑,底部有临界点,有新消息时,给出提醒;四是向下滑,高亮显示聊天区,底部有临界点,有新消息时,给出提醒。

深度剖析|直播页面中的聊天区

(2)回复/查看资料:有3种样式,一是不支持回复用户和查看资料;二是单击给出选择,并且可以左右滑动选择昵称进行针对性的操作;三是长按昵称,可以回复该用户;单击昵称,可以查看个人资料和相应操作。

深度剖析|直播页面中的聊天区

(3)消失方式:有2种样式,一是左右滑动,只显示或是隐藏聊天区域;二是左右滑动,显示或是隐藏全部内容。

深度剖析|直播页面中的聊天区

最好的聊天区体验:

1.视觉整体统一

使用框与文字结合的方式,或者纯框的样式;颜色方面2~3种,字体粗细结合;

2.运动节奏合理

自下而上滚动,滚动速率不宜太快。

3.方便快捷操作

需要支持聊天区的操作,特别是查看资料。

4.人性化的细节

在查看历史消息时,可以让用户更加专注聊天区域,有新消息时给出提醒。

 

本文由 @kinlineliu原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28270/

(0)
CatherineCatherine
上一篇 2017-05-20 10:34
下一篇 2017-05-20 12:32

相关推荐

  • 交互设计的五要素

    在公众号里经常收到朋友的留言,到底什么是交互设计师?交互设计师具体是干什么的?为什么很多互联网公司都没有交互设计师这个岗位?希望通过这篇文章把交互的本质说清道明。互联网产品与需求早晨迎着第一缕阳光醒…

    2017-08-04
  • 按钮体验设计:最佳的感受,形式和状态

      按钮体验设计:最佳的感受,形式和状态 按钮是一个普通的,几乎我们每天都要接触的设计元素.除了这个,由于按钮是一个在网页或者app上创造流畅的会话流体验的必不可少的元素,所以它值得我们为按钮这样最基本的元…

    2016-03-24
  • 用户体验设计师如何构建设计知识体系

    -全文共2469个字,阅读时间大约3~6分钟-开 篇这几天在看一位腾讯大师的产品思维,今天是重复第二遍,她所讲的产品观中的微观、中观、宏观、用户增长的峰值、终值、点线面体思维等等,这一系列课程让我茅塞顿开。当下的确是一个很好的时代—体验经济时代,英雄不论出处,不谈产品的背后是何方神圣,一切都是用户说了算,一个产品准确找到用户痛点,只要用户喜欢,有足够的用户价值,就能转化一定的商业价值。最近处于风头浪尖的两家公司—某团与某滴,互相做起了对...

    2018-04-06
  • 跨屏幕的响应式设计|八方面来设计好用户体验

    跨设备、多屏幕、响应式的产品,无论是APP还是网页,需要产品设计师、用户体验设计 师能够始终将终端用户的体验,牢记在心。

    2017-04-28
  • 阅读好体验的准则:100% Easy-2-Read

    阅读好体验的准则:100% Easy-2-Read | 艾欧交互设计 译者:前两天看到一篇文章,觉得挺不错的,就简单翻译一下分享给大家。   大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是…

    2014-11-13
  • 交互译文—清晰度,可读性和可理解性:让用户阅读你的文章

    所谓成本是指:阅读你的文字所带来的长时间、理解内容带来的困惑、混乱的排版所带来的负面情绪等。
    所谓收益是指:阅读你的文字能让我获得的信息内容和质量,以及获得的积极情绪。

    2017-05-31
  • Medium评选的年度最佳设计文章2016

    译者:陈晶,审校:刘洁 该文章为UXRen翻译组的陈晶和刘洁同学基于Medium的文章《Medium’s Best Design Writing of 2016》整理、翻译和审校完成,为我们呈现了北美科技圈在2016年的最佳设计文章。 注明: 1、以下文…

    交互专题 2017-08-07
  • UED新刊 | 承——中国院方案组二十周年

    📌编辑| F.我觉得记录或者回忆方案组这件事……如果说有意义的话,它不应该仅仅是哥几个的一段往事,而是可能还带有某种其他的价值,可以为我们的同行展现中国建筑发展当中的一个小的片段。——崔    愷《城市·环境·设计》UED108期“承——中国院方案组二十周年”专辑现已发售更多互动福利详见文末扫描文末二维码即可购买新刊导读1997 年,当时还是建设部建筑设计研究院(下称建设部院)的中国建筑设计院(下称中国院),由时任总建筑师和副院长的崔愷...

    2018-02-07
  • 不可思议!VR虚拟现实的第一个盈利领域竟是A 片

    [alert_info] 据预测,虚拟现实色情产业到 2025 年将达到 10 亿美元。去买个虚拟现实头盔来看黄片吧。 网友评论: 太污了 我没法看下去了…… [/alert_info] 现在的虚拟现实产业就像打了鸡血一样。当你带上虚拟现实头…

    2016-01-24
  • 纽约视觉艺术学院SVA交互设计硕士毕业展 | 点赞按钮背后的学问

    SVA的交互设计专业汇集享有国际盛誉的设计师及其当今各大领域的专业人士,学生背景来自不同行业,有交互、数字媒体、纯艺、产品、平面、家居、建筑、计算机、社会学等等,学生之间能互补知识,拓展思路。要你设计一个点赞按钮,你会怎么设计?交互设计是什么?不知道的话,你可以回顾「谷歌UX交互设计师丨郑嘉」的分享会:用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX,她认为交互设计思维是用逻辑支持你的设计决定。SVA交互设计看点读交互的学生,...

    2018-05-04