「案例」從新設計 Adobe 的文件類型圖標

Adobe 的品牌設計團隊負責爲公司旗下桌面端、移動端和 web 端的產品進行品牌設計。品牌元素的形式不少，能夠是兩個字母的產品 logo，應用啓動界面，產品裏的圖標等等。

一個很常見卻常被忽視的品牌元素就是文件類型圖標。文件類型是指用某種特定應用能夠建立的特定格式的文件，好比用 Word 製做的 .DOC 文件。文件類型圖標與文件類型相關，就是你在存儲或打開文件時顯示在屏幕上的那個圖標。

在今秋發佈的最新版本 Creative Cloud 中，用戶將發現咱們全部的文件類型圖標面目一新！在這篇文章，我將詳細闡述此次對文件類型圖標系統從新設計背後的思考過程，而且和你分享在升級一個大型產品線的品牌形象系統時所遇到的挑戰，以及隨之而生的一些看法。

📕閱讀信息：

閱讀時間：約9分鐘
做者信息：Anny Chen
原文地址：Medium

---

發現問題

許多消費者並沒意識到 Adobe 的三個平臺：Creative Cloud，Document Cloud，和 Experience Cloud 擁有超過100個產品和服務。

這意味着設計品牌形象系統時的一個小疏忽可能給整個品牌帶來成百上千的問題。

當咱們談及文件類型圖標時，人們每每只會想到最主要的那些，好比：

• Photoshop 的 .PSD
• Illustrato 的 .AI
• InDesign 的 .INDD

可是，大多數咱們的產品能夠導入導出大量的輔助文件類型，好比 Photoshop 就涉及超過120種不一樣的文件類型。

爲了給不一樣的操做系統優化，咱們須要製做十種不一樣尺寸的 .PGN 文件類型圖標，並打包成 .ICNS 格式（Mac）和 .ICO 格式（Windows）文件。

當咱們計算製做每一個文件類型圖標的尺寸和格式時，發現要在每一個新版本發佈週期修改和管理超過7000份素材。

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

第一步：盤點和調查

在咱們開始從新設計整個系統以前，咱們必須查一下當前產品裏在用什麼文件類型圖標。咱們訪問了各個產品團隊，藉此盤點現存全部的文件類型圖標。

到處都能發現失調的地方，大都是下列兩個緣由致使：

1. 不一樣的團隊主導各自的產品線，並無規範做爲執行準則。
2. 新的文件類型隨着新產品不斷上線，不少被看成一次性設計。

根據此次盤點中獲得的信息，咱們作了一張關於現存文件類型結構的鳥瞰圖。

首先，咱們以產品線組織了文件類型圖標，並把不一樣應用之間重複出現的圖標鏈接起來。藉此發現並並刪去重複的圖標。結束這項工做時，輔助文件類型圖標的數量減小到65%。

以產品線組織的舊的文件類型結構片斷。

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

以功能組織的舊的文件類型結構片斷。

咱們注意到某些文件類型使用了不一樣版本的相同比喻，還有一些文件類型使用了自定義的比喻，其實能夠用更統一的比喻進行替換。咱們建立了傘式結構的文件類型，藉此爲整個產品線安排統一的比喻。作了這個後，咱們減小超過一半的比喻數量。

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

第二步，草稿和設計

一旦咱們對老的文件類型圖標系統有普遍的瞭解，就開始創建新系統的基礎規則：

1. 只有主要文件類型才能夠和產品 logo 的顏色有關聯。好比說 .PSD 文件是藍色的而 .AI 文件是橘色的。
2. 爲那些會被不少應用用到的輔助文件類型建立一箇中性色盤。好比說，爲 Photoshop 和 Illustrator 建立一樣的 .PNG 文件類型圖標，而不是各自有一個和品牌色相關的單獨的圖標。
3. 創造一個主要的知識庫來存放文件類型比喻，藉此確保圖標之間的關聯性，並避免爲邊緣案例定製圖標。

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

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

項目早期草圖的快照。

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

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 文件。這個工做流給咱們節省了不少時間。

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

在找了一圈三方編譯器之後，咱們決定最好仍是爲這個需求定製，和開發人員作一個內部 app。他們開發了一個超讚的工具，咱們稱之爲 Icon 隊長，咱們用它來生成和打包全部的新文件類型圖標。（還在內測，咱們的工程師但願在 GitHub 上分享給 Adobe 開發社區裏的其餘開發者使用！）

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

第五步，落地

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

落地實際上是一個反覆的過程，須要經歷和各類團隊反反覆覆的溝通，安裝不少版原本測試素材，找到和解決不可避免的 bug，還有管理不少的產品發佈截止日期。

咱們的產品構建於不一樣的代碼基礎，意味着一樣的東西放在不一樣的平臺會產生不一樣的問題。質量保障和增強品牌設計規範多是咱們團隊中最無聊的任務之一，但這對於保持和提高設計系統很重要。

操做系統中 Adobe 新文件類型圖標。

合適的支點可讓槓桿撬動地球。

咱們的團隊中經常使用修建盆栽來比喻作的工做。

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

雖然有時會在細節中迷失，但咱們在過程當中學習的全部東西將幫助咱們進行以後的次次迭代。