作為Adobe的品牌設(shè)計團隊，我們負責(zé)為我們所有的桌面、移動和網(wǎng)絡(luò)產(chǎn)品做品牌設(shè)計榛做。品牌元素囊括很多東西，從你在Dock欄中看到的雙字母Logo内狸，到產(chǎn)品的啟動頁面和用戶使用產(chǎn)品中的任意功能圖標(biāo)都屬于品牌設(shè)計范疇检眯。
其中有一項是經(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è)計的思想和過程管削，并分享我們在一個龐大的產(chǎn)品系列中開發(fā)一個品牌系統(tǒng)所面臨的挑戰(zhàn)時總結(jié)出來的經(jīng)驗倒脓。
認(rèn)識這項工作的重要性能
許多客戶可能沒有意識到Adobe在三個云盤上有超過100種產(chǎn)品和服務(wù)：創(chuàng)意云、文檔管理云盤和營銷和分析云盤含思。
這意味著崎弃，設(shè)計系統(tǒng)中的一個小變化會連帶著整個產(chǎn)品系統(tǒng)產(chǎn)生數(shù)百項的更改。
當(dāng)涉及到文件類型圖標(biāo)時含潘，人們通常只考慮應(yīng)用程序的主要文件類型饲做，比如：
· Photoshop的 .PSD
· Illustrator的 ·AI
· InDesign的 ·INDD
然而，我們的大部分產(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)的大小和格式的數(shù)量時循集，我們需要查看超過7000個資源（js唇敞、css、模板咒彤、圖片疆柔、flash 等）文件，以便在每個發(fā)布周期中進行修改和管理镶柱。
以的創(chuàng)意云盤的產(chǎn)品線在過去四年中的增長速度來看旷档，很明顯，在現(xiàn)有工作流中創(chuàng)建和維護這些文件類型圖標(biāo)所需的工作量不容小覷歇拆。
第一步：審查和調(diào)研
在我們開始重新設(shè)計這套圖標(biāo)系統(tǒng)之前鞋屈，我們必須先調(diào)查目前在我們產(chǎn)品中使用的那些圖標(biāo)。我們請每一個產(chǎn)品的團隊來幫助我們對他們所負責(zé)的產(chǎn)品中所有的文件類型圖標(biāo)進行匯總審核故觅。
這時候你會發(fā)現(xiàn)厂庇，到處都有矛盾，這很可能是由兩方面因素造成的：
1. 不同的團隊都擁有自己的產(chǎn)品體系输吏，因此在設(shè)計風(fēng)格上也沒有統(tǒng)一的規(guī)范权旷。
2. 隨著新產(chǎn)品和其文件類型上線，單個的圖標(biāo)的設(shè)計是獨立的贯溅，一次性被設(shè)計出來拄氯。
從我們的審計中收集到的信息躲查，我們針對現(xiàn)有的文件類型體系結(jié)構(gòu)做了一個鳥瞰圖。
首先坤邪，我們產(chǎn)品類型組織歸類文件類型圖標(biāo)熙含，并交叉鏈接它們，看看在多個應(yīng)用程序之間共享哪些輔助文件類型艇纺，這樣我們就可以消除重復(fù)的圖標(biāo)怎静。通過這樣做，我們可以將次要文件類型圖標(biāo)的數(shù)量減少到之前的65%黔衡。
?然后我們將文件類型按功能分類蚓聘，比如“圖像”“視頻”“代碼”“3D”等。通常來講每個文件類型圖標(biāo)都會有一個象征物（典型的形象）來表現(xiàn)它的主要功能盟劫。（比如夜牡， ·HTML文件類型會使用 來表示它的主要功能是與代碼或者編碼相關(guān)的。）
?我們注意到一些文件類型使用了同一個象征物的幾個版本侣签，而另一些則使用了一個更通用的圖標(biāo)來替代本該自定義的象征物塘装。于是，我們按產(chǎn)品類別給每個文件類型分配同一個象征物影所，并在此基礎(chǔ)上創(chuàng)建了一套文件類型的傘狀分組圖蹦肴。這樣一來，我們就能將我們產(chǎn)品原來的象征物數(shù)量減少一半以上猴娩。
第二步：草擬和設(shè)計
一旦我們對舊的圖標(biāo)系統(tǒng)有了全面的了解阴幌，我們便可以開始為新的圖標(biāo)體系制定基本的原則：
1. 只有主文件類型需要使用與產(chǎn)品Logo關(guān)聯(lián)顏色。舉個栗子： ·PSD文件應(yīng)該是藍色的卷中，·AI文件應(yīng)該是橙色的矛双。
2. 給為多個應(yīng)用程序提供支持的輔助文件類型創(chuàng)建一個通用的調(diào)色板。比方說蟆豫，Photoshop和Illustrator應(yīng)該使用同樣的·PNG文件類型圖標(biāo)议忽，而不是擁有各自的規(guī)格（Photoshop的·PNG是藍色的，Illustrator的·PNG是橙色的）十减。
?我們開始考慮這個新框架的草圖徙瓶。
?重新設(shè)計這些圖標(biāo)的主要目的之一是，要在不削減它們本身含義的前提下嫉称，盡量簡化去除過多的不必要的元素。我們?nèi)サ袅酥暗膖ag灵疮，然后把文件類型的字母放在了圖標(biāo)的底部织阅。我們還刪除了圖標(biāo)右上角的頁面折角來簡化設(shè)計，創(chuàng)造出更現(xiàn)代的視覺語言震捣。
?另一個非常重要的目的是制定一套Adobe的UI設(shè)計規(guī)范荔棉。為了達成這個目的闹炉，我們先把文件類型圖標(biāo)放在一邊，而是先創(chuàng)建了一個象征物圖標(biāo)數(shù)據(jù)庫润樱，今后的圖標(biāo)設(shè)計要么就使用這個數(shù)據(jù)庫中固有的形象圖標(biāo)渣触，要么就創(chuàng)建出與數(shù)據(jù)庫里形象風(fēng)格一致的新圖標(biāo)。
?最后壹若，我們在文件類型圖標(biāo)中加入了明亮的色彩輪廓嗅钻，以配合我們產(chǎn)品LOGO的現(xiàn)有品牌特色。這種變化不僅使視覺更聚焦店展，并且新的圖標(biāo)能夠更好地在黑暗的界面中展示养篓，而我們的舊圖標(biāo)在黑暗的頁面里幾乎會被淹沒。
?第三步：迭代和完成
在確定了設(shè)計方向之后赂蕴，我們在整體的產(chǎn)品環(huán)境中中測試了新的文件類型圖標(biāo)柳弄。在初步的審計階段，我們調(diào)查了每個文件類型圖標(biāo)會出現(xiàn)在哪些不同的操作系統(tǒng)和我們自己產(chǎn)品的哪些領(lǐng)域中概说。我們還查看了在每個使用環(huán)境中每個圖標(biāo)使用不同尺寸和分辨率的適用性碧注。
在Mac和Windows電腦屏幕上，我們需要根據(jù)不同的尺寸列出一個網(wǎng)格視圖的圖標(biāo)列表（最小16px糖赔，最大512px）萍丐。還有“亮和暗”的UI問題，比如Mac桌面上的“最近的項目”或“Spotlight搜索”挂捻。然后我們查看了我們產(chǎn)品的文件圖標(biāo)在產(chǎn)品體系中會出現(xiàn)的地方碉纺，比如：素材面板，媒體瀏覽器對話框刻撒，還有你第一次啟動程序時出現(xiàn)的歡迎界面骨田。
可以想象，這個過程很快就把我們帶到了那些文件類型圖標(biāo)會出現(xiàn)的卻被我們忽略和遺忘的角落声怔。這是一個很有價值的過程态贤，我們必須更加全面地去思考，一遍又一遍地去查漏補缺醋火。
?最后是要查看文件類型圖標(biāo)在Web端和移動端所提供的服務(wù)中的UI實現(xiàn)悠汽，比如：Adobe Acrobat和Creative Cloud Libraries中。由于這些服務(wù)也由不同的設(shè)計團隊管理芥驳，我們不得不去協(xié)調(diào)很多人柿冲，推進我們的計劃來修改文件類型設(shè)計系統(tǒng)。
我們對最終的結(jié)果感到自豪兆旬，因為新的設(shè)計語言更清晰假抄、更一致，代表了Adobe視覺品牌系統(tǒng)進化到一個新的階段。
?第四步：設(shè)計新的工作流
我們創(chuàng)建了一個新的工作流程宿饱，利用腳本熏瞄，只需按下一個按鈕，就可以自動輸出 ·PNG文件谬以。這個新的工作模式為我們節(jié)省了幾十個小時痛苦緩慢的手工工作時間强饮。
我們還需要一個更便捷的方法將這些柵格化的 ·PNG文件轉(zhuǎn)化成成 .ICNS (Mac) 和 .ICO (Windows)文件。在過去为黎，我們使用從IconFactory下載的IconBuilder插件配合我們的工作邮丰。但是，在新的工作模式中碍舍，我們希望有更靈活的方式來解決我們的需求：可以任意拖拽 ·PNG文件柠座，并能自動轉(zhuǎn)換輸出為正確尺寸的.ICO 和 .ICNS格式。
在多方嘗試了很多第三方工具之后片橡，我們決定還是勞煩我們的工程師給我們做一個內(nèi)部使用的工具妈经，專項定制解決我們的需求。他們做了一個非常神奇的工具捧书，我們喜歡叫它“Captain Icon”吹泡，我們使用它打包了所有我們的新版圖標(biāo)。（Captain Icon目前還在內(nèi)部測試階段经瓷，我們的工程師希望在近期將它分享在GitHub上爆哑，供我們的開發(fā)者社區(qū)使用！）
?第五步：實施
我們現(xiàn)在正處于這個階段舆吮，并將持續(xù)很長的時間揭朝。每次我們創(chuàng)意云盤有了新發(fā)布，我們就要經(jīng)歷一個奔走于各個團隊產(chǎn)品經(jīng)理和工程師之間的過程色冀，以確保我們的設(shè)計在各個方面都能得以實現(xiàn)潭袱。
“上線實施”通常是一個繁瑣的過程，我們需要來來回回給各個團隊發(fā)送數(shù)百封郵件進行交流和溝通锋恬；安裝多個測試版本屯换，來檢測資源、日志記錄和故障与学，以排除不可避免的錯誤彤悔；以及管理多個發(fā)布的截止時間。
我們的產(chǎn)品還建立在不同的代碼基礎(chǔ)上索守，這就意味著不同的團隊在上線實施的過程中晕窑，哪怕是使用同樣的資源，也會使用不同的方式卵佛，導(dǎo)致了他們遇到的問題也是不同的幕屹。質(zhì)量保證和捍衛(wèi)品牌規(guī)范可能是我們團隊最不愉快的任務(wù)之一蓝丙，但它是維護一個不斷變化的設(shè)計系統(tǒng)非常重要地部分。
小的改變會帶來巨大的不同
在我們的團隊望拖，我們經(jīng)常使用盆景樹來類比我們所做的工作。
一個品牌設(shè)計系統(tǒng)包含數(shù)百個產(chǎn)品挫鸽，這些產(chǎn)品依賴著數(shù)以百萬的非常細小的的说敏，可變的增量一路發(fā)展著。?我們的工作就是在這個過程中丢郊，剪掉這里或者那里的枝丫盔沫，引導(dǎo)這棵盆景樹按照我們所期望的方向生長。
雖然我們很容易迷失在細節(jié)中枫匾，但我們在這個過程中所學(xué)到的每一件事都會更好地去面對下一個迭代架诞，下下個迭代……
原文作者：Anny Chen
翻譯：藍湖
注：本文系藍湖原創(chuàng)翻譯，轉(zhuǎn)載請聯(lián)系我們獲取授權(quán)干茉。
