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

作為Adobe的品牌設(shè)計團(tuán)隊，我們負(fù)責(zé)為我們所有的桌面、移動和網(wǎng)絡(luò)產(chǎn)品做品牌設(shè)計。品牌元素囊括很多東西，從你在Dock欄中看到的雙字母Logo，到產(chǎn)品的啟動頁面和用戶使用產(chǎn)品中的任意功能圖標(biāo)都屬于品牌設(shè)計范疇。

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

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

一、認(rèn)識這項工作的重要性能

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

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

當(dāng)涉及到文件類型圖標(biāo)時，人們通常只考慮應(yīng)用程序的主要文件類型，比如：

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

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

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

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

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

第一步：審查和調(diào)研

在我們開始重新設(shè)計這套圖標(biāo)系統(tǒng)之前，我們必須先調(diào)查目前在我們產(chǎn)品中使用的那些圖標(biāo)。我們請每一個產(chǎn)品的團(tuán)隊來幫助我們對他們所負(fù)責(zé)的產(chǎn)品中所有的文件類型圖標(biāo)進(jìn)行匯總審核。

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

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

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

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

按產(chǎn)品類型分類的舊-文件類型圖標(biāo)結(jié)構(gòu)圖（部分）

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

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

舊-次級文件類型的象征圖標(biāo)（部分）

第二步：草擬和設(shè)計

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

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

一組舊文件類型圖標(biāo)（反例）

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

早期的一些草圖

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

Adobe文件類型圖標(biāo)的演變

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

Adobe體系圖標(biāo)數(shù)據(jù)庫

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

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

第三步：迭代和完成

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

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

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

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

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

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

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

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

第四步：設(shè)計新的工作流

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

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

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

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

Adobe’s內(nèi)部的 .ICO and .ICNS 編譯器

第五步：實施

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

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

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

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

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

在我們的團(tuán)隊，我們經(jīng)常使用盆景樹來類比我們所做的工作。

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

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

譯者：藍(lán)湖? 微信公眾號：藍(lán)湖產(chǎn)品設(shè)計協(xié)作

原文作者：Anny Chen

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

本文由 @藍(lán)湖 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。、

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