編者按：上億人都在使用的Adobe 圖標是怎么設計出來的？前不久Adobe 發布最新軟件版本時，文件圖標也進行了改版，Adobe 的設計師分享了圖標改版背后的設計過程，一起來看看！

譯者徐小馬 ：Adobe 的品牌設計團隊負責為公司旗下桌面端、移動端和 web 端的產品進行品牌設計。品牌元素的形式很多，可以是兩個字母的產品 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）文件。

當我們計算制作每個文件類型圖標的尺寸和格式時，發現要在每個新版本發布周期修改和管理超過7000份素材。

由于 Adobe CC 產品線在過去四年擴張得很快，以當前的工作流程去創建和維護這些文件類型圖標已經不太可能，工作量太大了。

一. 盤點和調查

在我們開始重新設計整個系統之前，我們必須查一下當前產品里在用什么文件類型圖標。我們訪問了各個產品團隊，借此盤點現存所有的文件類型圖標。

處處都能發現失調的地方，大都是下列兩個原因導致：

• 不同的團隊主導各自的產品線，并沒有規范作為執行準則。
• 新的文件類型隨著新產品不斷上線，很多被當作一次性設計。

根據這次盤點中得到的信息，我們做了一張關于現存文件類型結構的鳥瞰圖。

首先，我們以產品線組織了文件類型圖標，并把不同應用之間重復出現的圖標連接起來。借此發現并并刪去重復的圖標。結束這項工作時，輔助文件類型圖標的數量減少到65%。

△ 以產品線組織的舊的文件類型結構片段

接下來，我們以功能劃分文件類型，比如「圖像」、「音頻」、「代碼」或「3D」。通常來說，一個文件類型圖標會是一個暗示主要功能的比喻。比如，一個「 .HTML」 文件將會用</>來暗示他的功能和代碼有關。

△ 以功能組織的舊的文件類型結構片段

我們注意到某些文件類型使用了不同版本的相同比喻，還有一些文件類型使用了自定義的比喻，其實可以用更統一的比喻進行替換。我們創建了傘式結構的文件類型，借此為整個產品線安排統一的比喻。做完這個后，我們減少超過一半的比喻數量。

△ 舊的輔助文件類型比喻圖標片段。

二. 草稿和設計

一旦我們對老的文件類型圖標系統有廣泛的了解，就開始建立新系統的基礎規則：

• 只有主要文件類型才可以和產品 Logo 的顏色有關聯。比如說 .PSD 文件是藍色的而 .AI 文件是橘色的。
• 為那些會被很多應用用到的輔助文件類型創建一個中性色盤。比如說，為 Photoshop 和 Illustrator 創建同樣的 .PNG 文件類型圖標，而不是各自有一個和品牌色相關的單獨的圖標。
• 創造一個主要的知識庫來存放文件類型比喻，借此確保圖標之間的關聯性，并避免為邊緣案例定制圖標。

△ 舊的文件類型圖標模塊拆解

我們遵循上述規則，開始給新的圖標打草稿。

△ 項目早期草圖的快照

進行這次重構的主要目的之一是簡化圖標上的元素，并不丟失重要的信息。我們丟掉了標簽，并把文件類型放到了圖標的底部。我們也去掉了頁面的折角來讓設計變得扁平化，讓視覺語言更現代化。

△ Adobe 文件類型圖標進化圖

另一個重要目的是和 Adobe 的新 UI 設計語言 「Spectrum」 一致。

經過這次努力，我們把文件類型圖標的四角做圓，并開始建立一個素材庫，使用 Spectrum 規范中現有的比喻，設計新的與其圖標風格相一致的素材。

△ Adobe Spectrum 圖標庫快照

最后，我們給圖標的描邊使用了亮色，讓它跟現在的產品 Logo保持 一致。這種改變不僅讓視覺系統變更緊密，而且新圖標在深色界面下看著更清晰。相比之下，舊的圖標則會和背景融成一體，難以分辨。

△ 在深色界面下顏色對比度研究

三. 迭代和定稿

既然我們定下了設計方向，我們開始在一些場景下測試新文件類型圖標。在最初的測試中，我們調查了不同操作系統中、我們自己的產品中所有會出現文件類型圖標的地方。我們也查看了在不同尺寸和分辨率下圖標出現的情況。

