Forrest 如何在健身追蹤中加入巧思 — 並再次革新

製作第二張專輯總是很困難，但談到設計優秀的應用程式，你又該如何讓你的第一個重大更新獲得成功？對 Forrest 背後的兩人團隊來說，從 v1 到 v2 的路徑很明確，只是時間問題。

Forrest 是一款在健身追蹤中加入競爭元素的應用程式。設定你的鍛鍊時，你可以選擇與你自己的最佳成績或之前的結果競賽，甚至可以與設定了自訂時間、距離或配速的虛擬跑者競賽。在鍛鍊期間，你可以在應用程式的競賽畫面和語音提示中查看你與虛擬競爭者的比較情況。

Matt Emmins 和 Adam Swinden — Forrest 背後的二人組 — 希望透過讓你與朋友進行虛擬非同步競賽的社交元素，更進一步提升應用程式。加上完整的重新設計、新的圖示和新的免費增值模式，兩人可謂任務艱鉅。那麼，他們是如何做到的呢？

我們與設計師兼共同創辦人 Matt 聊了聊 Forrest 對健身追蹤的獨特見解，他們是如何開發出 v2 版本，以及 Sketch 如何一路幫助他們。

Forrest 背後的理念非常獨特。它是怎麼來的？

Forrest 的誕生源於 Adam 的妻子 Kathleen 的一句話，她提到她想知道自己在跑步中的表現與上次相比如何。

她描述的體驗類似於瑪利歐賽車，你在先前完成的賽道上與擁有你最佳時間的「幽靈賽車手」競賽。Adam 意識到這可以透過視覺效果和一系列語音提示來實現，而這也構成了 Forrest 競賽體驗的基石。

Forrest 的最初設計是如何成形的？

我設計的第一件事就是標誌。我記得 Adam 向我提出這個想法時，我開始在一疊便利貼上用麥克筆塗鴉這些狂野的標記。一開始是基於 Adam 喜歡的應用程式名稱 Forrest（就像《阿甘正傳》中的 Forrest）的字母和抽象標記的混合。

我記得 Adam 向我提出這個想法時，我開始在一疊便利貼上用麥克筆塗鴉這些狂野的標記。

我喜歡這個字體，但從未真正愛上它，但標記本身相當紮實（如果我可以這樣說的話）。它是一個抽象的、鏡像的 F，有點像一棵樹。而讓一切到位的是向前投射的箭頭。速度、方向、前進的動力。感覺所有元素都在其中了。

坦白說，介面的初始設計很糟糕，但这促使我們快速迭代並捨棄無效的部分。Adam 一直是行動裝置和一流行為的堅定擁護者，因此在某些機制和架構決策上聽取他的意見，引導我們完成了第一個 MVP。

在設計像 Forrest 這樣的應用程式的使用者介面時，你面臨哪些挑戰？

使用者所處的活動狀態是介面外觀的關鍵。例如，我們設計了賽車畫面，以在我們預期使用者處於活動高峰時顯示理想的細節程度。頂部有一個進度條，顯示賽車手的目前位置和進度，除此之外沒有其他雜亂的介面元素。

我們針對所有關鍵控制項（暫停、音訊開/關和螢幕鎖定）使用了大型觸控目標，並以滑動手勢在三個主要的比賽檢視畫面之間切換，每個畫面顯示不同的數據。我們盡可能加大這些觸控目標，以達到最佳的「一瞥即知」效果。搭配自動降低音樂音量的語音提示，效果非常顯著。

決定使用者需要理解你所展示內容的最低限度資訊量，同時又不移除上下文，說起來容易做起來難。我發現我們的圖標系統在這方面很有幫助。例如，溫度和天氣提供了一天情況的背景資訊，但在頂層的比賽動態中，它們只是比賽數據本身的補充。

決定使用者需要理解你所展示內容的最低限度資訊量，同時又不移除上下文，說起來容易做起來難。

我認為這種簡化的概念是 v2 比 v1 的一大改進。在比賽之外，我們一直都有更多數據和內容豐富的畫面，但一旦進入比賽，我們就會大幅精簡內容。只保留你需要的，沒有多餘的。我猜測大多數跑步者從來不會去看這些數據，但對於使用車 handlebar mount 的自行車騎士來說，這種頭對頭和數據統計的檢視方式就變成了一個很棒的抬頭顯示器（HUD）。

你們是如何決定是時候推出 Forrest v2 的？這是一項長期計劃，還是隨著時間的推移自然而然產生的需求？

V2 才是 V1 原本預想的樣子。我們一直計劃建立與朋友比賽的機制，在我們最初的討論中就提到了社交方面。直到我們開始著手開發第一個版本時，才意識到需要將其分解成更小的區塊，才能推出一些成果。

