六年完善 watchOS 地图

推荐词

watchos的官方地图app是一众手表系统里体验最好的地图app
没想到第三方的地图app也这么用心

原文(机器翻译)

Six Years Perfecting Maps on watchOS
六年完善 watchOS 地图

I love going on wilderness adventures. I am rarely happier than when I am far off into the mountains without a soul in sight. As a result, I have spent a lot of time learning how to safely explore and navigate when I’m away from civilization. The most important habit I’ve found for not getting lost is to be very regular in checking your location as you go, and the best way I’ve found to do that is to have a map on my wrist.
我喜欢去野外探险。我很少比在远离人烟的山中更快乐的时候更快乐。因此,我花了很多时间学习如何在远离文明的地方安全地探索和导航。我发现防止迷路的最重要习惯是经常检查你的位置,而我发现的最佳方法是在手腕上放一张地图。

For more than six years I’ve been working towards creating the best possible mapping experience on the Apple Watch. With yesterday’s launch of Pedometer++ 8, I feel like this design journey has reached a meaningful destination. I would contend that Pedometer++’s watchOS mapping support is the absolute best available on the App Store.
在过去的六年里,我一直致力于在 Apple Watch 上创造最佳的地图体验。随着 Pedometer++ 8 的昨日发布,我觉得这次设计之旅已经达到了一个有意义的终点。我坚持认为,Pedometer++ 的 watchOS 地图支持是 App Store 上绝对最好的。

So I wanted to walk through the journey it took to get here.
所以我想回顾一下到达这里的旅程。

Early Efforts 早期努力

I have wanted a good map on my wrist since the Apple Watch launched. This wasn’t realistically possible until watchOS 6, which brought SwiftUI to the platform and, for the first time, made “real” apps possible. But in those early days, the screens were tiny, and the processors slow. I couldn’t quite get to where I wanted.
自从 Apple Watch 发布以来,我就一直想要一款手腕上的地图。直到 watchOS 6 出现,这才成为可能,它将 SwiftUI 带到这个平台上,并且首次使得“真正”的应用程序成为可能。但在那些早期,屏幕非常小,处理器也很慢。我无法达到我想要的目标。

This was my very first attempt that shipped in Pedometer++. These maps were generated completely on the server, which involved sending the relevant workout data roundtrip every time I wanted to refresh the display. This system let me validate the idea, but it was never going to be practically useful for navigation or regular use, and could never work offline.
这是我第一次尝试,它被集成在 Pedometer++中。这些地图完全在服务器上生成,每次我想刷新显示时,都需要发送相关的运动数据。这个系统让我验证了想法,但它永远不会对导航或日常使用有任何实际用途,而且永远无法离线工作。

Custom Mapping Engine 自定义映射引擎

I knew that if I wanted to make progress towards this goal, I’d need to work at a lower level, so I got to work building a fully SwiftUI-native map rendering engine. SwiftUI was the only choice because it’s all that watchOS supported, and proved to be helpful for putting maps into widgets, which also only support SwiftUI.
我知道,如果我想朝着这个目标前进,我需要从更低层次入手,因此我开始着手构建一个完全基于 SwiftUI 的地图渲染引擎。SwiftUI 是唯一的选择,因为它是 watchOS 唯一支持的,而且被证明对于将地图放入小部件非常有帮助,而小部件也只支持 SwiftUI。

In 2021, I got this engine to a place where I could reliably and performantly render a map on watchOS. With it, I can render any tile-based maps and overlay location information on top.
2021 年,我将这个引擎优化到了可以在 watchOS 上可靠且高效地渲染地图的程度。有了它,我可以渲染任何基于瓦片的地图,并在其上叠加位置信息。

Map Designs 地图设计

Next came the question of how best to surface data to users. App design on watchOS is a really fun — but frustrating — challenge. You are designing for a relatively tiny screen, which must be operated one-handed. In this case, I want the user to be able to read the map and use it to navigate, while also having access to other workout-related information.
接下来是如何最好地将数据展示给用户的问题。watchOS 的应用设计确实是一个既有趣又令人沮丧的挑战。你需要在相对较小的屏幕上设计,并且必须用单手操作。在这种情况下,我希望用户能够阅读地图并使用它进行导航,同时还能访问其他与锻炼相关的信息。

