Adobe 的品牌推廣團隊負責公司的桌面、移動和網(wǎng)絡產(chǎn)品的品牌推廣。品牌元素的形式有很多種，可以是兩個字母的產(chǎn)品logo、應用啟動界面、產(chǎn)品中的圖標等等。

一個非常常見但經(jīng)常被忽視的品牌元素是文件類型圖標。文件類型是可以使用特定應用程序創(chuàng)建的特定格式的文件，例如使用 Word 制作的 .DOC 文件。文件類型圖標與文件類型相關，是您保存或打開文件時出現(xiàn)在屏幕上的圖標。

在今年秋季發(fā)布的最新版 Cloud 中，用戶會發(fā)現(xiàn)我們所有的文件類型圖標都已刷新！在本文中，我將詳細介紹這次重新設計文件類型圖標系統(tǒng)背后的思考過程，并與大家分享升級大型產(chǎn)品線品牌系統(tǒng)的挑戰(zhàn)，以及隨之而來的挑戰(zhàn)的一些見解。

閱讀資料：

發(fā)現(xiàn)問題

許多消費者不知道 Adob??e 的三個平臺：Cloud、Cloud 和擁有 100 多種產(chǎn)品和服務的 Cloud。

這意味著設計品牌識別系統(tǒng)時的一個小疏忽可能會給整個品牌帶來數(shù)百個問題。

當我們談論文件類型圖標時，人們傾向于只考慮最重要的圖標，例如：

但是，我們的大多數(shù)產(chǎn)品都可以導入和導出大量輔助文件類型，例如 120 多種不同的文件類型。

為了針對不同的操作系統(tǒng)進行優(yōu)化，我們需要制作十種不同大小的.PGN文件類型圖標，并打包成.ICNS格式（mac）和.ICO格式（）文件。

當我們計算每種文件類型的圖標大小和格式時，我們發(fā)現(xiàn)在每個新版本發(fā)布周期中都會修改和管理超過 7,000 個資產(chǎn)。

由于過去四年 Adob??e CC 產(chǎn)品線的快速擴展，以當前的工作流程創(chuàng)建和維護這些文件類型圖標是不可能的，工作量太大。

第 1 步：清點和調(diào)查

在開始重新設計整個系統(tǒng)之前，我們必須找出當前產(chǎn)品中使用的文件類型圖標。我們采訪了各個產(chǎn)品團隊，以評估所有現(xiàn)有的文件類型圖標。

錯位隨處可見ADOBE軟件分類標簽，主要有以下兩個原因：

不同的團隊領導各自的產(chǎn)品線，并沒有一個規(guī)范作為執(zhí)行指南。新文件類型與新產(chǎn)品一起上線，并且許多被視為一次性設計。

根據(jù)這份清單中的信息，我們對現(xiàn)有文件類型的結構進行了鳥瞰。

首先，我們按產(chǎn)品線和跨應用程序重復出現(xiàn)的連接圖標組織文件類型圖標。這會查找并刪除重復的圖標。到這項工作結束時，輔助文件類型圖標的數(shù)量已減少到 65%。

按產(chǎn)品線組織的遺留文件類型結構的片段。

接下來，我們按照功能來劃分文件類型，比如“圖像”、“音頻”、“代碼”或“3D”。通常，文件類型圖標將是暗示主要功能的隱喻（例如，.HTML 文件將用于暗示其功能與代碼相關）。

按功能組織的遺留文件類型結構的片段。

我們注意到一些文件類型使用相同隱喻的不同版本ADOBE軟件分類標簽，而一些文件類型使用自定義隱喻，可以用更統(tǒng)一的隱喻替換。我們創(chuàng)建了傘形文件類型來為整個產(chǎn)品線安排一個統(tǒng)一的隱喻。這樣做之后，我們將隱喻的數(shù)量減少了一半以上。

舊的輔助文件類型隱喻圖標片段。第 2 步，起草和設計

一旦我們對舊的文件類型圖標系統(tǒng)有了廣泛的了解，讓我們開始為新系統(tǒng)構建基本規(guī)則：

只有主文件類型可以與產(chǎn)品標志的顏色相關聯(lián)。例如，.PSD 文件為藍色，.AI 文件為橙色。為許多應用程序?qū)⑹褂玫妮o助文件類型創(chuàng)建一個中性調(diào)色板。例如，為相同的 .PNG 文件類型創(chuàng)建圖標，而不是每個都具有與品牌顏色相關聯(lián)的單獨圖標。創(chuàng)建文件類型隱喻的主存儲庫，以確保圖標之間的關聯(lián)性并避免為邊緣情況定制圖標。

舊文件類型圖標模塊反匯編。

我們遵循上述規(guī)則并開始起草新圖標。

該項目早期草圖的快照。

