本文作深入剖析了最新的Adobe文件類型圖標系統(tǒng)重新設計的思想和過程，并分享其在一個龐大的產品系列中開發(fā)一個品牌系統(tǒng)所面臨的挑戰(zhàn)時總結出來的經驗。

作為Adobe的品牌設計團隊，我們負責為我們所有的桌面、移動和網絡產品做品牌設計。品牌元素囊括很多東西，從你在Dock欄中看到的雙字母Logo，到產品的啟動頁面和用戶使用產品中的任意功能圖標都屬于品牌設計范疇。

其中有一項是經常被忽略卻帶有十分明顯特征的元素是文件類型圖標。文件類型是應用程序可以創(chuàng)建的特定文件類型的名稱，比如 Word文件的文件類型是“.DOC”。文件類型圖標用于區(qū)別文件的類型，你保存或打開實際文件時屏幕上顯示的那個圖標就是文件類型圖標。

隨著今年秋天最新發(fā)布的創(chuàng)意云，用戶將看到我們所有的文件類型圖標都有了全新的外觀。在這篇文章中，我將深入剖析我們最新的Adobe文件類型圖標系統(tǒng)重新設計的思想和過程，并分享我們在一個龐大的產品系列中開發(fā)一個品牌系統(tǒng)所面臨的挑戰(zhàn)時總結出來的經驗。

一、認識這項工作的重要性能

許多客戶可能沒有意識到Adobe在三個云盤上有超過100種產品和服務：創(chuàng)意云、文檔管理云盤和營銷和分析云盤。

這意味著，設計系統(tǒng)中的一個小變化會連帶著整個產品系統(tǒng)產生數(shù)百項的更改。

當涉及到文件類型圖標時，人們通常只考慮應用程序的主要文件類型，比如：

• Photoshop的 .PSD
• Illustrator的 ·AI
• InDesign的 ·INDD

然而，我們的大部分產品也可以導入和導出不同的輔助文件類型。（例如，單單Photoshop就能導出超過120個不同的文件類型，每個類型有不同的圖標。）

為了滿足不同操作系統(tǒng)的需求，我們的文件類型圖標需要手動將10 種不同尺寸的圖標像素對齊，然后柵格化，打包交付。圖標圖片會分別被轉化成·ICNS（Mac）和·ICO（Windows）兩種不同類型的文件。

當我們需要考慮確定每個文件類型圖標的大小和格式的數(shù)量時，我們需要查看超過7000個資源（js、css、模板、圖片、flash 等）文件，以便在每個發(fā)布周期中進行修改和管理。

以創(chuàng)意云盤的產品線在過去四年中的增長速度來看，很明顯，在現(xiàn)有工作流中創(chuàng)建和維護這些文件類型圖標所需的工作量不容小覷。

第一步：審查和調研

在我們開始重新設計這套圖標系統(tǒng)之前，我們必須先調查目前在我們產品中使用的那些圖標。我們請每一個產品的團隊來幫助我們對他們所負責的產品中所有的文件類型圖標進行匯總審核。

這時候你會發(fā)現(xiàn)，到處都有矛盾，這很可能是由兩方面因素造成的：

• 不同的團隊都擁有自己的產品體系，因此在設計風格上也沒有統(tǒng)一的規(guī)范。
• 隨著新產品和其文件類型上線，單個的圖標的設計是獨立的，一次性被設計出來。

從我們的審計中收集到的信息，我們針對現(xiàn)有的文件類型體系結構做了一個鳥瞰圖。

首先，我們產品類型組織歸類文件類型圖標，并交叉鏈接它們，看看在多個應用程序之間共享哪些輔助文件類型，這樣我們就可以消除重復的圖標。通過這樣做，我們可以將次要文件類型圖標的數(shù)量減少到之前的65%。

按產品類型分類的舊-文件類型圖標結構圖（部分）

然后我們將文件類型按功能分類，比如“圖像”“視頻”“代碼”“3D”等。通常來講每個文件類型圖標都會有一個象征物（典型的形象）來表現(xiàn)它的主要功能。（比如， ·HTML文件類型會使用 </> 來表示它的主要功能是與代碼或者編碼相關的。）

按產品功能分類的舊-文件類型圖標結構圖（部分）我們注意到一些文件類型使用了同一個象征物的幾個版本，而另一些則使用了一個更通用的圖標來替代本該自定義的象征物。于是，我們按產品類別給每個文件類型分配同一個象征物，并在此基礎上創(chuàng)建了一套文件類型的傘狀分組圖。這樣一來，我們就能將我們產品原來的象征物數(shù)量減少一半以上。

舊-次級文件類型的象征圖標（部分）

第二步：草擬和設計

一旦我們對舊的圖標系統(tǒng)有了全面的了解，我們便可以開始為新的圖標體系制定基本的原則：

• 只有主文件類型需要使用與產品Logo關聯(lián)顏色。舉個栗子： ·PSD文件應該是藍色的，·AI文件應該是橙色的。
• 給為多個應用程序提供支持的輔助文件類型創(chuàng)建一個通用的調色板。比方說，Photoshop和Illustrator應該使用同樣的·PNG文件類型圖標，而不是擁有各自的規(guī)格（Photoshop的·PNG是藍色的，Illustrator的·PNG是橙色的）。

一組舊文件類型圖標（反例）

我們開始考慮這個新框架的草圖。

早期的一些草圖

重新設計這些圖標的主要目的之一是，要在不削減它們本身含義的前提下，盡量簡化去除過多的不必要的元素。我們去掉了之前的tag，然后把文件類型的字母放在了圖標的底部。我們還刪除了圖標右上角的頁面折角來簡化設計，創(chuàng)造出更現(xiàn)代的視覺語言。

Adobe文件類型圖標的演變

