用 Sketch 制作：加文·尼尔森如何将“图标”融入“标志性”

当我们在 加文·尼尔森 的 Twitter 上看到他的拟物化手机图标设计 时，我们非常喜欢它逼真的缝制皮革效果。我们知道我们必须与他进行交流。

您将近距离了解加文对图标设计的态度、他对拟物化的热爱以及他对该领域其他人的创意技巧。

跟我们谈谈你自己吧。你一直都是设计师吗？

我是一名产品和图标设计师，目前居住在加利福尼亚州圣地亚哥。我记得在高中时偶然发现了 MacThemes，从此对设计产生了兴趣，尤其是应用程序图标设计。我突然意识到我 Mac 上看到的图标是由设计师手绘的。我很快就痴迷于弄清楚 Photoshop 和矢量图形的世界，并尝试制作自己的应用程序图标。

从那时起，我对产品和图标设计的兴趣变成了热情。大学毕业后，我专注于人机交互，并开始担任产品设计师，并在业余时间以及自由项目中制作图标。我现在在 GitHub 担任产品设计师，负责移动应用程序，并且多年来一直喜欢制作应用程序图标！

随着时间的推移，您对图标设计的态度发生了哪些变化？

我一直在尝试改进并从我制作的每个图标中学习一些东西，这导致我的方法随着时间的推移发生了许多微小的变化。我认为我的方法和技巧中最大的变化来自学习 3D 设计的基础知识。

尽管我仍然在 Sketch 中以矢量格式渲染大部分最终图标，但拥有用于透视和照明的 3D 参考直接帮助我设计图标。间接地，研究现有图标、重新创建它们以及使用 3D 工具从根本上改变了我设计图标时对细节的看法，当我在 Sketch 中开始绘制最终版本时，这种看法也随之改变。

开发这些图标有哪些挑战？

图标设计中有很多小创意挑战，这也是它如此有趣的原因！图标应该是应用程序的可识别符号，给用户留下良好的第一印象，能够很好地扩展到不同的尺寸，拥有良好的对比度等等——所有这些都是独特的挑战。

当我从细节中稍微放大，看看整个过程的挑战时，我通常会将我的工作分为两个相互重叠的阶段。

我流程中的第一个阶段是大量的草图、构思和研究，以获得一些好的图标构思。这可能会因为各种原因而成为一项挑战，但在某些方面，这是设计图标最重要的部分。您可以对糟糕的图标构思进行精美、详细的渲染，但它可能只是一个不怎么样的图标。

技术渲染本身是第二阶段。在这里，我转向 3D 工具和 Sketch 来创建最终作品。即使制作了大量应用程序图标，我仍然在尝试执行构思时遇到新的挑战，尤其是在追求更拟物化的逼真风格时。我喜欢认为图标中的每个细节都创造了一个整体，这个整体大于部分之和，这意味着创造一个很棒的图标来自于挑战自己真正做到每个微小的高光、阴影、颜色选择等等。

您能给那些在创意图标设计方面挣扎的设计师提一条建议吗？

我之前在 Twitter 上谈过这个话题，但值得重申：我非常喜欢通过复制现有图标来学习和练习，这些图标能引起你的共鸣。从头开始重新创建图标迫使你真正研究细节，并理解是什么让它起作用；是什么让它很棒。最终，你可以通过这种练习发现的细节和技巧，用新的方式来塑造自己的风格。

我非常喜欢通过复制现有图标来学习和练习，这些图标能引起你的共鸣。从头开始重新创建图标迫使你真正研究细节，并理解是什么让它起作用；是什么让它很棒。

我是在磨砂金属、木纹、人造草皮和皮革界面鼎盛时期开始图标设计的，我一直觉得拟物化设计是一项有趣的挑战。我认为正是它精细的细节以及逼真的阴影和高光最初吸引了我！现在，我尝试在旧的、超级逼真的拟物化图标和更精致、更简洁、更适合上下文的图标之间取得平衡。当你做对了，它看起来并不突兀，但仍然让人感到怀旧，我认为这是它能引起人们共鸣的部分原因。

