Adobe 的品牌推廣團(tuán)隊(duì)負(fù)責(zé)公司的桌面、移動(dòng)和網(wǎng)絡(luò)產(chǎn)品的品牌推廣。品牌元素的形式有很多種，可以是兩個(gè)字母的產(chǎn)品logo、應(yīng)用啟動(dòng)界面、產(chǎn)品中的圖標(biāo)等等。

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

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

閱讀資料：

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

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

這意味著設(shè)計(jì)品牌識(shí)別系統(tǒng)時(shí)的一個(gè)小疏忽可能會(huì)給整個(gè)品牌帶來(lái)數(shù)百個(gè)問(wèn)題。

當(dāng)我們談?wù)撐募愋蛨D標(biāo)時(shí)，人們傾向于只考慮最重要的圖標(biāo)，例如：

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

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

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

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

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

在開(kāi)始重新設(shè)計(jì)整個(gè)系統(tǒng)之前，我們必須找出當(dāng)前產(chǎn)品中使用的文件類型圖標(biāo)。我們采訪了各個(gè)產(chǎn)品團(tuán)隊(duì)扁平化adobe軟件圖標(biāo)大全，以評(píng)估所有現(xiàn)有的文件類型圖標(biāo)。

錯(cuò)位隨處可見(jiàn)扁平化adobe軟件圖標(biāo)大全，主要有以下兩個(gè)原因：

不同的團(tuán)隊(duì)領(lǐng)導(dǎo)各自的產(chǎn)品線，并沒(méi)有一個(gè)規(guī)范作為執(zhí)行指南。新文件類型與新產(chǎn)品一起上線，并且許多被視為一次性設(shè)計(jì)。

根據(jù)這份清單中的信息，我們對(duì)現(xiàn)有文件類型的結(jié)構(gòu)進(jìn)行了鳥(niǎo)瞰。

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

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

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

按功能組織的遺留文件類型結(jié)構(gòu)的片段。

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

舊的輔助文件類型隱喻圖標(biāo)片段。第 2 步，起草和設(shè)計(jì)

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

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

舊文件類型圖標(biāo)模塊反匯編。

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

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

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

Adobe 文件類型圖標(biāo)演變圖。

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

Adobe 圖標(biāo)庫(kù)快照。

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

暗界面下的色彩對(duì)比研究。

第三步，迭代和定稿

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

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

這一舉動(dòng)立即使我們陷入了一個(gè)充滿文件類型圖標(biāo)的深淵，這些圖標(biāo)隱藏在人跡罕至的角落。但這樣做是有價(jià)值的。我們需要更充分地參與這項(xiàng)任務(wù)。

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

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

我們?yōu)樽罱K的輸出感到自豪，因?yàn)樾碌脑O(shè)計(jì)語(yǔ)言更簡(jiǎn)潔、更緊湊，并且代表了 Adob??e 圖像識(shí)別系統(tǒng)的更新。

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

第四步，設(shè)計(jì)新流程

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

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

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

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

第五步，落地

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

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

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

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

右支點(diǎn)允許杠桿移動(dòng)地球。

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

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

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

其他文章感謝閱讀