數(shù)億人設(shè)計(jì)的Adobe圖標(biāo)是如何設(shè)計(jì)的？當(dāng)Adobe發(fā)布最新軟件版本時(shí)，文件圖標(biāo)也進(jìn)行了修訂。 Adobe設(shè)計(jì)人員分享了圖標(biāo)修訂背后的設(shè)計(jì)過(guò)程。讓我們來(lái)看看！/P>

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

文件類型圖標(biāo)是一種非常常見(jiàn)但經(jīng)常被忽視的品牌元素。文件類型是特定格式的文件，可以使用特定應(yīng)用程序創(chuàng)建，例如Word中生成的.DOC文件。文件類型圖標(biāo)與文件類型相關(guān)，文件類型是存儲(chǔ)或打開(kāi)文件時(shí)屏幕上顯示的圖標(biāo)。

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

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

許多消費(fèi)者并不了解Adobe的三個(gè)平臺(tái)：Creative Cloud，Document Cloud和Experience Cloud擁有100多種產(chǎn)品和服務(wù)。

這意味著在設(shè)計(jì)品牌形象系統(tǒng)時(shí)的小規(guī)??模監(jiān)督可能會(huì)導(dǎo)致整個(gè)品牌出現(xiàn)數(shù)百個(gè)問(wèn)題。

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

Photoshop的.PSD

Illustrato的.AI

InDesign的.INDD

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

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

當(dāng)我們計(jì)算每個(gè)文件類型圖標(biāo)的大小和格式時(shí)，我們發(fā)現(xiàn)在每個(gè)新的發(fā)布周期中我們必須修改和管理7,000多個(gè)材料。

由于Adobe CC產(chǎn)品線在過(guò)去四年中迅速擴(kuò)展，因此無(wú)法使用當(dāng)前工作流創(chuàng)建和維護(hù)這些文件類型圖標(biāo)，并且工作負(fù)載過(guò)大。

I.庫(kù)存和調(diào)查

在我們開(kāi)始重新設(shè)計(jì)整個(gè)系統(tǒng)之前，我們必須檢查當(dāng)前產(chǎn)品中使用的文件類型圖標(biāo)。我們?cè)L問(wèn)了每個(gè)產(chǎn)品團(tuán)隊(duì)，以評(píng)估所有現(xiàn)有的文件類型圖標(biāo)。

到處都可以找到這種疾病的地方主要是由以下兩個(gè)原因引起的：

不同的團(tuán)隊(duì)領(lǐng)導(dǎo)他們各自的產(chǎn)品線，沒(méi)有規(guī)范作為實(shí)施指南。

隨著新產(chǎn)品的不斷推出，新的文件類型被用作一次性設(shè)計(jì)。

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

首先，我們?cè)诋a(chǎn)品線上組織了文件類型圖標(biāo)，并在不同的應(yīng)用程序之間重新出現(xiàn)了連接的圖標(biāo)。使用它來(lái)查找和刪除重復(fù)的圖標(biāo)。在這項(xiàng)工作結(jié)束時(shí)，輔助文件類型圖標(biāo)的數(shù)量減少到65％。

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

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

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

我們注意到一些文件類型使用不同版本的相同隱喻，并且一些文件類型使用可以用更統(tǒng)一的比喻替換的自定義隱喻。我們創(chuàng)建了一種傘形結(jié)構(gòu)的文件類型，以便為整個(gè)產(chǎn)品系列安排統(tǒng)一的隱喻。在這之后，我們將隱喻數(shù)量減少了一半以上。

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

草案和設(shè)計(jì)

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

只有主文件類型可以與產(chǎn)品徽標(biāo)的顏色相關(guān)聯(lián)。例如，.PSD文件為藍(lán)色，.AI文件為橙色。

為許多應(yīng)用程序?qū)⑹褂玫妮o助文件類型創(chuàng)建中性色輪。例如，為Photoshop和Illustrator創(chuàng)建相同的.PNG文件類型圖標(biāo)，而不是使用與品牌顏色關(guān)聯(lián)的單獨(dú)圖標(biāo)。

創(chuàng)建一個(gè)主要知識(shí)庫(kù)來(lái)存儲(chǔ)文件類型隱喻，從而確保圖標(biāo)之間的關(guān)聯(lián)，并避免為邊緣情況自定義圖標(biāo)。

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

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

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

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

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

另一個(gè)重要目標(biāo)是與Adobe的新UI設(shè)計(jì)語(yǔ)言“Spectrum”保持一致。

