分类 交互 下的文章

大家好,我是 Clippp,今天为大家分享的是「组件设计」。现在有很多成熟的组件库,能为设计的规范性带来更大的便利。

但作为设计师,不仅仅需要了解每个组件的样子、用在哪些地方,更需要清楚地知道组件的本质,即组件的形状、行为、状态等内在属性和设计细节,才能更深层地掌握组件设计。

组件的五种属性
想要全面了解并学习组件,首先要搞清楚组件具备的属性:

作用:定义组件的用途和作用,明白组件用来做什么的。

形状:不同形状的组件对产品、对用户分别有哪些作用。

行为:通过用户点击或触摸等动作定义交互行为。

状态:定义并告知用户当前的状态。

语境:根据组件所属的场景考虑组件不同的用途。

一看就懂!组件设计的 3 大类型+5 种属性科普

  1. 形状

通过形状的差异,我们能快速辨别不同类型的组件。在设计中,通常采用「文字与图形」相结合的形式来定义组件的形状。在设计组件时,要将形状、颜色、图标和文字等视觉元素组合在一起,并合理安排组件的层级结构。

例如一个点赞按钮的设计,看起来很简单,但是如果我们结合不同的使用场景和吸引用户注意力的程度去考虑,一个点赞的组件就可以分为下面 6 种甚至更多的形状。

一看就懂!组件设计的 3 大类型+5 种属性科普

所以在设计时,要充分地考虑使用场景和诉求,并对组件的形状有清晰的认知,在接下来的设计中需要哪种形状的组件直接对号入座,整个设计过程就会变得很明确。

  1. 行为

行为和交互逻辑以及业务逻辑相关,会告诉用户操作后的结果。用来告知用户触发组件时的即时反馈,或者组件当前处于什么状态。

一看就懂!组件设计的 3 大类型+5 种属性科普

  1. 状态

通过组件状态的变化可以告诉用户当前在进行哪一步操作,有助于用户了解组件当前的情况。常见的组件状态包括:正常状态、聚焦状态、悬停状态、激活状态、加载状态、禁用状态。

正常状态(Normal):是组件最常规的状态,也是设计师首先设计的状态,表示这是用户可以交互的元素。

聚焦状态(Focus):多用在电脑端中,表示元素已被选中。比如在填写表单时,点击键盘上的 tab 键,电脑的光标会切换到下一栏,下一栏的输入框出现聚焦状态。

悬停状态(Hover):当鼠标悬停在元素上时,元素会有状态的上的变化。另外,在移动端和 Pad 端上的组件不需要悬停状态。

激活状态 (Active):点击组件时,组件的颜色会变深,同时还会出现内阴影等效果。

加载状态(Loading):表示当前数据仍在加载中,需要等待。

禁用状态(Disabled):组件置灰状态,告知用户当前条件不满足,无法使用。

一看就懂!组件设计的 3 大类型+5 种属性科普

  1. 语境

组件的用法跟随场景或环境会发生变化。即使是同一个的组件,在不同的使用场景中也可以有不同的使用方法。

所有的设计元素都是相对的,它们会根据组件的排版位置、一起使用的其他组件元素以及用户的使用目的等来定义组件的用途。

固定/可变:定义大小是可变还是固定。

窄/宽:根据空间的宽度定义用途。

层级结构:即使是相同的功能也需要根据层级结构定义组件的用法。

浮动:定义组件是基于可访问性浮动还是基于滚动移动。

一看就懂!组件设计的 3 大类型+5 种属性科普

组件的三种类型
组件的类型大致可以分为三类:导航类(用于导航信息的组件)、输入类(用户输入信息时使用的组件)、信息类(用于向用户传递信息的组件)。

一看就懂!组件设计的 3 大类型+5 种属性科普

  1. 导航类组件

作为导航提示或者展示信的组件,包括卡片、列表、网格、轮播、选项卡、菜单栏等组件。

卡片:容纳信息最常见的方式。

列表:用于对同一属性的信息进行排序,以便于识别。

网格列表:用于在两列中显示卡片或信息单元。

轮播:用于水平滚动而不是垂直滚动。

选项卡:用于显示具有不同类型的信息。

菜单:用于显示难以用选项卡显示的大量复杂层次结构。

一看就懂!组件设计的 3 大类型+5 种属性科普

  1. 输入类组件

用于输入信息或做出选择的组件。现在很多组件库中的输入类组件形状都很相似,这样设计的原因是考虑到用户的使用习惯,避免使用让用户感到陌生的组件。

复选框:当选择多个元素时使用

