跳过导航
An image showing the Callsheet app icon alongside an iPad and iPhone showing screens from the Callsheet app
#MadeWithSketch

Casey Liss 和 Ben McCarthy 如何打造 Callsheet — 影迷们更好的家园

Callsheet 的创建者和设计师向我们讲述了尊重用户的时间、信息密度设计以及独立软件开发的乐趣。

当你在观看电影或电视剧时,想知道主角女演员是否也出演过你见过的其他作品,你会去哪里? 显而易见的答案可能是 IMDb,但正如 Casey Liss 指出的那样,“它用起来变得越来越令人沮丧”。 因此,他着手构建一个更好的替代方案。

在 Ben McCarthy 的设计帮助下,Casey 构建了 Callsheet — iPhone、iPad 和 Vision Pro 的 IMDb 替代品。 称其为 IMDb 替代品几乎是一种不恭,因为体验截然不同。 使用 Callsheet,可以快速找到所需内容,轻松浏览大量信息,并且一路都有许多贴心的设计。

我们采访了 Casey 和 Ben,讨论了该应用程序的诞生过程、将其引入 visionOS 所面临的挑战,以及 Sketch 如何提供帮助。


让我们从最明显的开始——你能告诉我们一些关于 Callsheet 的信息吗?

Casey: 老实说,如果没有 IMDb 不断的 恶化,Callsheet 就不会存在。 我多年来一直是 IMDb 的忠实用户,但它用起来一直变得越来越令人沮丧。 我厌倦了不断的“嘿,你应该登录!” 或“嘿,你看到这个预告片了吗?” 或“嘿,你可以在亚马逊上购买!”。 真是讨厌。

我熟悉 The Movie Database 作为 IMDb 的用户贡献等效替代品,并开始探索他们的 API 在 2023 年 1 月的样子。 几周后,很明显我可以轻松使用他们的 API。 之后,我就开始行动了。

Callsheet 的设计如何在帮助人们快速获取所需信息的目标中发挥作用?

Casey: Callsheet 的一切都围绕着速度而设计。 然而,我的“北极星”是尊重用户——首先也是最重要的,尊重用户的时间。 让 Ben 感到沮丧的是,我为了信息密度而回避了一些更漂亮的设计。 与所有事情一样,这是一种平衡行为,也许我们并没有 100% 正确。 但我喜欢认为它现在非常棒。

我的“北极星”是尊重用户的时间。

当您处理电影、电视剧、演员和工作人员时,所有这些信息都有可能让人感到不知所措。 您是如何通过 Callsheet 解决这个问题的?

Casey: 信息架构是一项挑战,因为它需要确定优先显示(或突出显示)哪些信息,以及隐藏哪些信息。 在非常不同的用户更喜欢看到的内容之间找到平衡是一项挑战。

归根结底,我是 Callsheet 的最大粉丝,该应用程序是为我设计的。 我最关心的事情会推到最前面,无论是字面意义上还是比喻意义上。

在我看来,Callsheet 首先是 iPhone 应用程序,因此这严重限制了我布局的选择——可用的像素实在不多! 这就是我们如何获得“右侧栏”的快速点击信息,我认为这些信息是“首屏”的,并且位于该人/媒体图像的旁边。

An image showing a screenshot from the Callsheet app, focusing in on a specific film, and cropped to show how the app’s design handles information density

Callsheet 的“右侧栏”等设计选择有助于在小空间内传达大量信息。

您能谈谈 Callsheet 的设计在其整个开发过程中是如何变化的吗? 您做出的哪些关键时刻或决定推动了事情的进展?

Ben: 也许我对 Callsheet 的最大贡献是坚持将搜索字段放在屏幕底部。 我是这样一种观点的坚定支持者,即应用程序最重要的控件应该最容易访问,而搜索是 Callsheet 体验不可或缺的一部分。

应用程序最重要的控件应该最容易访问,而搜索是 Callsheet 体验不可或缺的一部分。

