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

譯者徐小馬 ：Adobe 的品牌設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)為公司旗下桌面端、移動(dòng)端和 web 端的產(chǎn)品進(jìn)行品牌設(shè)計(jì)。品牌元素的形式很多，可以是兩個(gè)字母的產(chǎn)品 Logo、應(yīng)用啟動(dòng)界面、產(chǎn)品里的圖標(biāo)等等。

文件類型圖標(biāo)卻是一個(gè)很常見但常被忽視的品牌元素。文件類型是指用某種特定應(yīng)用可以創(chuàng)建的特定格式的文件，比如用 Word 制作的 .DOC 文件。文件類型圖標(biāo)與文件類型相關(guān)，就是你在存儲(chǔ)或打開文件時(shí)顯示在屏幕上的那個(gè)圖標(biāo)。

在今秋發(fā)布的最新版本 Creative Cloud 中，用戶將發(fā)現(xiàn)我們所有的文件類型圖標(biāo)煥然一新！在這篇文章，我將詳細(xì)闡述這次對(duì)文件類型圖標(biāo)系統(tǒng)重新設(shè)計(jì)背后的思考過程，并且和你分享在升級(jí)一個(gè)大型產(chǎn)品線的品牌形象系統(tǒng)時(shí)所遇到的挑戰(zhàn)，以及隨之而生的一些見解。

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

許多消費(fèi)者并沒意識(shí)到 Adobe 的三個(gè)平臺(tái)：Creative Cloud、Document Cloud 和 Experience Cloud 擁有超過100個(gè)產(chǎn)品和服務(wù)。

這意味著設(shè)計(jì)品牌形象系統(tǒng)時(shí)的一個(gè)小疏忽可能給整個(gè)品牌帶來成百上千的問題。

當(dāng)我們談及文件類型圖標(biāo)時(shí)，人們往往只會(huì)想到最主要的那些，比如：

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

但是，大多數(shù)我們的產(chǎn)品可以導(dǎo)入導(dǎo)出大量的輔助文件類型。比如， Photoshop 就涉及超過120種不同的文件類型。

為了給不同的操作系統(tǒng)優(yōu)化，我們需要制作十種不同尺寸的 .PGN 文件類型圖標(biāo)，并打包成 .ICNS 格式（Mac）和 .ICO 格式（Windows）文件。

當(dāng)我們計(jì)算制作每個(gè)文件類型圖標(biāo)的尺寸和格式時(shí)，發(fā)現(xiàn)要在每個(gè)新版本發(fā)布周期修改和管理超過7000份素材。

由于 Adobe CC 產(chǎn)品線在過去四年擴(kuò)張得很快，以當(dāng)前的工作流程去創(chuàng)建和維護(hù)這些文件類型圖標(biāo)已經(jīng)不太可能，工作量太大了。

一. 盤點(diǎn)和調(diào)查

在我們開始重新設(shè)計(jì)整個(gè)系統(tǒng)之前，我們必須查一下當(dāng)前產(chǎn)品里在用什么文件類型圖標(biāo)。我們?cè)L問了各個(gè)產(chǎn)品團(tuán)隊(duì)，借此盤點(diǎn)現(xiàn)存所有的文件類型圖標(biāo)。

處處都能發(fā)現(xiàn)失調(diào)的地方，大都是下列兩個(gè)原因?qū)е拢?/p>

• 不同的團(tuán)隊(duì)主導(dǎo)各自的產(chǎn)品線，并沒有規(guī)范作為執(zhí)行準(zhǔn)則。
• 新的文件類型隨著新產(chǎn)品不斷上線，很多被當(dāng)作一次性設(shè)計(jì)。

根據(jù)這次盤點(diǎn)中得到的信息，我們做了一張關(guān)于現(xiàn)存文件類型結(jié)構(gòu)的鳥瞰圖。