This began a long series of design attempts, most of which (if I’m being honest) were kinda awful.
这开启了一系列漫长的设计尝试,其中大部分(如果我说实话的话)简直糟糕透顶。

In the end, I settled on a “modal” approach where the user can switch between a map screen and a metrics screen using a button on the top-left corner.
最终,我选择了一种“模态”方法,用户可以通过左上角的按钮在地图屏幕和指标屏幕之间切换。

This interface provides one context where the user can freely pan/zoom around the map and another where I can use the more standard watchOS tabbed page interface for metrics and controls. I shipped this to Pedometer++, but there was always something that didn’t quite sit right with me about it.
这个界面提供了一个用户可以自由平移/缩放地图的上下文,以及另一个我可以使用更标准的 watchOS 标签页界面来显示指标和控制的上下文。我将这个功能提交给了 Pedometer++,但关于它,我总觉得有些地方不太对劲。

This design felt like a compromise, and not in a good way. I felt that in order to achieve the goal of making the map interactive, I couldn’t have the map be part of any UI structure that involved swipes. As the screens on Apple Watches got larger, it felt less needed in order to give the map enough space to be useful.
这种设计感觉是一种妥协,而且不是好的妥协。我觉得为了实现地图交互的目标,地图不能是任何涉及滑动的 UI 结构的一部分。随着 Apple Watch 屏幕的增大,感觉不再需要给地图足够的空间来变得有用。

So I set about trying alternative designs. SO many designs.
于是我开始尝试替代设计。设计了很多设计方案。

For a while, I thought that I needed to find a way to put the metrics at the bottom of the screen. However, that would lead to other problems on longer outings or for workouts that aren’t navigation-focused. So I kept iterating and came up with even more designs.
有一段时间,我以为需要找到一种方法将指标放在屏幕底部。然而,这会在较长时间的户外活动或非导航重点的锻炼中导致其他问题。因此,我不断迭代,并提出了更多设计方案。

All of these designs suffered from the same fundamental issue: they required the app to display only a fixed set of fields at a time.
所有这些设计都存在同一个根本问题:它们要求应用程序一次只能显示一组固定的字段。

I could make the interface configurable, but one of the fundamental rules of watchOS design is that you should avoid any interaction that takes more than a few seconds on the watch. Any user-configurable setup is inherently fiddly, so I didn’t like this approach.
我可以让界面可配置,但 watchOS 设计的基本原则之一是应避免在手表上进行任何需要超过几秒钟的交互。任何用户可配置的设置本质上都很繁琐,因此我不喜欢这种方法。

Dark Mode, Liquid Glass, & Cartography

暗黑模式、流光玻璃与制图

Around the same time I was still wrestling with the design challenges of how best to structure the app, Apple announced watchOS 26, and the arrival of Liquid Glass. One of the core design aspects of Liquid Glass is layering stacking elements on top of each other, but another is the types of colors that work best with each other.
大约在同一时期,我仍在努力应对如何最佳地构建应用程序的设计挑战,苹果发布了 watchOS 26 和 Liquid Glass 的问世。Liquid Glass 的核心设计方面之一是层叠元素堆叠在一起,但另一个是相互配合的最佳颜色类型。

I was previously using Thunderforest Outdoors as my basemap for the app. I love the content this map includes, but when I started overlaying glassy elements over it I found that it wasn’t well-suited for Liquid Glass.
我之前使用 Thunderforest Outdoors 作为应用程序的底图。我喜欢这张地图包含的内容,但当我开始在这之上叠加玻璃元素时,我发现它并不适合 Liquid Glass。

So… I commissioned a custom map. Working with the incredible cartographer Andy Allan, we created a completely new basemap that would look fantastic with Liquid Glass.1
所以……我定制了一张地图。与令人难以置信的制图师 Andy Allan 合作,我们创建了一个全新的底图,它将与 Liquid Glass 完美搭配。 1

We simplified the map visually, increased the contrast of the elements, and made the map elements more saturated to prevent them from becoming a muddy mess when shown below glass.
我们简化了地图的视觉效果,增加了元素的对比度,并使地图元素更加饱和,以防止它们在玻璃下方显示时变得浑浊不堪。