易于访问也意味着控制使用起来更快、更可靠。 对于像 Callsheet 这样的应用程序,用户可以尽可能轻松地找到他们想要的内容,以便他们可以回到他们正在观看的内容非常重要。 我知道这对 Casey 来说是一件非常痛苦的事情,但我认为这是一个正确的选择,我们都从相当多的用户和 beta 测试人员那里听说他们非常喜欢这种改变。

An image showing two screenshot from the Callsheet app, the left shows an early development view, and the right shows the app today.

左图:Callsheet 搜索视图的早期开发截图。 右图:今天的 Callsheet 搜索视图。

Casey: 这很痛苦,我像孩子抵制睡觉一样抵制它。 然而,Ben(像往常一样)是完全正确的。 我为 Callsheet 提供了相当数量的 beta 测试人员,我收到的 #1 抱怨是很难点击屏幕顶部的搜索框。 然而,该应用程序是 100% SwiftUI,这就是 SwiftUI 放置搜索框的位置。

我花了两天时间来移动搜索框,包括我的朋友 Gui Rambo 在一些比较复杂的 technical bits 上提供了一些帮助。 一旦我看到它在那里,我就知道 Ben 是对的。 既然 Ben 已经推出了 他们自己的基于搜索的应用程序,我想我可能需要窃取他们的一些想法,看看哪些可以在 Callsheet 中轻松使用 😏。

Callsheet 中有很多精巧的细节,比如点击电影的运行时可以看到如果你现在观看它会在什么时间结束。 你能分享一些你喜欢的其他细节吗?

Ben: 我最喜欢的小细节是显示演员在每部电影或电视剧上映时的年龄。 我经常发现自己在计算电影上映以来已经过去了多少年,然后从演员目前的年龄中减去,Casey 永远让我摆脱了这种麻烦。

Casey: 我最自豪的事情是电视剧的剧透规避工具。 一个灵光乍现的时刻是想起我在 2019 年被 IMDb 剧透了《守望者》迷你剧中的一个角色的秘密身份。 我仍然对此感到不满 😆。 因此,在 Callsheet 中,您可以选择隐藏一些内容,例如角色名称、他们出演的剧集数量、剧集标题、剧集缩略图等。

An image showing screenshots from the Callsheet app for its spoiler controls, and a detail view with obfuscated spoilers.

Callsheet 的隐藏剧透选项可以更容易地了解电影或电视剧,而不会破坏剧情。

由于我无法控制的原因,它有点摇摇欲坠,但我也很喜欢与 PlexChannels 的集成。 如果你在附近的 Apple TV 上的其中一个应用程序中播放某些内容,你正在观看的任何内容都会显示在 Callsheet 主屏幕的顶部,随时供你深入了解。

每当我看到演员的身高时,我仍然会咯咯笑。 并非所有演员都有这些信息,但我认为这很有趣——而且很有用! 我的一位朋友对此有点痴迷,我想,“我想知道我是否可以将其添加到 Callsheet 中”。 事实证明这并不太难。

我认为正是这些东西让所有独立软件如此有趣——我怀疑你会在 IMDb 上看到演员的身高出现在最显眼的位置,但我可以选择在 Callsheet 中这样做,并且没有人可以阻止我。

正是这些东西让独立软件如此有趣——我怀疑你会在 IMDb 上看到演员的身高出现在最显眼的位置,但我可以选择在 Callsheet 中这样做,并且没有人可以阻止我。

很明显,Callsheet 的目标是成为其平台的良好公民。这是否对您有所限制或造成任何问题?还是在开发过程中让事情变得更容易?

Casey: 是的(以上皆是)!我不太擅长任何与 UI 相关的事情。这就是为什么 Ben 的帮助对我来说如此有价值 —— 他们在这方面非常出色。也就是说,我对 Callsheet 的方法是原生 ✨ 且具有风格 ✨。这使用 SwiftUI 很容易实现,但使用 UIKit(可以追溯到 iPhoneOS 2.0)则相当困难。

