设计出优秀、易于理解的图标是一项真正的技能。您需要将大量关键信息压缩成一个小型、清晰的图像——当然,它还需要看起来吸引人。我们与图标设计师 Yannick Lung 坐下来,听他讲述在设计众多应用程序图标和图标包时遇到的挑战——以及他为何选择 Sketch 来完成这些工作。
您能告诉我们您是如何开始图标设计的吗?
我记得很清楚。当我大约 13 岁的时候,我喜欢用 iWeb 构建网站,iWeb 是 Apple iLife 套件的一部分。我正在对网站进行重新设计,我萌生了在侧边栏使用小象形图的想法。我真的想使用自己设计的图标,所以我开始在 16 × 16 画布上绘制小矩形。
大约在同一时间,我对 iPod Touch 主屏幕上的艺术应用程序图标着迷。这种兴奋促使我开始自己设计应用程序图标。
当我第一次打开 Sketch 时,一切都立即显得合乎逻辑。我从第一眼就爱上了它。
那时,没有任何设计工具能够真正说服我。要使用任何工具,您都必须观看无数教程。作为权宜之计——这现在听起来可能有点令人惊讶——我使用了 Keynote。大约在 2011 年年中的一天,我在浏览 Mac App Store 时,Sketch 吸引了我的注意。当我第一次打开它时,一切都立即显得合乎逻辑。界面与 Keynote 类似,有一个单独的列用于图层,最棒的是,我可以应用内阴影!我从第一眼就爱上了它。
是什么让 Sketch 成为图标设计的绝佳工具?
Sketch 的美妙之处在于它可以帮助我完成整个图标设计流程,因此它非常易于使用。我喜欢工作时的速度。我指的不是技术性能,而是您移动的速度以及思考的便捷性。
在开始项目时,我总是从基本形状开始,不带颜色、光线和阴影。然后,我逐个部分——更确切地说是逐个画板——迭代式地向前推进。从这一点出发,最终结果逐渐清晰起来,直到它感觉“正确”。
由于所有对象都是矢量,因此我可以轻松地向上、向下或扭曲它们,而不会变得模糊。此功能与“缩放”功能相结合,可以出色地操作图层。

这里操作的不仅仅是变形图层,还有应用更复杂的图层效果。我经常被问到我是如何创建这些类似 3D 的效果的。事实是,这主要是各种阴影、混合模式和模糊效果的组合。
Sketch 的美妙之处在于它可以帮助我完成整个图标设计流程,因此它非常易于使用。我喜欢工作时的速度。
我总是会在实际环境中测试图标,或者查看其实际尺寸。这对于评估最终结果的对比度是否足够很重要——Sketch 也在这方面帮助了我。借助“符号”,我可以编辑主对象,并在各种模型中实时查看我的更改——例如 macOS Dock 或 App Store 产品页面。它允许我微调并使图标更出色。
图标准备就绪后,我可以借助“导出预设”轻松地在 Xcode 所需的不同尺寸中渲染它。
开发这些图标会遇到哪些挑战?
与其他设计领域相比,图标设计在交流层面完全不同。作为图标设计师,您的目标是用所有人都能理解的通用语言来描绘事物。此外,图标是应用程序的第一个接触点,会给人留下第一印象。
最大的挑战之一是理解图标完成时出现的尺寸。在 27 英寸屏幕上全屏看起来不错的东西,并不一定能转化为 64 × 64 像素。即使在视网膜显示屏或 5K 显示器上,图标在小尺寸下也可能看起来模糊,而且完全“错误”。为了解决这个问题,我始终在整个过程中不断测试和查看图标的小尺寸。
作为图标设计师,您的目标是用所有人都能理解的通用语言来描绘事物。
同样,选择合适的调色板也不容易。在许多情况下,人们将图标放置在彩色的背景上,这本身就是一个挑战。最好是在不同的背景上简单地测试不同的颜色组合。这样,您可以快速评估哪些颜色更适合。正确的颜色对比度在这里也起着重要作用。如果图标中的所有对象都在蓝色范围内,则它们可能在小尺寸下相互融合。互补色是不错的选择,因为它们提供了很好的对比度。

另一个挑战是找到合适的平衡点。如果对象太少,则图标可能会显得过于空旷或泛泛,如果元素太多,则会显得杂乱无章。这种情况比您想象的更容易发生,尤其是当您尝试为图层赋予更具塑性的外观时。突然,设计看起来过于像一张真实照片。
因此,诀窍就在于找到恰到好处的程度,才能制作出优秀的图标。有时需要更多,有时需要更少,而且往往差别只在几个像素。
您还使用 Sketch 设计了哪些其他内容?
我几乎所有可以在 Sketch 中设计的项目都会在 Sketch 中进行设计。无论项目规模有多大,我都认为它是制作设计的可靠工具。从插图到组件库,再到扩展的用户界面,在过去几年中,我在 Sketch 中创建了许多项目。

例如,就在几天前,我们发布了 Mileways 的全新版本——一款具有社交功能的航班追踪器。我在 Sketch 中使用数百个画板,在多个页面上对整个界面进行了插图。
我几乎所有可以在 Sketch 中设计的项目都会在 Sketch 中进行设计。无论项目规模有多大,我都认为它是制作设计的可靠工具。
您的创作过程是怎样的?
在开发新的应用程序图标时,我通常从模拟开始。也就是说,我会先思考潜在的主题并进行一些研究。当某个想法第一次出现时,我会在我的笔记本上用点阵格大致草绘它,以防我忘记。

然后,我继续在 iPad 上进行操作,在“数字纸张”上捕捉这些想法。为此,我使用 Apple Pencil 和 Linea Sketch——来自 Iconfactory 的天才团队。我能够更快、更详细地阐述想法,从而更深入地了解形式和构图。另一个有用的功能是包含预先安装的应用程序图标网格的模板。
如果有些物体难以想象,我偶尔会使用 Cinema 4D 来研究光线在材料上的行为。曝光度和光线场景对图像的影响很大。它还有助于我快速定位物体,以便更好地感受基本构图。
对于 Sketch 新手,您会分享什么插件、库或技巧?
近年来,渐变已成为各个设计领域流行的风格化手段。但它们有时会显得过于单调,尤其是在仅使用两种颜色点的情况下。您可以通过缓动来避免这种情况,缓动可以创造更柔和、更自然的颜色效果。
手动操作可能有点复杂和繁琐。在某个时刻,我偶然发现了名为 Easing Gradient 的插件,现在我几乎每天都在使用它。我强烈推荐它给所有喜欢使用渐变的人。
最后,您会给有抱负的图标设计师什么建议?
我认为最重要的是要有尝试新事物的兴趣。如果有什么东西让你兴奋,那就尝试一下。许多人(包括我自己)在开始时不愿意尝试新想法。为了帮助自己入门,我以前会复制其他图标,因为我想知道如何创作类似的艺术作品。

观察现实世界中的事物并玩弄它们也有帮助。谁还记得磁带的感觉?如果我不了解磁带的细节,我可能就不会想到 Nuage 应用图标的替代版本。
我认为最重要的是要有尝试新事物的兴趣。如果有什么东西让你兴奋,那就尝试一下。
最后,我建议研究一下操作系统的设计指南(例如,Apple 的 Human Interface Guidelines)。它们通常会解释基本属性,这可以帮助您理解什么是重要的。您还可以找到更多帮助,例如可以遵循的模板或网格。