最初的開發花了大約五年時間，因為我們兩個兒子的出生（應用程式圖標角色就是以他們的名字命名的）。在得知 Adam 的妻子懷孕後，目標是在 Theo 出生前推出。後來，我們的目標是在我兒子 Isaac 六月出生前推出，但最終在 2020 年 10 月 18 日推出。在這五年中，我們隨著測試、自己使用產品以及確定整個功能路線圖而不斷進行調整——其中一些功能已包含在 v2 中。

Forrest 完全獨立、自籌資金，100% 由我們自己擁有。

Forrest 完全獨立、自籌資金，100% 由我們自己擁有。隨著我們的家庭成員增加，V2 變得更加重要。我們看到了為自己建立一個合法且有利可圖的企業的機會，讓我們有更多時間陪伴家人。

除了 v2 附帶的新功能之外，你們還有其他想要達成的特定設計目標嗎？

從設計的角度來看，我認為 v2 是一個盡可能簡化的機會。V1 並不密集或雜亂，但有些方面我可以改進，例如在動態中標示最終比賽排名，以及更好地將內容分組以突出距離和時間。

「建立比賽」畫面是我們在 v2 中的重點。我們希望盡可能簡化建立比賽的流程。我們讓比賽建立工具更加一致，而不是使用三個獨立的控制項來更改設定。這似乎效果很好，讓使用者更容易簡潔地查看他們即將開始的運動。

另一個我特別喜歡參與的工作是策劃一套新的應用程式圖標，包括內部製作的、對 logo 的風格化詮釋，以及一套由社群慷慨捐贈的設計師圖標。我們希望繼續這樣做，讓藝術家和設計師自由發揮，詮釋我們所創造的東西，這非常令人興奮。

