JOOX 6.0 体验改版

EXPLORE ↓

PROJECT OVERVIEW

从音乐工具,
走向内容与社交平台。

Scope
UX Strategy · Product Experience · Design System
Role
核心体验设计 · 品牌表达 · 系统规范

JOOX 在快速增长之后面对新的外部环境、产品复杂度与用户习惯变化。6.0 改版需要在不削弱听歌基本盘的前提下,重新组织内容、沉淀用户资产,并为 K 歌、直播与语音互动建立可持续扩展的产品框架。

  1. 上线
  2. 4 地区使用量 NO.1
  3. 聚焦东南亚
  4. 6.0 大改版
  5. 新的探索

01 · WHY CHANGE

JOOX 因何而变

增长瓶颈并非来自单一页面,而是外部环境、产品结构与用户行为共同变化的结果。

01

外部环境

  • 疫情环境
  • 政治因素
  • 竞争格局加剧
02

产品自身

  • 曲库更新慢
  • 关键运营资源投入不到位
  • 功能复杂、优化推动困难
03

用户变化

  • 生活方式变化
  • 听歌需求变化
  • 获取歌曲方式变化

02 · STRATEGY

四个方向,重建 6.0 体验框架

策略从功能整合开始,逐步回到音乐基本盘,并拓展娱乐场景与品牌认同。

01

平台化

整合功能、优化逻辑,提升框架延展性。

增加容器
02

音乐化

优化基础听歌体验,持续留住用户。

巩固基本盘
03

娱乐化

从 0 到 1 创建社交与音乐互动玩法。

拓展潜在用户
04

品牌化

统一视觉与品牌原型,加强品牌感知。

增加品牌认同

03 · PLATFORM

让内容、资产与生产入口各归其位

以清晰的消费路径承接 Music、Video 与 Search,同时统一用户资产和内容生产入口。

消费端区分

Music / Video / Search

音乐消费集中于 Discover,视频消费进入 Buzz,主动消费行为统一到 Search。

资产沉淀

Library

歌单、专辑、艺人、视频、K 歌与直播内容集中管理。

生产统一

Create

合并 Video、K 歌、直播等生产流程,降低入口复杂度。

Music 页面
Music
Video 页面
Video
Search 页面
Search
Library 页面
Library
视频上传页面
Upload
K 歌录制页面
Recording
INFORMATION ARCHITECTURE

一级导航下移,二三级导航统一规范

把高频一级入口常驻底部,同时为内容扩展建立稳定层级。

JOOX 改版前导航
Before
JOOX Music 导航结构
Music
JOOX Library 导航结构
Library
JOOX Buzz 导航结构
Buzz

04 · MUSIC EXPERIENCE

让音乐重新成为播放器的主角

重组专辑封面、基础操作、背景取色和拓展内容,以稳定层级承接不同音乐场景。

JOOX 播放器页面结构拆解
FOUNDATION

聚拢操作区域,优化歌词阅读视线

操作聚合在更明确的区域;歌词对齐更自然,同时压缩 K 歌曝光位并移除低频动作。

改版前播放器
Before
以专辑封面为主的播放器
Album artwork
支持视频素材的播放器
Video artwork
歌词页面优化前
Lyrics · Before
歌词页面优化后
Lyrics · After
DETAILS · I18N

细化操作手势,统一多语言歌词

细化点赞、收藏、不喜欢等操作手势,并为港、泰、南非、印尼、马来、缅甸等多语言歌词统一对齐与行距规范。

JOOX 播放器操作细节优化与多语言歌词对齐
AD FORMAT

统一广告形式,减少对听歌的打扰

把多种广告样式收敛为原生、轻量、弱打扰的统一呈现,降低对核心听歌体验的干扰。

JOOX 广告形式统一优化 Before / After
COLOR LOGIC

从专辑封面提取颜色,形成沉浸式听歌氛围

JOOX 播放器背景取色逻辑
SHARE

节奏 + 动态图形,让音乐被“看见”

分享卡片用随节奏跳动的动态图形承载封面与歌词,把一段听觉体验转化为可传播的视觉记忆。

