[CC直播]粉丝团改版

粉丝团是一个粉丝成长体系，让普通用户能够成为心仪主播的粉丝、佩戴主播的徽章，在直播间增加身份认同，加深与主播的联系。粉丝团相比其他特权体系拥有起步门槛低的特点，具备较大的用户规模，业务影响范围大。

在粉丝团页面中，用户可以加入主播的粉丝团、查看自己的粉丝徽章，支持对徽章进行续费、佩戴等操作。

改版背景

CC 粉丝团业务多年未迭代，相比市场主流体验存在一定差距。需要分析用户需求提供更好的体验，同时实现增加粉丝团人数的业务目标。

改版方向探索

主要通过旧版本数据分析、整体信息架构走查与竞品分析探索可优化点与改版方向。

数据分析

通过数据分析发现，用户进入二级的「管理」页面付费送出「粉丝卡」礼物具备一定点击量，且点击转化率较高。

赠送「粉丝卡」可增加粉丝徽章有效期、等级，存在用户需求，且对业务来说可增加平台付费人数，具有重要意义，所以可以考虑缩短粉丝卡的操作流程，为用户提供便利的同时也能提升业务数据。

通过对页面各核心操作占比的数据分析发现，用户高频操作集中在粉丝徽章的切换、佩戴上。故在改版时需要保证用户可以高效完成徽章佩戴管理等高频操作。

整体信息架构走查

整体信息架构方面，现有页面存在冗余情况，相同功能实现了多套页面，甚至技术实现方式也不同（前端/客户端）。例如直播间内、直播间外的「徽章管理」功能相同，但使用了不同的设计和开发方式。

这造成了整体信息架构的混乱、用户使用体验割裂，同时造成了设计、研发、测试等多环节的人力浪费。

在 Web、PC 端方面，旧版设计针对桌面大屏幕做了适配，这本身没错，但为了后续可以快速迭代，决定 Web、PC 与移动端使用同一套设计，技术研发方面也使用同一套页面。

在多端共用一套页面的基础上，去除冗余页面，重新梳理信息架构，为后续可能存在的快速迭代做准备。

竞品分析

通过分析斗鱼、虎牙、bilibili 等竞品发现徽章列表的设计可以分为两类

1. 网格布局

2. 列表布局

网格布局的优点：单位空间下可以显示更多的徽章；其次也是业内使用最多的布局方式，犯错的机会会更少。

网格布局的缺点：单个徽章的布局较为紧凑，扩展性较差。

列表布局的优点：弥补了网格布局的缺点，单个徽章可以承载更多信息，信息架构扩展性更强；布局更加美观。

列表布局的缺点：单位空间显示的徽章会更好；作为设计师来说选择了非主流的方案，在产品层面受到的挑战会更多。

结合 CC 自身的特点，最终选择了列表布局。

一方面通过数据可知，CC 单个用户拥有的徽章数量较少，对于列表信息展示效率的要求较低；另一方面 CC 的业务较为复杂，除了本身的加速、升级逻辑，粉丝团还会和产品内的守护业务联动（开通守护可以加速粉丝徽章升级）所以未来的业务扩展性和卡片本身的信息承载能力是重点。

制定设计策略

通过上述分析总结设计策略

业务方面，缩短付费流程，提升业务数据；优化信息架构，增强业务扩展性。

用户方面，优化高频操作的使用体验和效率。

开发方面，3 端共用 1 套 H5 页面，去除冗余页面，提升后续迭代速度。

设计落地

确定设计策略后，我们从以下维度进行设计升级

优化核心操作交互，提升用户体验

优化信息架构，增强业务扩展性

多端兼容，提升迭代效率

优化核心操作交互，提升用户体验

我们优化了赠送粉丝卡、徽章佩戴这 2 个核心功能的交互体验。在前面的数据分析有提到，用户高频进入二级界面进行徽章的续费、佩戴管理操作，于是本次优化将徽章列表提升到一级界面，对徽章的管理操作更加直截了当，点击徽章卡片支持一键佩戴、卸下徽章，佩戴管理更方便。

优化信息架构，增强业务扩展性