首先，我們以產(chǎn)品線組織了文件類型圖標(biāo)，并把不同應(yīng)用之間重復(fù)出現(xiàn)的圖標(biāo)連接起來。借此發(fā)現(xiàn)并并刪去重復(fù)的圖標(biāo)。結(jié)束這項(xiàng)工作時(shí)，輔助文件類型圖標(biāo)的數(shù)量減少到65%。

△ 以產(chǎn)品線組織的舊的文件類型結(jié)構(gòu)片段

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

△ 以功能組織的舊的文件類型結(jié)構(gòu)片段

我們注意到某些文件類型使用了不同版本的相同比喻，還有一些文件類型使用了自定義的比喻，其實(shí)可以用更統(tǒng)一的比喻進(jìn)行替換。我們創(chuàng)建了傘式結(jié)構(gòu)的文件類型，借此為整個(gè)產(chǎn)品線安排統(tǒng)一的比喻。做完這個(gè)后，我們減少超過一半的比喻數(shù)量。

△ 舊的輔助文件類型比喻圖標(biāo)片段。

二. 草稿和設(shè)計(jì)

一旦我們對(duì)老的文件類型圖標(biāo)系統(tǒng)有廣泛的了解，就開始建立新系統(tǒng)的基礎(chǔ)規(guī)則：

• 只有主要文件類型才可以和產(chǎn)品 Logo 的顏色有關(guān)聯(lián)。比如說 .PSD 文件是藍(lán)色的而 .AI 文件是橘色的。
• 為那些會(huì)被很多應(yīng)用用到的輔助文件類型創(chuàng)建一個(gè)中性色盤。比如說，為 Photoshop 和 Illustrator 創(chuàng)建同樣的 .PNG 文件類型圖標(biāo)，而不是各自有一個(gè)和品牌色相關(guān)的單獨(dú)的圖標(biāo)。
• 創(chuàng)造一個(gè)主要的知識(shí)庫來存放文件類型比喻，借此確保圖標(biāo)之間的關(guān)聯(lián)性，并避免為邊緣案例定制圖標(biāo)。

△ 舊的文件類型圖標(biāo)模塊拆解

我們遵循上述規(guī)則，開始給新的圖標(biāo)打草稿。

△ 項(xiàng)目早期草圖的快照

進(jìn)行這次重構(gòu)的主要目的之一是簡(jiǎn)化圖標(biāo)上的元素，并不丟失重要的信息。我們丟掉了標(biāo)簽，并把文件類型放到了圖標(biāo)的底部。我們也去掉了頁面的折角來讓設(shè)計(jì)變得扁平化，讓視覺語言更現(xiàn)代化。

△ Adobe 文件類型圖標(biāo)進(jìn)化圖

另一個(gè)重要目的是和 Adobe 的新 UI 設(shè)計(jì)語言 「Spectrum」 一致。

經(jīng)過這次努力，我們把文件類型圖標(biāo)的四角做圓，并開始建立一個(gè)素材庫，使用 Spectrum 規(guī)范中現(xiàn)有的比喻，設(shè)計(jì)新的與其圖標(biāo)風(fēng)格相一致的素材。

△ Adobe Spectrum 圖標(biāo)庫快照

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

△ 在深色界面下顏色對(duì)比度研究

三. 迭代和定稿

既然我們定下了設(shè)計(jì)方向，我們開始在一些場(chǎng)景下測(cè)試新文件類型圖標(biāo)。在最初的測(cè)試中，我們調(diào)查了不同操作系統(tǒng)中、我們自己的產(chǎn)品中所有會(huì)出現(xiàn)文件類型圖標(biāo)的地方。我們也查看了在不同尺寸和分辨率下圖標(biāo)出現(xiàn)的情況。

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

這一舉動(dòng)馬上讓我們陷入了一個(gè)深淵，里面遍布藏在各個(gè)人跡罕至的角落里的文件類型圖標(biāo)。但是這么做很有價(jià)值。我們需要更全面的投身這個(gè)任務(wù)。

