旧文重发：2018/04
原文地址：https://medium.com/@annydesign/redesigning-adobes-file-type-icon-system-language-6efa4aed1b30
在 Adobe 品牌设计团队，我们为所有的桌面、移动和网页端产品设计品牌。品牌元素可以是任何东西，无论是你在程序坞中看到的两个字母的产品标志，或者产品自身的启动画面和图标。
发现问题
许多消费者也许没有意识到，Adobe 在三个云平台（Creative Cloud，Document Cloud 和 Experience Cloud）上有超过 100 款产品和服务.
这就是说，设计系统中一个小小的改动将会给整体带来成百上千变化。
说到文件类型图标，人们通常只考虑程序的一级文件类型，比如：
Photoshop 的 .PSD 文件
Illustrator 的 .AI 文件
InDesign 的 .INDD 文件
但是，我们大多数产品都可以导入和导出大量的二级文件类型（例如，Photoshop 就有 120 种不同的文件类型图标映射到注册表中）。
针对不同操作系统要求，我们的文件类型 icon 也要人工像素对齐 10 种不同的尺寸，并且作为栅格化的 .PNG 图标，传送到 .ICNS(Mac) 和 .ICO(Windows) 文件中。
当我们考虑每个文件类型图标的尺寸和格式数量时，我们其实是在查看 7000 多个资产，并且每个发布周期里都要修正和管理。
按照 Creative Cloud 的产品线过去四年的增长速率，创作和维护这些文件类型图标所需要的努力对于现在的工作流来说已经无法估量。
第一步：审计和调查
在我们开始重新设计整个系统前，我们需要调研产品中正在用什么。我们接触了每个产品团队来帮助我们对其所有的文件类型图标进行审计。
处处都可见不一致性，主要有两个原因：
1. 每个产品归属不同的业务团队，并且没有在设计上保持一致，并且
2. 当新产品和文件类型上线时，单个图标的设计被当做一次性的工作。
根据我们在设计中得到的信息，我们队对存的文件类型架构有一个了鸟瞰图。
首先，我们按照产品家族组织了文件类型图标，相互参照来找出哪些二级文件类型被多个应用程序共用，这样我们可以排除掉重复的图标。通过这一步我们将二级文件类型图标削减到了 65%。
其次，我们按照功能对文件类型进行分类，例如“图像”、“音频”、“程序”和“3D”。一种文件类型的图标由表示主要功能的典型象征符号组成（例如，一个 .HTML 文件类型将使用尖括号的象征符号</>来传达它的功能与代码和编程相关）。
我们也注意到一些文件类型使用同一个象征符号的不同版本，另一些文件使用的定制化的象征符号可以被更通用的图标替换掉。我们开始创建一个庞大的文件类型伞形组织，让整个产品家族使用不重复的象征符号。这么做下来，我们能够将所有的文件类型象征符号减少一半以上。
第二步 草图和设计
当我们对旧系统有了全面了解，我们开始确立新系统的基本组织原则：
1. 只有一级文件类型会和产品标志的颜色有关联。例如，.PSD 文件是蓝色而 .AI 文件是橙色。
2. 对于同时被多种程序支持的二级文件类型，创建一个中性的色板。例如，Photoshop 和 Illustrator 使用相同的 .PNG 文件类型图标，而不是每个程序都有关联了品牌色的单独版本图标。
3. 创建一个文件类型象征符号的主库来保持图标一致，并避免针对边缘情况定制资源。
我们在这个框架下画起草图。
重设计背后的一个主要驱动力就是简化并移除图标上的诸多元素，同时不会失去图标本身的含义。我们去掉了标签，把文件类型移到了图标底部。我们也去掉了纸张卷折效果，把设计扁平化并创建了更现代的视觉语言。
另外一个重要的驱动力是和光谱（Spectrum） 保持一致。光谱是 Adobe 新的界面设计语言,正在我们所有的产品里落地。因此，我们给文件类型图标倒了圆角，并开始建立一个图标库，使用光谱数据库中现有的象征符号，或者按照光谱的插画风格绘制新的符号。
最后，我们在文件类型图标中加入了亮色轮廓，和我们的产品标志产生联系。这个改变不仅仅让视觉系统联系更紧密，也让暗色界面中新的图标渲染效果更好，比较之下我们的旧图标会在背景中消失。
第三步：迭代和完成
在我们确定了设计方向后，我们在场景中测试了新的文件类型图标。在最开始的审计过程中，我们调研了文件类型图标在不同操作系统和产品出现的所有区域。我们也查看了每种场景下图标的不同大小和分辨率。
在 Mac 和 Windows 桌面屏幕上，我们要确保在各种比例因子下图标都在列表与网格视图中展示（最小 16 像素，最大 512 像素）。也要考虑界面亮与暗的问题，例如 Mac 桌面中 “最近使用”与“Spotlight 搜索”。然后，我们查看了产品内文件类型图标出现的位置，例如资源面板，多媒体浏览器对话框，首次运行应用时的欢迎屏幕。
可以想象，这个过程很快把我们带入了我们系统里所有文件类型图标被遗忘的阴暗角落的兔子洞中。但是这依然有价值。我们需要让大脑更加熟悉这项任务。
最后一步，是查看文件类型图标在网页和移动端的界面中使用时的效果，例如 Adobe Acrobat 和 Creative Cloud Libraries。由于这些服务也是被不同设计团队管理的，我们需要和非常多的人协同共建我们关于文件类型设计系统的检修方案。
我们对最终结果很满意，因为新的设计语言更加清晰、一致，并且传达了Adobe 的视觉品牌系统的演化
第四步：设计新的工作流
我们穿件了一个新的工作流程，利用 Illustrator 中的脚本功能，只需点击按钮就可以编译和导出 .PNG 文件。这个新模板为我们省下了大量的痛苦、缓慢的人肉工作。
我们也需要一个更好的的方式将栅格化的 .PNG 文件编译成 .ICNS (Mac) 和 .ICO(Windows) 文件。以前我们用IconFactory 的 IconBuilder 插件和 Fireworks 模板。但是新工作流中我们希望一个更灵活的解决方案来满足需求：主要是能够拖拽任意一组的 .PNG 文件以及自动导出正确尺寸的 .ICO 和 .ICNS 两种文件。
寻找了一圈第三方编译器后，我们决定和工程师合作，根据我们需求定制一个内部应用。他们创造了一个惊喜的工具，我们称之为Captain Icon，我们用这个编译器来打包所有新的产品类型图标。（但是Captian Icon仍然在内部测试，我们的工程师希望不远的将来在 Github 上开源，这样它就能给开发者社区使用了！）
第五步：落地
我们仍然在这个阶段，可能会长期处于这个阶段。每次发布 Creative Cloud ，我们都要进入一个涉及产品经理和工程师的跨团队过程，确保设计处处落地下去。
落地通常是一个冗长的过程，需要和多个团队反复沟通，上百封邮件往来，安装不同的测试包来检查资产，记录和定位错误，并管理多个发布期限。
微小的改变可以造成很大的不同
在我们团队，我们通常用树木盆栽的比喻来描述我们做的工作。
演化一个包含了上百个产品的品牌设计系统，依靠的是长期的无数微小、渐进的改变。我们为其修剪枝叶，让这颗树随着时间推移，能按照我们希望的方向生长。
尽管容易在细节中迷失，但是这个过程中我们学到的一切都将带我们进行下次以及更多的迭代。
