跳過導覽
An illustrated image of the red Tapbots logo on a dark grey background
#使用Sketch製作

我,機器人:Tapbots 的 Mark Jardine 如何使用 Sketch 設計獲獎應用程式

「即使我每天都在使用 Sketch,它仍然帶給我喜悅。它持續地讓人感到強大且特別,這讓我的工作更加愉快。」

是什麼造就了真正優質的應用程式體驗?對於 Mark Jardine,Tapbots 的 UI 設計師來說,這與使用者互動和設計本身同樣重要。Mark 是 TweetbotCalcbotPastebot(以及其他應用程式)的設計師,我們最近與他坐下來聊了聊他在設計領域的經驗、他對近期趨勢的看法,以及為什麼 Sketch 是他的首選工具。


可以跟我們談談你是如何開始設計應用程式,以及你什麼時候開始使用 Sketch 的嗎?

讓我從更早一點的時間開始說起。在我大學的前幾年,我對設計一無所知。我熱愛繪畫,夢想成為一名角色設計師或插畫家。在大學上了幾堂插畫/藝術課後,我覺得我的技能不足。我也開始真正喜歡上電腦,所以我對融合藝術和電腦的領域很感興趣。這讓我想到兩個可能的職業——3D 動畫/建模和平面設計。我真的很想追求前者,但最終決定從事設計在財務上更為實際。

設計學院的課程主要集中在識別、印刷和包裝設計。Mac 很普及,但我當時是個窮學生,用的是我上大學時父母送我的 PC。Windows 上沒有任何能激發靈感的設計應用程式(至少當時是這樣),但網路上充滿了鼓舞人心的 UI 設計。那就是我找到熱情的地方。我在學校按流程學習,學到了一些東西,但我最興奮的是在課外建立網站。幾年後,我找到了一份網頁設計師的入門工作,然後就輟學了。這是一個艱難的選擇,但我一直追隨著我的熱情,這對我來說感覺是正確的選擇。

用我新工作賺來的錢,我買了我的第一台 Mac——一台 MDD PPC G4——我被 Aqua 的美深深震撼。然後還有所有那些令人驚嘆的應用程式。它們不僅設計精良,而且擁有令人愉悅的體驗,並且非常直觀。老實說,在我買第一台 Mac 之前,我從來沒有覺得付費軟體有什麼價值。像 Panic、Delicious Monster、Mac Rabbit 和 Icon Factory 這樣的公司成為我巨大的靈感來源。還有很棒的主題社群,像是 Macthemes,以及像 Max Rudberg 這樣的人為 OS X 製作令人驚豔的替代 UI 主題。我主要的工作是網頁設計師,但我也會在閒暇時涉獵圖示設計和主題製作。我夢想著有一天能夠設計軟體,但從來沒有真正找到一條清晰的道路去追求它。

iPhone App Store 推出時,我第一次有了設計 app 的機會。第一個 app 是透過 Oakley,我當時任職的公司。然後 Paul Haddad 和我一起開發了 Weightbot。能夠設計我的第一個 app 簡直是夢想成真。

我最早的 Sketch 文件似乎是 2012 年的 — 大約是我們開始著手開發 Mac 版 Tweetbot 的時候。它的工作流程比 Photoshop 好太多了。

早期 Sketch 還不存在。所有工作都在 Photoshop 中完成,坦白說,圖層管理和處理基於像素的工作流程簡直是苦差事。導出素材更是噩夢。我最早的 Sketch 文件似乎是 2012 年的 — 大約是我們開始著手開發 Mac 版 Tweetbot 的時候。我記得當時它有點 buggy [笑],但工作流程比 Photoshop 好太多了。我幾乎把每個新專案都轉用 Sketch,直到我再也不用處理 Photoshop 為止。

A screenshot of a Sketch document showing part of the Tapbots website

當你開始設計(或重新設計)一個產品時,你的主要目標是什麼?你的方法是什麼?

每當我們開始一個全新的產品時,我都會先集思廣益,寫下我所有的想法。我想解決的基本問題是什麼?哪些核心功能可以讓這個 app 比競爭對手更好,並解決其他人沒有解決的問題?然後我會在更高的層面上 brainstorming 任何有趣的 UX 和 UI 的想法,讓這種類型的 app 帶來愉快的體驗。這一直是我們的 app 與眾不同的一個面向。一旦我覺得在紙上看起來很棒了,我就會打開 Sketch,開始製作粗略的概念模型,並反覆迭代,直到我準備好將素材交給開發團隊。

你們最近推出了 Tweetbot 6。從設計的角度來看,你想達到什麼目標?你如何改進這個已經非常優秀的 iOS Twitter app?

由於我們多年來一直在優化使用體驗,因此我們 第六版 的重點是完善一些細節,並盡可能地使用 Twitter 的 V2 API。我們目前稱之為「搶先體驗」,因為我們還有很多地方需要改進。

Tweetbot 6 中,我們計劃推出更多可選圖示,這將讓我更有創意,突破界限。我對此感到很興奮。

