发布时间：2020-9-22 分类： 电商动态
数亿人设计的Adobe图标是如何设计的？当Adobe发布最新软件版本时，文件图标也进行了修订。 Adobe设计人员分享了图标修订背后的设计过程。让我们来看看！/P>
译者徐小马：Adobe的品牌设计团队负责品牌公司的桌面，移动和网络产品。品牌元素有很多种形式，可以是两个字母的产品Logo，应用程序启动界面，产品中的图标等等。
文件类型图标是一种非常常见但经常被忽视的品牌元素。文件类型是特定格式的文件，可以使用特定应用程序创建，例如Word中生成的.DOC文件。文件类型图标与文件类型相关，文件类型是存储或打开文件时屏幕上显示的图标。
在今年秋季发布的最新版Creative Cloud中，用户会发现我们所有的文件类型图标都已完全更新！在本文中，我将详细介绍重新设计文件类型图标系统背后的思考过程，并与您分享升级。大型产品线的品牌形象系统面临的挑战，以及随后的一些见解。
发现问题
许多消费者并不了解Adobe的三个平台：Creative Cloud，Document Cloud和Experience Cloud拥有100多种产品和服务。
这意味着在设计品牌形象系统时的小规模监督可能会导致整个品牌出现数百个问题。
当我们谈论文件类型图标时，人们往往只考虑最重要的图标，例如：
Photoshop的.PSD
Illustrato的.AI
InDesign的.INDD
但是，我们的大多数产品都可以导入和导出大量的辅助文件类型。例如，Photoshop涉及120多种不同的文件类型。
为了优化不同的操作系统，我们需要制作十种不同大小的.PGN文件类型图标，并将它们打包成.ICNS格式（Mac）和.ICO格式（Windows）文件。
当我们计算每个文件类型图标的大小和格式时，我们发现在每个新的发布周期中我们必须修改和管理7,000多个材料。
由于Adobe CC产品线在过去四年中迅速扩展，因此无法使用当前工作流创建和维护这些文件类型图标，并且工作负载过大。
I.库存和调查
在我们开始重新设计整个系统之前，我们必须检查当前产品中使用的文件类型图标。我们访问了每个产品团队，以评估所有现有的文件类型图标。
到处都可以找到这种疾病的地方主要是由以下两个原因引起的：
不同的团队领导他们各自的产品线，没有规范作为实施指南。
随着新产品的不断推出，新的文件类型被用作一次性设计。
根据本清单中获得的信息，我们对现有文件类型的结构进行了鸟瞰。
首先，我们在产品线上组织了文件类型图标，并在不同的应用程序之间重新出现了连接的图标。使用它来查找和删除重复的图标。在这项工作结束时，辅助文件类型图标的数量减少到65％。
△按产品系列组织的旧文件类型结构片段
接下来，我们按功能划分文件类型，例如“图像”，“音频”，“代码”或“3D”。通常，文件类型图标将是暗示主要功能的隐喻。例如，“。HTML”文件将用于暗示他的功能与代码相关。
△按功能组织的旧文件类型结构片段
我们注意到一些文件类型使用不同版本的相同隐喻，并且一些文件类型使用可以用更统一的比喻替换的自定义隐喻。我们创建了一种伞形结构的文件类型，以便为整个产品系列安排统一的隐喻。在这之后，我们将隐喻数量减少了一半以上。
△旧辅助文件类型隐喻图标片段。
草案和设计
一旦我们对旧文件类型图标系统有了广泛的了解，我们就开始建立新系统的基本规则：
只有主文件类型可以与产品徽标的颜色相关联。例如，.PSD文件为蓝色，.AI文件为橙色。
为许多应用程序将使用的辅助文件类型创建中性色轮。例如，为Photoshop和Illustrator创建相同的.PNG文件类型图标，而不是使用与品牌颜色关联的单独图标。
创建一个主要知识库来存储文件类型隐喻，从而确保图标之间的关联，并避免为边缘情况自定义图标。
△旧文件类型图标模块反汇编
我们遵循上述规则并开始起草新图标。
△项目早期草图的快照
这种重构的主要目的之一是简化图标上的元素而不会丢失重要信息。我们删除了标签并将文件类型放在图标的底部。我们还删除了页面的角落以平整设计并使视觉语言现代化。
△Adobe文件类型图标演变图
另一个重要目标是与Adobe的新UI设计语言“Spectrum”保持一致。
完成这项工作后，我们舍入文件类型图标的四个角并开始构建材质库，使用Spectrum规范中的现有隐喻来设计与其图标样式一致的新材质。
△Adobe Spectrum图标库快照
最后，我们使用鲜艳的颜色来显示图标的笔触，使其与当前的产品徽标保持一致。这种变化不仅使视觉系统发生了变化，而且在黑暗界面中新图标看起来更清晰。相反，旧图标被集成到背景中并且难以区分。
△黑暗界面的色彩对比研究
III。迭代和完成
现在我们已经设定了设计方向，我们将在某些情况下测试新的文件类型图标。在初始测试中，我们调查了不同操作系统中我们自己产品中的所有文件类型图标。我们还查看了不同大小和分辨率的图标外观。
在Mac和Windows操作系统的桌面上，我们必须在不同的缩放因子（最小16像素，最大512像素）下计算图标。还有明亮的黑暗界面，例如Mac计算机上的“最近项目”和“Spotlight搜索”，然后我们检查产品中文件类型图标的外观，例如素材板，媒体文件浏览框。 ，以及首次启动应用程序时的欢迎界面。
这一举动立即让我们陷入深渊，文件类型图标隐藏在各个角落。但这样做非常有价值。我们需要更多地参与这项任务。
△出现文件类型图标的各种场景
最后一步是检查移动和Web服务的用户界面中文件类型图标的用法。例如，Adobe Acrobat和Creative Cloud Libraries。由于这些服务由不同的设计团队处理，如果我们计划翻新整个文件类型设计系统，我们需要与很多人合作。
我们为最终输出感到自豪，因为新的设计语言更简单，更紧凑，并且代表了对Adobe图像识别系统的更新。
△Adobe的新文件类型图标系统
设计一个新流程
我们使用AI中的脚本功能创建了一个工作流程，只需单击一下即可生成和导出.PNG文件。这个工作流程为我们节省了大量时间。
教你如何创建一个完整的设计流程：《在设计流程中，通过这6种方式来运用信息架构》
我们还需要一种更好的方法将这些光栅.PNG图像放入.ICNS（Mac）和.ICO（Windows）。之前我们使用IconFactory的IconBuilder插件。但我们需要一种更灵活的解决方案来满足需求：拖动任何一组.PNG文件并自动输出正确大小的.ICO和.ICNS文件。
在寻找三向编译器之后，我们决定根据此要求对其进行自定义，并与开发人员一起制作内部应用程序。他们开发了一个很棒的工具，我们称之为Icon of Captain。
我们使用它来生成和打包所有新文件类型图标。
在测试版中，我们的工程师希望将来能够在GitHub上与Adobe开发社区的其他开发人员分享！
△Adobe的内部.ICO和.ICNS编译器
V.着陆
我们仍处于这个阶段，可能会持续很长时间。每当我们发布新版Creative Cloud时，我们都会满足许多团队产品经理和工程师的需求，以确保我们的设计输出质量。
附设计师的三项实用技巧：《让设计落地!如何提升设计方案的说服力?》
登陆实际上是一个迭代过程，需要经验和与各个团队的反复沟通，安装许多版本来测试材料，发现和解决不可避免的错误，以及管理大量的产品发布截止日期。
我们的产品基于不同的代码库，这意味着不同平台上的相同内容可能会产生不同的问题。质量保证和增强的品牌设计规范可能是我们团队中最无聊的任务之一，但维护和增强设计系统非常重要。
△操作系统中的Adobe新文件类型图标
正确的支点允许杠杆摇摆地球，我们的团队经常使用盆栽来完成工作。
推动具有数百个产品线的设计系统依赖于不断的微小变化。我们切开，让树在慢的时候成长为我们想要的东西。
虽然有时会丢失细节，但我们在此过程中学到的所有内容都将帮助我们进行下一次迭代。