此重構的主要目的之一是在不丟失重要信息的情況下簡化圖標上的元素。我們刪除了標簽并將文件類型放在圖標的底部。我們還刪除了頁面的角落以使設計扁平化并使視覺語言現(xiàn)代化。

Adobe 文件類型圖標演變圖。

另一個重要目的是與 Adob??e 的新 UI 設計語言保持一致——該語言正在我們的產(chǎn)品中逐步推出。經(jīng)過這樣的努力，我們將文件類型圖標的四個角進行了圓潤，并開始構建素材庫，利用規(guī)范中已有的隱喻，設計出與其圖標風格一致的新素材。

Adobe 圖標庫快照。

最后，我們?yōu)閳D標的筆觸使用了明亮的顏色，以匹配當前的產(chǎn)品標志。這一變化不僅使視覺系統(tǒng)更加緊湊，而且新圖標在黑暗的界面中看起來更加清晰。相比之下，舊圖標與背景融為一體，難以區(qū)分。

暗界面下的色彩對比研究。

第三步，迭代和定稿

現(xiàn)在我們已經(jīng)確定了設計方向，我們已經(jīng)開始在幾個場景中測試新的文件類型圖標。在我們最初的測試中，我們調(diào)查了文件類型圖標出現(xiàn)在我們自己的產(chǎn)品中跨不同操作系統(tǒng)的所有位置。我們還研究了圖標在不同尺寸和分辨率下的顯示方式。

在 mac 和 OS 桌面上，我們必須以不同的縮放因子（最小 16 像素，最大 512 像素）計算圖標。也有明暗界面的情況，比如電腦上的mac“項目”和“ ”，然后我們檢查了我們產(chǎn)品中文件類型圖標的外觀，比如素材板、媒體文件瀏覽框，以及首次啟動應用程序時的歡迎屏幕。

這一舉動立即使我們陷入了一個充滿文件類型圖標的深淵，這些圖標隱藏在人跡罕至的角落。但這樣做是有價值的。我們需要更充分地參與這項任務。

出現(xiàn)文件類型圖標的各種場景。

最后一步是檢查移動和 Web 服務（如 Adob??e 和 Cloud）的用戶界面中文件類型圖標的使用情況。由于這些服務由不同的設計團隊處理，如果我們計劃翻新整個文件類型設計系統(tǒng)，我們需要與許多人合作。

我們?yōu)樽罱K的輸出感到自豪，因為新的設計語言更簡潔、更緊湊，并且代表了 Adob??e 圖像識別系統(tǒng)的更新。

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

第四步，設計新流程

我們利用 AI 中的腳本功能創(chuàng)建了一個工作流程，一鍵生成和導出 .PNG 文件。這個工作流程為我們節(jié)省了大量時間。

我們還需要一種更好的方法將這些光柵 .PNG 圖像放入 .ICNS(mac) 和 .ICO()。我們之前使用的插件。但我們想要一個更靈活的解決方案來滿足我們的需求：拖入任何一組 .PNG 文件，并自動輸出正確大小的 .ICO 和 .ICNS 文件。

在四處尋找第三方編譯器后，我們決定最好針對此需求進行定制，并與開發(fā)人員一起制作一個內(nèi)部應用程序。他們開發(fā)了一個很棒的工具，我們稱之為 Icon，我們用它來生成和打包所有新的文件類型圖標。（目前仍處于測試階段，我們的工程師希望與 Adob??e 開發(fā)社區(qū)中的其他開發(fā)者分享?。?/p>

Adobe 的內(nèi)部 .ICO 和 .ICNS 編譯器。

第五步，落地

我們?nèi)蕴幱谶@個階段，而且可能會持續(xù)很長時間。每次我們發(fā)布新版本的 Cloud 時，我們都會與許多產(chǎn)品經(jīng)理和工程師團隊一起滿足要求，以確保我們設計的輸出質(zhì)量。

落地其實是一個迭代的過程，需要和各個團隊反復溝通，安裝很多版本來測試材料，發(fā)現(xiàn)并解決不可避免的Bug，管理很多產(chǎn)品的發(fā)布期限。

我們的產(chǎn)品建立在不同的代碼庫上，這意味著不同平臺上的同一件事可能會導致不同的問題。質(zhì)量保證和加強品牌設計規(guī)范可能是我們團隊中最無聊的任務之一，但維護和改進設計體系很重要。

Adobe 在操作系統(tǒng)中的新文件類型圖標。

右支點允許杠桿移動地球。

在我們的團隊中，建造盆栽植物經(jīng)常被用來比喻所做的工作。

升級包含數(shù)百條產(chǎn)品線的設計系統(tǒng)依賴于不斷的小變化。我們修剪周圍，讓樹隨著時間的推移以我們想要的方式生長。

雖然有時會迷失在細節(jié)中，但我們一路上學到的一切都會在下一次迭代中幫助我們。

其他文章感謝閱讀