Forrest 如何为健身追踪带来新意，然后再次做到

第二张专辑很难，但当涉及到设计出色的应用程序时，你如何让你的第一次重大迭代取得成功？对于 Forrest 背后的两人团队来说，从 v1 到 v2 的道路是显而易见的，并且只是时间问题。

Forrest 采用健身追踪并添加了竞争元素。 当您设置锻炼时，您可以选择与自己的个人最佳成绩或之前的成绩竞争，甚至可以与具有自定义时间、距离或速度的幽灵赛车手竞争。 在您锻炼期间，您可以通过应用程序的比赛屏幕和音频提示查看您与虚拟竞争对手的比较情况。

Matt Emmins 和 Adam Swinden（Forrest 背后的二人组）希望通过社交元素更进一步，让您与朋友进行虚拟和异步竞争。 加上彻底的重新设计、新的图标和新的免费增值定价模式，两人已经面临艰巨的任务。 那么，他们是怎么做到的呢？

我们采访了设计师兼联合创始人 Matt，讨论 Forrest 独特的健身追踪方法、他们如何达到 v2 以及 Sketch 如何帮助他们实现这一目标。

Forrest 背后的想法非常独特。 它是如何产生的？

Forrest 的诞生源于 Adam 的妻子 Kathleen 的一句随意评论，她说她想知道她在跑步时的表现与上次相比如何。

她所描述的是类似于 Mario Kart 的体验，当您在之前完成的赛道上与具有最佳时间的“幽灵赛车手”比赛时。 Adam 意识到这可以与可视化和一系列音频提示一起使用，而这现在构成了 Forrest 比赛体验的基石。

Forrest 的第一个设计是如何组合在一起的？

我设计的第一个东西是 logo。 我记得当 Adam 向我提出这个想法时，我开始用 Sharpie 在一堆 Post-It 便笺上乱涂乱画。 它始于字母和基于 Adam 喜欢的应用程序名称 Forrest（如Forrest Gump）的抽象标记的混合。

我记得当 Adam 向我提出这个想法时，我开始用 Sharpie 在一堆 Post-It 便笺上乱涂乱画。

我喜欢这些字母，但从来没有喜欢过它们，但这个标记相当不错（如果我可以这么说的话）。 这是一个抽象的、镜像的 F，有点像一棵树。 所有这些都落实到位的地方是向前突出的箭头。 速度、方向、前进的动力。 感觉一切都在里面了。

老实说，界面的最初设计很糟糕，但这只会让我们快速迭代并抛弃不起作用的东西。 Adam 一直是移动和一流行为的巨大倡导者，因此在某些机制和架构决策方面以他为榜样，使我们获得了第一个 MVP。

在为像 Forrest 这样的应用程序设计 UI 时，您面临哪些挑战？

某人所处的活动状态是界面外观的关键。 例如，我们设计了赛车手屏幕，以显示我们期望某人处于其最高活动水平时的理想细节水平。 顶部有一个进度条，显示赛车手当前的位置和进度，除此之外，没有其他东西会使界面混乱。

我们对任何关键控件（暂停、音频开/关和屏幕锁定）使用大型点击目标，并使用滑动 手势在三个关键比赛视图之间移动，每个视图都显示不同的数据。 我们尽可能大地扩大这些控件，以获得最大的可浏览性。 当您将这些控件与自动降低音乐音量的音频提示配对时，它就非常强大。

在不删除上下文的情况下，确定某人需要了解您向他们展示的内容的最低信息量，这说起来容易做起来难。 我发现我们的图标可以在这方面有所帮助。 例如，温度和天气提供了一些有关当天情况的上下文，但在顶层比赛源中，它是比赛数据本身的补充。

在不删除上下文的情况下，确定某人需要了解您向他们展示的内容的最低信息量，这说起来容易做起来难

我想说，这种简化的想法是 v2 相对于 v1 的改进之一。 在比赛之外，我们一直有更多数据和内容繁重的屏幕，但是一旦您进入比赛，我们就会大幅减少内容。 这只是您需要的，仅此而已。 对于大多数跑步者来说，我敢说他们从不看它，但是对于带有车把支架的骑手来说，正面交锋和统计数据视图成为一个很棒的 HUD。

您是如何决定该是时候推出 Forrest 的 v2 了？ 这是您长期计划的事情，还是这种需求随着时间的推移有机地出现？

