泼辣修图的图标是如何被设计出来的？

周柳强 2017-11-13

展开全文

*本文作者系泼辣修图团队首席设计师Adi

图标同图片一样，相较于文字拥有更强的表现力，它是人类交流方式立体化和多面化的体现，同时也是设计中的永恒语言。它们结合人类环境的形状和样式，溶解成现代人类社会难以想象的各种各样的符号标志。

动态设计的逻辑

设计最为重要的特征之一就是能够适应人类社会的动态变化。也正是由于这个特性，这种媒介成功的与我们的理念一起发展，并且由于它的适应性，它也是视觉传达中最具活力的分支，同时还是商业社会中经济需求与艺术表达之间的必要桥梁。

作为这种动态特性的一个很好的例子，我们可以提到与这个主题最为相似的分支：UI设计，其中例如拟物化（作为一种趋势）似乎是一个被遗忘的过去。但是，拟物化设计不仅仅是一种趋势，而是将人们的互动方式以数字内容表现出来的工具，这是合乎数字通信必然改革的一步，即为无技术时代的到来做的前期教育和必然准备。

尽管设计在不断变化，但设计的基本骨干之一却几乎保持不变（我推荐大家观看由Genevieve von Petzinger发表的一篇简短的TED讲座，内容是相关主题），即每个人都可以理解的象征、精密而简约的多层次的视觉语言。关于这个话题的细节以及这个设计流程的主要焦点，我将在下文中进一步阐述。

符号的视觉表达

“泼辣修图设计语言一致性”是我的首个设计任务之一。

这是一个艰巨而严肃的任务，特别是当你注意到你正在与超过1500万的用户沟通，并且他们已经形成了一定的泼辣修图使用习惯时。

在任务的初期，我对用户群和竞争对手进行了一些研究，通过这里得出了一个众所周知的结论：倾听实际上是分析和定义问题过程中最重要的技术。但是倾听不一定意味着满足所有用户的要求，而是了解他们的需求和原因，这可以帮助我们得到更好的结果。

考虑到早期的设计过程，现有的批评和要求，并考虑到未来的更新和日益增多的应用程序，不难得出结论：图标是交互的关键。其原因在于，在当今多平台应用程序的设计中，存在一个显著而通用的途径去转变设计元素（通常通过创建和复制不同的色调，而形状和字体的变化则主要基于预设框架和微观趋势）。在这种情况下，我认为UI一致性的基础是图形语言，即特定的图标集。

创造过程

泼辣修图以及任何高级图片编辑软件都拥有十分丰富的选项，包含了丰富的交互元素、工具和各种术语，因此UI组件的细节至关重要。为此，这一套UI由简单明了的“平面”元素组成，并结合极简风格的图标。在这种情况下，图标扮演着用户与应用程序之间的交互式链接角色，即用户与软件沟通的语言。

我首先在纸上画出了草图，然后使用Sketch软件转移到数字表单。图标的设计没有根本改变，采用的形式被保留、文字变化很小。为了与公司新的（圆形）视觉识别体系保持更高的一致性，我使用略微弯曲的边缘与严格的用户界面、矩形图像以及24px的图标宽高比形成鲜明对比。

完成设计后，我们在用户群组中对新图标进行了测试，然后更新了软件。两个月的研究和工作终于得到了一套180多个重新设计的完美矢量图标集。

技术问题和解决方案

泼辣修图是一个基于Web Kit的软件套件，因此导出格式（.svg和.png）的稳定性和兼容性都不太满意，这指示我们创建Dbbat图标字体，主要是因为后者处理起来更简单，并且它们的体积也更小。

一个相对容易的任务，如果没有找到合适的方法，可能会很容易变得复杂。

我必须指出，我开始是在Adobe Illustrator中创建的原始图标，尽管有多年的使用经验，以及有数百个图标设计和数十个图标集都在这个软件之中，但Adobe Illustrator CC 2017依旧被证明是相当不稳定的任务解决方案。简而言之，导出多个表单，命名和组织文件以及优化.svg格式和代码是最大的问题，因此我使用Sketch应用程序完成了设计。

另一方面，Sketch并不是真正的对字体设计师友好的软件，所以为什么我被迫将完成的图标复制到Illustrator（幸运的是这里没有问题），然后为Glyphs编辑做准备。我使用标准的Unicode图表创建了等宽字符图标。

幸运的是，Glyphs有一系列优质的免费插件和脚本，您可以使用它们来雕琢字体的每一个细节。由于这个字体的基本目的是为了简化软件本身，也是为了简化开发过程，除了标准的字体导出（对于otf，ttf和woof）外，我使用了webfont测试HTML脚本。

这种技术的优点是可以直接在浏览器中测试dingbat字体（eot，woff，woff2），还可以深入了解CSS中的unicode字符。

这就是新版泼辣修图图标设计与调试的全过程。