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

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


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

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

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

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

 聊天区简介

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

相关推荐

  • iOS 9人机界面指南(三):iOS 技术 (中)

    文章索引译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-05-29
  • 交互设计师必须知道的五大交互设计流程

    交互设计又称互动设计,从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点。同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充,交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。其实,交互设计需要做的事情也不是一成不变的,它会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别。下面我就在马海祥博客上...

    微信热点 2018-03-16
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

    2018-02-12
  • 对交互有疑问的同学可以进行在线提问了

    目前PC端体验做的还可以,手机端暂时不支持,请登录电脑端网站进行提问! 提问页面入口    阿西答疑主题帖

    2016-04-12
  • 泡泡UI英语:交互设计精髓1

    最近在读《About Face 4:交互设计精髓》,他全面系统地讲述了交互设计过程、原理和方法,涵盖内容广,刨析知识深,被奉为交互设计指南。也正因为如此,大量的专业词汇给阅读造成了不小的难度,推荐大家双语共读,…

    2017-08-01
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 交互设计七大定律之新乡重夫:防错原则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 设计切实可靠的UI,为你的用户做决策

    真实可靠的UI是产品可信。“大量的选择并不能让人们选择所有东西,并且人们在选择的时候会不开心。”“每一个额外的选择都会导致做决定所需的时间变长。”“我必须要简化我的生活,因为除了思考如何更好的服务社会之外,我必须尽可能少的做决策。—— 马克·扎克伯格”“这就好比你最好的朋友每周都会为你准备一个个性化的音乐合集一样”“Facebook希望为点击很多链接的人提供更多的链接,为观看很多视频的人提供更多的视频,以此类推”“Facebook并没有显示所有的帖子。展示给你的都是被选择过的信息。可有趣的是,Facebook的算法会倾向于加强你哪方面想要的呢?因为这个必须要在之前就定义好。”“假如说你来到伦敦,你定了一个Hailo的车,而你在上午七点到十点之间进入了一个特定的位置。如果你到下午五点了仍然在那里,那么就可能会出现你想要离开的假设,这个时候Google Now就会提醒你订车。”“亚马逊将疑问从‘我需要这个吗’转移到了‘我还需要什么来填满这个盒子’”

    2017-05-09
  • 设计热点 x【交互设计】

    文I橙燃今天小编想介绍的是交互设计,这个似乎早几年就已经流传到爆的似乎很高大上的职业,我也尝试过去接触过,但前几年就有很多人和我说此 “物”这些年已它饱和了,由于较其它设计类工作工资高很多,又是新生职业,遂很多人转行做交互了~而我现在想对那些人说:滚!因为他们年年在说,根本也不懂个啥~依然有很多人转UI。刚毕业。最近听说我的两个同学去南京学UI了,然而学费,我想说真的交互设计真的贵,一万八~~我想我还是干点别的吧~我不适合。好,言归正传...

    2018-04-08
  • 坚持梦想选择学UED设计,斩获13K月薪

    达内UI设计,中国UID课程标准制定者当你选择一家餐馆吃饭,你有没有想过是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?......这一系列发生在你生活中,你留意或不留意的问题, 就是一个完整的用户体验,这种用户体验设计也称作UED。小王是达内UED学员,经过四个月培训,成功成为一名UED设计师,月薪13k。四个月,她如何实现成功?我毕业后一直在一家公司做产品工作,由于一个偶...

    2018-01-31