V2 是 V1 最初应该的样子。 我们一直计划构建与您的朋友比赛的机制，并且在我们的第一次讨论中提到了社交方面。 只是在我们开始开发应用程序的第一个版本之后，我们才意识到我们需要将其分解为更小的块才能获得一些东西。

由于我们两个儿子的到来（应用程序图标角色以他们的名字命名），最初的构建花费了大约五年时间。 在听到亚当的妻子怀孕后，我们的目标是在 Theo 出生之前发布。 然后我们的目标是在我的儿子 Isaac 在 6 月出生之前发布，但最终我们在 2020 年 10 月 18 日发布。 在这五年中，我们在测试、自己使用产品并确定了整个功能路线图时更改了事情 - 其中一些功能在 v2 中。

Forrest 完全独立，自筹资金，并且 100% 由我们自己拥有

Forrest 完全独立，自筹资金，并且 100% 由我们自己拥有。 随着我们家庭的壮大，V2 变得更加重要。 我们看到了为自己建立合法且有利可图的企业的机会，让我们有更多时间与家人共度时光。

除了 v2 带来的新功能之外，您还想实现哪些具体的设计目标？

从设计的角度来看，我将 v2 视为尽可能简化的机会。 V1 并不密集或杂乱，但我可以改进一些方面，例如在 feed 中标记最终比赛位置，以及更好地将内容分组以关注距离和时间。

“创建比赛”屏幕是我们在 v2 中的重点。 我们希望尽可能轻松地构建比赛。 我们使该比赛构建器元素更加一致，而不是使用三个单独的控件来更改设置。 这似乎运作良好，并且使用户更容易清楚地看到他们将要开始的锻炼。

我特别喜欢做的另一件事是策划一套新的应用程序图标，包括内部制作的、风格化的 logo 解释，以及由社区慷慨捐赠的一套设计师图标。 我们希望继续这样做，但是让艺术家和设计师自由地解释您构建的东西是非常令人兴奋的。

