嘉宾分享

拳头游戏的游戏用户体验与界面设计革新

了解拳头游戏如何使用ProtoPie进行游戏交互设计、用户测试和开发交接。

Iulia Sorodoc, Product Marketing Manager

August 14, 2024

拳头游戏交互设计
在快节奏的游戏开发世界中,快速原型设计和迭代用户体验(UX)和用户界面(UI)的能力至关重要。作为游戏行业的知名领导者,拳头游戏采用了先进的原型设计工具ProtoPie,以提升其极其受欢迎的游戏的设计流程。
本文深入探讨了ProtoPie如何成为拳头设计工具中的重要组成部分,助力创新的UX/UI解决方案,从而提升玩家的参与度和满意度。

综述

  1. 什么是游戏UX/UI原型设计?
  2. 拳头游戏的交互设计
  3. ProtoPie在拳头游戏工作流程中的集成
  4. ProtoPie在拳头游戏中的关键作用以及优势
  5. 与Robert Ignasiak的问答

什么是游戏UX/UI原型设计?

游戏UX/UI原型设包括创建玩家如何与游戏界面互动的早期模型,包括菜单、游戏内控件和反馈系统。这一初步建模非常重要,因为它允许设计师在进入最终开发阶段之前测试和改进游戏的用户体验和界面。
有效的原型设计有助于识别可用性问题,确保游戏的可访问性和可玩性,并显著降低在开发后期进行更改的风险。通过早期测试不同的设计,开发人员可以确保最终产品与玩家的期望和偏好是一致的。

拳头游戏的交互设计

拳头游戏:以玩家为中心的理念

拳头游戏致力于成为全球最以玩家为中心的游戏公司,这一使命驱动了其开发引人入胜且受欢迎的游戏的承诺。凭借《英雄联盟》和《Valorant》等热门游戏,Riot Games服务于全球玩家,致力于提供高质量的游戏体验。
公司不仅致力于游戏开发,还专注于电子竞技领域的创新,并制作了受欢迎的影视作品,如Netflix系列剧《Arcane》。
拳头游戏的经典游戏作品
拳头游戏的经典游戏作品

拳头游戏的交互设计是什么?

在拳头游戏,交互设计不仅限于游戏内的体验,还涵盖了玩家在游戏过程中遇到的所有接触点。这包括从账户管理、社交功能(如聊天)到推广游戏的网站,以及各种客户端界面(如Riot Mobile)。
拳头游戏交互设计
交互设计是视觉设计、声音和用户体验无缝融合的“魔法时刻”。
拳头游戏认为交互设计是创造一个“魔力时刻”,在这个时刻,视觉设计、声音和用户体验无缝结合。这一时刻对于体现品牌价值和提升整体玩家体验至关重要。它是一个细致入微的过程,通常在幕后进行,塑造了游戏的情境动画和美学,将功能设计转变为与玩家产生共鸣的引人入胜的触觉互动。

拳头游戏中交互设计师的角色是什么?

在拳头游戏中,交互设计师的角色多面而关键,贯穿于游戏开发的全过程。主要包括以下三个主要职责:
  • 开发和维护可扩展的交互和组件库 拳头游戏的交互设计师负责创建和维护一个名为“Play”的设计系统,该系统包含了预定义的组件库,如动画、声音和过渡效果,以提高操作效率并确保游戏间的一致性。这个系统使开发人员能够轻松访问和实现这些元素,从而简化开发过程。
  • 参与UX/UI原型设计 在UX/UI原型设计阶段,交互设计师构建并测试与组织目标一致的功能,以促进决策制定。
  • 通过用户测试进行研究和完善 最后交互设计师与研究团队合作,持续收集和分析玩家反馈,以完善设计,确保最终产品能够紧密符合用户期望,并提升整体玩家体验。
拳头游戏交互设计师的主要关注点
拳头游戏交互设计师的主要关注点

ProtoPie如何融入拳头游戏的工作流程

使用ProtoPie之前:碎片化的工作流程,漫长的渲染和预览时间

在采用ProtoPie之前,拳头游戏的原型设计过程涉及了许多公司常见的工作流程:从Figma开始设计,通过类似AEUX的程序转移,最终在After Effects中完成。这一工作流程带来了几个挑战:
  • 使用多个工具:使用多个应用程序使过程变慢,妨碍了实时协作和迭代。
  • 缺乏可重用的库:碎片化的工作流程阻碍了组件的重用,复杂化了开发交接,常导致误解以及延长了质量管理的流程。
  • 没有交互性:静态原型阻止了利益相关者全面地体验游戏设计,降低了演示的效果。
  • 开发交接困难:最终输出是庞大的MP4文件,以类似Google Sheets的网格格式组织,缺乏交互性,也不允许即时反馈。这种设置使开发人员难以准确理解和执行设计意图。
使用ProtoPie之前的设计流程痛点
使用ProtoPie之前的设计流程痛点
认识到这些挑战后,拳头游戏开始寻找一种能够更好地满足他们需求的工具。该工具需要无缝融入现有的工作流程,支持协作,并允许创建高保真的原型,这些原型可以在团队之间轻松共享和理解。
在工具评估阶段考虑的一些接受标准
在工具评估阶段考虑的一些接受标准

ProtoPie带来的变革:精简原型设计、加速迭代和简化交接