完成這項(xiàng)工作后，我們舍入文件類型圖標(biāo)的四個(gè)角并開(kāi)始構(gòu)建材質(zhì)庫(kù)，使用Spectrum規(guī)范中的現(xiàn)有隱喻來(lái)設(shè)計(jì)與其圖標(biāo)樣式一致的新材質(zhì)。

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

最后，我們使用鮮艷的顏色來(lái)顯示圖標(biāo)的筆觸，使其與當(dāng)前的產(chǎn)品徽標(biāo)保持一致。這種變化不僅使視覺(jué)系統(tǒng)發(fā)生了變化，而且在黑暗界面中新圖標(biāo)看起來(lái)更清晰。相反，舊圖標(biāo)被集成到背景中并且難以區(qū)分。

△黑暗界面的色彩對(duì)比研究

III。迭代和完成

現(xiàn)在我們已經(jīng)設(shè)定了設(shè)計(jì)方向，我們將在某些情況下測(cè)試新的文件類型圖標(biāo)。在初始測(cè)試中，我們調(diào)查了不同操作系統(tǒng)中我們自己產(chǎn)品中的所有文件類型圖標(biāo)。我們還查看了不同大小和分辨率的圖標(biāo)外觀。

在Mac和Windows操作系統(tǒng)的桌面上，我們必須在不同的縮放因子（最小16像素，最大512像素）下計(jì)算圖標(biāo)。還有明亮的黑暗界面，例如Mac計(jì)算機(jī)上的“最近項(xiàng)目”和“Spotlight搜索”，然后我們檢查產(chǎn)品中文件類型圖標(biāo)的外觀，例如素材板，媒體文件瀏覽框。 ，以及首次啟動(dòng)應(yīng)用程序時(shí)的歡迎界面。

這一舉動(dòng)立即讓我們陷入深淵，文件類型圖標(biāo)隱藏在各個(gè)角落。但這樣做非常有價(jià)值。我們需要更多地參與這項(xiàng)任務(wù)。

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

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

我們?yōu)樽罱K輸出感到自豪，因?yàn)樾碌脑O(shè)計(jì)語(yǔ)言更簡(jiǎn)單，更緊湊，并且代表了對(duì)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ì)流程中，通過(guò)這6種方式來(lái)運(yùn)用信息架構(gòu)》

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

在尋找三向編譯器之后，我們決定根據(jù)此要求對(duì)其進(jìn)行自定義，并與開(kāi)發(fā)人員一起制作內(nèi)部應(yīng)用程序。他們開(kāi)發(fā)了一個(gè)很棒的工具，我們稱之為Icon of Captain。

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

在測(cè)試版中，我們的工程師希望將來(lái)能夠在GitHub上與Adobe開(kāi)發(fā)社區(qū)的其他開(kāi)發(fā)人員分享！

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

V.著陸

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

附設(shè)計(jì)師的三項(xiàng)實(shí)用技巧：《讓設(shè)計(jì)落地!如何提升設(shè)計(jì)方案的說(shuō)服力?》

登陸實(shí)際上是一個(gè)迭代過(guò)程，需要經(jīng)驗(yàn)和與各個(gè)團(tuán)隊(duì)的反復(fù)溝通，安裝許多版本來(lái)測(cè)試材料，發(fā)現(xiàn)和解決不可避免的錯(cuò)誤，以及管理大量的產(chǎn)品發(fā)布截止日期。

我們的產(chǎn)品基于不同的代碼庫(kù)，這意味著不同平臺(tái)上的相同內(nèi)容可能會(huì)產(chǎn)生不同的問(wèn)題。質(zhì)量保證和增強(qiáng)的品牌設(shè)計(jì)規(guī)范可能是我們團(tuán)隊(duì)中最無(wú)聊的任務(wù)之一，但維護(hù)和增強(qiáng)設(shè)計(jì)系統(tǒng)非常重要。

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

正確的支點(diǎn)允許杠桿搖擺地球，我們的團(tuán)隊(duì)經(jīng)常使用盆栽來(lái)完成工作。

推動(dòng)具有數(shù)百個(gè)產(chǎn)品線的設(shè)計(jì)系統(tǒng)依賴于不斷的微小變化。我們切開(kāi)，讓樹(shù)在慢的時(shí)候成長(zhǎng)為我們想要的東西。

雖然有時(shí)會(huì)丟失細(xì)節(jié)，但我們?cè)诖诉^(guò)程中學(xué)到的所有內(nèi)容都將幫助我們進(jìn)行下一次迭代。

« 阿里巴巴宣布了馬云的新名片：11個(gè)職稱已改為“老師” | 看看超級(jí)公司在賣什么！ »