我们也引入了浅色模式，考虑到我们的品牌绿色 (#CBF500) 在浅色背景下的可访问性问题，这确实是一项有趣的挑战。最后，这也是一个重新设计我们整个图标套件的机会。我非常喜欢图标，如果我少花点时间绘制它们，我们可能三个月前就发布了。

请详细介绍一下图标设计。您是如何创建一套既具有 Forrest 独特性，又具有一致外观和感觉的图标的？

我一直非常喜欢图标，喜欢您可以将整个事物提炼成这种简单的象形表示。这就像一个设计任务，追求纯粹的简洁和清晰，同时保留其含义的最真实形式。

总体而言，Forrest 融合了曲线和硬边，这在保持一定程度的一致性的同时，提供了很大的灵活性。比赛类型的图标，在秒表和时钟的形状中使用了大量的圆形，现在通过比 v1 版本更结构化和稍微更方形的边缘进行了巩固。

图标就像一个设计任务，追求纯粹的简洁和清晰，同时保留其含义的最真实形式。

对于像信息流中的天气图标这样的小东西，我使用的是 20x20 画板上的 1 像素描边。我为这些图标添加了一些鲜艳的颜色，并将它们渲染为全彩色资源，而不是我通常提供的着色 PDF 资源，以帮助传达时间和温度的额外细微差别。

我实际上遇到困难的一件事，并且花费了大量的时间进行调整，是构建一套在深色模式下感觉重量一致的图标。当反转到负色调中时，描边和文本通常感觉更重，因此这意味着创建一个整套在视觉上与其浅色模式对应物保持一致的图标，即使它们薄了 1-2 像素。

在引入 Forrest v2 的社交元素时，您是否面临其他挑战或需要考虑的事项？

社交方面充满了细微差别，从如何引导人们、创建帐户、找到人、管理谁可以查看您的信息，到处理关注、请求、接受等各种状态。某人是否有个人资料图片？如果没有，您会显示什么？在注册期间或同步失败时，您如何处理错误？

该应用程序仍然可以免费使用，并且可以在本地运行，无需帐户。不强迫人们注册仍然很重要，这样他们就可以无障碍地使用 Forrest，并希望体验该平台提供的更多功能。

一个挑战是设计一个灵活的界面，能够很好地显示我们无法控制的数据。我们希望 Forrest 超越地理界限，而且西方文化之外的姓名通常比“John Smith”长很多。正是这些小事情，在您使用真实数据并进行压力测试之前，您会意识到在完美的设计图中无法考虑到这些。

您使用 Sketch 的历史是怎样的？为什么它会成为您设计 Forrest 时的选择？

自从 2018 年我们将所有客户端项目的界面设计从 Adobe Illustrator 转移过来之后，我们一直在“工作中”使用 Sketch。Sketch 为我们提供了所需的像素精度，以及强大的工具集，同时保持了我们在 Illustrator 中喜欢的矢量和可扩展元素。

Forrest v1 的工作始于 2015 年 4 月，所以几乎所有第一个版本都是在 Illustrator 中设计的，并导出为平面图形供 Adam 解释。只有在我们过渡到在工作中使用 Sketch 之后，我才开始手动移植我们少量设计，整理它们，并创建符号和可用的屏幕。

V2 几乎是有机地诞生于我的第四个“整理文件”，我试图确定我的颜色、符号，并尽可能保持文档的原始状态。只有我一个人在做这件事，但我知道从长远来看，它会让我的生活更轻松。它从一张空白画布开始，导入以前的符号，整理它们并在我进行时改进它们。

Sketch 提供的众多功能以及最新更新中生活质量的改进，继续使其成为一种愉悦的工作体验。

除了 Forrest 和一般的客户项目之外，我花了很多时间想知道 Figma 那边的草是否更绿。尽管我发现他们所做的事情非常引人注目，但原生的 Mac 应用程序、性能和 Sketch 当前的功能集太吸引人了，无法放弃。Sketch 允许我几乎不受限制地进行设计，并且它可能比增加更多压力，这总是有好处的。

尽管我对 Sketch 很熟悉，但它现在提供的众多功能以及最新更新中生活质量的改进，继续使其成为一种愉悦的工作体验。

在设计 Forrest 的过程中，是否有任何特定的 Sketch 功能对您有所帮助？

我想说，Sketch 的一些最关键的功能也是我现在理所当然的功能。在信息流等区域中，我们有许多可重复的元素，通过符号，我们有一个单一的真理来源来编辑这些元素。这意味着进行更改只需花费一小部分时间，因为更新会立即级联。

符号的智能布局属性使它们更加强大。例如，无论您自己比赛，还是其他赛车手和一些个人最佳成绩，信息流符号都是相同的“外壳”。构建具有自动调整大小组件的复杂嵌套符号使设计过程更容易，而且当您希望内容根据您更改的数据增长时，也会令人非常满意。

构建具有自动调整大小组件的嵌套符号使设计过程更容易，并且令人非常满意。

能够创建一个单一的图标作为符号，并使用颜色变量对其进行着色，可以节省复制符号和创建多个图标的麻烦。最好的例子是幽灵赛车手，我想在设计中通过黄色环或紫色环来展示视觉多样性，而不是全部相同。

我们在 Forrest 中有广泛的颜色调色板。我们使用颜色来识别信息流中的对手赛车手，我们有关键的品牌颜色，然后是奖牌的颜色。当然还有浅色和深色模式。使用颜色变量，我只有一个目录可以编辑并保持一致。

我还发现 Sketch - View and Mirror app 非常有用。能够立即在设备上看到我的实时设计有助于更快更有效地做出决策。纯粹从笔记本电脑上工作无法为您提供与设计相同的真实世界环境。

您与您的联合创始人 Adam 的工作流程是怎样的？您如何准备您的设计以进行交付，并确保它们处于最佳状态以进行构建？

通常，我们会在 Slack 上或电话中讨论一个想法。从那里，我会创建一个初始铅笔草图，然后将其导入 Sketch 以开始进行处理。在这样做的过程中，我会通过 Slack 发送屏幕截图，并获得 Adam 的想法和反馈。我将继续在 Sketch 中迭代，直到我们确定了我们正在做的事情。我试图确保所有颜色、样式等都已完全记录，但我肯定可以保持一个更干净的文档。对不起，亚当。

然后，我将我的设计导出到 Zeplin，供 Adam 开始构建。Adam 构建，然后我们测试。我会提供任何 QA 或反馈，然后幸运的是，它会进入下一个功能。我们的工作流程非常简单，它之所以有效，可能是因为我们团队规模小，而且工作关系良好。

从个人角度来看，我非常钦佩 Adam。到目前为止，他对 Forrest 的成功起到了至关重要的作用。他是同类最佳体验的巨大倡导者，并推动我作为创意人员走得更远。谢谢你 Adam，没有你，就没有 Forrest！

Forrest 可在 iOS 上下载。

您是否用 Sketch 创造了伟大的东西？我们很乐意看到它。在 社区论坛 中告诉我们！