的整個過程本文深入分析了最新的Adobe文檔類型圖標(biāo)系統(tǒng)，重新設(shè)計了想法和流程，并分享了在大型產(chǎn)品線中開發(fā)品牌系統(tǒng)的經(jīng)驗。
作為Adobe的品牌設(shè)計團隊，我們負(fù)責(zé)為所有桌面，移動和網(wǎng)絡(luò)產(chǎn)品打造品牌。品牌元素包含各種各樣的東西，從您在Dock中看到的雙字母徽標(biāo)到產(chǎn)品的啟動頁面以及用戶使用產(chǎn)品中的任何功能圖標(biāo)。
其中一個元素經(jīng)常被忽略但具有非常明顯的特征，它是一個文件類型圖標(biāo)。文件類型是應(yīng)用程序可以創(chuàng)建的特定文件類型的名稱。例如，Word文件的文件類型是“.DOC”。文件類型圖標(biāo)用于區(qū)分文件類型。保存或打開實際文件時，屏幕上顯示的圖標(biāo)是文件類型圖標(biāo)。
隨著今年秋季發(fā)布的最新創(chuàng)意云，用戶將看到我們所有的文件類型圖標(biāo)都煥然一新。在本文中，我將深入研究我們最新的Adobe文件類型圖標(biāo)系統(tǒng)重新設(shè)計的想法和過程，并分享我們在開發(fā)大型產(chǎn)品線中的品牌系統(tǒng)挑戰(zhàn)時的經(jīng)驗。
首先，要認(rèn)識到這項工作的重要表現(xiàn)
許多客戶可能沒有意識到Adobe在三個云盤上擁有超過100種產(chǎn)品和服務(wù)：Creative Cloud，Document Management Cloud以及Marketing and Analytics Cloud。
這意味著設(shè)計系統(tǒng)的微小變化可能導(dǎo)致整個產(chǎn)品系統(tǒng)發(fā)生數(shù)百次變更。
對于文件類型圖標(biāo)，人們通常只考慮應(yīng)用程序的主要文件類型，例如：
Photoshop的.PSD
Illustrator's· AI
InDesign· INDD
但是，我們的大多數(shù)產(chǎn)品還可以導(dǎo)入和導(dǎo)出不同的輔助文件類型。 （例如，Photoshop可以導(dǎo)出120多種不同的文件類型，每種文件都有不同的圖標(biāo)。）
為了滿足不同操作系統(tǒng)的需求，我們的文件類型圖標(biāo)需要手動對齊10個不同大小的圖標(biāo)像素，然后柵格化和包裹遞送。圖標(biāo)圖像將轉(zhuǎn)換為兩種不同類型的文件：· ICNS（Mac）和· ICO（Windows）。
當(dāng)我們需要考慮每個文件類型圖標(biāo)的大小和格式時，我們需要查看7000多個資源（js，css，模板，圖像，flash等），以便在每個發(fā)布周期中進行修改和管理。 。
看看過去四年中創(chuàng)意云盤產(chǎn)品線的增長率，很明顯，不應(yīng)低估在現(xiàn)有工作流程中創(chuàng)建和維護這些文件類型圖標(biāo)所需的工作量。
第一步：審查和研究
在我們開始重新設(shè)計此圖標(biāo)系統(tǒng)之前，我們必須首先調(diào)查我們產(chǎn)品中當(dāng)前使用的圖標(biāo)。我們要求每個產(chǎn)品團隊幫助我們對他們負(fù)責(zé)的產(chǎn)品中的所有文件類型圖標(biāo)進行摘要審核。
此時你會發(fā)現(xiàn)到處都存在矛盾，這可能是由兩個因素引起的：
不同的團隊有自己的產(chǎn)品系統(tǒng)，因此設(shè)計風(fēng)格沒有統(tǒng)一的規(guī)范。
隨著新產(chǎn)品及其文件類型的上線，各個圖標(biāo)的設(shè)計是獨立的，并立即設(shè)計。
根據(jù)我們從審計中收集的信息，我們對現(xiàn)有的文件類型架構(gòu)進行了鳥瞰。
首先，我們的產(chǎn)品類型組織文件類型圖標(biāo)并交叉鏈接它們以查看在多個應(yīng)用程序之間共享哪些輔助文件類型，因此我們可以消除重復(fù)的圖標(biāo)。通過這樣做，我們可以將輔助文件類型圖標(biāo)的數(shù)量減少到之前的65％。
按產(chǎn)品類型劃分的舊文件類型圖標(biāo)結(jié)構(gòu)圖（部分）
然后我們按功能對文件類型進行分類，例如“圖像”，“視頻”，“代碼”，“3D”等。一般來說，每個文件類型圖標(biāo)都有一個符號（典型圖像）來表示其主要功能。 （例如，· HTML文件類型將用于指示其主要功能與代碼或編碼相關(guān)。）
按產(chǎn)品功能分類的舊文件類型圖標(biāo)結(jié)構(gòu)圖（部分）我們注意到某些文件類型使用相同符號的多個版本，而其他文件類型使用更通用的圖標(biāo)而不是自定義圖標(biāo)。符號。因此，我們按產(chǎn)品類別為每種文件類型分配相同的符號，并在此基礎(chǔ)上創(chuàng)建文件類型的傘形圖組。通過這種方式，我們可以將產(chǎn)品原始符號的數(shù)量減少一半以上。
舊輔助文件類型的符號圖標(biāo)（部分）
第2步：起草和設(shè)計
一旦我們?nèi)媪私馀f圖標(biāo)系統(tǒng)，我們就可以開始為新圖標(biāo)系統(tǒng)制定基本原則：
只有主文件類型需要使用與產(chǎn)品徽標(biāo)關(guān)聯(lián)的顏色。給栗子：· PSD文件應(yīng)為藍(lán)色，· AI文件應(yīng)為橙色。
為支持多個應(yīng)用程序的輔助文件類型創(chuàng)建通用選項板。例如，Photoshop和Illustrator應(yīng)使用相同的· PNG文件類型圖標(biāo)而不是自己的規(guī)格（Photoshop的· PNG是藍(lán)色，Illustrator的· PNG是橙色）。
一組舊文件類型圖標(biāo)（反向）
我們開始考慮這個新框架的草圖。
一些早期的草圖
重新設(shè)計這些圖標(biāo)的主要目的之一是簡化太多不必要元素的刪除而不降低其自身含義。我們刪除了上一個標(biāo)記，并將文件類型的字母放在圖標(biāo)的底部。我們還刪除了圖標(biāo)右上角的頁面角落，以簡化設(shè)計并創(chuàng)建更現(xiàn)代的視覺語言。
Adobe文件類型圖標(biāo)的演變
另一個非常重要的目標(biāo)是開發(fā)一組Adobe UI設(shè)計規(guī)范。為了實現(xiàn)這個目標(biāo)，我們首先將文件類型圖標(biāo)放在一邊，但首先創(chuàng)建了一個符號圖標(biāo)數(shù)據(jù)庫。將來，圖標(biāo)設(shè)計將使用數(shù)據(jù)庫中固有的圖像圖標(biāo)，或在數(shù)據(jù)庫中創(chuàng)建圖像樣式。一致的新圖標(biāo)。
Adobe System Icon數(shù)據(jù)庫
最后，我們在文件類型圖標(biāo)上添加了鮮艷的顏色輪廓，以匹配我們產(chǎn)品LOGO的現(xiàn)有品牌特征。這種變化不僅使視覺更加集中，而且在黑暗界面中更好地顯示新圖標(biāo)，并且我們的舊圖標(biāo)在黑暗頁面中幾乎不堪重負(fù)。
黑暗頁面的UI顏色對比研究
第3步：迭代并完成
在確定設(shè)計方向后，我們在整個產(chǎn)品環(huán)境中測試了新的文件類型圖標(biāo)。在初始審核階段，我們調(diào)查了哪些不同的操作系統(tǒng)以及我們自己產(chǎn)品的哪個區(qū)域出現(xiàn)了每個文件類型圖標(biāo)。我們還研究了在每個使用環(huán)境中為每個圖標(biāo)使用不同大小和分辨率的適用性。
在Mac和Windows屏幕上，我們需要列出網(wǎng)格視圖的圖標(biāo)列表（最小16px，最大512px），具體取決于大小。還存在諸如“明亮和黑暗”之類的UI問題，例如Mac桌面上的“最近項目”或“Spotlight搜索”。
然后，我們查看了產(chǎn)品系統(tǒng)中產(chǎn)品文件圖標(biāo)的顯示位置，例如材料面板，媒體瀏覽器對話框以及首次啟動程序時顯示的歡迎屏幕。
你可以想象，這個過程很快就把我們帶到了文件類型圖標(biāo)出現(xiàn)的角落，我們被忽略了，忘記了。這是一個非常有價值的過程，我們必須更全面地思考，并一遍又一遍地檢查差距。
出現(xiàn)在不同環(huán)境中的文件類型圖標(biāo)（部分）
最后，您需要在Web和移動設(shè)備上提供的服務(wù)中查看文件類型圖標(biāo)的UI實現(xiàn)，例如Adobe Acrobat和Creative Cloud Libraries。由于這些服務(wù)也由不同的設(shè)計團隊管理，我們必須協(xié)調(diào)許多人并推進我們修改文件類型設(shè)計系統(tǒng)的計劃。
我們?yōu)樽罱K結(jié)果感到自豪，因為新設(shè)計語言更清晰，更一致，代表了Adobe視覺品牌系統(tǒng)向新階段的演變。
Adobe的新文件類型圖標(biāo)系統(tǒng)
第4步：設(shè)計新的工作流程
我們創(chuàng)建了一個新的工作流程，使用該腳本只需按一下按鈕即可自動輸出· PNG文件。這種新的工作模式為我們節(jié)省了數(shù)千小時的痛苦手動工作時間。
我們還需要一種更方便的方法將這些光柵化的· PNG文件轉(zhuǎn)換為.ICNS（Mac）和.ICO（Windows）文件。
在過去，我們使用從IconFactory下載的IconBuilder插件與我們合作。但是，在新的工作模式中，我們希望有一種更靈活的方式來解決我們的需求：你可以拖放· PNG文件并自動將輸出轉(zhuǎn)換為.ICO和.ICNS格式的正確大小。
在許多方嘗試了很多第三方工具之后，我們決定打擾我們的工程師給我們一個內(nèi)部工具來定制我們的解決方案。他們制作了一個非常神奇的工具，我們喜歡稱它為“Captain Icon”，我們用它來打包我們所有的新圖標(biāo)。 （Icon船長目前正在進行內(nèi)部測試，我們的工程師希望在不久的將來在GitHub上為我們的開發(fā)者社區(qū)分享它?。?/p>
Adobe的內(nèi)部.ICO和.ICNS編譯器
第5步：實施
我們現(xiàn)在處于這個階段，并將持續(xù)很長一段時間。每當(dāng)我們發(fā)布創(chuàng)新云的新版本時，我們都必須經(jīng)歷一個在各個團隊產(chǎn)品經(jīng)理和工程師之間運行的流程，以確保我們的設(shè)計以各種方式實施。
“在線實施”通常是一個繁瑣的過程。我們需要向每個團隊發(fā)送數(shù)百封電子郵件進行溝通和溝通。安裝多個測試版本以檢測資源，記錄日志和故障以消除不可避免的錯誤;以及管理多個版本的截止日期。
我們的產(chǎn)品也基于不同的代碼，這意味著不同的團隊即使在在線實施過程中使用相同的資源也會使用不同的方法，這會導(dǎo)致不同的問題。 。質(zhì)量保證和捍衛(wèi)品牌規(guī)格可能是我們團隊最不愉快的任務(wù)之一，但它是維護不斷變化的設(shè)計系統(tǒng)的一個非常重要的部分。
在操作系統(tǒng)中顯示新的Adobe圖標(biāo)
小的變化可以產(chǎn)生巨大的差異
在我們的團隊中，我們經(jīng)常使用盆景樹來模擬我們的工作。
品牌設(shè)計系統(tǒng)由數(shù)百種產(chǎn)品組成，這些產(chǎn)品依賴于數(shù)百萬個非常小的可變增量。我們的工作是在這里或那里切斷樹枝，引導(dǎo)盆景樹朝我們想要的方向生長。
雖然我們很容易迷失在細(xì)節(jié)中，但我們在此過程中學(xué)到的一切都將更好地面對下一次迭代，即下一次迭代。
譯者：藍(lán)湖微信公眾號：藍(lán)湖產(chǎn)品設(shè)計合作
原作者：Anny Chen
原始鏈接：重新設(shè)計Adobe的文件類型圖標(biāo)系統(tǒng)語言
本文由@藍(lán)湖出版。未經(jīng)許可，禁止復(fù)制。 ，
該地圖來自unsplash，基于CC0協(xié)議