技术文章

您可能会认识开发者Guilherme Rambo ，因为他是一名义务警员，通过漏洞赏金计划破解 Apple 的秘密并帮助他们修复 macOS、iOS 和其他操作系统中的安全漏洞。

但早在 2016 年，Guilherme 就失业了，他正在寻找一个可以与插画家 Ewerton Lima 合作的项目。他们知道自己拥有正确的技能组合来创造伟大的事物，但他们只是不确定做什么。但这一次，苹果公司拯救了 Guilherme，在同年的 WWDC 上宣布推出 iMessage 应用商店。

“他们展示的演示之一是 iMessage 应用程序，用户可以通过组合不同的配料来组装蛋卷冰淇淋。就在那时，我有了做类似事情的想法，但用赤壁豆代替冰淇淋，”Guilherme 解释道。

埃沃顿立即加入其中。“我一直很喜欢绘画，所以创造资产的想法很诱人，其他人可以将这些资产以不同的方式组合起来进行自己的创作。”

这就是 ChibiStudio 的由来，这是一款面向动漫和赤壁艺术爱好者的角色创建应用程序。您可以通过鞋子和发型等各种物品制作不同的头像来表达您的创造力 - 所有这些都不需要擅长绘画！

如果你了解苹果的历史，你可能知道 iMessage 应用商店失败了，但它并没有让 ChibiStudio 跟着垮掉。值得庆幸的是，该应用程序的 iOS 版本找到了自己的定位，我们在这里讲述它的故事。

ChibiStudio的制作过程

对于 Ewerton 来说，想法就从 Sketch 中开始。“[我将开始]主要使用矢量工具，到处都有一些原始形状。这是可能的，因为绘图都是从平坦的正面角度绘制的，因此直接在 Sketch 中绘制它们可以非常有效地完成，”他解释道。

但他的 ChibiStudio 工作流程与其他项目的不同之处在于他需要强调构建和组织文档。因为他正在使用可定制的头像，所以他需要密切关注如何对用户将尝试的不同项目进行排序。

为了让事情井井有条，他将为每个物品包创建一个新的 Sketch 项目。然后，他将使用图层组来包含各个项目，并使用诸如hair-1、hair-2、shoes-1、shoes-2 等命名约定。他还将通过填充颜色来组织项目，因为它们稍后将成为用户可以在应用程序中自定义的颜色槽。

和 Ewerton 一样，Guilherme 也长期使用 Sketch 来设计用户界面和网站。他知道它对 SVG 有很大的支持，而 SVG 是 ChibiStudio 的支柱。“我们希望在应用程序中创建时为用户提供尽可能多的自由，并且我们还希望我们的资产能够适应更高分辨率的屏幕和媒体，因此从一开始的想法就是通过应用程序。”

为了实现这一目标，他创建了一个插件，将文档中的所有图层组导出到单独的 SVG 文件，并根据组命名它们。他还使用内部 Mac 应用程序工具来组装物品包并编辑一些元数据，以包括用户可以在应用程序中编辑的颜色插槽。

为了获得最佳性能和成本效益，他们使用内部工具将 SVG 转换为核心动画层，这是 Apple 平台的原生技术。创建包后，此工具会将包编译到随应用程序附带的资产目录中。

“这个工作流程使我们能够保留所有矢量数据，从 Sketch 开始，经过 SVG，一直到在 iPhone 上运行的应用程序，它们成为核心动画层。这样，应用程序运行起来非常高效，但我们保留了使用矢量资源的所有好处，包括用户能够自定义项目各个部分的颜色，”Guilherme 解释道。

为用户做正确的事

当然，实现梦想的工作流程并不是一朝一夕就能完成的。ChibiStudio 二人组首先必须克服许多挑战。“至少对我来说，它正在考虑每个单独的项目如何与其他项目整合。我们有十几个物品包和总共数千件物品，但它们必须像拼图一样拼凑在一起。不能有任何奇怪的剪裁或重叠，”Ewerton 说。

他的目标之一是确保仔细分配图层中每个项目的位置。这样，当用户向其角色添加一个项目时，它将准确地显示用户期望它相对于其他项目的位置。虽然用户可以自定义应用程序中的位置，但默认值必须有意义。

他们还努力为应用程序的画布做出用户界面决策。“我们有很多功能和想法，但我们不想让应用程序对于那些只想选择一些项目并在几分钟内完成一个漂亮的头像的人来说太复杂。”

但他们在简单性的另一面发现了另一个挑战：功能的可发现性。例如，用户总是能够点击赤壁上的项目来选择和自定义它们，但许多人没有意识到他们可以。“作为妥协，我们最终引入了一个工具栏，可以访问以前隐藏在手势或菜单后面的许多功能。”

理念，遇见发展

为了提供尽可能最好的体验，ChibiStudio 团队致力于创造流畅的交互、炫酷的功能和大量可供选择的头像项目。但性能呢？

“作为一名开发人员，处理应用程序必须处理的数据量一直是一个挑战。我不想让用户在应用程序中购买新包后等待资源下载，因此从 1.0 版开始直到今天，我们都会随用户从 App Store 下载的应用程序一起提供所有库存，”Guilherme 解释道。

Guilherme 依赖于数据压缩等传统技术和技巧的组合，例如不对可以在运行时以其他方式推断的某些元数据进行编码。您还可以在Guilherme 的博客中了解他们如何创建App Clip，让用户可以尝试应用程序创建角色的主要体验，而无需下载并安装完整的应用程序。

收获回报

虽然经济成功往往是应用程序创建者所追求的目标，但获得的不仅仅是财务自由。

“我一直对自己的工作非常在意，所以我总是寻求外部认可。因此，当我们收到用户关于 ChibiStudio 如何帮助他们发展角色并锻炼想象力的反馈时，我就为我们一直在做的工作感到自豪。”Ewerton 说道。

“Sketch 团队可能知道，使用创作工具有一些非常特别的地方。我们根据某些想法和用例来创作艺术品并开发功能，但我们的用户总是会用他们的创意来让我们感到惊讶，”Guilherme 解释道。“我最喜欢的一件事是，我们了解到一些美国老师在课堂上使用 ChibiStudio，让他们的学生将历史人物描绘成赤壁，并在他们的演示中使用。”

自 2016 年以来，Guilherme 和 Ewerton 借助 ChibiStudio 取得了长足的进步，我们为他们使用 Sketch 创作的作品感到自豪。如果您希望尽快开始自己的项目，Guilherme 的建议始终是保持简单。“这样您就可以在可预见的未来维持工作流程，或者至少在工作流程对您有利时维持工作流程。试图变得奇特通常会导致工作流程变得难以管理，让你开始偏离。”