SwiftUI 的优点在于,它使许多曾经有些困难或不直观的事情变得容易得多。SwiftUI 的另一个问题是,一些你从未想到会具有挑战性的事情几乎是不可能的。底部安装的搜索栏就是其中之一。它不是原生组件,这让我有点失望,但我对最终的结果感到满意。希望随着时间的推移,我们可以从 Apple 获得一些新的 API,使我想要做的事情成为可能。

UI 中是否有需要反复迭代才能正确的部分?

Casey: 首先想到的是 Callsheet 的 visionOS 版本。2023 年 11 月,我去了 Apple 在纽约举办的一个实验室,这样我就可以在真实的硬件上试用这款应用。我很快意识到我还有很多工作要做。从那时起,到二月份我自己的 Vision Pro 到货之前,我一直在断断续续地研究它。然后,我花了相当长的时间在 visionOS 上的 Callsheet 的不同设计之间来回切换,试图让它感觉合适和原生。

Callsheet 的 visionOS 应用正在 Apple Vision Pro 上使用

这很像那种你必须不断地把意大利面扔到墙上看哪个能粘住的情况。幸运的是,我不需要做大规模的修改 —— 大部分情况下 —— 但我花了比我预期更长的时间来让稍微改进的设计语言恰到好处。

Callsheet 的应用图标有一些有趣的彩蛋,这些彩蛋背后有什么故事?

Casey: 最初的图标 是由我的朋友 Jelly 制作的。我曾经草拟了一个非常糟糕的东西。想法是放大镜放在场记板前面。Jelly 拿走了我那糟糕的小写 s 草图,并使它变得漂亮。

文本最初显示了电影《猎杀红色十月》的标题,这是我一直以来最喜欢的电影之一。日期是上映日期,尽管 Jelly 是澳大利亚人,所以我相信那是澳大利亚的上映日期。

An image showing a Sketch window with the Callsheet icon document open.

Callsheet 的默认图标和备用图标都是在 Sketch 中设计的。

从那以后,我们将其更改为更通用的“The Search for Blue December”,这是我的建议,你应该很容易看出它的来源。然而,“Kay Celis” 100% 是 Jelly 的想法,每次看到它我仍然会笑(大声说出来,你可能会明白这个笑点)。

备用图标是由我的另一个朋友 Ste 完成的。那些都是他做的,我几乎没有参与。但我喜欢所有这些图标!

Sketch 在 Callsheet 的设计中扮演了什么角色?您发现哪些特定的功能或工作流程很有用?

Ben: 我为 Casey 所做的大部分设计工作更多的是笔记和建议,而不是让他严格遵循的设计,而 Sketch 使得传达这些想法变得非常容易。我最喜欢的功能之一是 Apple 自己的 UI 库。它们真的有助于快速表达想法,而且还能让你省去反复检查确切的灰色阴影或分段控件的圆角半径的麻烦。

您是否还有其他使用 Sketch 制作的值得注意的项目可以告诉我们?

Ben: 我使用 Sketch 已经很多年了,我想自从它发布以来就开始使用了。它真的很符合我的思维方式。我在大学里学习平面设计,实验和迭代的重要性被深深地灌输给我们。Sketch 让我可以快速复制或按住 Option 键拖动来复制画板,并尝试设计的变化。

自从 Sketch 出现以来,我几乎在每个数字设计项目中使用它。从我自己的应用 ObscuraKetchup,到为客户工作,网页设计,甚至只是快速制作一些模型以便在线分享。


Callsheet 可在 iPhone、iPad 和 Vision Pro 上通过 App Store 下载,您还可以在那里找到 Ben 的应用 — ObscuraKetchup

您是否在 Sketch 中创造了一些很棒的东西?我们很乐意听取您的意见!在我们的 社区论坛中告诉我们。

您可能还喜欢

免费试用 Sketch

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

免费开始
免费开始