推出 app 的訂閱版本是我們兩人能夠長期持續開發的唯一途徑。因此,我們第六版的目標是推出一個良好的核心基礎,以便日後逐步改進。所以隨著 v6 的推出,我還不能說我已經達到了我想要的設計目標。這是一個持續進行的工作,我對即將到來的新事物感到興奮。

A screenshot of a Sketch document showing part of the Tweetbot UI — specifically the media player.

Sketch 如何幫助你達成這些目標,並讓你做出滿意的成品?

自從我 2012 年開始使用 Sketch 以來,它每個版本都在不斷改進。看著它成長並成為如此出色的設計工具,真是一件令人愉快的事。我很喜歡我不必與工具搏鬥就能讓它按照我需要的方式工作。大多數效率低下的情況都是因為我的懶惰,沒有使用 Sketch 的最新功能。偶爾我會想:「一定有更好的方法來做這件事」。然後我會去查其他人是如何解決這個問題的,通常會發現一個我不知道的功能或技巧。即使我每天都在使用 Sketch,它仍然帶給我快樂。它持續給我一種強大而特別的感覺,這讓我的工作更加愉快。

回顧過去幾年,您認為設計領域發生了多大的變化?從您開始從事設計工作以來,UI 設計是如何演變的?

設計領域的變化很大,但我算是順勢而為。老實說,我現在的工作與生活平衡是最好的。我不會為了設計產業的動態而感到壓力,也不會追逐潮流,或是參與一些主觀題目的激烈討論。我們只為 Apple 生態系統開發應用程式,所以我專注於此。每次 WWDC 之後,[Apple 設計團隊] 都會制定 UI 指導方針,我會盡量遵循,并在可能的情況下突破它們。我覺得當設定了基準約束,我就能在這些範圍內專注於我的創造力,這樣我的工作效率會更高。

即使我每天都使用 Sketch,它仍然帶給我喜悅。它持續給我一種強大而特別的感覺,讓我的工作更加愉快。

A screenshot of Calcbot on the Mac.

從擬物化設計到最初的平面設計的整個過渡,在早期感覺像是一種倒退,但事後看來,我覺得這是最好的選擇。現在有這麼多不同尺寸的裝置需要設計,簡潔就是更好。但我確實認為 Apple 在將我們喜愛的擬物化設計元素重新融入方面做得很好,而且我絕對更喜歡現在的許多方向,勝過過去的黃金時代。

您的應用程式品牌的很大一部分是它們的圖示。它們一直都非常獨特且易於辨識。開發這些圖示的挑戰是什麼?

我一直以來在更嚴格的設計限制下工作得更好。堅持機器人主題在某種程度上限制了我們,但也讓事情變得更容易。每個圖示都需要藥丸狀的眼睛是既定的,然後我就圍繞著它來設計。迄今為止最具挑戰性的圖示可能是 Pastebot。它可能也是我最喜歡的。Tweetbot 可能是隨著時間推移變化最多的。在 Tweetbot 6 中,我們計劃推出更多可選圖示,這將讓我更有創造力,並突破界限。我對此感到很興奮。

A screenshot of the Weightbot logo in one of Mark’s Sketch documents.

這些年來,是什麼讓您持續使用 Sketch?

首先,它是原生應用程式,並且具備所有優秀 Mac 應用程式的特點。一切都如您所料地運作。我當然沒有使用所有的功能,但我很高興它們在需要更高效率的情況下能派上用場。我最近經常使用且非常喜歡的一個功能是多個選定物件的「整理」功能。這是一個很棒的想法,可以節省很多時間。每次更新都變得更快、更穩定,並帶來很酷的新功能,所以我總是很期待最新的主要版本。

每次 Sketch 更新都變得更快、更穩定,並帶來很酷的新功能,所以我總是很期待最新的主要版本。

A screenshot showing how Mark organizes colors in his Sketch files.

您會給想要進入應用程式開發和設計領域的年輕開發者什麼建議?

這是一個難題。現在市場非常飽和,很難被人注意到。我認為現在你需要麼有一個真正引人注目的新點子,要麼對舊點子有真正有趣的詮釋。我們的應用程式屬於後者。但要專注於使用者體驗和細節——一個應用程式在螢幕截圖中可能看起來很棒,但如果使用起來感覺不好,它的外觀就沒那麼重要了。應用程式的「感覺」(我指的是使用者體驗和互動設計)可能是我最重視的。我可能比設計本身更注重我們的應用程式使用起來的感覺。我認為自己是一個相當普通的設計師。我認為我的優勢在於看到全局,並且能夠把很多事情做得足夠好,以提供一個整體上不錯的產品。


您是否在 Sketch 中開發了很棒的產品?使用 Sketch 創作了藝術傑作?與我們分享,我們可能會在下一期 #MadeWithSketch 文章中介紹您。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定完成並準備好最佳的工作狀態。

免費開始使用
免費開始使用