Cindori 的创始人 Oskar Groth 是 Sensei 应用 背后的智慧和力量,Sensei 应用是一款全面的 Mac 性能工具。从编程到设计,Oskar 无所不能 - 主要是在 Sketch 中完成。
在这次采访中,Oskar 与我们分享了他的流程,以及他如何平衡设计和开发,从而创造出伟大的产品。
你的职业生涯令人印象深刻。你不仅是一位程序员,而且还完成了 Sensei 的所有 UI 设计。你是什么时候开始接触设计的?
当我拥有我的第一款 Apple 产品,第一代 iPod nano 时,我开始欣赏设计。但直到我开始制作应用程序,我才意识到我必须去掌握自己的设计技能。我很难使用当时流行的任何工具 - 比如 Photoshop 或 Illustrator。但在 2015 年左右,我偶然发现了 Sketch。
我发现它比我之前尝试过的任何东西都更容易上手,我开始用它来设计我应用程序的部分内容。从那以后,这只是一段通过实践学习,慢慢变得更好,并创造出更复杂设计的漫长旅程。
Sensei 完全是关于数据的 - 但你努力使这些数据变得美观。这是否是你对该应用程序的一个主要关注点?
是的,绝对是!macOS 中隐藏着大量关于 Mac 性能和健康状况的数据。我认为我的工作是选择和提炼出最相关的信息,并以一种美观的方式呈现它。
原因有两方面:一方面,我想创作一件艺术品,向 macOS 美丽的原生设计致敬,并完美地融入用户的 Mac 中。但另一方面,这也是关于可访问性的。许多性能和系统监控应用程序可能很难掌握,除非你有很多使用计算机的经验。
我希望 Sensei 成为 Mac 爱好者和普通用户的应用程序。因此,设计过程不仅仅是创建好看的形状和颜色,而是简化复杂的信息,并教导用户所有这些是如何组合在一起的。

以引人注目且美观的方式展示数据始终是一项挑战,但 Sensei 的仪表板确实做到了。
你是如何处理将如此多的信息塞进你的设计中的挑战的 - 尤其是在空间紧张的情况下,比如在菜单栏中?
处理大量的动态数据绝对是一个巨大的挑战。我尝试考虑数据类型 - 它是否可以具有最小值或最大值,或者我是否可以建立指标层级?但即便如此,在各种 Mac 型号中,仍然有很多边缘情况很难预测。
在 Monitor [Sensei 的菜单栏功能] 的情况下,幕后有很多优化,以最理想的方式格式化数据。例如,你可能不需要查看大约 24 个 CPU 温度传感器的每一个 - Sensei 可以为你计算出一个平均 CPU 温度,并显示该值。
通过以类似的方式仔细评估其他数据点,信息可以被压缩成最理想的表示形式。在那之后,就只是以一种漂亮的方式呈现它,这通常需要花费很多小时来来回移动单个像素,直到它看起来恰到好处 😄

Sensei 可以根据你的喜好显示尽可能多或尽可能少的信息,但 Oskar 需要设计该应用程序,以便无论用户的偏好如何,它看起来都很棒。
你的流程是怎样的?你是先设计后编程,还是先编程后设计?
在我有了一个想法后,我总是从创建一个我喜欢的设计拼贴开始。它可以是具有类似功能的其他应用程序的设计,也可以是完全无关的概念设计,展示了我认为可能有趣的特定 UI。拥有这样一个灵感墙是保持想法流动的好方法,并且不会陷入困境。
在那之后,我做一个粗略的模型,可以包括应用程序窗口和基本视图层级。Apple 的 Sketch 设计资源在这里真的派上了用场,因为我可以快速地将准确设计的 macOS 系统组件作为符号放入。对我来说,所有设计组件都是 符号 非常重要,这样对设计的任何更新都会自动渗透到设计的其他所有部分。
当我对想要的东西有了一个粗略的想法时,我通常从编程开始。在开发应用程序时,你经常会遇到很多事情,这些事情会挑战你对该功能应该如何工作的理解。我通常会多次回到 Sketch 来改进一些 原型,并开始为更精细的细节(如按钮和图标)创建一些新的原型。
在开发过程的最后,我通常会有一些东西,大约 90% 接近我实际要发布的东西。在这一点上,我会花一些时间来改进设计,创建最终版本的资源,并可能使用它们来创建宣传艺术品。

