跳过导航
Illustration made in Sketch of the process of creating an iPhone app
Sketch 内部

幕后揭秘:我们如何构建全新的 iPhone 应用 —— 现在由 Workspaces 提供支持

我们将向您展示如何使用 Workspaces 和实时协作创建 Sketch 的移动窗口

好的设计是永恒的,最好的设计工具也是如此。 这就是为什么在过去的几年里,我们一直在重建 Sketch 的核心方面 —— 优化我们的技术堆栈并为新时代构建我们的产品 —— 包括像 Workspaces实时协作 这样的功能。

但是,有一种产品一直需要一些细心的关怀 —— 我们的 iPhone 应用。今天,我们想向您展示我们如何重新构想我们的应用程序以及使其成为可能的构建模块。

让我们透过 巫师的钻石窗帘偷看一下。

这个新的 Sketch iPhone 应用是什么?

如果我们要用一句话概括新的 iPhone 应用,那就是“随时随地的 Sketch”。 该应用程序不再仅仅用于镜像。 相反,它是一个简化且易于访问的 Sketch 版本,您可以随身携带,无论是在会议之前、在杂货店排队时,还是在任何需要的时候。

正如我们的联合创始人兼联合首席执行官 Pieter Omvlee 所描述的那样,“更改不是从 Mac 镜像到 iPhone,而是 iPhone 完全参与协作编辑引擎。”

现在,让我们看一下我们是如何做到这一点的。

iPhone 应用之路

在各个方面,iPhone 应用都是 Sketch 的另一个窗口。 为了实现这一点,我们将我们的 渲染和协作引擎转移到 iOS,以便该应用可以直接在您的设备上发挥其魔力。

但这与我们之前的应用有何不同? 当 Sketch 仅用于本地文档时,您可以在真实设备的上下文中查看您的作品的唯一方法是建立点对点连接,用于将渲染的图像从您的 Mac 发送到您的手机。 它可以完成工作,但其性能不是最好的,并且严重依赖于连接的稳定性 —— 这对于使用有限公司网络的人来说尤其具有挑战性。

现在,随着 Workspaces 和 实时协作 的出现,新的可能性开始形成。 “我们问自己,如果 Mirror 可以简单地打开一个在线 Sketch 文档并接收来自我们的协作引擎的实时更新,会怎么样?”Pieter 说。 这基本上就是这个新应用 —— 一个本机查看器,可让您实时查看更改。

最好的协作设计

与 Sketch 中的所有内容一样,将 iPhone 应用变为现实是跨团队的努力。 设计师、开发人员、产品经理和作者齐心协力,共同打造了现在的 iOS 体验。 我们还邀请了整个公司 dogfood 该应用,这不仅帮助我们构建了更好的产品,而且还开始改进。

“我们很早就决定,我们希望主要使用默认的 iOS 系统组件来构建该应用,这意味着我必须尽可能熟悉 Apple 的人机界面指南,”产品设计主管 Janik Baumgartner 回忆说。 “这也意味着,即使在早期的设计阶段,我已经与我们的开发人员保持持续的沟通,询问我们如何才能以尽可能少的自定义 UI 来实现我们所需的功能。”

“通过采纳我们设计师的愿景并尝试将其扎根于 SwiftUI 可以实现的功能中,我们最终采取了正确的捷径,并更快地获得了一款出色的产品。”

— Jorge Pedroso,Mac 开发者

设计师 🤝 开发者沟通

我们的大部分设计师和开发人员都在快速的 huddles 上花费了大部分时间,以提供有关 UI 如何成形的反馈,这有助于他们以创纪录的时间找到更好的解决方案。 但这并不意味着没有任何挑战。 尽管我们使用的技术与我们的 Mac 应用相同,但移动应用需要在更小的空间中工作并考虑触摸屏。

根据 Mac 开发者 Jorge Pedroso 的说法,“虽然我们面临着 SwiftUI 的一些限制,但它让我们优先考虑了我们对该应用设计所追求的简洁性和有效性。 通过采纳我们设计师的愿景并尝试将其扎根于 SwiftUI 可以实现的功能中,我们最终采取了正确的捷径,并更快地获得了一款出色的产品。”

另一位出色的 Mac 开发者 Philipp Seibel 也同意:“这里的关键是,我们脑海中没有一个想法或解决方案。 通过从一开始就向我们自己的设计师发布内部版本,我们能够快速迭代和改进,直到我们找到在 iOS 上查看 Sketch 文档的最直观的方式。”

“通过从一开始就向我们自己的设计师发布内部版本,我们能够快速迭代和改进,直到我们找到在 iOS 上查看 Sketch 文档的最直观的方式。”

— Philipp Seibel,Mac 开发者

创建适合小屏幕的 Sketch 体验

“我仍然记得看到我们的第一个文档在 iOS 设备上使用我们的引擎进行渲染,并且知道我们已经达到了一个重要的里程碑,”Philipp 回忆道。 “我们能够在短短几周内让我们的绝大部分技术堆栈在 iOS 上运行。 这使我们有机会更多地关注新平台本身以及如何在移动设备上最好地访问这些技术。”

例如,通过在 iOS 上运行我们的渲染引擎,我们能够构建文档查看器的不同原型,以了解哪种 UI 设计效果最好。

“使用 Xcode 和 Sketch 进行工作很酷。 我喜欢将 Sketch 视为一个 IDE,它不仅适用于设计师,也适用于整个团队,因为您可以轻松地协作、在制作原型时进行更改,然后查看这些更改的实际效果,”Mac 开发者 Luigi Parpinel 分享道。 “我们决定使用 SwiftUI,即使它仍然有些粗糙,因为它为我们提供了一个现代且面向未来的代码库,我们将能够以快速可靠的方式维护和迭代它。”

但是,我们的开发人员在构建 iPhone 应用中最喜欢的是能够与 Sketch 的多个团队密切合作。

Image showing three iPhones with the Sketch iPhone app on the screens.

以下是最终设计以及原型在实际中的外观。 您现在可以全屏打开它们,并让利益相关者对您的想法进行真实的、情境化的预览。

Sketch 的状态

对于我们的产品经理 Paulo Pereira 来说,在 iPhone 应用上工作最吸引人和最有价值的方面是,几年前几乎不可能完成这项壮举。

“我们的小团队能够在几个月内构建该应用,因为我们已经建立了重要的工程基础。 近年来,很多人都开发了我们的文档模型和本机渲染引擎、后端基础设施和 Workspaces、实时协作以及共享原型播放器,”Paulo 分享道。 “所以这与几年前的 Sketch 不同 —— 我们现在能够构建我们以前根本无法构建的产品和功能。 我们也没有停留在原地。”

iPhone 应用证明了由于我们 不断壮大的团队的努力工作,我们现在可以使用 Sketch 构建的一切。 在过去的几年中,您已经获得了重大更新 —— 包括 Workspaces实时协作 和改进的 原型 —— 现在您可以了解这些功能如何协同工作以整体上改进 Sketch。 我们很高兴分享接下来会发生什么 —— 正如 Paulo 所说,我们才刚刚开始。

您可能也喜欢

Sketch 内部

Sketch 和 AI

一段时间以来,我们一直在思考人工智能对 Sketch 的意义。 以下是我们可能会如何使用它、我们永远不会如何使用它以及指导我们思考的内容。

免费试用 Sketch

无论你是 Sketch 的新手,还是回来看看有什么新东西,我们都会让你在几分钟内完成设置并准备好做到最好。

免费开始
免费开始