With this work done, I had another opportunity: I could finally have a dark mode variant of the map tiles. While helpful on iOS, this really shines on watchOS. Andy and I really worked toward something which would be incredibly legible at arm’s length.
完成这项工作后,我又有了另一个机会:我终于可以拥有地图瓦片的暗黑模式变体。这在 iOS 上很有帮助,但在 watchOS 上效果更佳。我和 Andy 真的致力于打造一种在手臂长度距离下极其易读的东西。

The result of these efforts is that now I have a great map for watchOS… but a design that didn’t match that greatness.
这些努力的结果是,我现在有了为 watchOS 的绝佳地图……但设计却与这种卓越不匹配。

Striving for Great 追求卓越

I kept trying. To get me out of my design rut, I enlisted the help of the fantastic designer Rafa Conde. I needed a fresh set of eyes on this and very quickly, this partnership paid off. They proposed a variety of alternative layouts, but when I saw this one I knew it was the one.
我不断尝试。为了摆脱我的设计困境,我请了出色的设计师 Rafa Conde 帮忙。我需要有人从新角度审视这个设计,而且很快,这次合作就取得了成效。他们提出了多种替代布局,但当我看到这个设计时,我知道这就是我要的。

The layering of the metrics on the top-left corner, with the map being the top page of a vertical stack, was the correct answer. This design handles interactivity by requiring a tap on the map first to enter “browse mode”.
在左上角叠加指标,并将地图作为垂直堆栈的顶层页面,这是正确的答案。该设计通过要求首先点击地图进入“浏览模式”来处理交互性。

Tweaking and Polishing 调整和完善

Now that I had the overall concept locked in, the real fun began, actually building the app and dialing in all the details. I fairly quickly took Rafa’s concept and turned it into a working prototype. This let me validate the idea in the field… literally. After walking a few hundred miles with it, I was confident it was the correct approach.
现在我已经确定了整体概念,真正的乐趣才真正开始,实际上是构建应用程序并完善所有细节。我相当快地将拉法的概念转化为一个可工作的原型。这让我能够在实际中验证这个想法……字面意义上。在带着它走了几百英里后,我确信这是正确的方向。

Next, I needed to dial in the font and make more subtle design choices.
接下来,我需要调整字体并做出更微妙的设计选择。

After a bit more iteration, I arrived at the design that shipped yesterday. It is legible, useful, and (in my humble opinion) beautiful.
经过进一步的迭代,我最终确定了昨天发布的这个设计。它清晰易读、实用,并且(在我看来)非常美观。

It feels really good to be able to cap off this six-year journey with a design I couldn’t be more proud of. This screen represents so much accumulated effort and learning. It finally gives me a design which feels native on the platform, but also novel and unique.

Here is the evolution of this design over the last six years:

Postscript: Considering MapKit

While my work on watchOS mapping massively predates the arrival of Apple’s MapKit onto the platform, it is probably worth explaining why I decided to do all of this custom work to avoid using it.

Fundamentally, I find that MapKit is great for basic uses, but doesn’t provide nearly the level of configurability and utility which I want Pedometer++ to offer. For example:

  • MapKit on watchOS always shows in dark mode, which generally is a good default, but closes the door on some accessibility and user choice reasons. I needed it to be a user-selectable option.
  • While MapKit on watchOS has gotten better over time in terms of what you can do with it, I still find it a bit limiting in terms of animations and overlays.
  • MapKit’s coverage is improving with regards to topographic contours and trail marking, but there are far too many places where the MapKit map is essentially blank, but I know there should be more rich details available. For example, here is my map vs MapKit at the trailhead of one of my favorite hikes in Scotland.

  1. I still find it so cool that my work on this allows me to say that I “commissioned a cartographer” to work on something for me. :grin: :right_arrow_curving_left:
    我仍然觉得我的工作很酷,因为通过这个项目,我可以说我“委托了一位制图师”为我工作。:grin: :right_arrow_curving_left:

Copyright © 2026 - David Smith All Rights Reserved.
版权所有 © 2026 - David Smith
I use affiliate links when linking to iTunes and Amazon.
我在链接到 iTunes 和 Amazon 时使用联盟链接。