△ 文件類型圖標(biāo)出現(xiàn)的各種場(chǎng)景

最后一步是檢查移動(dòng)端和 Web 端服務(wù)里用戶界面中文件類型圖標(biāo)的使用情況。比如 Adobe Acrobat 和 Creative Cloud Libraries。由于這些服務(wù)由不同設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)，如果我們計(jì)劃翻新整個(gè)文件類型設(shè)計(jì)系統(tǒng)，就需要和很多人合作。

我們對(duì)最終的輸出很驕傲，因?yàn)樾碌脑O(shè)計(jì)語言更簡(jiǎn)潔，更緊湊，并且代表了 Adobe 形象識(shí)別系統(tǒng)的更新。

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

四. 設(shè)計(jì)一個(gè)新流程

我們利用 AI 里的腳本功能創(chuàng)建了一個(gè)工作流程，可以一鍵生成和導(dǎo)出 .PNG 文件。這個(gè)工作流程給我們節(jié)省了很多時(shí)間。

教你如何創(chuàng)建一個(gè)完整的設(shè)計(jì)流程：《在設(shè)計(jì)流程中，通過這6種方式來運(yùn)用信息架構(gòu)》

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

在找了一圈三方編譯器以后，我們決定最好還是為這個(gè)需求定制，和開發(fā)人員做一個(gè)內(nèi)部 App。他們開發(fā)了一個(gè)超贊的工具，我們稱之為 Icon 隊(duì)長(zhǎng)。

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

正在內(nèi)測(cè)中，我們的工程師希望將來能在 GitHub 上分享給 Adobe 開發(fā)社區(qū)里的其他開發(fā)者使用！

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

五. 落地

我們?nèi)栽谶@一階段，并可能持續(xù)很長(zhǎng)時(shí)間。每次我們發(fā)布一個(gè)新版本的 Creative Cloud，我們都會(huì)和許多團(tuán)隊(duì)的產(chǎn)品經(jīng)理和工程師碰需求，以保證我們?cè)O(shè)計(jì)的輸出質(zhì)量。

附設(shè)計(jì)師超實(shí)用的三個(gè)技巧：《讓設(shè)計(jì)落地！如何提升設(shè)計(jì)方案的說服力？》

落地其實(shí)是一個(gè)反復(fù)的過程，需要經(jīng)歷和各種團(tuán)隊(duì)反反復(fù)復(fù)的溝通，安裝很多版本來測(cè)試素材，找到和解決不可避免的 bug，還有管理很多的產(chǎn)品發(fā)布截止日期。

我們的產(chǎn)品構(gòu)建于不同的代碼基礎(chǔ)，意味著同樣的東西放在不同的平臺(tái)會(huì)產(chǎn)生不同的問題。質(zhì)量保障和加強(qiáng)品牌設(shè)計(jì)規(guī)范可能是我們團(tuán)隊(duì)中最無聊的任務(wù)之一，但這對(duì)于保持和提升設(shè)計(jì)系統(tǒng)很重要。

△ 操作系統(tǒng)中 Adobe 新文件類型圖標(biāo)

合適的支點(diǎn)可以讓杠桿撬動(dòng)地球，而我們的團(tuán)隊(duì)中常用修建盆栽來比喻做的工作。

提升一個(gè)包含數(shù)百產(chǎn)品線的設(shè)計(jì)系統(tǒng)依賴不斷的小改變。我們四處修剪，讓樹在慢慢時(shí)光中長(zhǎng)成我們希望的樣子。

雖然有時(shí)會(huì)在細(xì)節(jié)中迷失，但我們?cè)谶^程中學(xué)習(xí)的所有東西將幫助我們進(jìn)行之后的次次迭代。

本文來自知乎專欄「非科班設(shè)計(jì)」，作者徐小馬。

「設(shè)計(jì)改版沒想法？看看高手怎么做」

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

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com