单选按钮:当只能选择几个元素中的一个时使用

文本字段:当用户输入文本信息时使用

下拉菜单:打开菜单查看各种信息时使用

按钮:用于在各种场景下输入有关用户决策的信息

切换开关:用于打开/关闭特定状态

一看就懂!组件设计的 3 大类型+5 种属性科普

  1. 信息类组件

用来传递信息的组件,根据要输入的信息类型来传达用户的选择。常用的信息类组件包括:

指导文字:用于提供指导信息。

工具提示:用于展示文字无法传达的内容。

吐司提示:轻量级的提示,在提示过后通常会自动消失。

警告:用来向用户传达需要清楚了解的重要信息。

弹窗:向用户传达需要做出选择的内容。

用户引导:用于传达用户不熟悉的页面内容。

一看就懂!组件设计的 3 大类型+5 种属性科普

最后
以上就是组件的属性和类型的解析,希望通过这些内容能帮助你对组件有更多的认识和思考。

「组件系列」的其他文章,近期也会不断更新,欢迎大家关注

前言
公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量,言动于心, 心动于身”。笔者相信,在谈正事时,大家应该都很反感说话总是拖泥带水又模棱两可的人,因为在听一大堆废话后、你还不知道对方到底要表达什么,甚至有可能在理解错误的情况下产生误导。

在互联网产品设计中,语言本身就是一种界面、一种架构,是链接用户与产品的桥梁,在交互过程中能帮助用户更好地理解产品、如何跟产品沟通顺畅。更有甚者,一个产品语言表达方式的好坏,在用户眼中就代表着这个产品是否友好、好用,所以,有时候简短的几个字就能决定着用户的去留,而这些通过给用户传达信息的语言,我们就将它称之为微文案。

作为设计师,大多都会将自己的专注力集中在了视觉和交互上,潜意识的认为文案只是产品、运营者的工作,殊不知作为经常都在研究用户、跟用户打交道的人,在一些细节上会比产品更懂用户,相比美观的视觉设计,精致、简短文案的引导,则更加清晰、直接。

微文案对产品和用户都有着巨大的影响,清晰、准确、友好、一致的文案设计不仅能为产品带来好的体验,还能拉近用户与产品的距离,甚至可以当做改良用户体验和吸引用户的工具,因此文案设计就显得非常重要。下面,笔者就和大家简单地聊一聊那些在设计中看似不起眼的微文案设计。

了解微文案
Joshua Porter 在 2009 年诊断过一个电子商务网站,用户在该网站购买流程中填写表单时,有 5%-10%的用户因地址填写错误而终止交易流程,导致用户流失。于是,Porter 提出在地址栏旁增加“请务必输入与您的信用卡关联的地址”的文本提示,后来他在自己的文章中说道“就这样,错误消失了”。这种做法不仅节省了用户时间,还改善了网站的转化率、提高收入。

Porter 最终得出的结论是“在正确的位置、正确的时间、添加正确的引导性文案,就可以完全改变用户体验”,并把这类文案命名为“Microcopy”。

  1. 微文案的定义

微文案(Microcopy)指的是在界面中,能够引导、帮助用户与界面交互行为的简短文案,可以是一个单词、也可以是一句话,常见的有表单文案、按钮文案、弹窗文案、错误提示等,大部分微文案都会对用户的行为产生直接的影响,如下所示:

4500字干货!写给设计师的微文案设计指南

交互前-引导用户去完成某个行为

交互中-鼓励、帮助用户去完成某个行为

交互后-及时给予用户行为之后的反馈(问题和解决方案)

  1. 微文案被重视的原因

用户在与产品交流时,微文案作为最接近于用户与产品交互的位置,它可以帮助用户预测问题的发生、并鼓励用户进行下一步操作,提前预判操作过程中可能碰到的问题并提供解决方案,在很大程度上降低用户跳出率。

好的微文案可以清晰的表达出症结所在,消除用户疑虑,让其更快作出抉择,从而为产品带来收益。另外,在情感化方面,微文案的语气态度影响着用户的情绪,用户随时会在当前心情好坏的驱使下决定是否在这个流程中继续走下去。有很多产品在进行体验上的优化时,微文案就是其中的一大版块。

4500字干货!写给设计师的微文案设计指南

