「案例」从新设计 Adobe 的文件类型图标

Adobe 的品牌设计团队负责为公司旗下桌面端、移动端和 web 端的产品进行品牌设计。品牌元素的形式不少，能够是两个字母的产品 logo，应用启动界面，产品里的图标等等。

一个很常见却常被忽视的品牌元素就是文件类型图标。文件类型是指用某种特定应用能够建立的特定格式的文件，好比用 Word 制做的 .DOC 文件。文件类型图标与文件类型相关，就是你在存储或打开文件时显示在屏幕上的那个图标。

在今秋发布的最新版本 Creative Cloud 中，用户将发现咱们全部的文件类型图标面目一新！在这篇文章，我将详细阐述此次对文件类型图标系统从新设计背后的思考过程，而且和你分享在升级一个大型产品线的品牌形象系统时所遇到的挑战，以及随之而生的一些看法。

📕阅读信息：

阅读时间：约9分钟
做者信息：Anny Chen
原文地址：Medium

---

发现问题

许多消费者并没意识到 Adobe 的三个平台：Creative Cloud，Document Cloud，和 Experience Cloud 拥有超过100个产品和服务。

这意味着设计品牌形象系统时的一个小疏忽可能给整个品牌带来成百上千的问题。

当咱们谈及文件类型图标时，人们每每只会想到最主要的那些，好比：

• Photoshop 的 .PSD
• Illustrato 的 .AI
• InDesign 的 .INDD

可是，大多数咱们的产品能够导入导出大量的辅助文件类型，好比 Photoshop 就涉及超过120种不一样的文件类型。

为了给不一样的操做系统优化，咱们须要制做十种不一样尺寸的 .PGN 文件类型图标，并打包成 .ICNS 格式（Mac）和 .ICO 格式（Windows）文件。

当咱们计算制做每一个文件类型图标的尺寸和格式时，发现要在每一个新版本发布周期修改和管理超过7000份素材。

因为 Adobe CC 产品线在过去四年扩张得很快，以当前的工做流程去建立和维护这些文件类型图标已经不太可能，工做量太大了。

第一步：盘点和调查

在咱们开始从新设计整个系统以前，咱们必须查一下当前产品里在用什么文件类型图标。咱们访问了各个产品团队，借此盘点现存全部的文件类型图标。

到处都能发现失调的地方，大都是下列两个缘由致使：

1. 不一样的团队主导各自的产品线，并无规范做为执行准则。
2. 新的文件类型随着新产品不断上线，不少被看成一次性设计。

根据此次盘点中获得的信息，咱们作了一张关于现存文件类型结构的鸟瞰图。

首先，咱们以产品线组织了文件类型图标，并把不一样应用之间重复出现的图标链接起来。借此发现并并删去重复的图标。结束这项工做时，辅助文件类型图标的数量减小到65%。

以产品线组织的旧的文件类型结构片断。

接下来，咱们以功能划分文件类型，好比“图像”，“音频”，“代码”或“3D”。一般来讲，一个文件类型图标会是一个暗示主要功能的比喻（好比，一个 .HTML 文件将会用</>来暗示他的功能和代码有关）。

以功能组织的旧的文件类型结构片断。

咱们注意到某些文件类型使用了不一样版本的相同比喻，还有一些文件类型使用了自定义的比喻，其实能够用更统一的比喻进行替换。咱们建立了伞式结构的文件类型，借此为整个产品线安排统一的比喻。作了这个后，咱们减小超过一半的比喻数量。

旧的辅助文件类型比喻图标片断。

第二步，草稿和设计

一旦咱们对老的文件类型图标系统有普遍的了解，就开始创建新系统的基础规则：

1. 只有主要文件类型才能够和产品 logo 的颜色有关联。好比说 .PSD 文件是蓝色的而 .AI 文件是橘色的。
2. 为那些会被不少应用用到的辅助文件类型建立一个中性色盘。好比说，为 Photoshop 和 Illustrator 建立一样的 .PNG 文件类型图标，而不是各自有一个和品牌色相关的单独的图标。
3. 创造一个主要的知识库来存放文件类型比喻，借此确保图标之间的关联性，并避免为边缘案例定制图标。

旧的文件类型图标模块拆解。

咱们遵循上述规则，开始给新的图标打草稿。

项目早期草图的快照。

