六年完善 WatchOS 上的 Maps

Source: Hacker News

我热爱进行荒野探险。没有比在山中远离人烟的地方更让我感到快乐的了。因此，我花了大量时间学习在远离文明的环境中如何安全地探索和导航。我发现防止迷路的最重要习惯是非常规律地检查自己的位置，而实现这一点的最佳方式就是在手腕上携带一张地图。

超过六年的时间里，我一直在致力于打造在 Apple Watch 上的最佳地图体验。随着昨天 Pedometer++ 8 的发布，我觉得这段设计旅程已经到达了一个有意义的终点。我敢说，Pedometer++ 的 watchOS 地图支持是 App Store 上绝对最出色的。

所以我想回顾一下为实现这一目标所经历的整个过程。

Source:

初步尝试

自从 Apple Watch 推出以来，我一直想在手腕上拥有一张好用的地图。直到 watchOS 6 引入 SwiftUI 并首次实现了 “真实” 应用，这才在现实中变得可能。但在那段早期，屏幕非常小，处理器也很慢。我还没达到想要的效果。

这是我在 Pedometer++ 中发布的第一次尝试。这些地图完全由服务器生成，这意味着每次想刷新显示时，都需要往返发送相关的运动数据。该系统让我验证了想法，但它永远不可能在导航或日常使用中实用，也无法离线工作。

自定义映射引擎

我知道如果想在这个目标上取得进展，我需要在更底层工作，于是我开始构建一个完全基于 SwiftUI 的地图渲染引擎。SwiftUI 是唯一的选择，因为它是 watchOS 唯一支持的，而且它在将地图放入小部件时也很有帮助，而小部件同样只支持 SwiftUI。

2021 年，我让这个引擎达到了可以在 watchOS 上可靠且高性能渲染地图的水平。借助它，我可以渲染任何基于瓦片的地图，并在其上叠加位置信息。

地图设计

接下来出现的问题是如何最佳地向用户展示数据。watchOS 上的应用设计既有趣又令人沮丧。你需要为一个相对很小的屏幕设计界面，而且只能单手操作。在这种情况下，我希望用户能够阅读地图并用它进行导航，同时还能访问其他与锻炼相关的信息。

这开启了一系列漫长的设计尝试，其中大多数（说实话）都相当糟糕。

最终，我采用了“模态”方式，让用户可以通过左上角的按钮在地图屏幕和指标屏幕之间切换。

该界面提供了一个用户可以自由平移/缩放地图的上下文，以及另一个我可以使用更标准的 watchOS 选项卡页面界面来显示指标和控制的上下文。我把它发布到了 Pedometer++，但总觉得有些地方不太对劲。

这种设计感觉像是妥协，而且并不算好的妥协。为了让地图可交互，我不能让它成为任何涉及滑动的 UI 结构的一部分。随着 Apple Watch 屏幕变大，牺牲地图空间的必要性也随之降低。

于是我开始尝试其他设计。太多设计了。

有一段时间，我认为需要把指标放在屏幕底部。然而，这会在较长的外出或非导航为主的锻炼中带来其他问题。我不断迭代，甚至想出了更多设计。

所有这些设计都有同一个根本问题：它们一次只能显示固定数量的字段。

我可以让界面可配置，但 watchOS 设计的基本规则之一是应避免任何在手表上需要超过几秒钟的交互。任何用户可配置的设置本质上都很繁琐，所以我不喜欢这种做法。

暗色模式、液体玻璃与制图

就在我仍在思考如何最佳地构建应用结构的设计挑战时，Apple 宣布了 watchOS 26 以及 Liquid Glass 的到来。Liquid Glass 的核心设计要素之一是将层叠元素堆叠在一起，另一要素则是哪些颜色组合最为契合。

我之前使用 Thunderforest Outdoors 作为应用的底图。我很喜欢这张地图所包含的内容，但当我在其上叠加玻璃质感的元素时，发现它并不太适合 Liquid Glass。

于是……我委托制作了一张自定义地图。与出色的制图师 Andy Allen 合作，我们创建了一张全新的底图，使其在 Liquid Glass 下呈现出极佳的视觉效果。¹

我们在视觉上简化了地图，提高了要素的对比度，并让地图要素更加饱和，以防在玻璃层下显示时变得混沌不堪。

我终于拥有了暗色模式的瓦片变体。虽然在 iOS 上已经很有帮助，但在 watchOS 上更是大放异彩。Andy 与我真正致力于打造一种在臂展距离下也能极其清晰可读的效果。

这些努力的结果是，我现在拥有了一张适用于 watchOS 的出色地图……但其设计并未匹配这份卓越。

追求卓越

我不断尝试。为了摆脱设计瓶颈，我请来了出色的设计师 Rafa Conde。我需要一双新鲜的眼睛来审视这个项目，结果这次合作很快就收到了成效。他们提出了多种备选布局，但当我看到这个方案时，我立刻知道它就是唯一的选择。

在左上角叠加指标，并将地图设为垂直堆叠的顶部页面，这正是正确的答案。该设计通过要求先点击地图进入“浏览模式”来处理交互。

微调与打磨

当我把整体概念锁定后，真正的乐趣开始了：实际构建应用并调校所有细节。我相当快地把 Rafa 的概念转化为可工作的原型。这让我能够在现场…真的在现场验证想法。走了几百英里后，我确信这是正确的方向。

接下来，我需要调校字体并做出更细微的设计选择。

再经过一些迭代，我得到了昨天发布的设计。它可读、实用，并且（以我拙劣的眼光）很美。

能够用我无比自豪的设计为这段六年的旅程画上句号，感觉真的很好。这个界面凝聚了大量的努力和学习。它终于给了我一种在平台上原生却又新颖独特的设计感。

以下是过去六年中该设计的演变过程：

附言：关于 MapKit 的考虑

虽然我在 watchOS 上的地图工作远早于 Apple 在平台上推出 MapKit，但值得解释一下我为何选择自行实现这些功能，而不是使用它。

根本上，我发现 MapKit 适用于基础用途，但它并未提供我希望 Pedometer++ 能提供的那种可配置性和实用性。例如：

• watchOS 上的 MapKit 总是以深色模式显示，这虽然是一个不错的默认设置，但在某些可访问性和用户选择的需求上会受限。我需要它能够由用户自行选择。
• 虽然 watchOS 上的 MapKit 随时间有所改进，但在动画和覆盖层方面仍显局限。
• MapKit 在等高线和步道标记方面的覆盖正在提升，但许多地区仍基本为空白，而实际存在更丰富的细节。例如，下图左侧是我的地图，右侧是同一地点（我在苏格兰最喜欢的徒步路线的起点）的 MapKit 显示。

我仍然觉得很酷的是，我的工作让我可以说自己“委托了一位制图师”来为我制作地图。 😁

Footnotes

1. 该自定义底图专门设计用于配合 watchOS 26 中 Liquid Glass 引入的半透明和分层效果。 ↩