跳过导航
Image of ChibiStudio screens made in Sketch
#MadeWithSketch

ChibiStudio 如何帮助动漫爱好者表达他们的创造力

准备好沉迷于最可爱的应用程序吧

您可能认识开发者 Guilherme Rambo,因为他作为 义务警员,打击 Apple 的秘密,并通过他们的漏洞奖励计划帮助他们修复 macOS、iOS 和其他操作系统中的安全漏洞。

但在 2016 年,Guilherme 失业,正在寻找一个可以与插画家 Ewerton Lima 一起进行的项目。他们知道他们拥有正确的技能组合来创造一些伟大的东西,他们只是不确定 *是什么*。但这一次,Apple 在同年 WWDC 上宣布推出 iMessage App Store,从而帮助了 Guilherme。

“他们展示的演示之一是一个 iMessage 应用程序,用户可以通过组合不同的配料来一起组装一个冰淇淋甜筒。那时我想到要做类似的事情,但用 Q 版人物代替冰淇淋,”Guilherme 解释道。

Ewerton 立刻表示赞同。“我一直很喜欢绘画,因此创建可以让其他人以不同方式组合以创造自己的作品的资源的想法很吸引人。”

这就是 ChibiStudio 的由来,这是一款面向动漫和 Q 版艺术爱好者的角色创建应用程序。您可以通过使用各种各样的物品(如鞋子和发型)来制作不同的头像来表达您的创造力,而无需擅长绘画!

如果您了解 Apple 的历史,您可能知道 iMessage App Store 失败了,但它并没有让 ChibiStudio 随之倒下。值得庆幸的是,该应用程序的 iOS 版本找到了自己的定位,我们在这里讲述它的故事。

ChibiStudio 的制作

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

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

为了保持井井有条,他将为每个项目包创建一个新的 Sketch 项目。然后,他将使用图层组来包含单个项目,并使用命名约定,如 hair-1、hair-2、shoes-1、shoes-2。他还会按填充颜色组织这些项目,因为它们稍后会成为用户可以在应用程序中自定义的颜色槽。

像 Ewerton 一样,Guilherme 也长期以来一直使用 Sketch 来设计用户界面和网站。他知道它对 SVG 有很好的支持,这是 ChibiStudio 的支柱。“我们希望在应用程序中创建时,尽可能地给予用户自由,并且我们还希望为更高分辨率的屏幕和媒体提供未来的资产,因此从一开始的想法就是使用基于矢量的资产来发布该应用程序。”

为了实现这一点,他创建了一个插件,可以导出文档中的所有图层组到单独的 SVG 文件,并根据该组对其进行命名。他还使用一个内部 Mac 应用程序工具来组装项目包并编辑一些元数据,以包括用户可以在应用程序中编辑哪些颜色槽。

为了获得最佳性能和成本效益,他们使用内部工具将 SVG 转换为 Core Animation 图层,这是 Apple 平台的本机技术。创建包后,此工具会将包编译到随应用程序一起发布的资源目录中。

Screenshot of Chibi Studio’s internal tool

“这种工作流程允许我们保留所有矢量数据,从 Sketch 开始,经过 SVG,一直到在 iPhone 上运行的应用程序,在那里它们变成了 Core Animation 图层。这样,应用程序就可以非常高效地运行,但是我们保留了使用矢量资产的所有好处,包括用户可以自定义项目各个部分的颜色的能力,”Guilherme 解释道。

善待用户

当然,实现梦想的工作流程并非一蹴而就。ChibiStudio 团队首先必须克服许多挑战。“至少对我来说,这是考虑每个单独的项目将如何与其他项目集成。我们有十几个项目包,总共有数千个项目,但所有这些都必须像拼图游戏一样组合在一起。不能有任何奇怪的剪切或重叠,”Ewerton 说。

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

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

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

Screenshot of ChibiStudio in Sketch

想法,与开发相遇

为了提供尽可能好的体验,ChibiStudio 团队专注于创建流畅的交互、很酷的功能以及大量可供选择的头像项目。但是性能呢?

“作为一名开发人员,处理该应用程序必须处理的数据量一直是一个挑战。我不希望用户在购买应用程序中的新包后等待资产下载,因此自 1.0 版以来,直到今天,我们将用户从 App Store 下载的所有库存随应用程序一起发布,”Guilherme 解释道。

Guilherme 依赖于数据压缩等传统技术和诸如不编码某些元数据之类的技巧,这些元数据可以在运行时以其他方式推断出来。您还可以阅读他们如何创建 App Clip,该剪辑允许用户试用应用程序的主要体验,即创建角色,而无需下载和安装完整的应用程序,请参阅 Guilherme 的博客

View of multiple ChibiStudio screens

收获回报

虽然经济上的成功通常是应用程序创建者所追求的,但除了财务自由之外,还有很多收获。

“我一直对自己的工作非常自我意识,所以我一直在寻找外部验证。因此,当我们从用户那里获得关于 ChibiStudio 如何帮助他们发展角色和锻炼他们的想象力的反馈时,我就会为我们一直在做的工作感到自豪,”Ewerton 说。

“正如 Sketch 团队可能知道的那样,使用创作工具工作有一些非常特别的地方。我们创建了具有某些想法和用例的艺术品并开发了这些功能,但是我们的用户总是会给我们带来惊喜,”Guilherme 解释道。“我最喜欢的事情之一是我们了解到美国的一些老师在课堂上使用 ChibiStudio,让他们的学生创建历史人物的 Q 版人物,并在他们的演示文稿中使用。”

自 2016 年以来,Guilherme 和 Ewerton 已经与 ChibiStudio 走了很长一段路,我们为他们使用 Sketch 创建的作品感到自豪。如果您希望尽快开始自己的项目,Guilherme 的建议始终是保持简单。“这样你就可以在可预见的未来保持工作流程,或者至少在它对你有效的时候。尝试花哨通常最终会导致一个无法管理的工作流程,你开始偏离它。”


ChibiStudio 适用于 iOS。您也可以在 TwitterInstagram 上关注他们,以便及时了解他们即将推出的所有 卡哇伊 可爱内容。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都会让您在几分钟内完成设置并准备好完成最佳工作。

免费开始
免费开始