Adobe文件類型圖標系統語言重新設計之路

作者：Adobe高級品牌設計師Anny Chen

在Adobe品牌設計的團隊，主要為所有桌面端、移動端和Web端產品建立品牌形象。從桌面倆個字母的LOGO標識，到啟動頁面和產品裡面的icon圖標，品牌元素隨處可見。

文件類型圖標是一個經常被忽視，但具有顯而易見功能的圖標。文件類型圖標是為應用程序創建的特定類型的文件名稱提供的標識。例如Word文件的.doc。文件類型圖標是分配給文件類型的圖標，以及保存或打開實際文件時在屏幕上顯示的內容。

今年秋季發布的新版Creative Cloud，用戶將看到Adobe所有的文件類型圖標都會煥然一新！在本文中，Anny Chen將深入分析Adobe最新重新設計的文件類型圖標系統語言的思考和過程，並分享我們在面對龐大的系列產品中發展品牌系統語言面臨的挑戰和見解。

確定問題

許多用戶可能沒有意識到Adobe再三個雲中超過100中產品和服務：Creative Cloud，Document Cloud和Experience Cloud。

這意味著設計系統中一個小的改變可以創造出數百個不同的變化。

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

• .psd是Photoshop的文件
• .ai是Illustrator的文件
• .indd是InDesign的文件

但是我們大多數產品也可以導入和導出各種輔助文件類型（例如，僅在Photoshop中就有超過120個不同類型的文件類型圖標映射到其註冊表中）

為了針對不同的操作系統進行優化，我們的文件類型圖標還需要以10中不同的尺寸進行手動像素捕捉，然後作為一組柵格化的.PNG進行傳輸，並打包成.ICNS（Mac）和.ICO（Windows）文件。

當我們考慮每個文件類圖標的大小和格式數量時，我們將查看超過7000個資產，以便在每個發布周期進行修改和管理。

以過去四年來Creative Cloud產品線的增長速度來看，很明顯，在現有的工作流中創建和維護這些文件類型圖標所需要的工作量已經達到了無以復加的地步。

第1步：審計和調查

在我們開始重新設計系統之前，我們必須調查清楚我們目前產品中都使用了什麼，我們聯繫了每個產品團隊，幫助我們對所有文件類型圖標進行了統計。

統計結果顯示，到處都是不一致的現象，並且是由於下面倆個原因導致的

• 不同的團隊擁有每個產品系列，不再與原有的設計保持一致；
• 隨著新產品和文件類型的關聯，個別圖標被創建為一次性設計；

通過統計手機到的信息，我們對現有文件類型體系結構進行了總覽。

首先，我們按照產品系列的維度組織文件類型圖標，並交叉引用他們以查看哪些輔助文件類型在多個應用程序之間被共同使用，以便我們可以消除重複的圖標。通過這樣做，我們能夠將輔助文件類型圖標的數量減少到了之前的65％。

接下來，我們又從功能屬性的維度對文件進行了分類，例如「圖像」，「音頻」，「代碼」和「3D」。通常，典型的文件類型圖標包含著與它主要功能有關的隱喻（例如，一個HTML文件類型將使用方括弧來表示它的功能與代碼或者編程有關）。

我們發現一些文件類型將相同的隱喻設計應用在了不同的版本中，而另外一些文件類型卻有自定義的隱喻，可以用一個更通用的圖標替換。我們開始創建各種類型文件分類，為了使每個產品系列能用一個統一的隱喻。這樣一來，我們就可以減少在庫中文件類型的數量，並且至少減少一半。

第2步：創建草圖並設計

一旦我們對舊有的文件類型系統有了全面的認識後，我們就開始為新系統規範的確立基本的組織原則。

1. 只有主要文件類型的圖標才能和產品標誌顏色相關聯。例如，.PSD將是藍色,.AI將使用橙色為主色；
2. 為支持多個應用程序的輔助文件類型創建一個中性色調的樣式，例如，Photoshop和Illustrator里都會使用到.PNG文件類型的圖標，卻不是通過品牌顏色關聯具有各自獨特版本的圖標。
3. 創建文件類型隱喻的主庫，以此來保持圖標的一致性，並避免為特殊的邊緣情況自定義設計。

就這樣，我們開始考慮這個新框架的設計

重新設計背後的主要原因之一是簡化和刪除文件類型圖標上儘可能多的元素，而不失去它的意義。我們放棄標籤，並將文件類型MIME移動到圖標的底部。我們用平坦的文件設計風格代替捲曲的設計風格，並創建更現代的視覺語言。

