发布时间：2020-10-11 分类： 行业资讯
的整个过程本文深入分析了最新的Adobe文档类型图标系统，重新设计了想法和流程，并分享了在大型产品线中开发品牌系统的经验。
作为Adobe的品牌设计团队，我们负责为所有桌面，移动和网络产品打造品牌。品牌元素包含各种各样的东西，从您在Dock中看到的双字母徽标到产品的启动页面以及用户使用产品中的任何功能图标。
其中一个元素经常被忽略但具有非常明显的特征，它是一个文件类型图标。文件类型是应用程序可以创建的特定文件类型的名称。例如，Word文件的文件类型是“.DOC”。文件类型图标用于区分文件类型。保存或打开实际文件时，屏幕上显示的图标是文件类型图标。
随着今年秋季发布的最新创意云，用户将看到我们所有的文件类型图标都焕然一新。在本文中，我将深入研究我们最新的Adobe文件类型图标系统重新设计的想法和过程，并分享我们在开发大型产品线中的品牌系统挑战时的经验。
首先，要认识到这项工作的重要表现
许多客户可能没有意识到Adobe在三个云盘上拥有超过100种产品和服务：Creative Cloud，Document Management Cloud以及Marketing and Analytics Cloud。
这意味着设计系统的微小变化可能导致整个产品系统发生数百次变更。
对于文件类型图标，人们通常只考虑应用程序的主要文件类型，例如：
Photoshop的.PSD
Illustrator's· AI
InDesign· INDD
但是，我们的大多数产品还可以导入和导出不同的辅助文件类型。 （例如，Photoshop可以导出120多种不同的文件类型，每种文件都有不同的图标。）
为了满足不同操作系统的需求，我们的文件类型图标需要手动对齐10个不同大小的图标像素，然后栅格化和包裹递送。图标图像将转换为两种不同类型的文件：· ICNS（Mac）和· ICO（Windows）。
当我们需要考虑每个文件类型图标的大小和格式时，我们需要查看7000多个资源（js，css，模板，图像，flash等），以便在每个发布周期中进行修改和管理。 。
看看过去四年中创意云盘产品线的增长率，很明显，不应低估在现有工作流程中创建和维护这些文件类型图标所需的工作量。
第一步：审查和研究
在我们开始重新设计此图标系统之前，我们必须首先调查我们产品中当前使用的图标。我们要求每个产品团队帮助我们对他们负责的产品中的所有文件类型图标进行摘要审核。
此时你会发现到处都存在矛盾，这可能是由两个因素引起的：
不同的团队有自己的产品系统，因此设计风格没有统一的规范。
随着新产品及其文件类型的上线，各个图标的设计是独立的，并立即设计。
根据我们从审计中收集的信息，我们对现有的文件类型架构进行了鸟瞰。
首先，我们的产品类型组织文件类型图标并交叉链接它们以查看在多个应用程序之间共享哪些辅助文件类型，因此我们可以消除重复的图标。通过这样做，我们可以将辅助文件类型图标的数量减少到之前的65％。
按产品类型划分的旧文件类型图标结构图（部分）
然后我们按功能对文件类型进行分类，例如“图像”，“视频”，“代码”，“3D”等。一般来说，每个文件类型图标都有一个符号（典型图像）来表示其主要功能。 （例如，· HTML文件类型将用于指示其主要功能与代码或编码相关。）
按产品功能分类的旧文件类型图标结构图（部分）我们注意到某些文件类型使用相同符号的多个版本，而其他文件类型使用更通用的图标而不是自定义图标。符号。因此，我们按产品类别为每种文件类型分配相同的符号，并在此基础上创建文件类型的伞形图组。通过这种方式，我们可以将产品原始符号的数量减少一半以上。
旧辅助文件类型的符号图标（部分）
第2步：起草和设计
一旦我们全面了解旧图标系统，我们就可以开始为新图标系统制定基本原则：
只有主文件类型需要使用与产品徽标关联的颜色。给栗子：· PSD文件应为蓝色，· AI文件应为橙色。
为支持多个应用程序的辅助文件类型创建通用选项板。例如，Photoshop和Illustrator应使用相同的· PNG文件类型图标而不是自己的规格（Photoshop的· PNG是蓝色，Illustrator的· PNG是橙色）。
一组旧文件类型图标（反向）
我们开始考虑这个新框架的草图。
一些早期的草图
重新设计这些图标的主要目的之一是简化太多不必要元素的删除而不降低其自身含义。我们删除了上一个标记，并将文件类型的字母放在图标的底部。我们还删除了图标右上角的页面角落，以简化设计并创建更现代的视觉语言。
Adobe文件类型图标的演变
另一个非常重要的目标是开发一组Adobe UI设计规范。为了实现这个目标，我们首先将文件类型图标放在一边，但首先创建了一个符号图标数据库。将来，图标设计将使用数据库中固有的图像图标，或在数据库中创建图像样式。一致的新图标。
Adobe System Icon数据库
最后，我们在文件类型图标上添加了鲜艳的颜色轮廓，以匹配我们产品LOGO的现有品牌特征。这种变化不仅使视觉更加集中，而且在黑暗界面中更好地显示新图标，并且我们的旧图标在黑暗页面中几乎不堪重负。
黑暗页面的UI颜色对比研究
第3步：迭代并完成
在确定设计方向后，我们在整个产品环境中测试了新的文件类型图标。在初始审核阶段，我们调查了哪些不同的操作系统以及我们自己产品的哪个区域出现了每个文件类型图标。我们还研究了在每个使用环境中为每个图标使用不同大小和分辨率的适用性。
在Mac和Windows屏幕上，我们需要列出网格视图的图标列表（最小16px，最大512px），具体取决于大小。还存在诸如“明亮和黑暗”之类的UI问题，例如Mac桌面上的“最近项目”或“Spotlight搜索”。
然后，我们查看了产品系统中产品文件图标的显示位置，例如材料面板，媒体浏览器对话框以及首次启动程序时显示的欢迎屏幕。
你可以想象，这个过程很快就把我们带到了文件类型图标出现的角落，我们被忽略了，忘记了。这是一个非常有价值的过程，我们必须更全面地思考，并一遍又一遍地检查差距。
出现在不同环境中的文件类型图标（部分）
最后，您需要在Web和移动设备上提供的服务中查看文件类型图标的UI实现，例如Adobe Acrobat和Creative Cloud Libraries。由于这些服务也由不同的设计团队管理，我们必须协调许多人并推进我们修改文件类型设计系统的计划。
我们为最终结果感到自豪，因为新设计语言更清晰，更一致，代表了Adobe视觉品牌系统向新阶段的演变。
Adobe的新文件类型图标系统
第4步：设计新的工作流程
我们创建了一个新的工作流程，使用该脚本只需按一下按钮即可自动输出· PNG文件。这种新的工作模式为我们节省了数千小时的痛苦手动工作时间。
我们还需要一种更方便的方法将这些光栅化的· PNG文件转换为.ICNS（Mac）和.ICO（Windows）文件。
在过去，我们使用从IconFactory下载的IconBuilder插件与我们合作。但是，在新的工作模式中，我们希望有一种更灵活的方式来解决我们的需求：你可以拖放· PNG文件并自动将输出转换为.ICO和.ICNS格式的正确大小。
在许多方尝试了很多第三方工具之后，我们决定打扰我们的工程师给我们一个内部工具来定制我们的解决方案。他们制作了一个非常神奇的工具，我们喜欢称它为“Captain Icon”，我们用它来打包我们所有的新图标。 （Icon船长目前正在进行内部测试，我们的工程师希望在不久的将来在GitHub上为我们的开发者社区分享它！）
Adobe的内部.ICO和.ICNS编译器
第5步：实施
我们现在处于这个阶段，并将持续很长一段时间。每当我们发布创新云的新版本时，我们都必须经历一个在各个团队产品经理和工程师之间运行的流程，以确保我们的设计以各种方式实施。
“在线实施”通常是一个繁琐的过程。我们需要向每个团队发送数百封电子邮件进行沟通和沟通。安装多个测试版本以检测资源，记录日志和故障以消除不可避免的错误;以及管理多个版本的截止日期。
我们的产品也基于不同的代码，这意味着不同的团队即使在在线实施过程中使用相同的资源也会使用不同的方法，这会导致不同的问题。 。质量保证和捍卫品牌规格可能是我们团队最不愉快的任务之一，但它是维护不断变化的设计系统的一个非常重要的部分。
在操作系统中显示新的Adobe图标
小的变化可以产生巨大的差异
在我们的团队中，我们经常使用盆景树来模拟我们的工作。
品牌设计系统由数百种产品组成，这些产品依赖于数百万个非常小的可变增量。我们的工作是在这里或那里切断树枝，引导盆景树朝我们想要的方向生长。
虽然我们很容易迷失在细节中，但我们在此过程中学到的一切都将更好地面对下一次迭代，即下一次迭代。
译者：蓝湖微信公众号：蓝湖产品设计合作
原作者：Anny Chen
原始链接：重新设计Adobe的文件类型图标系统语言
本文由@蓝湖出版。未经许可，禁止复制。 ，
该地图来自unsplash，基于CC0协议