我们都知道,在这个互联网时代,个人信息早就不是什么秘密,但还是会遵循能不提供就不提供、能不注册就尽量不去注册的这一原则。用户体验专家 Jared M. Spool 就利用人们的这一心理在界面增加一段微文案创造了 3 亿美元的利益,基于用户在购物前不愿意提供太多个人信息,Jared M. Spool 在购物页面上写道「您无需注册即可在我们的网站进行购买,只需要点击继续按钮。为了方便您在网站的后续购买,您可以在完成付款流程后创建一个账号。」结果购买的客户数量增加了 45%;另外,Maggie Stanphill 在曾经对谷歌的一个旅店预定广告中将微文案「预定房间」改为「查看可用房间」,其点击率增加了 17%,结果是显而易见的。

  1. 微文案专业岗位的出现

在国外,如谷歌这样这样的大型公司,对微文案设计非常重视,为了更好进行品牌文化传播以及给用户创造更好的使用体验,会有对应职位的「UX Writer」人员对微文案进行把关。

相比国内,虽然微文案岗位还处在一个比较尴尬的位置,但对微文案的重视程度明显在快速上升。

微文案设计的基本原则

  1. 去开发化

首先,微文案需要简单直白,让用户一眼就能看懂,要规避掉开发语言(如 404、505、错代码 xxx 之类的描述)、双重否定等用户不易懂的文案,避免用户在操作前总是要去思考、陷入不知所措的境地,用户需要明确的知道当前发生了什么,以决定接下来的行为。

4500字干货!写给设计师的微文案设计指南

其次,避免模棱两可的文案,需要将发生的问题、行为指引等,清晰的表述出来,需要注意的是清晰表述并不是要长篇大论,能用词语表达的就绝不用句子、能用一句话标明就绝不多加半句,用户没有耐心来看你写小说。很多时候,用户在完成任务的过程中总是被很多「下一步」搞得一头雾水,用几个个字的简短描述来代替「下一步」需要完成的任务不是更好吗?当然刻意制造惊喜或氛围的除外,前提是你的惊喜真的能给用户或产品带来价值。

  1. 委婉+鼓励

回想一下我们小时候做家务的情景,当父母用命令的语气对我们说“赶紧去扫地,等会我来检查”或者“我这会有些忙,你去帮忙把地打扫一下,扫的干净有奖励哦”,虽然都是不可抗拒事情,但很明显第一种方式是极不情愿的接受,做起事来可能是为了应付,以后会尽量找理由不去做;第二种语气则接受程度更高,还具备一定的吸引力。微文案也是如此,友好的表达方式会显得有诚意,用户更易于接受。

4500字干货!写给设计师的微文案设计指南

  1. 应时应景

在一些特殊的场景下,微文案能起到安抚用户情绪、引导用户选择后续行为的作用。例如空状态/缺省页,可清楚的告知用户发生了什么问题以及解决方案,再通过按钮(按钮文案上述有说明)加以引导;在支付过程中,出现余额不足时,应明确提示金额还差多少、以及在附近提供便捷的充值入口;当用户有多张优惠券,下单时却无法选择使用,则需要将使用条件在原有文案的基础上强化、突出显示。

4500字干货!写给设计师的微文案设计指南

常见所处位置

  1. 按钮

按钮微文案的好坏对产品、用户来说是至关重要的,尤其是「行为召唤按钮」。产品历经千辛万苦将用户带到转化(开通 VIP、下单、支付、登录)页面,就差按下这个按钮,如果因为文案的不清晰让用户有疑惑、增加了操作、理解、时间成本,或对用户产生误导,极有可能让用户从这里溜走,得不偿失,请记住。不管前面付出了多少努力,在用户按下决定转化的关键按钮前,都不算成功。

按钮是引导用户按下的关键因素,如果想要通过按钮为产品提高一定的转化率,那么你的按钮就需要一个优秀的微文案。通过下图中按钮微文案的左右对比,你更倾向于哪一种呢?

4500字干货!写给设计师的微文案设计指南

  1. 表单

在表单页面,作为方向指引,标签只是一个清晰明确的简短文案,真正能给予用户更多帮助的是占位符,它能准确的提醒用户输入区域的交互位置,所以就成了每个表单项的必备元素,但就是因为这点,很多设计师站在必备的基础上,为了占位而占位,让占位符失去了本该发挥的作用,毫无价值。

下图是淘宝新增地址的表单页面,左侧的占位符直接重复标签内容,没人说这种搞法是错误的,但右侧描述了应输入内容的说明、规则、注意事项等,明显降低完成表单内容的难度。设计师可能没有感觉,怎么看都能看懂,但有没有想过填写这个表单的用户根本不是互联网人群,只是第一次想在网上买个东西而已。

4500字干货!写给设计师的微文案设计指南