另一個重要的驅動因素是與Specturm-Adobe的新的UI設計語言匹配。該設計語言正在我們所有的產品中推行。為了實現這一目標，我們對文件類型的圖標開始構建一個庫，使用Spectrum資料庫中的現有隱喻或創建與其插圖樣式對齊的新元素。

最後，我們再文件類型圖標中加入了鮮艷的顏色輪廓，以便與我們產品表示的現有品牌結合。這種變化不僅使得視覺系統更具凝聚力，而且新的圖標在深色界面中會有更出色的表現，而舊的圖標則會隱藏或消失在背景中。

第3步：迭代和最終確定

在確定了一個設計方向後，我們在流程中測試了新的文件類型圖標。在最初的審核過程中，我們調查了文件類型圖標出現在不同的操作系統和我們自己的產品中的所有區域。我們同時還研究了每個圖標在不同大小和解析度下出現的效果。

在Mac和Windows桌面的屏幕上，我們不得不考慮以不同比例（從16px最小的尺寸一直到最大512px）在列表與網格視圖中顯示的圖標。還有高亮與灰色在UI方面顯示的問題，如Mac桌面上「最近的項目」或「Soptlight搜索」。然後，我們查看了我們的文件類型圖標在我們自己的產品中出現的位置，例如，在首次啟動應用程序的時候，在「資源面板」，「媒體瀏覽器」和對話框「歡迎屏幕」中。

正如人們所想像的那樣，這個過程很快把我們帶到了我們系統中使用圖標的任何地方，不過這是一個有價值的練習，我們必須完成更多的任務。

最後一步是查看我們的Web和移動服務（例如Adobe Acrobat和Creative Cloud Libraries）的UI應用文件類型圖標。由於這些服務也是由不同的設計團隊管理的，所以我們不得不與多人協調我們的文件類型設計系統的修改計劃。

我們對最終的結果感到自豪，因為新的設計語言更加清晰，更加一致，代表了Adobe視覺品牌系統的下一個發展。

第4步：設計一個新的工作流程

我們創建了一個新的生產工作流程，利用Illustrator中的腳本功能，通過按一個按鈕來編譯和導出.PNG文件。這個新模板為我們節省了數十個小時緩慢而痛苦的工作時間。

我們還需要一個更好的方法來將這些柵格化的.PNG編譯成.ICNS(Mac)和.ICO(Windows)文件。過去，我們使用IconFactory的IconBuilder插件和我們的Fireworks模板。然而，隨著新的工作流程，我們需要一種更為靈活的解決方案，來滿足我們的需求：通過拖放任意一組.png文件，應用程序自動輸出正確大小的.ICO和.ICNS文件。

在搜索第三方編譯器之後，我們決定與我們最好的工程師創建一個內部的應用程序，根據我們的需求進行定製。我們創建了一個令人驚嘆的工具，稱之為——Captain Icon，它是我們用來大寶所有文件類型圖標的編譯器。（雖然Captain Icon仍出於內部測試階段，但我們的工程師希望在不就的將來可以分享到Github上給更多的工程師使用。）

第5步：實施

實施過程中我們會和多個團隊的產品經理和工程師溝通交流，確保設計貫徹始終。我們正處於這個階段，並將長期處於這樣的工作狀態中。

實施通常是一個單調乏味的過程，用數百封郵件和多個團隊互相交流，反覆安裝測試版本來檢測，記錄和解決不可避免的錯誤，以及管理多個產品的發布截止日期。

我們的產品建立在不同的代碼基礎之上，這意味著每個平台都有獨特的問題，質量保證和執行品牌標準是我們團隊重要但沒有樂趣的任務之一，但它是不斷維護和發展設計系統的重要組成部分。

小的變化可以創造巨大的差異

在我們的團隊中，經常用盆景樹來形容我們所做的工作。

發展一個保護數百種產品的品牌設計系統需要依靠上百萬個小小的，漸進式的變化，我們不斷的修剪樹枝，引導這棵樹朝著我們預期的方向生長。

雖然我們很容易在細節中迷失，但是我們在這個過程中學到的一些都讓我進入下一個迭代，然後再下一個迭代。

本文是由Adobe高級品牌設計師Anny Chen分享的一篇文章，闡述了Adobe重新設計文件類型圖標系統的思想和流程。