1.引言

在移动设备已深度融入日常生活的今天，音乐播放器的角色也在悄然转变——不再只是“播放工具”，而逐渐成为用户环境的一部分。在云音乐的多端产品中，PC端与TV端的播放页因其沉浸感和陪伴感，被用户广泛用于居家、办公等场景。然而，移动端播放页受限于竖屏形态和用户操作习惯，往往无法承载同样的陪伴体验。

与此同时，iOS 17推出的Standby功能开启了横屏陪伴场景的全新探索，多个音乐类产品也陆续布局移动端横屏形态，用户对网易云音乐横屏模式的呼声也日益高涨。

在这样的背景下，我们启动了横屏模式的设计探索，希望打破竖屏的使用边界，让用户在移动端也能获得更具“陪伴感”与“沉浸感”的播放体验。

2.设计流程概览

横屏模式的设计流程，经历了标准的双钻模型的两次「发散-聚焦」。从问题发散到功能，再从创新发散到方案落地。

下图列出了整个设计过程，根据方案的实现步骤，同样可以分成「前期准备」-「基础能力建设」-「打造亮点」三个部分。接下来我会这三个部分来复盘横屏模式的设计过程。

2.1前期准备

在设计前期，我们进行了三个方向的准备工作。分别从实际使用场景、外部竞品和自身出发。

在场景分析的部分，通过对用户横屏使用场景分析，可以发现用户基本是在居家、办公场景才会将手机横屏作为摆件。我们整理了这些场景下用户通常会陪伴听歌做的活动，并寻找用户的痛点和创新的机会点。

在了解竞品的过程中，我们整理了竞品横屏模式的功能定位，了解竞品的普遍能力及各自的出发点、交互方式以及我们如何做差异化的创新点。

考虑到和站内其他功能整合、统一，我们还整理了云音乐自身现有的数据、功能和布局。为后续的设计过程提供参考。

2.2基础能力建设

在上个阶段，我们整理了用户场景和站内的资料。在设计阶段，我们通过这些资料根据功能-布局-适配三步，确定了横屏模式的基础能力。

在功能梳理时，为了先确定横屏的基础能力，我们从竖屏出发，根据数据、横屏场景以及实现成本，梳理了价值-成本的矩阵图，并分成了四个象限：

左上角高价值低成本为必须有的功能。没有一定影响品牌形象、使用体验，且极适合横屏场景。

右上角高价值高成本为可以有的功能。开发成本高，但功能在横屏有价值做。考虑可以换种方式呈现。

左下角低价值低成本为可以没有的功能。开发成本低，但功能使用量低或不契合横屏场景。考虑不做。

左下角低价值-高成本为没必要做的功能。成本高收益低，不适合横屏。考虑让用户回竖屏使用。

根据矩阵图，我们确定了横屏一定会做的功能：封面、播控等。以及根据使用场景、屏幕空间等从可以有的功能做取舍，确定横屏的功能范围。功能确定后，接下来需要构建页面的整体布局，即从「功能范围层」逐步落到「信息结构层」。为了延续用户的使用逻辑和行为习惯，我们重点参考了云音乐在PC端、TV端等多端播放页的布局方式，在框架结构和交互操作上尽可能保持一致性。这样的设计不仅有助于用户在多端之间切换时保持连贯体验，也为横屏形态提供了成熟可行的布局参考，从中提炼出更适合移动横屏的左右结构方案。

最后，考虑到站内的其他功能，还要思考横屏模式的适配问题。当前的基础布局方式可以适配站内大部分的功能和播放器样式，但是很难适配另一类更沉浸的布局。但是考虑到这些沉浸的播放页（助眠模式、神光模式、热评播放器等）从功能、场景各个方面都天然适合横屏模式。所以我们专门提供了另外一种布局方式：沉浸的横屏布局，用来适配这些功能。

最终我们确定了横屏的两种框架：一种左右布局，一种全屏沉浸布局。沉浸布局把更多空间留给了页面主体，可以提供更有沉浸感的代入氛围。

至此横屏模式的基础能力和框架就完成了。基础能力搭建好之后，我们继续挖掘横屏功能的亮点。在此基础上我们进行了第二轮发散-创新方案的发散。

2.3打造亮点

最后一个部分涉及到创新方案的发散、最终方案的推导以及实现细节。

因为横屏天然的屏幕优势和操作方式，更适合做可视化的操作和展示。播放列表作为非常适合可视化展示的功能，是我们这次重点探索的方向。

最终根据交互形式，我们选定了两个方向：横向滑动和竖向滑动两种列表。在对demo实际体验后发现，横向滑动更适合横屏的操作。滑动距离更长且更稳定。

最终，我们结合横划切歌的手势和横划拖动列表两个能力，提供了创新的交互方式：在横划过程中长按或重划从播放页直接过渡到列表页，完成了本次的亮点功能。

最后为了使用时更好的体验，我们在跟开发沟通实现时着重跟进了运动曲线和振动效果。

在曲线的使用中，我们通常会使用弹簧曲线来模拟真实世界中的触感。但是在实际功能的开发中，我们发现他并不是一个最优解，经常遇到的问题是“动画过程中不能操作”，而弹簧曲线拖尾长，且难以判断停止时间导致体感差。这就需要我们的动画可以快速结束，从而让用户可以流畅的继续操作。所以我们发现有些时候贝塞尔曲线依然是最优解。

为了提供列表滑动时的真实触感，我们为进出列表加了振动，黑胶滑动经过中心点时也会有模拟机械零件卡扣的振动触感。在实现过程中我们从iOS和安卓中选择了俩个最合适的振动触感，来模拟真实世界中的触感效果。

3.总结

横屏模式的设计不仅是一次界面结构的重构，更是我们围绕“陪伴感”与“沉浸式体验”所做的一次场景延展探索。从用户行为出发，我们定位了横屏模式在移动端的使用价值；通过竞品分析与站内能力梳理，构建起基础功能与布局框架；最终通过对播放列表、歌词动效、动效细节等维度的创新，实现了差异化的产品体验。

它为我们打开了一个新的设计视角：如何让移动设备在碎片化之外，也能承载完整的环境交互体验。

未来，我们还将持续打磨横屏体验，并思考更多可能性——如适配更多播放器样式、探索AI生成内容与横屏形态的结合等，让“播放页不仅是播放页”，而是用户生活氛围中自然的一部分。