道理大家都懂,说起来大家都会,但如果你真的玩了很多APP就会发现,除了那些大厂的产品设计之外,见过最多的不就是左侧的这种表达方式吗?

  1. 错误/温馨提示

提示,并不仅仅是告知用户问题所在,而是需要在用户操作之前就给出温馨提示(如注销账号);出现问题后自动定位到具体位置并提供解决方案(如填写表单),如果实在无法解决,尽可能的提供备用方案或求助渠道,尽可能的降低用户损失(如误删某数据);操作即将完成或完成之后给予用户鼓励(如就差一点、太棒了)。

4500字干货!写给设计师的微文案设计指南

  1. 缺省/空状态

空状态是产品中必然存在的一种状态,不管是用户初次使用还是系统出错,都可能给用户带来焦虑、挫败或疑惑的负面情绪。

优秀的微文案能达到安抚用户糟糕情绪、取悦用户的作用,从而弥补空白页面带来的失落,然后配合按钮中引导性的微文案帮助用户去消灭空白状态,避免下次出现同样的情况(部分特定的空状态只需安抚用户即可,无需/无法进行引导)。

4500字干货!写给设计师的微文案设计指南

微文案设计方向及思路

  1. 清晰易懂

应使用用户熟悉的语言,尽量让微文案清晰明了、易于理解,避免使用一些专业术语和网络名词。如果不是写“小说”,就不要长篇大论,浓缩才是精华,没有必要在一个位置反复强调同样的内容,需要做的是精简语句,减轻用户的理解负担,降低时间成本。切记,产品每多一点使用成本就可能流失掉一批用户。

4500字干货!写给设计师的微文案设计指南

  1. 统一性表达

对同一类型事务/事件的微文案,其语法、语种都需要保持统一性的表达,避免因用词偏差增加用户认知负担。频繁出现的词汇如新增/新建、您/你、确定/是否…等,即便不影响用户理解,也需要在无歧义的情况下选择其中一种表达方式始终保持一致。

4500字干货!写给设计师的微文案设计指南

  1. 尊重用户

微文案需要永远站在用户角度考虑,不要使用命令和强迫的语气,多给予用户理解与包容、并加以支持与鼓励,让其感受到产品足够的友好、尊重。即便需用户自行承担相应的责任,文案也要克制谦逊,利用相对(万事没有绝对)的语气将出现问题的原因和结果反馈给用户,如果可能的话,尽量提供补救措施,将用户的损失降到最低后,利用微文案对用户情绪进行安抚。

4500字干货!写给设计师的微文案设计指南

  1. 「您」和「你」的区别

「您」-正式且过于认真、严肃,刻意强调对用户的尊敬,感觉时刻保持着距离,少了一份亲切感;

「你」-距离更近,有种打成一片的感觉,试想一下,如果你跟朋友之间总是过于尊敬、客客气气,很可能会缺少一种默契,至少不会去交心。产品也是一样,在交互过程中与用户扮演的就是「你」和「我」的角色,为了拉近与用户之间距离,不妨多使用「你」「我」跟用户进行交流,会更亲切。

4500字干货!写给设计师的微文案设计指南

  1. 两相矛盾的微文案

将两相矛盾的文案融合在一起,看似具有强烈的冲突性,却是一种因果关系。这种方式在营销文案中很常见,当用户害怕失去时,产品顺势给用户一种失去后的打击,文案就起到了“激将”的作用,然后再给予合适的引导,用户转化率很可能得到大幅度的提升。

4500字干货!写给设计师的微文案设计指南

  1. 不要拒绝用户

不要拒绝你的用户,切记要避开如“不要、不能、不可以…”等负面的词汇,一开始就摆出一副拒人于千里之外的姿态,用户凭什么要惯着你的产品。多使用正向且具有引导性的文案,协助用户解决当前的尴尬处境,就算用户迫不得已离开,至少没有留下不好的印象,或许下次还有机会。

4500字干货!写给设计师的微文案设计指南

  1. 省略不必要的标点符号

一句话或一个词就能说清楚的内容,可省略掉不必要的标点符号,例如标签、标题、小提示…等。另外,在部分弹窗中有两段语句的折行文案,去掉标点会显得更干净。

4500字干货!写给设计师的微文案设计指南

结语
很多初中级设计师认为,文案不属于设计的工作范畴,殊不知文案也和图形一样,都是引导用户的重要元素,在某些场景中,文案更能直击用户内心,起着不可替代的作用。好的微文案能为产品助力,让用户在完成任务的过程中不会迷路,甚至在关键环成为用户在黑暗中的一盏明灯,确保每一步都给用户带来更加顺畅、愉悦的产品体验。