查看 Oskar 在 Sketch 中的部分符号集合。
Sensei 很好地融入了 macOS,但你仍然包含了一些精美的风扇、电池等真实插图。你如何在 UI 设计和真实感之间找到平衡?
这真的很棘手!我绝对喜欢创作描绘 Apple 产品精美硬件设计的艺术品。但在某些情况下,没有足够的空间放置一个复杂的图标,我需要使用一个简单的符号来代替。
在某些情况下,图标可能过于真实,无法传达预期的信息。例如,现代 Mac SSD 驱动器基本上只是一些微小的存储芯片。但我仍然在 Sensei 中使用带有旧旋转硬盘的标准磁盘图标,因为用户对它很熟悉。

Apple 的原始电池和 Oskar 的 Sketch 插图的并排比较。
对于想要开始创建更逼真设计的(如上面的电池)设计师,你能提供什么快速技巧?你有什么具体的 Sketch 工具或技术可以推荐吗?
我想说的是,即使你不追求高度逼真的设计,你也应该研究事物在现实中是如何呈现的。如果它是一件硬件,它的形状是什么样的?颜色是什么样的?光线是如何反射到各个部分的?你会如何用语言描述它?一旦你掌握了基本知识,剩下的就是阴影和渐变,以获得逼真的外观。通常,这只是涉及到大量的尝试和错误。
即使你不追求高度逼真的设计,你也应该研究事物在现实中是如何呈现的。
你为什么喜欢使用 Sketch 进行拟物化设计?
我认为 Sketch 真正掌握了基本知识,对我来说,这些基本知识包括矢量编辑、遮罩、阴影和颜色。这些听起来都很简单,但它们共同构成了创建高质量设计所需的工具包。而且由于 Sketch 使它们超级易于使用,我发现它更容易使用 - 而且我经常使用 Sketch 比其他类似工具获得稍微更好的结果。
我认为 Sketch 真正掌握了基本知识,对我来说,这些基本知识包括矢量编辑、遮罩、阴影和颜色。这些听起来都很简单,但它们共同构成了创建高质量设计所需的工具包。

这里有一些酷炫的 拟物化 图标,Oskar 在 Sketch 中创建的。
你是否觉得很难同时跟上设计和编程的演变?你是如何管理的?
当然!当你是一个独立开发者时,你必须身兼数职。有时,我可能会花几天时间只做 设计研究,这会以我本可以用于编程的宝贵时间为代价。我最好的策略是关注 Twitter 上许多伟大的开发者和设计师,这样我就总能大致了解这两个领域接下来会发生什么。
从程序员的角度来看,你喜欢 Sketch 的什么?
作为一名 Mac 开发者,我非常欣赏 Sketch 的原生体验。它比其他工具反应更灵敏、性能更好。但在功能方面,我想我最喜欢 Symbols(符号)。
使用 Symbols 进行设计非常强大,你可以构建一个完整的、为你的设计提供支持的设计系统。我认为这样有助于思考你的用户界面组件,因为它与编程方面的良好实践考虑因素完全一致。

这里再次展示 Oskar 如何使用 Symbols,这可以在他准备开始编程时节省大量时间。
你会给刚开始,并且需要自己进行设计的年轻程序员什么建议?
即使我现在已经在 Sketch 中花费了无数的时间,我仍然不认为自己是设计师。我制作数字产品,而制作出色的产品需要出色的设计。我认为认为你必须天生就是设计师才能擅长设计是一种误解;它和编程一样,是一种后天习得的技能。
我看到很多其他的独立开发者,他们是很棒的程序员,但不认为自己是设计师,所以他们甚至不敢尝试。我想说,如果你真的想打造一款出色的产品,你也应该认真学习设计。这可能是一个漫长的过程,但从长远来看,它肯定会得到回报。
我看到很多其他的独立开发者,他们是很棒的程序员,但不认为自己是设计师,所以他们甚至不敢尝试。我想说,如果你真的想打造一款出色的产品,你也应该认真学习设计。
你是否在 Sketch 中开发了一款很棒的产品?是否使用 Sketch 创作了一件艺术杰作?与我们分享,我们可能会在我们的下一个 #MadeWithSketch 帖子中推荐你。