WWDC Quick Look 💓 By SwiftGGTeam
Design for Game Center

Design for Game Center

观看原视频

Highlight

Game Center 在 2020 年加入游戏内 Access Point、透明 Dashboard、收藏卡式成就、好友优先排行榜和多人大厅设计,让玩家能在游戏体验内部完成资料、成就、排行榜和邀请操作。


核心内容

游戏里的社交功能最容易变成一堆分散入口。玩家想看自己的资料、成就进度、好友排行或多人邀请时,游戏往往要在主菜单、设置页、关卡结算页里各做一套按钮和文案。入口不一致,玩家也很难知道哪些地方真的属于 Game Center。

2020 年的 Game Center 把这些入口收进一个新的游戏内体验。Access Point 用玩家头像作为统一入口,可以单独显示,也可以带上 achievement progress 或 leaderboard position 这类 highlights。玩家点开后进入 Dashboard,在不离开游戏的情况下查看资料、成就、排行榜和相关信息。

这场设计 session 的重点放在界面组织和资产规范上。Access Point 要出现在玩家回到的地方,Dashboard 出现时游戏要暂停或降低背景动画,成就和排行榜要有可辨认的图像资产,multiplayer lobby 需要一个清楚的入口。

官方贯穿全片的示例是 The Coast。它是一款引导船只远离海岸的独立游戏。Apple 用它展示了主菜单、关卡、成就、排行榜和多人入口怎样接入 Game Center,同时仍然保持游戏自己的视觉风格。

详细内容

Access Point:把 Game Center 放进主菜单

01:18)Access Point 是玩家进入 Game Center 的统一入口。它使用玩家头像,可以只显示头像,也可以搭配 highlights,露出成就进度和排行榜位置。Apple 建议尽量放在左上角,但允许根据游戏 UI 放到任意角落。

关键点:

  • Access Point 适合放在 main menu,玩家进入游戏前能先看到 Game Center 状态。
  • 如果主菜单不合适,可以放在 level select 或 Settings 这类玩家反复返回的界面。
  • Splash screen 和开场 cinematic 结束后再显示 Access Point,避免抢走启动流程的注意力。
  • 游戏开始后应隐藏 Access Point,把屏幕留给玩法和关键控制。
  • 自定义入口可以使用 Apple Design Resources 提供的 Game Center 图标,但不要改图标形状。

02:16)这个入口需要预留安全区域。以 iPhone 11 Pro 为例,竖屏 Access Point 最大尺寸是 62 x 335 points,建议从屏幕顶部或底部预留 114 points;横屏最大尺寸是 62 x 280 points,建议预留 91 points。其他设备的尺寸以 Human Interface Guidelines 为准。

Dashboard 和 Profile:让系统界面贴合游戏

04:36)玩家点开 Access Point 后会看到 Game Center Dashboard。它以透明层叠在游戏之上,会透出背后的画面颜色。Apple 建议 Dashboard 打开时暂停游戏,或至少减少过于抢眼的背景动画。

关键点:

  • Dashboard 支持横屏和竖屏,并在 iOS、iPadOS、macOS、tvOS 上保持一致体验。
  • tvOS 可以给 Dashboard 上传品牌 artwork,让 Game Center 入口更像游戏的一部分。
  • tvOS artwork 必须是 TIFF 或 PNG,支持透明背景,1x 尺寸为 923 x 150 pixels,2x 尺寸为 1846 x 300 pixels。
  • Artwork 不应直接使用 app icon,适合使用游戏 logo 或 word mark。
  • 如果游戏里提供直达资料页的按钮,文字应使用 Game Center Profile,Game Center 这个词不要本地化。

06:09)Profile 是 Dashboard 的第一块区域,玩家可以查看好友、好友建议,以及跨游戏的成就汇总。对于依赖好友排行榜或多人玩法的游戏,直达 Profile 的入口可以帮助玩家补全社交关系。

Achievements:把成就设计成收藏卡

08:02)Game Center 的成就界面改成 collectible card format。成就分为 completed 和 locked,也支持三种类型:standard、progressive、hidden。Standard 在条件满足后直接解锁;progressive 显示离目标还有多远;hidden 在解锁前隐藏细节。

