Adobe 的品牌推广团队负责公司的桌面、移动和网络产品的品牌推广。品牌元素的形式有很多种，可以是两个字母的产品logo、应用启动界面、产品中的图标等等。

一个非常常见但经常被忽视的品牌元素是文件类型图标。文件类型是可以使用特定应用程序创建的特定格式的文件，例如使用 Word 制作的 .DOC 文件。文件类型图标与文件类型相关，是您保存或打开文件时出现在屏幕上的图标。

在今年秋季发布的最新版 Cloud 中，用户会发现我们所有的文件类型图标都已刷新！在本文中，我将详细介绍这次重新设计文件类型图标系统背后的思考过程，并与大家分享升级大型产品线品牌系统的挑战，以及随之而来的挑战的一些见解。

阅读资料：

发现问题

许多消费者不知道 Adob​​e 的三个平台：Cloud、Cloud 和拥有 100 多种产品和服务的 Cloud。

这意味着设计品牌识别系统时的一个小疏忽可能会给整个品牌带来数百个问题。

当我们谈论文件类型图标时，人们倾向于只考虑最重要的图标，例如：

但是，我们的大多数产品都可以导入和导出大量辅助文件类型，例如 120 多种不同的文件类型。

为了针对不同的操作系统进行优化，我们需要制作十种不同大小的.PGN文件类型图标，并打包成.ICNS格式（mac）和.ICO格式（）文件。

当我们计算每种文件类型的图标大小和格式时，我们发现在每个新版本发布周期中都会修改和管理超过 7,000 个资产。

由于过去四年 Adob​​e CC 产品线的快速扩展，以当前的工作流程创建和维护这些文件类型图标是不可能的，工作量太大。

第 1 步：清点和调查

在开始重新设计整个系统之前，我们必须找出当前产品中使用的文件类型图标。我们采访了各个产品团队扁平化adobe软件图标大全，以评估所有现有的文件类型图标。

错位随处可见扁平化adobe软件图标大全，主要有以下两个原因：

不同的团队领导各自的产品线，并没有一个规范作为执行指南。新文件类型与新产品一起上线，并且许多被视为一次性设计。

根据这份清单中的信息，我们对现有文件类型的结构进行了鸟瞰。

首先，我们按产品线和跨应用程序重复出现的连接图标组织文件类型图标。这会查找并删除重复的图标。到这项工作结束时，辅助文件类型图标的数量已减少到 65%。

按产品线组织的遗留文件类型结构的片段。

接下来，我们按照功能来划分文件类型，比如“图像”、“音频”、“代码”或“3D”。通常，文件类型图标将是暗示主要功能的隐喻（例如，.HTML 文件将用于暗示其功能与代码相关）。

按功能组织的遗留文件类型结构的片段。

我们注意到一些文件类型使用相同隐喻的不同版本，而一些文件类型使用自定义隐喻，可以用更统一的隐喻替换。我们创建了伞形文件类型来为整个产品线安排一个统一的隐喻。这样做之后，我们将隐喻的数量减少了一半以上。

旧的辅助文件类型隐喻图标片段。第 2 步，起草和设计

一旦我们对旧的文件类型图标系统有了广泛的了解，让我们开始为新系统构建基本规则：

只有主文件类型可以与产品标志的颜色相关联。例如，.PSD 文件为蓝色，.AI 文件为橙色。为许多应用程序将使用的辅助文件类型创建一个中性调色板。例如，为相同的 .PNG 文件类型创建图标，而不是每个都具有与品牌颜色相关联的单独图标。创建文件类型隐喻的主存储库，以确保图标之间的关联性并避免为边缘情况定制图标。

旧文件类型图标模块反汇编。

我们遵循上述规则并开始起草新图标。

该项目早期草图的快照。

此重构的主要目的之一是在不丢失重要信息的情况下简化图标上的元素。我们删除了标签并将文件类型放在图标的底部。我们还删除了页面的角落以使设计扁平化并使视觉语言现代化。

