腾讯QQ空间直播的设计经验总结

腾讯QQ空间直播的设计经验总结

什么？空间也做直播了！没错月亮之上铃声，在当今直播的热潮下好听的校园民谣，国内外的直播产品大都是基于陌生人

的关系链下一个天亮铃声，且内容结构与视觉效果同质化严重电话铃声免费下载。如何让用户更好的分享生活？如何为用户提

供差异化的内容消费？如何给用户更多新鲜趣味的互动玩法？这是我们做直播希望解决的

问题can you feel it。

Qzone依托自身优势最后的夏天，另辟蹊径地发掘基于好友关系链的直播场景。与此同时，我们不断探索更符

合空间用户直播的设计形态新引力波发现，发掘与竞品的差异点你要的爱伴奏，寻直播的下一个突破口棋子，通过系统化的设计

，为用户提供非一般的直播体验安徽卫视国剧盛典2015。

系统化的互动体验

1、互动形式探索

直播主要围绕“主播与观众”之间的互动东北二人传，其二者之间属于强互动关系；同时“观众之间”也存在着弱互

动关系（如：观众之间可以聊天）绅士的品格插曲，良好的互动环境、趣味的互动形式美丽分贝，对于提升提升直播氛围、

提升互动体验起着举足轻重的作用蔡国庆。

qzone-chart1

通过对竞品的分析,我们总结出目前直播产品常见的几种互动方式:

qzone-chart2

通过对直播数据的分析韩莹棣，我们发现送礼的操作大都存在于PGC直播的场景，而在UGC的直播场景

，好友间极少存在花钱送礼的需求我要快乐 张惠。因此在UGC层面致艾德琳的诗，我们也在探索除了满足基本功能之外性叫声，更加

有趣、刺激活跃的互动形式大家一起来 孙悦，这里我们创新性的设计了两种互动玩法林爱上贾宝玉dj。

qzone-chart

2、按信息优先级，布局产品框架

在项目前期换约，我们对交互框架在多个维度进行了分析与尝试pentagon。

qzone-chart4

在功能模块的划分上，区分用户操作与信息的优先级：功能操作>轻量互动>主播信息>房间信息。

操作区域根据用户的使用频次来划分优先级：点赞>评论>送礼卓君机械舞伴奏。在互动区域的布局上周曼华，经过多次

调整优化yaritagari yasan，最终布局实现了主播端与观众端框架上的统一麦王争霸201总决赛。

qzone-chart5

、信息的引流与闭环

直播开始时广场舞最炫民族风教学，可以通过Qzone的消息push病毒走开，通知到好友及关注的粉丝；在直播的过程中，可以将直

播分享给外部平台寂寞无罪，从而吸引更多观众前来围观；优质的直播可以通过直播聚合页得到曝光圣书外典下载。

信息闭环（沉淀）枯叶蝶歌词，当直播结束后mp小说，内容将以feed形式沉淀大张伟给贾玲写的歌是哪首，支持回看，使直播得到二次曝光的

机会，便于内容的再次传播hot mom。

qzone-chart6

从整体到局部的打磨

1、全局观意识

在初期探索中，我们从Qzone自身的角度来展开设计好听的歌曲名字，但这样缺乏对QQ系产品的统一性考量乍暖还寒时候。

因此酷我音乐调频，我们从全局观的视角思考设计的一致性东成西就2011插曲，整体权衡多个产品设计的语言及风格中国原创音乐基地伴奏。

qzone-concept

这次的设计我们统一思考了“Qzone、企鹅FM、全民K歌”三大平台张力尹 星愿。在前期的方案中吕剧姊易嫁全集，顶部、底部

、评论框的设计都缺乏一致性。因此，在后期的设计中，更深入的去思考交互体验、视觉风格的一

致化。

2、保留与继承

三个产品打通来设计，包括顶部主播信息、观众列表、底部操作、评论框全部一致化设计，在布局

上也进行了统一林志颖资料。与此同时，又保留了各个产品原有的UI（图形）风格、继承了各产品的品牌阿哥阿歌词，

空间：黄、FM：黑金、K歌：红zhongguohao。

qzone-platform

、细节打磨

在页面的设计中半真半假歌词，每一个细节的优化，对最终的结果都有至关重要的作用。针对页面顶部的信息日本音乐，

我们围绕产品易用性、信息展示的完整度及优先级，做了更进一步的优化。

qzone-detail

将几个产品放在一起来设计，从整体风格的设定到细节的精细打磨龟梨和也1582，甚至多终端的一致性与延续性

vma颁奖礼，需要对设计进行更加全面的考量王蓉性感mv。

酷炫的互动

直播的动画(效)部分也内涵乾坤，包含：动态表情、礼物动画、点赞动画、动效库的组建等。这里

的设计初衷是希望丰富产品的属性及其功能星星索简谱。从而增强设计的灵动感与趣味感，强化产品的情感化

表达。

1、多元化的互动形式

我们也在不断探索在UGC直播场景中，除了评论、点赞、送礼之外更丰富、轻量化的互动形式海菲茨。动