另一個非常重要的目的是制定一套Adobe的UI設計規(guī)范。為了達成這個目的，我們先把文件類型圖標放在一邊，而是先創(chuàng)建了一個象征物圖標數(shù)據庫，今后的圖標設計要么就使用這個數(shù)據庫中固有的形象圖標，要么就創(chuàng)建出與數(shù)據庫里形象風格一致的新圖標。

Adobe體系圖標數(shù)據庫

最后，我們在文件類型圖標中加入了明亮的色彩輪廓，以配合我們產品LOGO的現(xiàn)有品牌特色。這種變化不僅使視覺更聚焦，并且新的圖標能夠更好地在黑暗的界面中展示，而我們的舊圖標在黑暗的頁面里幾乎會被淹沒。

在黑暗頁面上的UI顏色對比研究

第三步：迭代和完成

在確定了設計方向之后，我們在整體的產品環(huán)境中中測試了新的文件類型圖標。在初步的審計階段，我們調查了每個文件類型圖標會出現(xiàn)在哪些不同的操作系統(tǒng)和我們自己產品的哪些領域中。我們還查看了在每個使用環(huán)境中每個圖標使用不同尺寸和分辨率的適用性。

在Mac和Windows電腦屏幕上，我們需要根據不同的尺寸列出一個網格視圖的圖標列表（最小16px，最大512px）。還有“亮和暗”的UI問題，比如Mac桌面上的“最近的項目”或“Spotlight搜索”。

然后我們查看了我們產品的文件圖標在產品體系中會出現(xiàn)的地方，比如：素材面板，媒體瀏覽器對話框，還有你第一次啟動程序時出現(xiàn)的歡迎界面。

可以想象，這個過程很快就把我們帶到了那些文件類型圖標會出現(xiàn)的卻被我們忽略和遺忘的角落。這是一個很有價值的過程，我們必須更加全面地去思考，一遍又一遍地去查漏補缺。

出現(xiàn)在不同環(huán)境中的文件類型圖標（部分）

最后是要查看文件類型圖標在Web端和移動端所提供的服務中的UI實現(xiàn)，比如：Adobe Acrobat和Creative Cloud Libraries中。由于這些服務也由不同的設計團隊管理，我們不得不去協(xié)調很多人，推進我們的計劃來修改文件類型設計系統(tǒng)。

我們對最終的結果感到自豪，因為新的設計語言更清晰、更一致，代表了Adobe視覺品牌系統(tǒng)進化到一個新的階段。

Adobe全新的文件類型的圖標系統(tǒng)

第四步：設計新的工作流

我們創(chuàng)建了一個新的工作流程，利用腳本，只需按下一個按鈕，就可以自動輸出 ·PNG文件。這個新的工作模式為我們節(jié)省了幾十個小時痛苦緩慢的手工工作時間。

我們還需要一個更便捷的方法將這些柵格化的 ·PNG文件轉化成成 .ICNS (Mac) 和 .ICO (Windows)文件。

在過去，我們使用從IconFactory下載的IconBuilder插件配合我們的工作。但是，在新的工作模式中，我們希望有更靈活的方式來解決我們的需求：可以任意拖拽 ·PNG文件，并能自動轉換輸出為正確尺寸的.ICO 和 .ICNS格式。

在多方嘗試了很多第三方工具之后，我們決定還是勞煩我們的工程師給我們做一個內部使用的工具，專項定制解決我們的需求。他們做了一個非常神奇的工具，我們喜歡叫它“Captain Icon”，我們使用它打包了所有我們的新版圖標。（Captain Icon目前還在內部測試階段，我們的工程師希望在近期將它分享在GitHub上，供我們的開發(fā)者社區(qū)使用?。?/p>

Adobe’s內部的 .ICO and .ICNS 編譯器

第五步：實施

我們現(xiàn)在正處于這個階段，并將持續(xù)很長的時間。每次我們創(chuàng)意云盤有了新發(fā)布，我們就要經歷一個奔走于各個團隊產品經理和工程師之間的過程，以確保我們的設計在各個方面都能得以實現(xiàn)。

“上線實施”通常是一個繁瑣的過程，我們需要來來回回給各個團隊發(fā)送數(shù)百封郵件進行交流和溝通；安裝多個測試版本，來檢測資源、日志記錄和故障，以排除不可避免的錯誤；以及管理多個發(fā)布的截止時間。

我們的產品還建立在不同的代碼基礎上，這就意味著不同的團隊在上線實施的過程中，哪怕是使用同樣的資源，也會使用不同的方式，導致了他們遇到的問題也是不同的。質量保證和捍衛(wèi)品牌規(guī)范可能是我們團隊最不愉快的任務之一，但它是維護一個不斷變化的設計系統(tǒng)非常重要地部分。

在操作系統(tǒng)中展現(xiàn)得Adobe新圖標

小的改變會帶來巨大的不同

在我們的團隊，我們經常使用盆景樹來類比我們所做的工作。

一個品牌設計系統(tǒng)包含數(shù)百個產品，這些產品依賴著數(shù)以百萬的非常細小的的，可變的增量一路發(fā)展著。?我們的工作就是在這個過程中，剪掉這里或者那里的枝丫，引導這棵盆景樹按照我們所期望的方向生長。

雖然我們很容易迷失在細節(jié)中，但我們在這個過程中所學到的每一件事都會更好地去面對下一個迭代，下下個迭代。

譯者：藍湖? 微信公眾號：藍湖產品設計協(xié)作

原文作者：Anny Chen

原文鏈接：Redesigning Adobe’s File Type Icon System Language

本文由 @藍湖 翻譯發(fā)布于人人都是產品經理。未經許可，禁止轉載。、

題圖來自unsplash，基于CC0協(xié)議