Adobe 文件类型图标演变图。

另一个重要目的是与 Adob​​e 的新 UI 设计语言保持一致——该语言正在我们的产品中逐步推出。经过这样的努力，我们将文件类型图标的四个角进行了圆润，并开始构建素材库，利用规范中已有的隐喻，设计出与其图标风格一致的新素材。

Adobe 图标库快照。

最后，我们为图标的笔触使用了明亮的颜色，以匹配当前的产品标志。这一变化不仅使视觉系统更加紧凑，而且新图标在黑暗的界面中看起来更加清晰。相比之下，旧图标与背景融为一体，难以区分。

暗界面下的色彩对比研究。

第三步，迭代和定稿

现在我们已经确定了设计方向，我们已经开始在几个场景中测试新的文件类型图标。在我们最初的测试中，我们调查了文件类型图标出现在我们自己的产品中跨不同操作系统的所有位置。我们还研究了图标在不同尺寸和分辨率下的显示方式。

在 mac 和 OS 桌面上，我们必须以不同的缩放因子（最小 16 像素，最大 512 像素）计算图标。也有明暗界面的情况，比如电脑上的mac“项目”和“ ”，然后我们检查了我们产品中文件类型图标的外观，比如素材板、媒体文件浏览框，以及首次启动应用程序时的欢迎屏幕。

这一举动立即使我们陷入了一个充满文件类型图标的深渊，这些图标隐藏在人迹罕至的角落。但这样做是有价值的。我们需要更充分地参与这项任务。

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

最后一步是检查移动和 Web 服务（如 Adob​​e 和 Cloud）的用户界面中文件类型图标的使用情况。由于这些服务由不同的设计团队处理，如果我们计划翻新整个文件类型设计系统，我们需要与许多人合作。

我们为最终的输出感到自豪，因为新的设计语言更简洁、更紧凑，并且代表了 Adob​​e 图像识别系统的更新。

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

第四步，设计新流程

我们利用 AI 中的脚本功能创建了一个工作流程，一键生成和导出 .PNG 文件。这个工作流程为我们节省了大量时间。

我们还需要一种更好的方法将这些光栅 .PNG 图像放入 .ICNS(mac) 和 .ICO()。我们之前使用的插件。但我们想要一个更灵活的解决方案来满足我们的需求：拖入任何一组 .PNG 文件，并自动输出正确大小的 .ICO 和 .ICNS 文件。

在四处寻找第三方编译器后，我们决定最好针对此需求进行定制，并与开发人员一起制作一个内部应用程序。他们开发了一个很棒的工具，我们称之为 Icon，我们用它来生成和打包所有新的文件类型图标。（目前仍处于测试阶段，我们的工程师希望与 Adob​​e 开发社区中的其他开发者分享！）

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

第五步，落地

我们仍处于这个阶段，而且可能会持续很长时间。每次我们发布新版本的 Cloud 时，我们都会与许多产品经理和工程师团队一起满足要求，以确保我们设计的输出质量。

落地其实是一个迭代的过程，需要和各个团队反复沟通，安装很多版本来测试材料，发现并解决不可避免的Bug，管理很多产品的发布期限。

我们的产品建立在不同的代码库上，这意味着不同平台上的同一件事可能会导致不同的问题。质量保证和加强品牌设计规范可能是我们团队中最无聊的任务之一，但维护和改进设计体系很重要。

Adobe 在操作系统中的新文件类型图标。

右支点允许杠杆移动地球。

在我们的团队中，建造盆栽植物经常被用来比喻所做的工作。

升级包含数百条产品线的设计系统依赖于不断的小变化。我们修剪周围，让树随着时间的推移以我们想要的方式生长。

虽然有时会迷失在细节中，但我们一路上学到的一切都会在下一次迭代中帮助我们。

其他文章感谢阅读