以上是笔者对微文案的理解,不足之处敬请谅解,欢迎大家一起探讨,一起学习、取长补短。

直播长久以来一直是互联网行业最快速且强大的变现方式,在中国,直播行业起源于 2005 年,爆发于 2016 年,迄今为止尚不足 20 年,但期间已经经历语音到视频、多人交友转向个人秀场、PC 端到移动端 、网红秀场转向垂直精细化的生活领域等多个重大转变。

目前网上有的对直播的分析,要不然过于宏观地讨论整体行业状况,要不然过于片面地介绍本品功能,实属王婆卖瓜自卖自夸,极少有文章深入地、横向地从体验层面去聊这些问题:

如今我们看到的直播间为何是现在的模样?
是什么影响了我们的直播体验?
直播设计的发展是体验设计适应新兴技术与新兴需求场景的一个缩影,本期我们将从交互的角度,将直播起源与发展总结为 4 个阶段,从每个阶段都选取数款代表产品,深入分析其布局特征,带大家领略一下直播间的发展历史、浅谈一下直播在中国发展的这 17 年。

直播起源
中国直播行业起源于 2005 年,当时网络游戏盛行,CS、魔兽世界、红色警戒、大话西游等大型综合游戏霸占着网民们的娱乐生活,因游戏需要团队配合,互动的及时性非常重要,而传统的文字交流会影响到手指操作效率,进而影响游戏体验,所以用语音软件“开黑”便受到广大游戏玩家的追捧。这时一个语音交流平台应运而生:UT(UC talk)。UT 是新浪网推出的一款主要面对游戏玩家的即时语音通信产品,凭借着强大的语音通讯功能和最早进入市场的巨大优势,迅速在游戏玩家市场崛起并广受追捧,当年 WOW 的工会上流传着一句话“不能上 UT 的不要入会”,也从侧面反映了 UT 的“江湖地位”。

玩家在 UT 上通过创建频道、加入频道来实现局内即时语音交流。同时 UT 也支持添加好友、在频道内使用文字、表情进行沟通。

直播间怎么设计?细聊直播交互的17年发展史

观察 UT 早年的界面,可以发现 UT 受当时盛行的文字通讯软件 QQ、MSN 影响颇深。产品虽打着“即时语音通讯”的称号,界面上却将大幅面积仍旧用于支持文字通讯功能。

直播间怎么设计?细聊直播交互的17年发展史

我们把早期 QQ、UT 与近年来常见的即时语音通讯工具的交互框架拉出对比,可以很容易发现这十几年来即时语音通讯工具的进步:

现在的即时语音通讯工具将界面内大面积服务于语音通讯,及时展示当前发言人和在线语音用户的发言状态
文字与表情通讯则作为辅助工作在角落中呈现
无文字发言则不出现
虽然调整音量与麦克风虽看似语音通讯的重要能力,但由于其为一次性操作,因而在如今的语音通讯页面中也不会直接平铺大面积呈现
直播间怎么设计?细聊直播交互的17年发展史

除 UT 外,03 到 08 年也诞生了许多其他语音平台,如聊聊、久聊、IS、爱聊、盛大 ET,如今仍是直播界扛把子之一的 YY 也是在这个时代出现的。语音平台的出现,让游戏更有社交性。久而久之,玩家也不再满足于单纯的开黑打游戏,平台内开始催生出许多娱乐玩法。同时,随着网络技术的进步,实时视频技术也得到了实现,人们不再满足于语音社交,互联网开始进入视频时代。

直播诞生
一开始,转型即时视频通讯的语音平台们还只是简单地在频道里增加视频区域,喜欢社交和表现自己的用户开启摄像头主持、聊天、唱歌,直到 9158 的出现。

直播间怎么设计?细聊直播交互的17年发展史

2005 年,9158 的创始人模仿韩国在线交友的“十人房”模式,一上线就将产品定位为“秀场”。9158 的名称也是取自“就约我吧”的谐音。所谓“秀场”,就是将个人秀搬网上,培养一批“主播”,他们通过视频的方式在互联网上展示自己的才艺,观众可以与主播进行互动,并花钱购买礼物对主播的表演进行“打赏”。

