在快节奏的游戏开发世界中，快速进行用户体验（UX）和用户界面（UI）原型制作与迭代的能力至关重要。Riot Games 作为游戏行业公认的领导者，采用了先进的原型工具 ProtoPie，以提升其知名游戏的设计流程。
本案例研究深入探讨了 ProtoPie 如何成为 Riot Games 设计工具箱中的核心组成部分，助力打造创新的 UX/UI 解决方案，从而提升玩家参与度与满意度。
概览
什么是游戏 UX/UI 原型制作？
Riot Games 的交互设计
ProtoPie 融入 Riot Games 工作流程
ProtoPie 在 Riot Games 的关键功能与优势
与 Robert Ignasiak 的问答
什么是游戏 UX/UI 原型制作？
游戏 UX/UI 原型制作是指创建玩家如何与游戏界面交互的早期模型，包括菜单、游戏内控制以及反馈系统。这一初始建模非常重要，因为它使设计师能够在进入最终开发之前测试并改进游戏的用户体验与界面。
有效的原型制作有助于识别可用性问题，确保游戏易于访问且富有乐趣，并显著降低开发后期进行高成本修改的风险。通过尽早测试不同设计，开发者可以确保最终产品更贴近玩家的期望与偏好。
Riot Games 的交互设计
Riot Games：以玩家为中心的方法
Riot Games 立志成为全球最以玩家为中心的游戏公司，这一使命推动其持续打造引人入胜、深受喜爱的游戏。凭借《League of Legends》和《Valorant》等热门作品，Riot Games 以对高质量游戏体验的热情服务全球用户。
公司的投入不仅体现在游戏开发上，也延伸至电竞领域的开拓以及《Arcane》等热门媒体内容的制作。
Riot Games 热门作品。
Riot Games 的交互设计是什么？
在 Riot Games，交互设计不仅限于游戏内体验，还涵盖玩家在进入游戏路径中接触到的所有触点。这包括从账号管理、聊天等社交功能，到宣传游戏的网站，以及 Riot Mobile 等各类客户端界面。
交互设计是视觉设计、声音与用户体验无缝融合的“魔法时刻”。
Riot Games 将交互设计视为创造“魔法时刻”的过程，即视觉设计、声音与用户体验无缝结合的瞬间。这一时刻对于体现品牌价值并提升整体玩家体验至关重要。它是一个细致、往往在幕后进行的过程，用于塑造游戏的情境化动效与美学。由此，功能性设计被转化为能与玩家产生共鸣、富有触感的沉浸式交互。
交互设计师在 Riot Games 的角色是什么？
在 Riot Games，交互设计师的角色多元且对游戏开发流程至关重要。主要而言，这些设计师承担三项核心职责：
1. 开发并贡献可扩展的交互与组件库
Riot 的交互设计师会创建并维护名为“Play”的设计系统，其中包含动画、声音、过渡效果等预定义组件库，以提升运营效率并确保跨游戏一致性。该系统使开发者能够轻松访问并应用这些元素，从而简化开发流程。
2. 参与 UX/UI 原型制作
在 UX/UI 原型阶段，交互设计师会构建并测试与组织目标一致、并有助于决策的功能。
3. 通过用户测试聚焦研究与优化
最后，他们与研究团队协作，持续收集并分析玩家反馈以优化设计，确保最终产品与用户预期高度一致，并提升整体玩家体验。
Riot Games 交互设计师的主要关注领域。
ProtoPie 融入 Riot Games 工作流程
采用 ProtoPie 之前：流程割裂、渲染与预览耗时长
在采用 ProtoPie 之前，Riot Games 的原型流程与许多公司类似：先在 Figma 设计，经由 AEUX 等程序转移，最终在 After Effects 完成。该流程导致渲染和预览时间较长，并带来多项挑战：
使用多个工具：多个应用并用使流程缓慢，也阻碍了实时协作与迭代。
缺乏可复用库：割裂的流程无法复用组件，增加了开发交接难度，常导致误解并延长质量保障流程。
缺乏交互性：静态原型让利益相关方无法完整体验设计，降低了演示效果。
开发交接困难：最终产出是体积庞大的 MP4 文件，并以类似 Google 表格的网格形式组织，缺乏交互且无法即时反馈。这使开发者难以准确理解并执行设计意图。
Riot Games 在采用 ProtoPie 前设计流程中的痛点。
意识到这些挑战后，Riot Games 开始寻找一款更契合其需求的工具：能够无缝融入现有流程、支持协作，并可产出易于跨团队共享与理解的高保真原型。
工具评估阶段考虑的一些验收标准。
采用 ProtoPie 之后：原型流程更顺畅、迭代更快、交接更轻松
ProtoPie 彻底改变了 Riot Games 的游戏设计方式。ProtoPie 为其设计流程带来的关键提升包括：
1. 设计与开发流程更顺畅
ProtoPie 支持将复杂动画和交互元素直接集成到原型中，使设计师能够创建动态且沉浸式游戏界面的高保真模拟。
2. 迭代更快，设计更统一
自采用 ProtoPie 以来，Riot Games 实现了更快且更高质量的设计迭代，从而带来更统一、更具吸引力的玩家体验。
3. 协作与测试能力增强
ProtoPie 的协作能力对 Riot 而言是颠覆性的。该工具允许设计师通过简单链接分享交互原型，实现跨团队即时反馈与迭代设计。密码保护链接也成为备受重视的功能。
4. 无缝开发交接
Robert 表示：“发送一个链接比为单个交互下载 600MB 文件要容易一百倍。不需要下载，也没有渲染时间，生活轻松多了。”这种便捷性显著简化了向开发团队的交接流程。
采用 ProtoPie 后，Riot Games 的设计流程得到改进。
ProtoPie 在 Riot Games 的关键功能与优势
随后，Robert 介绍了他和团队使用的 ProtoPie 关键功能，并强调了 ProtoPie 为团队带来的价值。
多设备集成
ProtoPie Connect 对 Riot Games 来说是改变游戏规则的工具，它让他们能够在设计流程中轻松连接多个设备，如游戏手柄、手机和台式电脑。这种无缝集成对于在不同平台提供一致的用户体验至关重要，尤其适用于多因素认证等功能。
一个实际应用示例是在游戏“2 XKO”中，设计师使用 ProtoPie 微调 Xbox 手柄交互，确保菜单导航体验正确无误。
ProtoPie Connect 支持将游戏手柄、手机和台式电脑等多种设备整合进设计流程。
Lottie 动画支持
ProtoPie 对 Lottie animations 的支持显著增强了 Riot Games 的界面表现，使设计师能够精确控制细致的微动画。该功能让设计师可以自定义从细微图标运动到复杂动画的各类效果，为每个游戏界面增添独特层次感。
可复用组件库
ProtoPie 的亮点功能之一是其交互库，这显著简化了 Riot Games 的设计流程。设计师可以从全面的交互库中轻松拖放社交导航栏、卡片等元素。此功能有助于加快设计速度，也更容易在不同游戏中保持一致的视觉与功能表现。
使用 ProtoPie 的组件库为 Riot Games 设计师节省了大量时间。
可分享的密码保护链接
“你知道我已经多次提到可分享链接，但我真的再怎么强调它有多颠覆都不为过，”Robert 说道。
过去，在 Slack 中分享交互非常麻烦，因为文件太大无法正常预览，还必须下载才能完整查看。现在，他只需发送一个密码保护链接。团队成员即可在安全环境中即时访问、交互并反馈内容。
支持与社区
ProtoPie 响应迅速的支持团队和活跃社区是 Riot 原型成功的关键。能够直接获得支持并对功能提出反馈，使 Riot 得以按自身需求定制 ProtoPie，进一步将其深度融入设计流程。
ProtoPie 如何帮助 Riot Games 设计团队。
与 Robert Ignasiak 的问答
问：作为一名此前没有视频游戏开发经验的 UX 设计师，你对刚进入这个行业的人有什么建议？
Robert： 我建议去一个能让你广泛接触不同事物的地方工作。学习 Unreal Engine 这类工具，并考虑先从代理机构开始，而不是直接进入大型公司的内部岗位。这样能获得广泛经验，对之后的专业化发展很有价值。
问：你第一次向工程师交接时的初始体验如何，尤其当他们第一次接触原型链接时？
Robert： 第一次交接非常顺利。工程师对一切都能通过简单链接访问印象深刻，而 ProtoPie 的直观性也让他们能立刻理解并使用这些原型。
问：有哪些验证技术可用于创建新功能或进一步提升客户旅程？
Robert： 我们使用标准的用户测试技术，观察用户与原型互动并收集反馈。这包括对用户正负面反应的详细记录，用于指导我们的调整与开发。
问：微交互，尤其是动画，最终如何进入你的产品？具体流程是怎样的？
Robert： 对于表现性动画，我们可能先在 After Effects 中对某段 UI 做逐帧绘制，再通过 Bodymovin 导出为 JSON 文件。随后将其集成到原型中，并根据其对整体动画的影响进行调整。
问：两年前你开始使用 ProtoPie 时，特别是在进行实时项目的同时，是如何应对学习曲线的？
Robert： Riot 在学习新工具方面给予了我支持。我参加了 ProtoPie 101 course，帮助很大。学习新工具在设计领域很常见，因此适应 ProtoPie 也是持续学习过程的一部分。
问：你能进一步讲讲工作流程，以及在不同迭代中如何结合 Figma 和 ProtoPie 吗？你如何确保设计始终保持最新并同步
Robert： Figma 与 ProtoPie 之间的切换很高效，这得益于 ProtoPie 能识别并替换同名组件。这样可以保持流程顺畅，并在无需太多返工的情况下让原型保持最新，因为已设定的交互规则可以广泛适用于视觉更新。
ProtoPie 在游戏开发中的核心优势。
立即提升你的游戏 UX/UI 原型制作
ProtoPie 凭借多设备集成、团队协作、更快的设计迭代和开发交接等功能，彻底革新了 Riot Games 的设计方式，简化了其整个原型制作流程。加入他们，立即开启你的 ProtoPie 原型之旅。
