系統(tǒng)講述重新設(shè)計Adobe文件類型圖標(biāo)全過程

1 評論 8920 瀏覽 13 收藏 16 分鐘

本文作深入剖析了最新的Adobe文件類型圖標(biāo)系統(tǒng)重新設(shè)計的思想和過程,并分享其在一個龐大的產(chǎn)品系列中開發(fā)一個品牌系統(tǒng)所面臨的挑戰(zhàn)時總結(jié)出來的經(jīng)驗。

作為Adobe的品牌設(shè)計團(tuán)隊,我們負(fù)責(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ā)布周期中進(jìn)行修改和管理。

以創(chuàng)意云盤的產(chǎn)品線在過去四年中的增長速度來看,很明顯,在現(xiàn)有工作流中創(chuàng)建和維護(hù)這些文件類型圖標(biāo)所需的工作量不容小覷。

第一步:審查和調(diào)研

在我們開始重新設(shè)計這套圖標(biāo)系統(tǒng)之前,我們必須先調(diào)查目前在我們產(chǎn)品中使用的那些圖標(biāo)。我們請每一個產(chǎn)品的團(tuán)隊來幫助我們對他們所負(fù)責(zé)的產(chǎn)品中所有的文件類型圖標(biāo)進(jìn)行匯總審核。

這時候你會發(fā)現(xiàn),到處都有矛盾,這很可能是由兩方面因素造成的:

  • 不同的團(tuán)隊都擁有自己的產(chǎn)品體系,因此在設(shè)計風(fēng)格上也沒有統(tǒng)一的規(guī)范。
  • 隨著新產(chǎn)品和其文件類型上線,單個的圖標(biāo)的設(shè)計是獨立的,一次性被設(shè)計出來。

從我們的審計中收集到的信息,我們針對現(xiàn)有的文件類型體系結(jié)構(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)都會有一個象征物(典型的形象)來表現(xiàn)它的主要功能。(比如, ·HTML文件類型會使用 </> 來表示它的主要功能是與代碼或者編碼相關(guān)的。)

按產(chǎn)品功能分類的舊-文件類型圖標(biāo)結(jié)構(gòu)圖(部分)我們注意到一些文件類型使用了同一個象征物的幾個版本,而另一些則使用了一個更通用的圖標(biāo)來替代本該自定義的象征物。于是,我們按產(chǎn)品類別給每個文件類型分配同一個象征物,并在此基礎(chǔ)上創(chuàng)建了一套文件類型的傘狀分組圖。這樣一來,我們就能將我們產(chǎn)品原來的象征物數(shù)量減少一半以上。

舊-次級文件類型的象征圖標(biāo)(部分)

第二步:草擬和設(shè)計

一旦我們對舊的圖標(biāo)系統(tǒng)有了全面的了解,我們便可以開始為新的圖標(biāo)體系制定基本的原則:

  • 只有主文件類型需要使用與產(chǎn)品Logo關(guān)聯(lián)顏色。舉個栗子: ·PSD文件應(yīng)該是藍(lán)色的,·AI文件應(yīng)該是橙色的。
  • 給為多個應(yīng)用程序提供支持的輔助文件類型創(chuàng)建一個通用的調(diào)色板。比方說,Photoshop和Illustrator應(yīng)該使用同樣的·PNG文件類型圖標(biāo),而不是擁有各自的規(guī)格(Photoshop的·PNG是藍(lán)色的,Illustrator的·PNG是橙色的)。

一組舊文件類型圖標(biāo)(反例)

我們開始考慮這個新框架的草圖。

早期的一些草圖

重新設(shè)計這些圖標(biāo)的主要目的之一是,要在不削減它們本身含義的前提下,盡量簡化去除過多的不必要的元素。我們?nèi)サ袅酥暗膖ag,然后把文件類型的字母放在了圖標(biāo)的底部。我們還刪除了圖標(biāo)右上角的頁面折角來簡化設(shè)計,創(chuàng)造出更現(xiàn)代的視覺語言。

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