9158 是最早将美女、异性交友等字眼带入互联用户视线中的线上聊天室,是直播行业最早的形态,多以聊天室和 K 歌为主。因其模式新颖加上内容多数打着“擦边球”,吸引了大量用户持续消费,赚得盆满钵满,9158 甚至在 2014 年抢先一步比当时同在杭州的阿里更早上市。在 9158 叱咤互联网的 2008 年,以“成为中国的 youtube”为愿景的视频门户网站六房间在金融危机的重创下无奈开始转型,同样在 2009 年推出“秀场”的产品,与 9158 模式相同,一大批擅长才艺的年轻主播在六房间展示自己,与粉丝互动,通过粉丝赠送虚拟物品如鲜花、跑车、飞机等获得盈利。

而几乎是同一时间,获得了 IDG 融资的 9158 不知是因为资本的介入,还是为了解决长尾效应,从“秀场”的定位变成了“在线 KTV/聊天室”,从明星表演模式变成了房间内用户排队轮流上场表演娱乐。转型后的 9158 从此不必再去担心当家女主播被同竞争对手挖走后带走一批高 ARPU 值的用户。

直播间怎么设计?细聊直播交互的17年发展史

虽没有找到 9158 初始秀场的界面截图,但从六房间后续转型的秀场与 9158 在线 KTV 的功能截图中也能看出现在直播间的影子,例如当时的秀场框架上就已包含房间名称/直播昵称、视频内容区、聊天/送礼互动区、观众列表。这基本已经构成了当今所有直播间的要素,后续几年的直播发展都是在这样的直播间框架上进行更细致垂直的功能升级。

直播间怎么设计?细聊直播交互的17年发展史

当六间房已经在做直播的概念时,9158 依然按照房间的概念来运营。直播的好处是能容纳更多的人数,可以做到上万人在线,9158 相对六间房,略显封闭。因为每个房间的人数会有控制,也有上限。

虽然 9158 在转型前后的概念上都还是多人视频社交房间,但直播间该有的产品能力一个不落:

既有礼物区,也有大型道具跑道,可视为现如今礼物托盘和礼物特效的起源
用户列表对应如今直播间的在线观众
排麦、点歌、调音、文字输入等操作对应如今直播间的操作互动区
公共聊天记录对应如今直播间的评论互动区
当然也有一些从传统文字社交聊天室承袭下来与直播“水土不服”的个人聊天记录,已经在历史迭代中销声匿迹。
无论是六间房的秀场,还是 9158 的在线 KTV,虽然当时已经主打即时视频能力,但还是将大面积给了房间内观众的公共互动区,除了受“多人社交”定位的影响外,也和当时流行的产品理念有关。

当时业内盛行非付费用户数量多少会影响付费用户的付费意愿之说,因此产品会期望通过放大公共聊天区,做好普通用户的互动体验,吸引并促活更多非付费用户,以此让付费用户消费更有成就感,更愿意消费,转化更多付费用户。

在 9158 与六间房均实现转型的那一年,YY 才刚在广州成立,直到 2011 年,YY 才开始涉足直播行业,但由于其雄厚的语音技术能力,很快在直播行业发展起来,与 9158、六方间一起并称当时直播行业的三巨头。

YY 直播时期,PC 端直播间开始将主播画面作为直播间内最重要的内容去重新构建交互框架,主播生产的即时视频内容作为最重要的元素在直播间中间大面积展示,左侧为观众列表,右侧为评论互动区,对比一下现在的 PC 或平板版本的直播间,对信息的重要性排序基本没有大改动,只是对观众列表和评论互动做了更极致的精简和收起。

直播间怎么设计?细聊直播交互的17年发展史

“秀场”这块巨大的蛋糕很快就被资本市场相中了,秀场的蛋糕随着资本的介入被疯狂瓜分。

2012 年-2014 年,酷狗繁星、酷我秀场、56 秀、网易 BOBO、炫舞、优酷来疯、爱奇艺奇秀等直播产品也迅速加入秀场的直播战局。同时,直播龙珠、熊猫 TV 也迅速进入游戏直播市场意图瓜分游戏直播版图。

又因为主播是直播内容的核心,有很强的头部效应,各平台在争夺主播的过程中使得这份职业的薪资水涨船高。这段期间,PC 端直播需要面对竞争对手持续入局和耗费巨资抢占头部主播两大难题,竞争激烈至白热化。正当大家以为 PC 直播还有一场漫长的较量时,智能手机的普及和 4G 网络把直播的战场从 PC 端拉到了移动端。

千播大战
移动端的时代,直播门槛迅速又降低了一个台阶,原本至少需要一台电脑、麦克风、摄像头和一个适合且稳定的环境才能开启的直播,现在只要一只手机就能轻松实现。直播门槛的降低与资本的介入,迅速推动了直播行业的发展,一大批直播 app 如雨后春笋一般出现,被媒体渲染为千播大战。

