• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 全民K歌歌房是如何设计出来的?让腾讯的体验设计师告诉你

全民K歌歌房是如何设计出来的?让腾讯的体验设计师告诉你

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含实战案例,经验分享,设计实战等相关知识,希望在学习及工作中可以帮助到您

最近,全民K歌迎来了它的三周年庆,三年里,全民K歌一步步走来,承载了太多人的回忆和故事,用心的用户每年周年庆都会有一个定制MV送给全民K歌,作为这个产品最早期的设计师之一,常常感觉非常骄傲和幸运。

这篇文章,想通过最近完成的歌房项目,复盘整个K歌的设计历程,也作为一个回顾和小结。

关于设计

在我的理解,设计分三个层次,界面设计-体验设计-生活方式设计。

界面设计是最基础的功能布局、逻辑跳转,而体验设计是关于用户更立体的需求、动机、行为;生活方式设计则是需要在体验设计基础上,于生活的各个可被设计的触点去影响用户,培养使用习惯,最终构建行为习惯,成为一种生活方式。

我们在最近一年里,完成了全民K歌TV版,友唱团队合作推出了线下M-bar,和联想、迅途合作推出麦克风……这些其实都是在商业生态的层面不断拓展和用户在生活中的触点,通过这些触点不断影响用户,影响大家休闲娱乐的生活方式。

关于歌房

歌房是一个多人实时唱歌互动的虚拟空间,歌房的设计完整打造用户在这里唱歌互动的体验,是一个完整的体验设计的案例。

在我看来,体验设计的关键点在于回答三个问题:从何而来、到哪儿去、如何做到。从何而来,需要你深刻理解你的产品、你的用户,清楚需求的来源;到哪儿去,则是需要分析清楚具体需求,确定设计目标;如何做到则是在具体达成目标的过程中遇到问题、解决问题。

那么,歌房从何而来?

从何而来

1. 从全民K歌的体系来看

全民K歌是一款兴趣社交产品,一直以来在做两件大事,基础K歌和社交互动。

在基础K歌的维度,为了满足用户唱得好的需求,我们不断拓展内容类型的丰富度,从普通音频作品,到MV、说唱、以及最近正在做的短视频,都是为了帮助用户在这里产生丰富的内容。同时,为了帮助用户产生优质内容,我们提供海量曲库、HQ伴奏、练唱等能力。给会员用户提供教唱视频,帮助用户系统、全面地了解气息、发声等等知识。

在社交互动的维度,为了满足用户玩得嗨的社交需求,除了基础的评论、送礼、私信以外,我们不断打造特色的互动玩法,比如打擂、合唱、家族、pk等等。

基础K歌和社交互动这两个维度是相互促进的良性循环过程。社交互动的原始需求要求基础K歌能力不断完善,基础K歌能力的完善,帮助用户不断产生优质内容,而用户围绕优质内容又有了更强的社交互动需求,在这个过程中,用户粘性也就不断提高。

事实上我认为所有的兴趣社交应用都可以从这个思路去设计,打磨围绕兴趣的基础能力的同时,打造社交互动玩法,两者良性循环粘住用户。

2. 从社交连接的维度来看

社交是关于人与人建立连接的,在K歌前两年的时间里,我们所有的社交连接都需要依赖发表异步作品,一个用户发表作品,其他用户来听歌,然后用户之间产生评论、送礼等社交连接,这种连接是间接的、相对慢的。为了帮助用户更直接更快地连接起来,去年我们开始打造直播这样的能力,给用户提供了一个人与人实时连接的虚拟空间,在这个空间,有人唱歌,其他人立刻就可以听歌,信息流通速度和效率都得到了提高,社交连接也更快速、通畅。

直播也有一定局限,在唱歌-听歌的维度,直播是1对多的单向传播关系,一个人需要撑起全部的表演,这对于表演者的要求是非常高的,所以一般而言,主播会玩得比较溜,对于普通用户来说,直播会有点尴尬、玩不起来。

那如何更好地去满足普通用户的表演欲让大家也实时玩起来呢?我们想到了群体的力量,就是如果不是用户一个人上去唱,而是有表演欲的大家一起去唱,大家都来唱歌的场景下,一来一个人表演的尴尬感和压力感都小很多,二来大家一起玩互动性更强了,普通用户也就会更愿意在这里玩起来。

3. 从K歌用户的社交关系来看

说到歌房,大家最容易想到的就是线下ktv,线下ktv是纯熟人、小圈子的玩法。

K歌并不是一个纯熟人的社区,在平台里活跃的更多人,一直在不断向陌生人展示自我,寻求关注。我们会看到用户不断在私信里给各种人发自己的作品求互粉求关注,在评论里不断地刷说来听听我的歌,然后特别喜欢跟一些粉丝多的人合唱,因为一旦被收录他就可以获得更多关注。

所以,歌房,其实是给到这样的一群人一个虚拟空间,帮助他们突破地理限制、以歌会友;充分地展示自我、实时地社交互动,更快速更广泛地获得关注,建立社交连接。