JOOX 音乐分享卡片:节奏动态图形与歌词展示

05 · ENTERTAINMENT

一种结构,容纳多种音乐社交场景

归纳单人、双人和多人上麦的共性结构,再通过场景内容区表达 K 房、艺人粉丝房、音乐听歌房等差异。

01

归纳共性

统一舞台、上麦、聊天与互动的基本布局。

02

包容个性

音乐房以歌词氛围为主,艺人房放大核心人物,K 房强化演唱与 Battle。

03

持续拓展

用稳定容器承接 K 歌、游戏与音视频 Battle。

ONE STRUCTURE

一套布局,承载六类语音与音乐社交房

从单人 / 双人 / 三人以上上麦,到 K 房、艺人粉丝房与音乐听歌房,用同一套舞台 + 上麦 + 聊天结构灵活扩展。

JOOX 六类语音与音乐社交房结构总览
MUSIC ROOM

音乐听歌房:以歌词与氛围为主

背景随内容渐变取色,弱化界面存在感,突出音乐与品牌化表达。

JOOX 音乐听歌房场景
ARTIST ROOM

艺人粉丝房:放大艺人展示区

以艺人为核心聚集地,结合艺人空降与聊天房分享,强化粉丝互动。

JOOX 艺人粉丝房场景
KARAOKE ROOM

K 房:从单人到合唱的演唱场景

覆盖单人 K 歌、双人、合唱求上麦与演唱等状态,突出演唱主体。

JOOX K 房演唱场景
BATTLE

直播 K 歌 + 游戏,牵引互动与粘性

通过音频 / 视频 1v1 Battle 增加互动,提升用户粘性。

JOOX K 房 1v1 Battle 场景
SOUND EFFECT

K 房音效模式优化

丰富音效场景与调音面板,贴合不同演唱与聆听需求。

JOOX K 房音效模式与调音面板
CHAT ROOM

普通聊天房与默认头像

用 JOOX 吉祥物默认头像强化品牌感,适配普通语音聊天场景。

JOOX 普通聊天房与默认头像
ROOM ENTRY

不同聊天房入口

以彩色内容卡片区分艺人房与其它主题房,让入口更具辨识度。

JOOX 不同聊天房入口

06 · BRAND SYSTEM

让品牌语言进入每一个产品细节

通过圆角图标、统一栅格和黑胶唱片元素,加强界面亲和力与音乐品牌感知。

JOOX 6.0 图标圆角与导航图标系统
01圆角图标与导航规范
JOOX 6.0 内容栅格优化 Before / After 对比
02统一栅格,提升使用愉悦感
JOOX 黑胶唱片元素在音乐库中的应用
03黑胶唱片品牌元素
03 · PRODUCT REDESIGN FILM

用动态演示串联 6.0 功能改版

围绕 Discover、Search、Buzz、Library 与 Account 等核心模块,通过连续镜头展示导航重构、内容浏览与音乐消费流程,让 6.0 的功能变化和体验提升被更直观地理解。

JOOX 6.0 · Product redesign film

07 · BRAND FILM

用一支视频讲清“发现、听、看、唱、聊”

负责 6.0 改版视频创意、故事线与静态帧绘制,并把控整体视觉调性和品质,以 JOJO 和 Jaxon 的体验串联核心功能。

JOOX 6.0 Redesign · Brand film

08 · DESIGN SYSTEM

把 6.0 体验沉淀为可复用设计系统

将组件、状态、色彩与场景规范集中沉淀,支撑多地区、多语言与持续业务扩展。

JOOX 6.0 设计系统总览

09 · SHOWCASE

整体效果展示

汇总 6.0 改版在发现、播放、视频、歌房与个性化等核心场景的界面呈现,直观展示统一体验与视觉语言的落地效果。

JOOX 6.0 多场景界面整体效果拼图

JOOX 6.0

One system.
More ways
to enjoy music.

更清晰的平台结构更聚焦的听歌体验可拓展的娱乐场景一致的品牌与设计系统