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

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


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

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

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

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

 聊天区简介

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

相关推荐

  • 交互设计中几个要注意的关键词

    作者:Guibin@DesignGB   sprint “罗马不是一天建成的。” “千里之行,始于足下。” 将一个大问题,拆解成很多小问题,一点一点实现并验证可行性,一个版本一个版本改善,用迭代的思想输出成果。越早交付价值,就越早…

    交互专题 2017-08-07
  • 平衡用户体验设计和精益设计

    来源:人人都是产品经理 作者:AB Tester Blog 对你而言哪个更重要:是制作出拥有杀手级用户体验的产品来吸引用户?还是尽快制作出能满足用户的产品并抢占大量的市场份额? 如果一款产品用户体验很差的话,用户不会使…

    2014-09-27
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 交互设计之流程设计(1)

    流程设计是将信息架构转变为交互稿的重要步骤,什么是流程设计呢?简单来说,就是用户完成一项任务的步骤流程,用户是怎样一步一步的完成任务的。本文将从流程设计重要性、如何进行流程设计、流程设计与交互工作三个方面来阐述流程设计。一、流程设计的重要性流程设计对于用户体验来说非常重要,一个好的流程设计将会给用户带来非常的体验。在这里从流程设计是什么、流程设计中需要考虑的问题、优秀流程设计的好处三个方便来进行讲解。1 流程设计是什么首先理解交互设计是...

    2018-05-06
  • 从GUI到CUI,谈谈智能时代的用户体验

    用户体验分为三个层面:有用性、易用性与美观性。有用性是用户体验的根基,美观性属于锦上添花,易用性则与用户对产品的“操作体验”直接相关。User:买一张明天去北京的机票,要国航的;五点前到达,尽量便宜。

    Bot:好的,查到CA XXXX航班,16:00到达,票价XXX元。来自携程。

    User:买了吧。

    Bot:好的。User:订一张明天去北京的机票。

    Bot:好的,还是国航五点前到的最便宜的吧?

    User:对的。

    Bot:好的,已经预定了CA XXXX,16:30到,XXX元。来自携程。

    Bot:另外这次要和上次一样预定当天的万豪酒店吗?

    User:订边上的汉庭,这次公司不报销。

    Bot:好的。User:我要去北京,定个明晚的酒店。

    Bot:好呀好呀,是否要订华贸的万豪酒店?

    User:订边上的汉庭。

    Bot:听起来好杯具,摸摸~

    Bot:话说“边上的汉庭”是什么酒店?

    User:#WTF……(关掉了应用)User:你可爱吗?

    Bot:很可爱呢~

    User:约吗?

    Bot:我们大约有20款车。(难免出现理解不到位的情况)

    User:#hhh果然很SB……User:你可爱吗?

    Bot:您好,这里是XXX汽车经销商,我可以回答你购车相关的问题。

    User:锐腾16款有些什么颜色?

    2017-08-04
  • 『交互扫盲』云里雾里,傻傻分不清楚的UI/UE/ID/UED/UCD!

    对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概念代表着什么含义,今天给大家做一个简单地介绍。 对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概…

    2015-01-27
  • 通知:本站为了更好为广大的交互师服务, 现在更名为www.iamue.com

    通知:本站为了更好为广大的交互师服务, 现在更名为www.iamue.com 中文站名:我是UE 同时我们也启用了woshiue.com 广大交互师可加入交互设计学堂群参与交互原型设计讨论 群号:156360020 加群暗号:iamue  

    交互设计 2015-03-18
  • 移动端图片阅读—交互设计分析

    ↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自...

    2018-01-30
  • 巴塞罗那发团丨LES FONTS DEL LLOBREGAT探寻自然一日游

    看腻了古镇城堡?看够了沙滩海岛?那就跟随我们深入略夫雷加特河的源头Fonts del Llobregat来一次悠闲的探寻自然之旅吧!发团日期:2月17日行程价格:42欧/人行程包含:1.大巴游览2. 西语陪同导游3. 餐食午餐包括:escalivada炭烤蔬菜拼盘,加泰罗尼亚沙拉,咸火腿,白肠、黑肠、香肠拼盘,Escudella炖菜,酱汁bandejas de pies de poco,蘑菇牛肉+烤鸡肉甜品:Bunyols amb mo...

    2018-02-05
  • app交互设计:手势流

    在智能交互中,手势已成为新的“点击”。现在每次打开手机里的app、游戏时,都需要用到点击、拖、拉等动作。单看点击的话,设计师与开发者只需要考虑用户点击屏幕哪里体验更好。但是手势不同,手势操作还需考虑什么动…

    2015-11-17