事实上,我们最大的竞品唱吧,很早就做了歌房类似的能力,但他们实现的,仅仅是简单的轮流独唱,我们认为其互动性还远远不够。

到哪儿去

了解清楚歌房的来龙去脉之后,我们开始回答第二个问题,到哪儿去。

我们K歌用户大致能分为这样六类,如刚才所说,粉色标记的这类用户,他们希望展示自我,渴望一夜成名,但他们不是头部的主播用户,他们在直播里没办法真的吸引那么多用户来围观,所以他们很有可能来歌房里唱歌,满足他们展示自我和获得关注的需求;而蓝色这几类有社交行为、喜欢关注追随他人的人,则可能会在歌房里扮演听歌互动的角色。

接下来我们就去细化场景、挖掘动机、提炼需求。

最终得到我们的设计目标。

如何做到

带着设计目标,我们开始回答最后一个问题 ,如何做到。

分两大块来看——歌房的空间布局、歌房的核心亮点。

歌房的空间布局

打造一个多人实时唱歌互动空间。思路上有两种,思路一是强调每个人、平等参与;思路二是突出表演者,给表演足够大的空间,在唱歌人数和整体参与人数的维度里,思路一强调每个人平等参与,可以唱歌的人多,但整体参与人数没办法很多;思路二整体参与人数可以很多,但同一时间唱歌的人少。我们希望是唱歌人数和整体参与人数都尽可能多。

我们的解决方案是,分区展示,平衡展示自我和社交互动。

具体来看。

1. 舞台区

舞台区的目标是让唱歌者获得陪伴、展示自我、获得关注,除了一个人一个人轮流唱以外,我们还可以满足用户和别人一起唱的需求;同时,就像演唱会或者livehouse那种,唱歌和唱歌之间都会有一些dj或者主持人起到一定串场的作用,让整个show不至于干。

所以我们设定了三种状态,独唱、合唱、语音席。语音席就是dj或者主持人的能力。区域上给最大的空间去展示表演者的视频画面,底部一行区域展示表演者的头像,吸引关注。语音席的观众同样也给到头像展示,让大家知道是谁在串场说话,他也可以获得一定的关注。

表演结束后,动画展示成绩并突出关注按钮,如果用户觉得她唱得好,就可以直接关注,帮助表演者快速直接地获得关注。

2. 观众区

这里的目标是让用户听歌互动得爽,土豪用户能炫耀。从需求上来说和观众在直播间围观唱歌是非常类似的,所以我们基本沿用了直播的设计。底部普通消息在互动区尽可能多地滚动展示;为了满足土豪炫耀的心里,就像我们在演唱会送花上台一样,送礼的消息会跨界进入舞台区被所有

您可能想查找下面的文章:

  • 腾讯实战案例!设计师如何从零开始做一款H5?
  • 高手实战!腾讯公益设计改版项目总结
  • 滴滴新推出的青桔单车,背后的设计过程是怎样的?
  • 上亿人使用的起点读书APP,背后的改版设计实录!
  • 如何高效完成表单输入?来看这个实战案例!
  • 设计冲刺法:5天搞定2018俄罗斯世界杯主题设计
  • 实战案例!网易考拉品牌升级全过程实录
  • 看似简单的喜马拉雅FM主播等级体系,是如何做改版设计的?
  • 实例解析!如何成为有交互和视觉思维的UI 设计师?
  • 网易实战案例:教你五步打造APP节日主题设计

相关文章

  • 2017-08-06引入CSS的方式有哪些?link和@import的有何区别应如何选择
  • 2018-08-23实战案例!揭秘网易严选营销线的设计过程
  • 2018-08-23在APP中,Tab Bar是固定好还是不固定好?
  • 2018-08-23如何画好断线图标?我总结了这4个规律
  • 2017-08-06编制网站首页的基本原则
  • 2018-08-23网易设计师:为什么你应该学会「行为设计学」?
  • 2018-08-23Airbnb设计经理:一个好的交互设计师应该具备什么素质?
  • 2018-08-23这3种独特的趋势,能让网页设计增色不少
  • 2017-09-27webpack实现热加载自动刷新方法
  • 2018-08-232017年,这5个网页设计风格可能会成为主流趋势

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 25个CSS框架、工具、软件及样板分享
    • 让网站支持老版本IE6、7、8、9浏览器的3种解决方案
    • 用一篇文章,让你看懂设计史上的3个经典艺术流派
    • 设计师如何优雅地回复需求邮件?我总结这个详细的方法
    • HTML标签语义化(含H5)
    • 为什么设计师需要理解产品业务?聊聊结构化思维的应用
    • 新手科普文!什么是用户界面和体验设计?
    • 你好 对话框 对话框的设计经验分享
    • UI 设计新人容易犯的7个细节错误
    • 给复仇者联盟设计界面是什么体验?来看这篇设计师专访!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有