由于 GitHub Mobile 默认使用更易于识别的品牌应用程序图标，因此我有幸可以尝试为替代图标使用新的（即旧的）有趣的风格，让我们的用户感到高兴。我很幸运能在移动团队拥有空间，可以偶尔从困难的产品设计问题解决中解脱出来，让一些创意图标设计得以展现。

现在，我尝试在旧的、超级逼真的拟物化图标和更精致、更简洁、更适合上下文的图标之间取得平衡。

关于拟物化设计趋势是死是活似乎存在着无休止的争论。你站在哪一边？你对这种趋势有什么看法？

我不确定我是否会把它称为是死是活的二元问题。我认为，随着我们对数字科技概念越来越熟悉，我们在界面中对拟物化的需求已经减弱。当苹果将其产品界面从以拟物化为重的风格转变为“扁平化”风格时，我认为摆锤有点过分地摆到了另一端。现在，您看到拟物化以某种方式回归，我认为这是一件好事。界面中使用了更多阴影和高光，以此来突出显示。但是，拟物化在传达可操作性以及 Z 轴层次结构方面也具有实用功能，这确实有助于用户理解界面的空间映射。

你提到你一直在 Sketch 中设计图标，因为你对它有很好的体验。Sketch 如何帮助你完成设计流程？

Sketch 中有许多提升生活品质的小功能和设计选择，这些真的让设计图标成为一种乐趣，并且与其他工具相比大大加快了我的工作流程。矢量编辑功能一流——能够在使用钢笔工具绘图时快速切换点样式——使用 1、2、3 和 4——非常方便。我还发现添加和调整路径上的点非常流畅。

检查器 UI 是我喜欢的 Sketch 的另一个方面。它旨在清晰地向您展示图层样式的所有决定性特征，而无需单击子菜单。例如，我最近发布的两个皮革 GitHub 移动图标中的每条缝线都包含 12 个以上的图层样式。但是，借助检查器 UI 中包含的标识符，我可以轻松地识别创建图标时需要编辑的具体样式。

其他一些小细节，比如始终能够一键获得 HEX 值和 HSLA 值，只需要两次点击就可以翻转或旋转渐变，以及拥有多个描边，这些都是极大的生活品质改进。

对于 Sketch 新手来说，你最想分享的插件、库或技巧是什么？

实际上，我目前在 Sketch 中的图标设计中没有使用任何插件，但我强烈建议每个人学习常用操作的 键盘快捷键。这将加快你的工作流程，让你可以专注于创作，而不是在界面中点击来点击去。

以下是一些好的入门快捷键：

Sketch 还有一些很棒的、针对编辑的小众工具，比如 旋转副本。一定要仔细研究一下这些工具。

最后，你最喜欢的 GitHub 设计项目是什么？或者你最期待参与哪个项目？

最近，GitHub 有很多令人兴奋的项目在发布。开发工具领域有很多独特的特点和机会，这些特点和机会带来了看似无穷无尽的挑战和问题需要解决。

我最近最喜欢的一个项目，它实际上与 Inspector 的设计原则有一些重叠，是 GitHub Mobile Shortcuts - 一项新功能，旨在让你在 Home 选项卡上快速访问 Issues、Pull Requests 和 Discussions 的筛选列表。就像 Inspector 将相关图层信息直接提炼到表面一样，Shortcuts 可以让你快速访问对你工作效率最有用的内容。它把 一些 5-10 步操作流程变成了 1 步操作流程，我们将在未来进行进一步的改进！敬请关注即将在 GitHub Mobile 中发布的一些令人兴奋的秘密项目。👀

关注 Gavin Nelson 的 Twitter 和 Dribbble，及时了解他的设计和创意技巧。