直播间怎么设计?细聊直播交互的17年发展史

起初,移动端直播间内只有直播画面、弹幕/评论区和在线观众,值得一提的是,转移到移动端战场后,直播间多了「分享」,甚至「分享」高优于营收向的「送礼」更早出现在移动端直播间,猜测除了想在新战场迅速抢占市场份额外,还可能有以下几方面原因:

  1. PC 端习惯通过复制分享(复制网址、复制频道号,即使是现在 pc 端也习惯复制 qq 号而不像微信直接分享名片),而移动端没有复制网址一说,展示直播间号+复制,让被分享人再粘贴搜索,效率远不如单纯的「分享」高
  2. 战场转移到移动端后,因为手机随身携带,用户之间的线上关系比原本在 PC 端时更紧密,所以通过关系链获取用户比在 PC 端时更方便快捷(这或许也是分享裂变之说在移动端时代才大行其道的原因)
  3. PC 时代用户对内容的获取更多依赖主动行为(用搜索引擎搜索关键字),主动搜索已经能够获取大部分信息,转移到移动端后,由于或技术或竞争关系导致 app 之间有信息壁垒,用户无法靠搜索跨 app 获取信息,需要靠用户自发的人工搬运。

此后的一段时间内,移动端直播间都是在“搬运”PC 端直播间的产品能力,如送礼、K 歌、美颜…当时移动端的交互尚在探索阶段,手机屏幕也没有现在这么大又长,因此右下角的操作黄金区还没有在业内达成共识,可以看出最开始底部的互动操作并没有很符合现在直播间的排布习惯,有些直播间甚至会把关闭放在右下角,而现在的直播间右下角基本都是送礼、点赞等一些强用户需求或强产品策略的操作。

直播间怎么设计?细聊直播交互的17年发展史

在其他 app 都适应手机开播而将直播画面占满手机屏幕、操作置于画面底部时,YY 及其专门负责游戏直播业务的虎牙直播却采用了完全不一样的直播间布局。虎牙直播因其专攻游戏直播的定位,独有直播画面多为横视频的特点,横视频适配竖屏幕时,会有较大的留白,这些留白区域正好可以用来填充原本在 PC 端就外露展示的一些功能(评论等)。虎牙直播、熊猫 TV 等游戏直播 app 和“秀场”直播 app 在搬运 PC 端直播到移动端时采用的方法正好是我们在日常需求中遇到首屏位置不够的两种常用处理思路:收起做入口和分 tab。

直播间怎么设计?细聊直播交互的17年发展史

除了搬运 PC 端能力外,移动端直播间也发展出了一些 PC 端没有的功能:

由移动端特性衍生出的功能:例如因为直播间内功能越来越多,UI 和动效都越来越多且杂,为了不影响直播内容消费,移动端直播间比 PC 端多了清屏功能。

PC 复古功能:如语音直播、语音聊天室、多人连麦,又由多人连麦发展出了帮助直播营收更上一层楼的直播 PK。

礼物方面,结合在线观众围绕金主权益持续优化“榜一大哥”的看播体验,规划礼物价格梯队,对礼物托盘和礼物特效做规范。还有一些“时代的眼泪”,如频道直播间,现在已经鲜少看到这个能力了。

直播间怎么设计?细聊直播交互的17年发展史

由于直播盛行,且市场在朝“钱”发展的路上缺少国家和平台的监管,导致直播乱象丛生,长时间被冠以“低俗”的标签。国家网信办于 2016 年 11 月公布《互联网直播服务管理规定》,对直播平台资质、主播实名、内容审核等方面做了详尽的规定,又于 17 年 4 月下架了 18 款直播类应用。加上苹果强行收取 30%过路费,BAT 也开始入场直播领域,许多小平台因分不到流量、自身能力不足而被迫离开直播市场。千播大战最终以少数几家取得直播双许可证的 YY、虎牙、映客笑到最后告终,直播市场陷入一片惨淡。

但是,在被称为中国直播元年的 2016 年,有几个种子悄悄地埋下了,不仅给几年后的直播行业带来了新东风,也改变了未来互联网的趋势:2016 年 9 月,一个叫 A.me 的 app 诞生了,三个月后改名为:抖音短视频;淘宝也在这一年开通了直播,某知名带货女主播成为平台首批主播。