徽章管理界面的布局是选择宫格布局还是列表布局上，通过前面的竞品、本品分析我们推荐列表布局。但向产品策划提出方案时还是存在较大的压力，主要问题在于核心竞品都采用宫格布局，看起来宫格布局更不容易犯错。于是我结合宫格、列表布局的优缺点以及当前 CC 直播的用户生态、产品特性出发说服策划、打消对方的顾虑。具体内容可参考前面的竞品、本品分析。

采用列表布局，单个粉丝徽章拥有更大的展示空间，提升了信息架构的兼容性。徽章卡片增加「更多操作」浮层，未来可扩展更多操作，提升业务扩展性。

粉丝团业务的入口方面，利用整体直播间现有的信息架构，在左下角「我的」入口新增了粉丝团的页面；提高粉丝徽章的优先级，增加用户关注度从而提升粉丝团参与人数。

针对产品精细化运营（增加了熄灭、冻结等徽章异常状态）我们优化了「当前主播」Tab，支持显示用户与当前主播相关的徽章状态，用户除了可以完成加入粉丝团操作，还能点亮、激活粉丝徽章，方便用户维系与当前主播的粉丝团关系,同时也增加了业务侧的付费触点。

多端兼容，提升迭代效率

Web、PC 与移动端共用一个页面，保证跨设备体验一致的同时，减低设计、研发成本，提升迭代效率。

设计协作

利用 Figma 评论功能清晰描述修订记录，修改可回溯，版本可追踪，协作同事可快速定位到修改点，提升文档阅读体验。

与测试工程师协作文档分析：复杂逻辑为了避免开发过程中、测试过程中出现交互方面的遗漏，造成设计修改被动，前期主动约测试工程师分析文档，尽早消灭漏洞掌握主动权。 设计思考可视化：保留设计过程的分析，上线后的用户反馈与数据分析的记录，提高设计说服力，沉淀设计思考。

上线效果跟踪

改版后，页面日均曝光量是原来的 2 倍，日均付费次数是原来的 2 倍一方面是入口前置流量增加，另一方面迭代了「当前主播 Tab」（之前只有未加入时才显示）、增加了激活、点亮的引导，付费入口得到更多曝光

增加付费触点，带来付费量的大幅增长（同时也满足粉丝在主播离线时维系粉丝徽章的需求）

粉丝团入口外置在直播间一级界面后，页面曝光量增长了约 3 倍

改版后新增了徽章对应的主播信息，支持显示主播的开播状态，鼓励用户与喜爱的主播进行互动。

在点击主播信息时有 72% 主播是开播状态（可直接跳转进入直播间），带动了用户活跃。

当然也出现了负面反馈，大改版中，出现了新版本引导不到位导致的问题，存在用户反馈「不明白粉丝徽章变成灰色是什么意思」等问题。

观察到用户反馈后快速响应，我们增加了新手引导。另外也加入了引导的回收机制，避免引导长期存在影响用户体验。

本次改版我们主要从 UI、UX 角度出发描述设计价值，但不局限于设计，我们还综合考虑了维护成本与业务扩展性等因素，并与策划、用研、开发、QA 、DM 等多职能同学进行深度合作。不止是产品内部，在设计中、版本发布后我们通过问卷、反馈后台等渠道积极听取外部用户的声音，争取平衡好业务与用户需求。

以本次迭代为基础，在本文完成时又完成了多次功能迭代，欢迎大家体验。

🤔 关于质疑：

如果我是你们的用户，改版前我至少还知道“送出办卡”在什么位置，改版后连这个字样都没了，而且单从页面上看我也没找到入口，交互层级依然是3级，除了送出办卡的按钮变大了，我感觉不到任何优化。

关于「不知道办卡按钮在哪」的问题，最初改版的确考虑过把按钮放在一级界面，但随着业务扩展还需要加入其他功能，例如连续包月设置；也有很多关联业务的重要信息（例如升级 buff）需要展示所以为了照顾扩展性，把办卡按钮放在了下一级菜单中。但在徽章熄灭需要用户办卡恢复等关键场景，还是会外显按钮提醒用户进行操作的。我们也配套做了新手引导，解决老用户不适应的问题。从数据来看办卡的操作量是有增加的，转化率也没有受到影响。关于「送出办卡层级依然是 3 级」的问题，一方面是出于前面讲的业务扩展性的问题，另一方面旧方案的管理操作需要进入二级界面，操作成本相比浮层略微高一些；新方案对徽章列表直接操作的方式也让操作逻辑更加直截了当（不用到新界面操作）~