泼辣修图的图标是如何被设计出来的?
最后更新时间 2017/8/25

*本文作者系泼辣修图团队首席设计师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字符。

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

结果和好处

创建一个新的视觉语言并保持一致性,从来不是一个简单的任务,但这项工作的好处很多。 除了全新绘制的图标之外,泼辣修图还有一套可以轻松拓展与升级的全新字符库。

为了与更多的设计师共享这一创意成果,我们决定以开源的形式与大家分享这一套图标与字体,任何组织或个人都可以免费的将这套图标与字体用于任何用途,我们会联合「优设网」(www.uisdc.com)于今晚发布这套素材,大家可以前往「优设网」下载,希望能够为大家的创意工作带来一些帮助!