认识一下 ABEMA，这是由日本互联网公司 CyberAgent, Inc 运营的视频分发平台。
ABEMA 以革新电视、创造“电视的新未来”为目标，拥有日本唯一的 24 小时新闻频道。不仅如此，该平台还涵盖约 25 个不同类型的频道。其原创剧集、恋爱节目、动漫和体育转播均可供观众免费观看，且无需注册。
在 2022 年 11 月至 12 月期间，ABEMA 直播了一场备受全球瞩目的足球赛事（你可能知道，也可能不知道我们在说哪一场）。在为该赛事进行设计时，设计团队面临了一些提升观看体验的挑战——但他们在 ProtoPie 中找到了答案。
在这里，我们采访了 ABEMA 的产品设计师松本，他讲解了团队如何在流媒体视频设计流程中应用 ProtoPie。
为什么原型设计对 ABEMA 的设计团队很重要
ABEMA 的设计团队自 2017 年起就一直将 ProtoPie 作为首选原型工具。换句话说，已经整整六年。
原型设计的主要目的是评估并确定流媒体 UI 设计方案。
但对于视频流服务的原型来说，以下几点同样重要：
在制作原型时处理视频文件。
复现视频缓冲过程。
在观看视频时评估 UI。
为此，团队需要一个高保真原型。而幸运的是，ProtoPie 满足了他们的全部需求。
ABEMA 如何在流媒体系统设计中使用原型设计
截至 2023 年，ABEMA 产品设计团队有 6 名成员，并且每年都有新成员加入。现在，他们要求所有成员都熟悉 ProtoPie。
“就像学习 Figma 对 UI 设计师至关重要一样，ProtoPie 也被定位为团队成员需要日常训练的工具，”松本说道。
以下是团队在直播系统设计中应用 ProtoPie 的一些示例。
1. 多视角
在开发足球观看体验时，ABEMA 的反复试验聚焦于打造一种在日本电视广播中无法实现的体验。至少，目前还不行。
其中一个提出的想法是多视角功能。
ABEMA 原本就有多视角功能，但仅用于有限场景，且 UI 仍处于初级阶段。它尚未成为核心功能。
因此，团队必须自问：ABEMA 的多视角功能如何既满足视角切换需求，又能在不打扰观看体验的情况下查看并切换多个视角？
团队在进行用户研究和讨论的同时，创建了多种设计模式。
最终，他们决定采用以下设计。
通过回顾以往方案，团队确认在切换视角时会出现视频加载。他们据此创建了一个将该行为纳入考虑的原型。
这样一来，他们成功复现了更真实的情境，并提高了 UI 评估的准确性。
该原型的制作不仅有开发团队参与，还包括公司内许多其他利益相关方——如业务团队、视频分发团队和推广团队。目的是确保整个组织对最终原型形成一致共识。
2. 比赛数据
“比赛数据”功能允许用户在观看时查看比赛状态。设计团队在考虑直播系统设计开发的同时，对这一功能进行了原型制作。
他们制作了如下原型，以验证是否能够创建有助于识别比赛数据的动画。
遗憾的是，该动画最终没有落地——但它在项目团队内部的推广讨论中仍然很有价值。
3. 用户通信环境提醒
互联网视频分发可能因多种因素而不稳定，包括用户的通信环境和服务提供商服务器。
预计会有大量观众访问这类大型足球赛事。因此，团队特别关注画质控制，以确保传输能够持续顺畅进行。
例如，当因通信环境不稳定导致画质下降时，ABEMA 设计团队会在用户直播 UI 中加入提醒。
通过准备多种降低画质的视频文件模式，并创建可针对每段视频显示多种提醒 UI 模式的 ProtoPie 文件，他们能够与项目成员清晰共享实际体验会是什么样。
ProtoPie 的优势之一是：可通过资源与 UI 切换，使用单个原型复现多种场景。
团队还能够：
开展用户研究。
评估哪种设计在尽量降低观看压力的同时，能够准确传达提醒信息。
方案 A 被认为是一个只少量遮挡视频、在不干扰观看体验的前提下提醒观众的想法。
研究显示，36% 的用户没有注意到方案 A 中类似视频滚动字幕的提醒。方案 B 在传达应用信息方面更准确。
直接实现应用不是更快吗？
在思考这类高保真原型时，一个常见问题是：真的有必要费力使用创意工具做原型吗？直接实现并运行应用会不会更可靠？
也许是，也许不是。这里有几个标准需要考虑：
1. 制作原型所需时间
目前介绍的这些 ProtoPie 文件只需 1 小时即可完成。对于更简单的视频原型，10 分钟就能搭建。如果是需要投入超过一天时间的复杂原型，你可能需要考虑其他方法。
亲自看看创建一个 电视遥控器原型可以有多简单。
2. 数据复杂度
ProtoPie 当前基于将图片、视频、文本等资源直接嵌入文件的创建方式。
如果你希望在原型中包含大量滚动和内容，可能更适合直接实现并运行应用，以便动态处理数据。
帮助设计师与开发者协作的原型
ABEMA 团队还使用 ProtoPie 向工程师传达细致的 UI 过渡效果。通过 Interaction Recordings，他们创建了过渡时间线和流程，使工程师更容易编码实现。
以下是 ABEMA UI 的一些示例，展示他们如何使用 ProtoPie 进行直播系统设计。
示例 1：从首页预览区域过渡到电视观看界面
他们可以用模态与 push 转场叠加视图来表现该过渡。但团队希望通过清晰衔接前后转场并使其易于识别，来营造沉浸感。
他们参考了过去 iOS 照片应用 ForYou 的结构。
示例 2：启动流程
该原型在检查从应用启动到首页显示的流程方面也很有用。
为检查加载 UI 以及耗时对用户体验的影响，ABEMA 设计团队制作了一个可按秒指定各视图加载时间的原型。
如你所见，使用 ProtoPie 的高保真原型在设计工作流的许多环节都帮助了 ABEMA 团队，包括：
识别问题研究；
可用性评估；
在实现过程中共享细节画面。
就像 Pie 一样简单。
用 ProtoPie 革新直播 UI
成千上万的设计师和公司都在使用 ProtoPie 设计视频流 UI 的未来。下一个可以是你——现在就免费开始使用 ProtoPie 吧！
阅读这篇文章的日文版，点击这里。