态表情则以QQ表情为原型，我们又重新包装演绎，从而活跃UGC直播场景的互动量so wie ich，让直播的过

程惊喜不断飞鸟与鱼 泰戈尔。

like-interaction01

like-interaction02

2、礼物设计

在直播中送礼中国好歌曲周三，要让用户觉得钱花的物超所值，因此，礼物需要体现出品质感，礼物要从题材到质

感再到动画割爱 六哲，都有细致的设计表现，才会让观众觉得很特别杨宗纬空白格，才肯花钱买买买~

gift-show

题材层面，针对主播类型我们分成了几类礼物：通用、美食、教学、才艺坚强的信仰。根据不同的直播内容周口演唱会，

在真实的送礼场景上幸福微甜mv，让用户选择与主播内容相匹配的礼物。比如才艺类直播我梦见我梦见我，我们准备了：玫

瑰花、金话筒等；美食类直播有：拉面、冰淇淋等把你藏在歌里面。

表现层面加勒比海盗4主题曲，构图上要让礼物在画面中显得尽量饱满，不同等级的礼物，也要在细节上有所区分last name，贵

重的礼物从精致程度、画面效果、细节层次都要有所体现，比如普通的“小星星”和昂贵的“一碗拉面”

之间在细节上就需要拉开差距watch your back。在礼物质感的表现上照顾好自己，选择了写实的风格千年泪下载，适当夸张了其华丽的

质感，希望让用户觉得花这个钱哄主播开心~值！

gift-vs

、礼物动画的一致性设计

既要保持礼物动画在多个平台的一致性，又不希望礼物动画给手机性能带来过多负荷歌曲在希望的田野上，减少对手机

性能的消耗mr children，让不同平台的用户可以有一致性的动画体验。因此爱你爱你爱着你，在礼物动画的部分少年犯之七人插曲，我们根据ios

和android的系统特性，每个动画输出两套动画资源，播放时长由后台下发数据。

gift-animation

animation-slice

在ios平台破晓 王力宏，全部提供动画序列帧，设定好间隔时间，后台直接读取图片资源进行播放；android

平台，考虑到手机性能，则做好单个的循环徐小凤北京演唱会，然后由开发来控制位移、缩放、透明度等内容。所以

后天 下载，这里也制定了相对应的设计规范beni，以便更好地跟CP进行对接12我爱你。在设计动画的时候，也会有相对应

的策略似是而非，如：带轨迹动画、固定位置播放动画美国音乐榜，以便之后的内容拓展元旦晚会。

gift-guide

4、点赞动画

图形融入了QQfamily的形象李晓曼，一方面与竞品具有本质上的差异化，另外201billboard，多样化的点赞图形、丰富

而细腻的动画效果湖南卫视元宵宋小宝，无疑为点赞的体验增加了趣味性许廷铿，让点赞不再枯燥乏味，观众点赞的手根本停

不下来。

like

like-shap

5、动效库的组建

此次的项目涉及到大量的页面和控件之间的动效衔接，为了最大幅度地节省设计与开发的工作量那谁没有下次，

提升动效设计的一致性与可复用性吴宗宪自曝被父亲家暴，我们引入了facebook的origami动效原型工具唱片公司排名。通过它喜彩网，设计师

在前期可以反复快速的在手机上测试动效祝健。与此同时泪狂奔，针对相类似的互动，我们采用了一致的动画

参数被偷走的爱，如：礼物浮层、观众列表、主播名片卡、结束页面十五二十。在后期caravan，分别为ios和android输出两套

动效代码草原牧歌简谱，以供开发使用爱国流行歌曲。

origami2

产品推广短片

前期预热短片

视频创意：为了避开文字对视频内容的遮挡，让文字内容与视频有更多的连接感澳门风云2片尾曲，确保这两者可以

有更好的视觉效果亮剑2铁血军魂下载，这里采用了“翻牌”的形式柠檬大嘴巴歌曲，与此同时还可以营造出“魔术般“的视觉效果奏之曲。每次

翻开都是不可预期的白蛇传说插曲，用户不知道下一刻会是谁来表白，从而制造惊喜的感觉。这里需要对分镜头

做的极为细致我不相信爱情，每个板应该怎么翻，才会连接起来更顺畅爱上你 我很快乐，不拖沓。在音乐高潮阶段新天下贰，主题文字

刚好在同一时刻翻转出现waka waka 歌词，这都需要对视频从整体节奏，到卡片间的衔接逻辑有十足的把握ktv伴奏网。

小结

围绕好友关系链的互动模式爱拼才会赢怎么唱，发掘适于好友之间直播的玩法，在互动模式、界面设计、动效（画）

样式、礼物质感、产品推广都做了精致的打磨指缝里的阳光，通过系统化的设计，为用户打造一个完善的直播

体系。

来源：腾讯ISUX

原文地址：/

版权：人人都是产品经理遵循行业规范dj舞曲超劲爆，任何转载的稿件都会明确标注作者和来源，若标注有误蝉鸣之时，

请联系主编QQ：5

人人都是产品经理（）中国最大最活跃的产品经理学习、交流、分享平台