进行此次重构的主要目的之一是简化图标上的元素，并不丢失重要的信息。咱们丢掉了标签，并把文件类型放到了图标的底部。咱们也去掉了页面的折角来让设计变得扁平化，让视觉语言更现代化。

Adobe 文件类型图标进化图。

另外一个重要的目的是和 Adobe 的新 UI 设计语言 —— Spectrum 一致 —— 正在咱们的产品中逐步推出。通过此次努力，咱们把文件类型图标的四角作圆，并开始创建一个素材库，使用 Spectrum 规范中现有的比喻，设计新的与其图标风格相一致的素材。

Adobe Spectrum 图标库快照。

最后，咱们给图标的描边使用了亮色，以跟如今的产品 logo 一致。这种改变不只让视觉系统变动紧密，并且新图标在深色界面下看着更清晰。相比之下，旧的图标则会和背景融成一体，难以分辨。

在深色界面下颜色对比度研究。

第三步，迭代和定稿

既然咱们定下了设计方向，咱们开始在一些场景下测试新文件类型图标。在最初的测试中，咱们调查了不一样操做系统中、咱们本身的产品中全部会出现文件类型图标的地方。咱们也查看了在不一样尺寸和分辨率下图标出现的状况。

在 Mac 和 Windows 操做系统的桌面上，咱们必须统计不一样缩放因子的下的图标状况（最小16像素，最大512像素）。还有亮色、深色界面下的状况，好比说 Mac 电脑上的“Recent Items”和“Spotlight Search” ，而后咱们检查了本身产品中文件类型图标的出现状况，好比说素材板，媒体文件浏览框，和当你第一次启动应用时的欢迎界面。

这一举动立刻让咱们陷入了一个深渊，里面遍及藏在各我的迹罕至的角落里的文件类型图标。可是这么作颇有价值。咱们须要更全面的投身这个任务。

文件类型图标出现的各类场景。

最后一步是检查移动端和 web 端服务里用户界面中文件类型图标的使用状况，好比 Adobe Acrobat 和 Creative Cloud Libraries。因为这些服务由不一样设计团队负责，若是咱们计划翻新整个文件类型设计系统，就须要和不少人合做。

咱们对最终的输出很骄傲，由于新的设计语言更简洁，更紧凑，而且表明了 Adobe 形象识别系统的更新。

Adobe 的新文件类型图标系统。

第四步，设计一个新流程

咱们利用 AI 里的脚本功能建立了一个工做流，能够一键生成和导出 .PNG 文件。这个工做流给咱们节省了不少时间。

咱们也须要一个更好的方法来把这些栅格 .PNG 图片放到 .ICNS (Mac) 和 .ICO (Windows)中。咱们之前使用 IconFactory 的 IconBuilder 插件。可是咱们想要一个更灵活的解决方式知足需求：拖入任何一组 .PNG 文件，自动输出正确尺寸的 .ICO 和 .ICNS 文件。

在找了一圈三方编译器之后，咱们决定最好仍是为这个需求定制，和开发人员作一个内部 app。他们开发了一个超赞的工具，咱们称之为 Icon 队长，咱们用它来生成和打包全部的新文件类型图标。（还在内测，咱们的工程师但愿在 GitHub 上分享给 Adobe 开发社区里的其余开发者使用！）

Adobe 内部的 .ICO 和 .ICNS 编译器。

第五步，落地

咱们仍在这一阶段，并可能持续很长时间。每次咱们发布一个新版本的 Creative Cloud，咱们都会和许多团队的产品经理和工程师碰需求，以保证咱们设计的输出质量。

落地实际上是一个反复的过程，须要经历和各类团队反反复复的沟通，安装不少版原本测试素材，找到和解决不可避免的 bug，还有管理不少的产品发布截止日期。

咱们的产品构建于不一样的代码基础，意味着一样的东西放在不一样的平台会产生不一样的问题。质量保障和增强品牌设计规范多是咱们团队中最无聊的任务之一，但这对于保持和提高设计系统很重要。

操做系统中 Adobe 新文件类型图标。

合适的支点可让杠杆撬动地球。

咱们的团队中经常使用修建盆栽来比喻作的工做。

提高一个包含数百产品线的设计系统依赖不断的小改变。咱们四处修剪，让树在慢慢时光中长成咱们但愿的样子。

虽然有时会在细节中迷失，但咱们在过程当中学习的全部东西将帮助咱们进行以后的次次迭代。