技术文章

第二张专辑很困难，但在设计出色的应用程序时，如何使您的第一次大迭代大受欢迎？对于 Forrest 背后的两人团队来说，从 v1 到 v2 的路径是显而易见的，而且只是时间问题。

《福雷斯特》采用了健身追踪功能，并增添了竞技元素。当您设置锻炼时，您可以选择与自己的个人最好成绩或之前的成绩进行比赛，甚至可以选择与自定义时间、距离或配速的幽灵赛车手进行比赛。在锻炼期间，您可以在应用程序的比赛屏幕上并通过音频提示了解您与虚拟竞争对手的比较情况。

马特·埃明斯 (Matt Emmins) 和亚当·斯温登 (Adam Swinden)——《福雷斯特》(Forrest) 背后的二人组——希望通过社交元素更进一步，让你可以与朋友进行虚拟、异步的竞争。再加上彻底的重新设计、新的图标和新的免费增值定价模式，两人的工作就完成了。那么，他们是怎么做到的呢？

我们采访了设计师兼联合创始人 Matt，讨论了 Forrest 对健身追踪的独特看法、他们如何达到 v2 以及 Sketch 在此过程中如何提供帮助。

《福雷斯特》背后的想法非常独特。它是怎么发生的？

阿甘的诞生源于亚当的妻子凯瑟琳的一句评论，她提到她想知道与上一次相比，她在跑步中的表现如何。

她所描述的是一种类似于马里奥赛车的体验，当你在一条之前完成的赛道上与一位以你最好成绩的“幽灵赛车手”比赛时。亚当意识到这可以与可视化和一组音频提示一起使用，这现在构成了福雷斯特比赛体验的基石。

《福雷斯特》的最初设计是如何组合在一起的？

我设计的第一件事就是标志。我记得当亚当向我提出这个想法时，我开始用记号笔在一叠便利贴上写下这些狂野的标记。它以字母和抽象标记的混合开始，基于 Adam 喜欢的应用程序创意名称“Forrest”（如《阿甘正传》中的名称）。

我记得当亚当向我提出这个想法时，我开始用记号笔在一叠便利贴上写下这些狂野的标记。

我喜欢这个字母，但从来不喜欢它，但标记非常坚固（如果我自己这么说的话）。这是一个抽象的、镜像的F，有点像一棵树。一切都到位的地方是向前投射的箭头。速度、方向、前进运动。感觉一切都在那里。

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

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

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

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

在不消除上下文的情况下，确定人们需要了解您向他们展示的内容所需的最低信息水平，说起来容易做起来难。我发现我们的图像可以在这一领域提供帮助。例如，温度和天气提供了有关当天状况的一些背景信息，但在顶级比赛饲料中，它是比赛数据本身的补充。

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

我想说，这种简化的想法是 v2 相对于 v1 的改进之一。在比赛之外，我们总是有更多的数据和内容重的屏幕，但一旦你参加比赛，我们就会大幅削减这些内容。这只是您所需要的，仅此而已。对于大多数跑步者来说，我敢说他们永远不会看它，但对于带有车把安装座的骑手来说，头对头和统计数据视图成为一个很棒的 HUD。

您是如何决定是时候推出《福雷斯特》第二版了？这是您早就计划好的事情，还是随着时间的推移自然出现的需求？

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

由于我们的两个男孩（应用程序图标字符以他们的名字命名）的到来，最初的构建花了大约五年的时间。在听说亚当的妻子怀孕后，他们的目标是在西奥出生之前发射。然后，我们的目标是在我的儿子 Isaac 6 月出生之前推出，但最终于 2020 年 10 月 18 日推出。在这五年里，我们在测试时改变了一些东西，自己使用该产品，并确定了完整的功能路线图 - 其中一些功能在 v2 中。

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

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

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

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

“创建比赛”屏幕是我们在 v2 中关注的焦点。我们希望让举办比赛变得尽可能容易。我们使比赛构建器元素更加一致，而不是使用三个单独的控件来更改设置。这看起来效果非常好，让用户更容易简洁地看到他们将要开始的练习。

我特别喜欢从事的另一个工作是策划一组新的应用程序图标，既有内部制作的徽标风格解释，也有一组由社区慷慨捐赠的设计师图标。我们希望继续下去，但让艺术家和设计师自由地解释你所构建的东西是非常令人兴奋的。