直播融入生活,多领域精细化发展
虽然直播行业经历过众神打架的“千播大战”,连续几年处于互联网浪潮的浪尖上,但一直以来都只囿于“秀场”形式的才艺展示和电竞,并未深入到每个人的日常生活之中,长期无法破圈,直到电商直播的出现。

最早做电商直播的并不是淘宝,而是蘑菇街这类导购平台。蘑菇街在当时作为最火的电商导购平台之一,每年能从淘宝拿到巨额佣金。淘宝决定不再扶持导购平台后,蘑菇街不得不转型走上自建电商的道路,在淘宝京东这样的巨头中夹缝求生的它抢先看中了直播,第一个把直播引入了电商。

直播间怎么设计?细聊直播交互的17年发展史

蘑菇街从入场直播领域到完成电商直播间建设(在直播间内提供完整的消费链路)仅仅用了 2 个月的时间。此后的电商直播间也再没有较大的改动了,大多用红或橙黄的购物袋和购物车代表商品列表入口,购物入口会在直播间内作为第一优先级的操作做动效强化,因为电商直播不需要依赖送礼盈利,且礼物特效会干扰商品的展示,有些专攻电商直播的平台甚至已经不在直播间内显示送礼入口,与传统秀场直播形态分道扬镳。

19 年,李佳琦魔性洗脑的口头禅“OMG,买它!”突然爆火,因为这句 2019 最火流行语,李佳琦带领电商直播实现破圈,之前对直播了解仅限于“秀场”的人们这才发现直播的“新形式”。紧接着负债 6 亿元的罗永浩在抖音开启了自己的带货首秀,3 小时带货 1.1 亿元,让大家重新认识了直播在送礼体系之外的收益点。2020 年,在疫情影响下,直播带货、线上教育与线上会议全面爆火,直播行业迎来了新一阵东风。

此外,2018-2019 年,抖音的爆火彻底改变了移动端用户的使用习惯。从 PC 端到移动端,互联网从业者们的设计思路一直都遵循“先推荐再消费”,而抖音激进地采用了“先消费再推荐”的思路,并取得了出色的成绩,从此互联网产品们纷纷踏上了“先消费再推荐”的设计之路。另一个改变用户习惯的设计是沉浸式无限流,抖音之前互联网产品的设计思路都是进入一个空间(可以理解为页面、直播间、具体功能流程),不符合预期就返回,再从上一级选择另一个空间进入,再返回,再选择…如此反复,抖音教育了用户用简单的下滑手势从一个空间迅速切换到下一个空间,无需经过任何中间页。当然这样的设计是非常大胆的,如果推荐不可靠很容易流失用户。

直播间怎么设计?细聊直播交互的17年发展史

为什么“先消费再推荐”能取得市场及用户的认可?理解起来也不难,早期 PC 端依赖搜索时,我们可以理解为需要用户做填空题,用户需要先思考自己想要的“关键字”,再填入搜索框,最后获取需要的内容。

后来到了移动端,每个 app 都有一个固定的推荐首页,用户从做填空题变成了做选择题,从平台给的 ABCD 选项中选择自己更喜欢的消费内容。

而“先消费再推荐”则是从选择题变成了对错题,我要,就留下来,不要就刷走。从填空题到选择题到对错题,一步步地帮用户减少了思考成本。手势交互也并不是 18、19 年才出现,早在智能手机普及的时候手势交互就被反复研究,只是多数产品急于从新功能中获取“数据收益”,不敢也不愿意教育用户使用更先进却更隐晦的交互方式。不得不佩服抖音对于“创新”的思路和胆魄。

这两个使用习惯的改变对直播间交互的影响几乎是全行业统一的,现在几乎所有的直播间都可以通过下滑直接切换直播间(除了虎牙直播因为搬运功能时使用了 tab 而非入口,导致 tab 内滑动操作与直播间下滑互斥而无法实现),还有很大一部分平台也选择了进入即消费且在右上方提供更多直播选择的交互形式。

直播间怎么设计?细聊直播交互的17年发展史

除了电商直播这个超级风口,前几年因为在线教育的兴起,也有很多人投入了知识教育直播板块,付费直播教学也成为了直播重点垂直领域之一。如今人们早已对直播脱去了“低俗”的标签,也接受直播融入我们日常购物、教育、音乐、交友、追星…等生活诉求之中,甚至官媒也会在直播平台进行新闻报道了。直播已经做到了融入人们的日常生活,人人皆看直播,人人皆可直播。未来,直播还会覆盖到更多行业,也会越来越精细化、规范化。

今天关于直播的分享就到这里,对于直播你有什么看法或见解?欢迎留言一起探讨