在 Mac 和 Windows 操作系統的桌面上，我們必須統計不同縮放因子的下的圖標情況（最小16像素，最大512像素）。還有亮色、深色界面下的情況，比如說 Mac 電腦上的「Recent Items」和「Spotlight Search」，然后我們檢查了自己產品中文件類型圖標的出現情況，比如說素材板，媒體文件瀏覽框，和當你第一次啟動應用時的歡迎界面。

這一舉動馬上讓我們陷入了一個深淵，里面遍布藏在各個人跡罕至的角落里的文件類型圖標。但是這么做很有價值。我們需要更全面的投身這個任務。

△ 文件類型圖標出現的各種場景

最后一步是檢查移動端和 Web 端服務里用戶界面中文件類型圖標的使用情況。比如 Adobe Acrobat 和 Creative Cloud Libraries。由于這些服務由不同設計團隊負責，如果我們計劃翻新整個文件類型設計系統，就需要和很多人合作。

我們對最終的輸出很驕傲，因為新的設計語言更簡潔，更緊湊，并且代表了 Adobe 形象識別系統的更新。

△ Adobe 的新文件類型圖標系統

四. 設計一個新流程

我們利用 AI 里的腳本功能創建了一個工作流程，可以一鍵生成和導出 .PNG 文件。這個工作流程給我們節省了很多時間。

教你如何創建一個完整的設計流程：《在設計流程中，通過這6種方式來運用信息架構》

我們也需要一個更好的方法來把這些柵格 .PNG 圖片放到 .ICNS (Mac) 和 .ICO (Windows)中。我們以前使用 IconFactory 的 IconBuilder 插件。但是我們想要一個更靈活的解決方式滿足需求：拖入任何一組 .PNG 文件，自動輸出正確尺寸的 .ICO 和 .ICNS 文件。

在找了一圈三方編譯器以后，我們決定最好還是為這個需求定制，和開發人員做一個內部 App。他們開發了一個超贊的工具，我們稱之為 Icon 隊長。

我們用它來生成和打包所有的新文件類型圖標。

正在內測中，我們的工程師希望將來能在 GitHub 上分享給 Adobe 開發社區里的其他開發者使用！

△ Adobe 內部的 .ICO 和 .ICNS 編譯器

五. 落地

我們仍在這一階段，并可能持續很長時間。每次我們發布一個新版本的 Creative Cloud，我們都會和許多團隊的產品經理和工程師碰需求，以保證我們設計的輸出質量。

附設計師超實用的三個技巧：《讓設計落地！如何提升設計方案的說服力？》

落地其實是一個反復的過程，需要經歷和各種團隊反反復復的溝通，安裝很多版本來測試素材，找到和解決不可避免的 bug，還有管理很多的產品發布截止日期。

我們的產品構建于不同的代碼基礎，意味著同樣的東西放在不同的平臺會產生不同的問題。質量保障和加強品牌設計規范可能是我們團隊中最無聊的任務之一，但這對于保持和提升設計系統很重要。

△ 操作系統中 Adobe 新文件類型圖標

合適的支點可以讓杠桿撬動地球，而我們的團隊中常用修建盆栽來比喻做的工作。

提升一個包含數百產品線的設計系統依賴不斷的小改變。我們四處修剪，讓樹在慢慢時光中長成我們希望的樣子。

雖然有時會在細節中迷失，但我們在過程中學習的所有東西將幫助我們進行之后的次次迭代。

本文來自知乎專欄「非科班設計」，作者徐小馬。

「設計改版沒想法？看看高手怎么做」

• 《人氣APP 最右4.0 全新UI 升級背后的設計思路》
• 《高手的設計流程！滴滴車主端5.0全新升級背后的設計思考》
• 《用58同城的實戰案例，帶你認識完整的改版流程！》
• 《超過10億人使用的FACEBOOK改版了，新版的設計細節都在這兒！》
• 《天貓APP 首頁迎來史上最大改版，背后的設計過程是這樣的！》
• 《我用目標導向設計法，完成了愛奇藝PC站風云榜的改版設計》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com