另一個非常重要的目的是制定一套Adobe的UI設(shè)計規(guī)范。為了達(dá)成這個目的,我們先把文件類型圖標(biāo)放在一邊,而是先創(chuàng)建了一個象征物圖標(biāo)數(shù)據(jù)庫,今后的圖標(biāo)設(shè)計要么就使用這個數(shù)據(jù)庫中固有的形象圖標(biāo),要么就創(chuàng)建出與數(shù)據(jù)庫里形象風(fēng)格一致的新圖標(biāo)。

Adobe體系圖標(biāo)數(shù)據(jù)庫

最后,我們在文件類型圖標(biāo)中加入了明亮的色彩輪廓,以配合我們產(chǎn)品LOGO的現(xiàn)有品牌特色。這種變化不僅使視覺更聚焦,并且新的圖標(biāo)能夠更好地在黑暗的界面中展示,而我們的舊圖標(biāo)在黑暗的頁面里幾乎會被淹沒。

在黑暗頁面上的UI顏色對比研究

第三步:迭代和完成

在確定了設(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)的卻被我們忽略和遺忘的角落。這是一個很有價值的過程,我們必須更加全面地去思考,一遍又一遍地去查漏補缺。

出現(xiàn)在不同環(huán)境中的文件類型圖標(biāo)(部分)

最后是要查看文件類型圖標(biāo)在Web端和移動端所提供的服務(wù)中的UI實現(xiàn),比如:Adobe Acrobat和Creative Cloud Libraries中。由于這些服務(wù)也由不同的設(shè)計團(tuán)隊管理,我們不得不去協(xié)調(diào)很多人,推進(jìn)我們的計劃來修改文件類型設(shè)計系統(tǒng)。

我們對最終的結(jié)果感到自豪,因為新的設(shè)計語言更清晰、更一致,代表了Adobe視覺品牌系統(tǒng)進(jìn)化到一個新的階段。

Adobe全新的文件類型的圖標(biāo)系統(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ū)使用?。?/p>

Adobe’s內(nèi)部的 .ICO and .ICNS 編譯器

第五步:實施

我們現(xiàn)在正處于這個階段,并將持續(xù)很長的時間。每次我們創(chuàng)意云盤有了新發(fā)布,我們就要經(jīng)歷一個奔走于各個團(tuán)隊產(chǎn)品經(jīng)理和工程師之間的過程,以確保我們的設(shè)計在各個方面都能得以實現(xiàn)。

“上線實施”通常是一個繁瑣的過程,我們需要來來回回給各個團(tuán)隊發(fā)送數(shù)百封郵件進(jìn)行交流和溝通;安裝多個測試版本,來檢測資源、日志記錄和故障,以排除不可避免的錯誤;以及管理多個發(fā)布的截止時間。

我們的產(chǎn)品還建立在不同的代碼基礎(chǔ)上,這就意味著不同的團(tuán)隊在上線實施的過程中,哪怕是使用同樣的資源,也會使用不同的方式,導(dǎo)致了他們遇到的問題也是不同的。質(zhì)量保證和捍衛(wèi)品牌規(guī)范可能是我們團(tuán)隊最不愉快的任務(wù)之一,但它是維護(hù)一個不斷變化的設(shè)計系統(tǒng)非常重要地部分。

在操作系統(tǒng)中展現(xiàn)得Adobe新圖標(biāo)

小的改變會帶來巨大的不同

在我們的團(tuán)隊,我們經(jīng)常使用盆景樹來類比我們所做的工作。

一個品牌設(shè)計系統(tǒng)包含數(shù)百個產(chǎn)品,這些產(chǎn)品依賴著數(shù)以百萬的非常細(xì)小的的,可變的增量一路發(fā)展著。?我們的工作就是在這個過程中,剪掉這里或者那里的枝丫,引導(dǎo)這棵盆景樹按照我們所期望的方向生長。

雖然我們很容易迷失在細(xì)節(jié)中,但我們在這個過程中所學(xué)到的每一件事都會更好地去面對下一個迭代,下下個迭代。

 

譯者:藍(lán)湖? 微信公眾號:藍(lán)湖產(chǎn)品設(shè)計協(xié)作

原文作者:Anny Chen

原文鏈接:Redesigning Adobe’s File Type Icon System Language

本文由 @藍(lán)湖 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。、

題圖來自unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!