关键点:

  • 每个成就都应该有独立图像,让玩家获得一个具体纪念物。
  • 避免在成就图像里放文字;系统会把图像裁成圆形,主要内容应放在中央。
  • 成就图像支持 JPEG、TIFF、PNG,1x 为 512 x 512 pixels,2x 为 1024 x 1024 pixels。
  • 一个游戏最多可以有 100 个成就,但 Apple 建议只放真正需要的数量,并为后续版本留出空间。
  • 标题和描述要短,成就卡片在截断前只显示两行;Apple 建议控制在 30 个字符以内。

10:53)成就通知适合出现在完成动作的当下。The Coast 的例子是在玩家清完关卡后立刻显示通知,让奖励和刚发生的游戏行为绑定。

Leaderboards:围绕核心玩法设计排行榜

11:56)排行榜应该对应游戏的核心机制。它可以记录最长距离、总金币数,也可以像 The Coast 一样按地理区域拆分。玩家进入某个排行榜后,会看到以好友竞争为中心的排名体验。

关键点:

  • 每个排行榜需要独立、醒目的 artwork,多个排行榜放在一起时也要像一组资产。
  • 普通平台的排行榜图像支持 JPEG、TIFF、PNG,1x 为 512 x 512 pixels,2x 为 1024 x 1024 pixels。
  • tvOS 排行榜是 16:9,并支持一到三层 multilayer images 来产生 parallax effect。
  • 排行榜标题最多显示两行;Apple 建议控制在 30 个字符以内,并使用 initial caps。
  • 游戏可以在关卡开始前或结算后嵌入排行榜信息,让玩家在关键时刻看到自己和好友的位置。

Multiplayer 与 App Store:把邀请和发现放到同一条路径

15:51)多人游戏需要一个清楚的按钮来打开 multiplayer lobby。Lobby 打开后,玩家可以通过 player picker 添加 nearby players、friends、recent players 和 contacts,再点击 Invite and Start。

关键点:

  • Lobby 打开时应暂停背景里分散注意力的动画。
  • 如果游戏已有自己的多人 UI,也可以不用系统 UI,把 Game Center multiplayer features 接入自有流程。
  • App Store 也会使用 Game Center 信息展示玩家资料、成就、好友正在玩的游戏,以及产品页上的 friends playing。
  • 游戏接入 Game Center 后,这些 App Store 展示位才有机会出现。

核心启发

  1. 主菜单上的玩家状态入口:做一个干净的主菜单,把 Access Point 放在左上角,配合成就进度或排行榜位置 highlights。这样玩家启动游戏后先看到自己的 Game Center 状态,再进入关卡。开始时先检查主菜单、设置页和选关页的 UI,按设备方向预留 Access Point 最大尺寸。

  2. 成就收藏册:把每个重要行为都配一张独立成就卡,例如完成某个地区、救回特定数量货物、解锁隐藏航线。Progressive achievement 适合长期目标,hidden achievement 适合探索目标。开始时先列出 20 个以内的核心成就,为每个成就准备无文字、主体居中的 512 x 512 和 1024 x 1024 图像。

  3. 关卡前后的好友竞争提示:在关卡开始前显示玩家当前在好友榜里的位置,结算时显示是否超过好友最高分。这样排行榜不只存在于 Dashboard 里,也会出现在玩家最关心分数的时刻。开始时先挑一个最能代表核心玩法的 leaderboard,再准备一张能一眼区分关卡主题的图像资产。

  4. 低干扰多人大厅:在主菜单或模式选择页放一个明确的 Multiplayer 按钮,打开 Game Center lobby 后暂停背景动画。玩家选择 nearby players、friends、recent players 或 contacts 时,不会被游戏场景里的动态效果干扰。开始时先把邀请流程放在非战斗状态,再决定是否使用系统 lobby 或自定义多人界面。

  5. tvOS 专属展示资产:如果游戏支持 Apple TV,为 Dashboard 准备横向 logo 或 word mark,为排行榜准备 16:9 multilayer images。玩家在电视上距离屏幕更远,资产要简单、对比清楚,主要内容不要贴近边缘。开始时先用 HIG 尺寸检查 Dashboard artwork 和排行榜 artwork,再测试 focus 与 parallax 裁切。

关联 Session

评论

GitHub Issues · utterances