ProtoPie彻底改变了拳头游戏在游戏设计上的方法。ProtoPie带来的关键改进包括:
  • 精简设计和开发 ProtoPie使设计师能够将复杂的动画和互动元素直接整合到原型中,从而创建高保真度的动态和沉浸式游戏界面模拟。
  • 更快的迭代和一致的设计 自从采用ProtoPie以来,拳头游戏享受到了更快和更高质量的设计迭代,从而提供了更具凝聚力和吸引力的玩家体验。
  • 增强的协作和测试 ProtoPie的协作功能为拳头游戏带来了极大的改变。该工具允许设计师通过简单的链接共享互动原型,从而实现即时反馈和团队间的迭代设计。使用密码保护链接也成为了一个备受重视的功能。
  • 无缝的开发交接 Robert提到:“发送一个链接比下载一个600MB的文件要简单一百倍。无需下载,也没有渲染时间。这使得工作变得更加轻松。”这种便捷的访问方式显著简化了与开发团队的交接过程。
使用ProtoPie之后,拳头游戏的设计流程有了显著提升
使用ProtoPie之后,拳头游戏的设计流程有了显著提升

ProtoPie在拳头游戏中的关键作用以及优势

Robert随后讨论了ProtoPie的关键功能,以及这些功能为他的团队带来的好处。

多设备集成

ProtoPie Connect对拳头游戏来说是一个重大突破,使他们能够轻松地将多个设备(如游戏手柄、手机和桌面计算机)链接到设计工作流程中。这种无缝集成对于在不同平台上提供一致的用户体验至关重要,特别是在多重要素认证等功能中尤为重要。
一个实际的例子是游戏《2 XKO》,设计师利用ProtoPie微调了Xbox控制器的互动,确保了菜单导航的准确性。
ProtoPie Connect 允许将多个设备(如游戏手柄、手机和桌面计算机)集成到设计工作流程中。
ProtoPie Connect 允许将多个设备(如游戏手柄、手机和桌面计算机)集成到设计工作流程中。

Lottie 动画支持

ProtoPie 对 Lottie 动画的支持极大地提升了拳头游戏的界面设计,允许对细致的微动画进行精确控制。这个功能使设计师可以定制从微妙的图标移动到复杂的动画,为每个游戏界面增加了独特的深度。

可重用组件库

ProtoPie 的互动库是其突出的功能之一,这大大简化了拳头游戏的设计流程。设计师可以轻松地从一个全面的互动库中拖放元素,如社交导航条和卡片。这一功能有助于加快设计过程,并使在不同游戏之间保持一致的外观和功能变得更加容易。
使用 ProtoPie 的组件库为 Riot Games 的设计师节省了大量时间。
使用 ProtoPie 的组件库为 Riot Games 的设计师节省了大量时间。

可分享的密码保护链接

“我之前提到过可分享的链接很多次,但我真的不能强调这对我们有多么重要。” Robert 说道。
之前,在 Slack 中分享互动设计是件麻烦事,因为文件太大,无法正确预览,需要下载才能完整查看。现在,他只需发送一个密码保护的链接。团队成员可以立即访问、互动并在安全的环境中提供反馈。

支持与社区

ProtoPie 的响应式支持团队和活跃社区对拳头游戏的原型制作成功至关重要。能够直接获得支持和功能反馈,使拳头游戏能够根据他们的具体需求调整 ProtoPie,进一步将这一工具融入他们的设计流程。
ProtoPie极大地帮助了拳头游戏的设计团队
ProtoPie极大地帮助了拳头游戏的设计团队

与 Robert Ignasiak 的问答

问:作为一名没有视频游戏开发经验的 UX 设计师,您对刚刚进入这个行业的人有什么建议?
Robert: 我建议选择一个能接触到多种事物的地方。学习 Unreal Engine 等工具,并考虑从一家代理机构开始,而不是直接进入大型公司的内部职位。这将为你提供广泛的经验,这些经验在将来专注于某个领域时会非常有价值。
问:在第一次将原型交给工程师时,特别是当他们第一次遇到原型链接时,你的经验是怎样的?
Robert: 初始交接非常顺利。工程师们对一切都可以通过一个简单的链接访问感到印象深刻,ProtoPie 的直观性使他们能够立即理解和使用这些原型。
问:有哪些验证技术可以用来创建新功能或进一步提升客户旅程?
Robert: 我们使用标准的用户测试技术,观察用户与我们的原型互动并收集反馈。这包括详细记录用户的反应,无论是积极的还是消极的,这些反馈有助于我们调整和发展。
问:微交互,特别是动画,如何进入您的产品?这个流程是怎样的?
Robert: 对于表现力强的动画,我们可能会在 After Effects 中逐帧绘制 UI,然后通过 Bodymovin 导出为 JSON 文件。我们将这些动画集成到我们的原型中,并根据它们对整体动画的影响进行调整。
问:您是如何管理学习曲线的,特别是在开始使用 ProtoPie 的两年间,尤其是在处理实时项目时?
Robert:拳头游戏支持我学习新工具。我参加了 ProtoPie 101 课程,这帮助很大。学习新工具在设计中很常见,因此适应 ProtoPie 是这一持续学习过程的一部分。
问:您能否详细讲讲工作流程以及在不同迭代中如何结合 Figma 和 ProtoPie?您如何确保设计始终保持最新和同步?
Robert: Figma 和 ProtoPie 之间的过渡非常高效,因为 ProtoPie 能够识别和交换具有相同名称的组件。这使工作流程保持顺畅,原型保持最新,无需大量返工,因为设定的交互规则可以广泛应用于视觉更新。
在游戏开发中使用ProtoPie的好处
在游戏开发中使用ProtoPie的好处
提升您的游戏 UX/UI 原型设计
ProtoPie 已通过多设备集成、团队协作、更快的设计迭代和开发交接等功能,彻底革新了拳头游戏的设计方式,优化了他们的整个原型设计流程。像他们一样,开始你的 ProtoPie 原型设计之旅吧。