我们还引入了浅色模式，考虑到我们的品牌绿色 (#CBF500) 在浅色背景下的可访问性问题，这是一个令人愉快的挑战。最后，这是一个重新设计我们整个图标套件的机会。我很喜欢图标，如果我花更少的时间绘制它们，我们可能会提前三个月推出。

告诉我们更多关于该图像的信息。您是如何着手创建一组 Forrest 独有的图标，同时赋予它们一致的外观和感觉？

我一直是图标的狂热爱好者，事实上你可以将整个事物提炼成这个简单的象形表示。这就像一种追求纯粹简单和清晰的设计，同时保留其含义的最真实形式。

总体而言，Forrest 是弯曲边缘和硬边的混合体，在保持一定程度的一致性的同时具有很大程度的灵活性。竞赛类型图标使用了大量秒表和时钟形状的圆形形状，现在比 v1 版本的图标更加结构化，边缘也更加方形。

图标就像是对纯粹简单和清晰的设计追求，同时保留其含义的最真实形式

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

我实际上遇到的困难之一是构建一组图标，这些图标在黑暗模式下感觉一致，这需要大量的调整。当反转为负调色板时，笔画和文本通常会感觉更重，因此这意味着创建一整套图标，尽管比浅色模式的图标薄了 1-2 像素，但在光学上与它们的对应图标感觉一致。

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

社交方面充满了细微差别，从如何加入人员、创建帐户、寻找人员、管理谁可以看到您的信息，以及处理关注、请求、接受等各种状态。有人有个人资料图片吗？如果他们不这样做，你会展示什么？您如何处理注册期间的错误或某些内容无法同步时？

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

一个挑战是设计一个灵活的界面，能够很好地显示我们无法控制的数据。我们希望福雷斯特超越地理界限，西方文化之外的名字通常比“约翰·史密斯”长很多字符。类似这样的小事情，直到您使用真实数据并对它进行压力测试，您才会意识到您无法在图片完美的设计中做出解释。

您使用 Sketch 的历史是怎样的？为什么你在设计《福雷斯特》时选择了它？

大约从 2018 年开始，我们就一直在“工作”中使用 Sketch，当时我们将客户项目的所有界面设计都从 Adobe Illustrator 中移走了。Sketch 通过强大的工具集为我们提供了所需的像素精度，同时保留了我们在 Illustrator 中喜爱的矢量和可缩放元素。

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

V2 几乎是从我的第四个“整理文件”中自然诞生的，我试图确定我的颜色、符号并尽可能保持文档的原始状态。只有我一个人在努力，但我知道从长远来看这会让我的生活更轻松。它从一块空白画布开始，移植了以前的符号，在我进行的过程中整理并完善它们。

Sketch 提供的众多功能以及最近更新中带来的生活质量改进，继续使使用它成为一种乐趣

除了 Forrest 和一般客户项目之外，我花了很多时间想知道 Figma 的另一边的草是否更绿。虽然我发现他们所做的事情确实很引人注目，但原生 Mac 应用程序、性能和 Sketch 当前的功能集太引人注目了，无法放弃。Sketch 让我的设计几乎不受任何限制，而且它可能会减少压力，而不是增加压力，这始终是一个好处。

尽管我对 Sketch 很熟悉，但它现在提供的大量功能以及最近更新中带来的生活质量改进继续使使用它成为一种乐趣。

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

我想说 Sketch 的一些最有帮助的关键功能也是我现在认为理所当然的。在提要等区域，我们有许多可重复的元素，而有了符号，我们就有了一个单一的事实来源来编辑这些元素。这意味着进行更改只需一小部分时间，因为更新会立即级联。

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

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

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

我们在《福雷斯特》中拥有广泛的调色板。我们使用颜色来识别提要中的对手赛车手，我们有关键的品牌颜色，然后是奖牌的颜色。当然还有浅色和深色模式。使用颜色变量，我只需编辑一个目录并保持一致。

我还发现Sketch — View and Mirror 应用程序非常有用。能够在设备上立即查看我的实时设计有助于更快、更有效地做出决策。纯粹通过笔记本电脑工作并不能为您的设计提供相同的现实环境。

您与联合创始人 Adam 的工作流程是什么样的？您如何为交付做好设计准备并确保它们处于最佳的构建状态？

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

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

从个人角度来看，我非常钦佩亚当。迄今为止，他对福雷斯特的成功发挥了巨大的作用。他是一流体验的大力倡导者，并推动我作为一名创意人员走得更远。谢谢亚当，没有你就没有阿甘！