我們也導入了淺色模式，考量到品牌綠色 (#CBF500) 在淺色背景上的無障礙使用問題，這是一個令人享受的挑戰。最終，這也成為了重新設計我們整套圖示的契機。我超愛圖示，如果我少花點時間畫它們，我們大概可以提早三個月推出。

跟我們多談談圖示設計吧。你是如何創造出一套既獨特於 Forrest，又具有一致觀感和風格的圖示呢？

我一直都很喜歡圖示，因為你可以將整個事物精煉成簡單的象形圖。這就像是在追求純粹的簡潔和清晰的設計任務，同時又要保留它們最真實的含義。

整體而言，Forrest 融合了曲線和硬邊，在保持一定程度一致性的同時，也具備高度的靈活性。賽事類型圖示在 v1 版本中使用了許多碼錶和時鐘的圓形，現在則以更結構化、稍微方正的邊緣來呈現。

圖示設計就像是在追求純粹的簡潔和清晰的設計任務，同時又要保留它們最真實的含義。

以動態消息中的天氣圖示這樣的小元素為例，我在 20x20 的畫板上使用 1 px 的筆畫進行繪製。我為這些圖示添加了一些色彩，並將它們渲染成全彩資源，而不是像往常一樣提供著色的 PDF 資源，以更好地傳達時間和溫度的細微差別。

我真正遇到的一個難題是構建一套在深色模式下看起來重量一致的圖示，這需要大量的調整。筆畫和文字在反白到負片調色板時通常會顯得更粗，所以這意味著要創建一整套圖示，儘管比淺色模式下的圖示細 1-2px，但在視覺上要與淺色模式下的圖示保持一致。

在引入 Forrest v2 的社交元素時，您還面臨哪些額外的挑戰或需要考慮的事項？

社交方面充滿了細微之處，從如何引導使用者、建立帳號、尋找使用者、管理誰可以看到你的資訊，到處理關注、請求、接受等各種狀態。使用者是否有個人資料圖片？如果沒有，該顯示什麼？如何在註冊過程中或同步失敗時處理錯誤？

這款應用程式仍然可以免費使用，並且可以在沒有帳號的情況下在本地運作。不強迫使用者註冊仍然很重要，這樣他們就可以無障礙地使用 Forrest，並希望能體驗平台提供的更多功能。

其中一個挑戰是設計一個靈活的介面，以便妥善顯示我們無法控制的數據。我們希望 Forrest 能夠跨越地域限制，而西方文化以外的姓名通常比「John Smith」的字元多很多。諸如此類的小細節，在你使用真實數據並進行壓力測試之前，你不會意識到在一個完美的設計中無法考慮到這些。

您和 Sketch 的淵源是什麼？為什麼在設計 Forrest 時選擇了它？

大約從 2018 年開始，我們就開始「在工作中」使用 Sketch，當時我們將所有客戶專案的介面設計從 Adobe Illustrator 轉移過來。Sketch 為我們提供了所需的像素精度和強大的工具集，同時又保留了我們在 Illustrator 中喜愛的向量和可縮放元素。

Forrest v1 的開發工作始於 2015 年 4 月，因此幾乎整個第一個版本都是在 Illustrator 中設計的，並導出為平面圖形供 Adam 解讀。直到我們在工作中轉向使用 Sketch 之後，我才開始手動移植一小部分設計，整理它們，並建立符號和可用的螢幕。

V2 版本幾乎可以說是從我第四次「檔案整理」行動中自然誕生的，當時我正努力敲定我的顏色、符號，並盡可能保持文件的整潔。雖然只有我一個人參與，但我知道從長遠來看，這會讓我的工作更輕鬆。它一開始只是一張空白畫布，我將之前的符號移植進去，一邊整理，一邊改進。

Sketch 提供了豐富的功能，加上近期更新帶來的使用體驗提升，讓使用它成為一種享受。

除了 Forrest 和一般的客戶項目之外，我還花了很多時間思考 Figma 是否會更好。雖然我覺得他們做的東西真的很吸引人，但 Sketch 作為原生 Mac 應用程式，其效能和目前的功能組合實在太吸引人了，讓我無法割捨。Sketch 讓我設計時幾乎沒有限制，而且它帶來的壓力可能比其他軟體更少，這始終是一個優點。

儘管我對 Sketch 已經很熟悉，但它現在提供的豐富功能以及近期更新帶來的使用體驗提升，仍然讓使用它成為一種享受。

在設計 Forrest 的過程中，是否有任何 Sketch 的特定功能對您有所幫助？

我想說，Sketch 中一些最有幫助的主要功能，也是我現在認為理所當然的功能。在像動態消息這樣的區域中，我們有許多可重複使用的元素，而透過符號，我們有一個單一的資料來源可以編輯這些元素。這意味著進行更改只需要一小部分時間，因為更新會立即串聯下去。

符號的智慧型佈局屬性讓它們更加強大。例如，動態消息符號，無論你是和自己比賽，還是和其他車手比賽以及一些個人最佳成績，它都是相同的「外殼」。構建一個具有自動調整大小組件的複雜巢狀符號，不僅讓設計過程更輕鬆，而且當你想根據你更改的數據來擴展內容時，也會讓你感到非常滿足。

構建具有自動調整大小組件的巢狀符號，讓設計過程更輕鬆，也令人感到非常滿足。

能夠將單個圖示創建為符號並使用顏色變數為其著色，省去了複製符號和創建多個圖示的麻煩。最好的例子就是幽靈賽車手，我希望在設計中透過黃色環或紫色環來展現視覺上的多樣性，而不是全部都一樣。

Forrest 的調色盤很廣。我們使用顏色來識別動態消息中的對手車手，我們有主要的品牌顏色，然後是獎牌的顏色。當然還有淺色和深色模式。有了顏色變數，我只需要編輯和維護一個目錄即可保持一致性。

我還發現 Sketch — View and Mirror 應用程式 非常有用。能夠立即在裝置上看到我的即時設計，有助於更快、更有效地做出決策。僅僅在筆記型電腦上工作，無法為你的設計提供相同的真實環境。

您和您的共同創辦人 Adam 的工作流程是怎樣的？您如何準備您的設計以進行交付，並確保它們處於最佳構建狀態？

通常我們會透過 Slack 或電話討論一個想法。然後，我會先創建一個鉛筆草圖，再將它導入 Sketch 開始製作。在製作過程中，我會透過 Slack 傳送螢幕截圖，並聽取 Adam 的想法和回饋。我會繼續在 Sketch 中迭代，直到我們完成我們正在處理的工作。我已盡力確保所有顏色、樣式等都已完整記錄，但我絕對可以保持文件更整潔。抱歉，Adam。

然後，我會將我的設計導出到 Zeplin，讓 Adam 開始構建。Adam 構建，然後我們測試。我會提供任何 QA 或回饋，然後幸運的話，就可以開始下一個功能了。我們的工作流程非常簡單，這可能是因為我們團隊規模小，而且工作關係良好。

就個人而言，我非常欽佩 Adam。到目前為止，他對 Forrest 的成功一直發揮著極為重要的作用。他非常推崇頂級體驗，並不斷激勵我這個創意人更上一層樓。謝謝你，Adam，沒有你就不會有 Forrest！

您可以在 iOS 上下載 Forrest。

您是否使用 Sketch 創作出很棒的作品？我們很樂意欣賞您的作品。請在 社群論壇 中與我們分享！