嘉宾分享
直播界面的新时代
了解ABEMA如何使用ProtoPie在规模上设计创新的直播界面体验。
Rebeca Caritas, Customer Success Manager
January 3, 2024
认识一下ABEMA ，这是由日本互联网公司CyberAgent, Inc. 运营的视频分发平台。
ABEMA的目标是创新电视，打造“电视的新未来”，并拥有日本唯一的24小时新闻频道。除此之外，该平台还提供大约25个不同类型的频道。他们的原创剧、浪漫节目、动漫和体育转播都可以免费观看，无需注册。
从2022年11月到12月，ABEMA直播了某个备受关注的全球足球赛事（你可能知道我们在说什么）。在设计这一活动时，设计团队面临了一些增强观看体验的挑战，但他们在ProtoPie 中找到了解决方案。
在这里，我们听取了ABEMA产品设计师Matsumoto的看法，他解释了团队如何在其视频直播设计过程中使用ProtoPie。
为什么在ABEMA设计团队看来原型设计很重要
ABEMA设计团队自2017年以来一直将ProtoPie作为首选的原型设计工具，也就是说，已经有了整整六年的时间。
原型设计的主要目的是评估和决定流媒体 UI 设计
但是，对于视频流媒体服务原型设计来说，以下方面也很重要：
- 在原型设计中处理视频文件。
- 重现视频缓冲。
- 在观看视频时评估 UI。
为此，团队需要一个高保真的原型 。而幸运的是，ProtoPie 符合他们所有的要求。
ABEMA团队在视频流媒体系统设计中如何使用原型设计：
ABEMA 产品设计团队截至 2023 年有六名成员，每年都有新成员加入。现在，他们要求所有成员都要熟悉 ProtoPie。
“就像学习 Figma 对 UI 设计师来说是必不可少的一样，ProtoPie 的位置是团队成员每天都在进行培训，”Matsumoto 表示。
以下是团队如何在他们的直播系统设计中应用 ProtoPie 的一些示例。
1.多角度
在开发足球观赛体验时，ABEMA 的试验和错误过程侧重于创建在日本广播电视 上无法实现的体验。至少目前还不行。
其中一个想法是多角度功能。
ABEMA 最初有一个多角度功能，但只在有限的操作中使用，并且 UI 仍处于初期阶段。它尚未成为主要功能。
因此，团队不得不思考：ABEMA 的多角度功能如何满足在不干扰观看体验的情况下切换角度的要求，并且能够检查和切换各种角度？
在进行用户研究和讨论的同时，团队创建了多种设计模式。
最后，他们决定采用下面这种设计
通过回顾先前的设计模式，团队确定了在切换角度时会发生视频加载的情况。他们创建了一个考虑到这种行为的原型。
通过这样做，他们成功地再现了更真实的情境，提高了对UI的评估准确性。
这个原型的制作不仅涉及开发团队，还涉及公司的许多其他利益相关者，包括业务团队、视频分发团队和推广团队。这是为了确保在整个组织中对最终原型有一个共享的共同愿景。
2.比赛数据
“比赛数据”功能允许用户在观看比赛的同时查看比赛状态。设计团队在考虑直播流媒体系统设计开发时对这个功能进行了原型设计。
他们创建了以下原型，以查看是否能够创建一个帮助识别比赛数据的动画。
不幸的是，该动画并未实现 - 但它仍然在项目团队内的推广讨论中被证明是有用的。
3.用户通信环境的警报
由于多种因素，包括用户的通信环境和服务提供商的服务器，因此互联网上的视频分发可能不稳定。
预计许多观众将访问这类大型足球赛事。因此，特别注意控制图像质量，确保传输能够顺利进行。
例如，ABEMA设计团队在由于不稳定的通信环境而导致图像质量下降时，向用户的直播流UI添加了警报。
通过准备具有降低图像质量的视频文件的多种模式，并创建可以为每个视频显示多种警报UI的ProtoPie文件，他们可以与项目成员共享实际体验的清晰图像。
ProtoPie的一个优势是能够通过使用资产和UI切换在单个原型中复现各种情况。
团队还能够：
- 进行用户研究。
- 评估哪种设计能够准确传达警报，同时最大程度地减小观看体验的压力。
方案A被认为是一个能够通过在视频上方提供少量覆盖以在不干扰观看体验的情况下向观众发出警报的想法。
研究显示，36%的用户没有注意到方案A中更像是视频滚动条的警报。方案B在从应用程序传达信息方面更为准确。
实施应用程序可能更快吗？
在考虑这种高保真原型设计时，一个经常出现的问题是：真的需要通过创意工具进行原型设计吗？实施和运行应用程序不是更可靠吗？
也许是，也许不是。在这里有几个要考虑的标准：
1.制作原型所需的时间
到目前为止，介绍的ProtoPie文件只需要一个小时的工作时间。对于更简单的视频原型，您可以在短短10分钟内构建它们。对于需要投入一天以上时间的复杂原型设计，您可能希望考虑采用不同的方法。
看看创建TV遥控器原型 可以有多么容易。
2.数据的复杂性
ProtoPie目前基于直接嵌入文件中的图像、视频和文本的方法。
如果您希望在原型中包含大量的滚动和内容，您可能希望实施和运行应用程序以能够动态处理数据。
帮助设计师和开发人员合作的原型
ABEMA团队还使用ProtoPie向工程师传达详细的UI过渡。使用交互记录 ()，他们创建了过渡的时间线和流程，使工程师能够轻松编写代码。
以下是ABEMA UI的一些示例，显示了他们如何使用ProtoPie进行直播流系统设计。
示例1：从主屏幕预览区域过渡到电视观看屏幕
有关如何表达过渡为与模式和推送过渡堆叠的视图的选项。但是，团队希望通过清晰地连接过渡前后并使其可识别来营造沉浸感。
他们使用了过去iOS照片应用程序ForYou的结构作为参考。
示例2：启动顺序
检查从应用程序启动到主屏幕显示的顺序对于原型来说也是有用的。
为了检查加载UI以及时间对用户体验的影响，ABEMA设计团队创建了一个允许指定每个视图的加载时间（以秒为单位）的原型。
正如您所看到的，使用 ProtoPie 进行的高保真原型设计已经帮助 ABEMA 团队在设计工作流的许多方面，包括：
- 识别问题的研究；
- 可用性评估；
- 在实施过程中共享详细信息的图像。
就像享用一个派一样简单。
使用 ProtoPie 改革直播界面
成千上万的设计师和公司都在使用 ProtoPie 设计未来的视频流界面。您也可以成为下一个 - 立即免费开始使用 ProtoPie！
阅读此文章的日语版本（Japanese version）