超方便神器Bridge！設(shè)計師的終極圖像管理術(shù)

編者按：絕大多數(shù)設(shè)計師都不知道的圖像管理神器！圖像管理向來是很多設(shè)計師浪費精力的地方，為了幫同學(xué)們科學(xué)高效地管理圖片，做到事半功倍，@Juno-Ma?特意寫了這篇好文，文章一講靈感圖庫管理，二講項目文件管理，特別實用，強(qiáng)烈推薦喲！

最近超火的設(shè)計師神器！幫你快速識別字體！《還在問“這是什么字體？”四款神器幫到你！》

作者@Juno-Ma，Dribbble地址：https://dribbble.com/JunoMa，歡迎同學(xué)們?nèi)^喲。

引子：

筆者做UI設(shè)計時間也不短了，認(rèn)識不少優(yōu)秀的設(shè)計師朋友，總想為大家分享一些干貨，最近發(fā)現(xiàn)了一個很普遍的問題：很多設(shè)計師雖然設(shè)計能力很出色，工作經(jīng)驗也足夠資深，但不是很注意工作流的優(yōu)化，經(jīng)常浪費一些精力在效率很低的體力工作上。尤其對UI設(shè)計師來說，對接的人多，項目文件（各種切圖）雜，科學(xué)的工作流能讓我們的操作行云流水，事半功倍，把注意力集中在設(shè)計本身上。

因此便有了這個系列的文章，第一篇《Bridge——設(shè)計師Juno的終極圖像管理術(shù)》分兩部分，上部分主講靈感圖庫管理，下部分講設(shè)計師項目文件管理。需要用到一個經(jīng)常被設(shè)計師忽視的強(qiáng)大軟件：Adobe Bridge。看看這個問題就知道國內(nèi)設(shè)計師們有多不了解Bridge了：Ps 里面的 Bridge 是否有存在的必要？反響不錯的話，未來我會把UI設(shè)計和標(biāo)注切圖這兩方面工作流優(yōu)化的經(jīng)驗也分享出來，（大多數(shù)國內(nèi)UED團(tuán)隊的“非設(shè)計部分”工作流或多或少都是有問題的，馬克曼標(biāo)注等等很多國內(nèi)UED團(tuán)隊推薦的工具/方法其實都弱爆了）敬請期待。

請注意：本文介紹的圖像整理方法只針對職業(yè)設(shè)計師、攝影師等需要處理大量圖片的人群。如果你的圖庫里不到20個文件夾，圖片文件還不到2000，那其實用不到神馬管理方法哈~好了，廢話少說，進(jìn)入正題。

（上）使用Bridge做靈感庫管理

當(dāng)我們接觸到一個新的設(shè)計項目，做風(fēng)格捕捉的時候，需要找出大量的相關(guān)參考圖片。本地圖庫也好，網(wǎng)上搜也罷，這是一個基本繞不開的過程。如果你是個設(shè)計老手，肯定有一個自己的靈感圖片庫，積累了大量打動你的設(shè)計、插畫、攝影作品等等。那么，問題來了，如何整理自己的靈感庫才足夠科學(xué)高效？

我和不少設(shè)計師聊過這個話題，發(fā)現(xiàn)大家普遍的整理方法都是隨機(jī)的，粗略的。比如有人直接一個文件夾“素材”，里面放了各式各樣的圖，不分類；有人會每次有需要的時候去網(wǎng)上搜，然后隨便放到桌面上。少數(shù)人會把自己的靈感庫按照大致種類分成子文件夾“圖標(biāo)”一個文件夾，“界面”一個文件夾諸如此類。但這樣的做法是低效的，而且不可積累的，由于分類的時候沒有遵循一定的邏輯和規(guī)律，時間長了，印象就減弱，而找不到的記不住的圖片會讓你難以系統(tǒng)的形成設(shè)計視野層面的積累和沉淀。如果大家看過《佐藤可士和的超級整理術(shù)》這本書，就能體會科學(xué)的整理歸類對設(shè)計師的重要性。畢竟，我們的時間很寶貴。

今天我分享的“圖像管理術(shù)”，分“靈感庫管理”和“項目文件管理”兩部分，靈感庫管理方法可以完美解決下列問題：

“我記得有個界面是某某產(chǎn)品來著，放到哪里找不到了”，“有個插畫風(fēng)格很獨特，等等我找一下…額，找了十分鐘才找到”，“設(shè)計一個播放器，希望在圖庫里找些參考，尼瑪，打開文件夾，900+未分類的界面圖”，“這個設(shè)計好贊，好想看作者其他作品，死活想不起來是誰。。。”

管理目標(biāo)：在文件數(shù)以萬計的圖庫中，用最快的速度找到自己需要的圖片。

所謂管理圖片，其實只需要我們做好“分類”和“查找”這兩部工作，就能在幾十個文件夾，上萬張圖片中迅速檢索出所需圖片。

先思考一下我們篩選圖片時候的需求，可以分解成不同的粒度：有時就單純想看所有“web ui”設(shè)計圖；有時可能我們會想搜“iOS7風(fēng)格的”，“手機(jī)UI”，“播放器”所有設(shè)計圖，那么面對這種粗粒度和細(xì)粒度，應(yīng)該怎樣對圖片分類呢？有的同學(xué)可能想當(dāng)然：文件夾分的細(xì)一點就行了啊。其實不然，面對這么多圖片，科學(xué)的管理狀態(tài)應(yīng)遵守“MICE”原則（Mutually Exclusive Collectively Exhaustive），既“相互獨立，完全窮盡”，做到不重疊、不遺漏的分類。而只用文件夾分類，是沒辦法做到這點的。上文中的例子中，就算把文件夾分的很細(xì)，“iOS7”一個文件夾，“播放器”一個文件夾，“手機(jī)UI”一個文件夾，那么所有符合這三個條件的圖片就得出現(xiàn)在這三個文件夾中，重復(fù)3次，大大降低了管理效率。如何做到“不重疊、不遺漏”？

第一步：按照“類別”對圖片做“一對一”的粗粒度分類。

具體是指，文件夾和子文件夾的類別都是相互獨立的。比如“GUI”和“ICON”這兩個子文件夾，ICON文件夾下可能有“單色I(xiàn)CON”，“寫實ICON”等子文件夾，“GUI”文件夾可能分“WEB UI”和“手機(jī)UI”兩個子文件夾。要保證在“寫實ICON”中出現(xiàn)的圖片絕不會出現(xiàn)在“手機(jī)UI”文件夾里，這樣第一步就完成了，在粗粒度上保證了所有圖片不重不漏。其實很多習(xí)慣好的同學(xué)平時就是這樣分類的。

第二步：按照“屬性”對圖片做“一對多”的細(xì)粒度標(biāo)記。

然而，粗粒度的分類是無法滿足設(shè)計師的整理需求的。一個大類別文件夾（比如WEB UI）里往往出現(xiàn)上千張圖片。如何進(jìn)一步分類？這時，系統(tǒng)文件夾就無法滿足我們的需求了，因為細(xì)粒度的類別往往其實是比較具體的“屬性”，比如作者，風(fēng)格，顏色，這些屬性在不同種類的圖片文件之間是存在大量交集的。如果繼續(xù)用文件夾分類，你會發(fā)現(xiàn)如果在“WEB UI”下建立“清新配色”“iOS7”“播放器”“主頁”此類子文件夾，那么“手機(jī)UI”下也必須建立這些同樣名字的文件夾，這樣就出現(xiàn)了重復(fù)，造成了低效。而且文件夾層級不宜過深，超過三層之后，往往管理無力，尾大不掉。對圖片屬性的管理，我們需要的是比文件夾更強(qiáng)大的圖片管理工具，來完成上述這兩個圖片分類和整理的核心需求。請牢記這兩個需求，下面會多次提到。待會兒，我會讓主角出場——Adobe Bridge。

別急，先來看看市面上其他比較常見的圖片管理工具

這是比較常見的4個圖片管理工具，Ember，Inborad，Sparkbox，Pixa，都是mac平臺的，除Inboard是免費外，其他都要價不菲。拋開“截圖”,“rss訂閱”，這些差異化的小功能不說，我們今天只來比較圖片管理這個核心功能。（如果你已經(jīng)用過這幾個軟件，已經(jīng)深知他們管理功能的不足，那請直接跳過這部分哈~）

咨詢了一下身邊好友，喜歡上面四個軟件的還真不少，比用Adobe Bridge的人數(shù)多許多，當(dāng)然也有很多設(shè)計師聽都沒聽過Bridge是干啥的。我試用過Ember、Inboard、Sparkbox這三個，Pixa看介紹大同小異，后來還是果斷換回了Bridge。到底Bridge比他們強(qiáng)在哪里？要知道Ember可是要300+大洋，很多人視為超給力生產(chǎn)力工具的一款軟件！且聽我慢慢道來。

上述四個軟件的OSX基因很明顯，具體體現(xiàn)在使用軟件的第一步都是需要把你的文件夾里的圖片復(fù)制到軟件自己建立的一個叫“庫”的文件夾里，然后依靠軟件內(nèi)部的功能，對庫里的圖片進(jìn)行管理，有點像iphoto。軟件內(nèi)部無論分了多少個組、文件夾、tag，都和系統(tǒng)文件夾沒關(guān)系了，假如你其實之前分過20個文件夾，一共有1000張圖，等你把圖都導(dǎo)入之后，庫文件夾始終是一個擁有1000張圖的大文件夾，你只能依靠軟件自己功能進(jìn)行對圖片分類！各位，這是一個極其危險的機(jī)制！一旦出現(xiàn)意外，不是丟文件就是大費周折，還容易出現(xiàn)各種異常。依賴于某個特定商業(yè)軟件的封閉管理，始終是讓人不放心的，等你費勁波折把龐大的圖庫分好類，一旦不想用它了，或者它出問題了，你就別想輕松從“庫”里脫身了。有個朋友之前用Sparkbox，后來想換Ember，他有8000+圖片，分組也分了好多，后來我問他怎么遷移的圖庫。他說只能一個分類一個分類的遷移，弄了好久只遷移了4000+。。。

AdobeBridge則完全沒有這種后顧之憂，它支持windows和mac，其“文件夾”功能就是和系統(tǒng)文件夾對應(yīng)的，不受這個“庫”的制約。所以，它還是一個強(qiáng)大的項目文件管理工具，這會在下部分重點講。

我們來具體看下圖片管理功能。

Inborad是免費軟件，功能是最少最弱的，先看它。

三欄布局，重點是左邊前兩欄。Inboard提供了Tags和Folders這兩個功能，字面翻譯是標(biāo)簽和文件夾，但別誤會，這個文件夾和系統(tǒng)文件夾一、點、關(guān)、系、也、沒、有！！而且Inboard支持同一個圖片出現(xiàn)在不同文件夾里，你會感覺這個功能是在滿足之前我們說的第二步：用“一對多”的屬性做圖片管理的需求。而Tags，除了展示數(shù)量有限，不支持編輯以外，居然看不出和Folders功能的區(qū)別。。。TAGS和FOLDERS之間也是沒有任何層級關(guān)系和邏輯關(guān)系的，所以，Inboard提供的管理工具，其實有些混亂。第二欄圖片流視圖就很不錯啦，瀑布流布局，大大提高了圖片瀏覽效率，不過這是每一款圖片管理軟件的“標(biāo)配”，大同小異罷了。

Sparkbox分的要清楚多了，Categories功能和系統(tǒng)文件夾很像，有層級關(guān)系，一張圖片只能出現(xiàn)在一個文件夾里（但是依然和系統(tǒng)文件夾沒關(guān)系，所有圖片在系統(tǒng)中只是在一個大的“庫”文件夾中）。

Tags支持TagsGroup這種層級關(guān)系，一個圖片可賦予多個tag， 能滿足我們之前說的用“一對多”屬性來管理圖片的需求。

但是，這里的Categories和Tags是兩個互為獨立的功能，兩種功能沒法組合使用，要么用categories，要么用Tags，這就讓人頗為不爽。而之前已經(jīng)分析過了，“一對一”的種類和“一對多”的屬性其實是粗粒度和細(xì)粒度兩個層級之間的。當(dāng)然，由于Tags有標(biāo)簽組功能，你完全可以使用Tags來滿足對“種類”這個粒度的分類需求。但是只能細(xì)化到一個層級，而且不同的tag是完全沒辦法取交集或者并集的，比如，如圖中，雖然有“WUI”，“iOS7”,”WUI”這些tag，你也是永遠(yuǎn)沒馬上篩選出“iOS7風(fēng)格，簡潔風(fēng)格的WUI界面”的圖片的。所以，管理功能仍然不夠強(qiáng)大。

值得一提的是，第四個按照顏色分類篩選圖片蠻有意思，但對我來講，實用性一般，因為絕大多數(shù)圖片都不止幾種顏色，配色能力上去了，就很少想“只看綠色主色調(diào)圖片”這種想法了。

再來看下Ember，Ember雖然沒能擺脫不了萬惡的“庫”機(jī)制，但它提供的管理機(jī)制還是相對靈活的。

首先，它沒理“一對一”的分類需求，只針對“一對多”的屬性分類需求，提供了“收藏”這個功能。而字面上的文件夾功能，其實是多個”收藏“的并集。

文件夾直接可以自由編輯文件夾之間的從屬關(guān)系。相對上述兩個軟件，這已經(jīng)是一個不小的進(jìn)步了，提供了相當(dāng)大的自由度。但是怎么處理“文件夾”和“收藏”這兩者之間的交集并集關(guān)系，才能滿足我們之前總結(jié)的的兩大核心需求呢？（比如很方便的篩選出“iOS7風(fēng)格，簡潔風(fēng)格的WUI界面”的圖片這個需求），這夠你想很久的了。。尤其邏輯不甚清楚的同學(xué)，依然難以駕馭這種“自由”，稍加不慎，就會違背“MECE”原則，降低管理效率。而下面的那個“標(biāo)簽”功能，完全是個雞肋。。。無視它好了。

你們應(yīng)該體會到了，圖片管理工具無非是用來滿足我們之前提到的那兩個需求的，雖然這三個軟件一個比一個貴，一個比一個靈活，強(qiáng)大，但始終沒法很好的滿足我們那兩個核心分類整理需求。而且，還必須使用該死的“庫”。。。這個“庫”機(jī)制還讓你圖庫的云同步也變得麻煩無比。如果用軟件自帶的同步服務(wù)，一般是綁定iCloud或者Dropbox，那龜速你懂的。。。如果你很任性，非把“庫”文件夾和配置文件甩到類似百度同步盤這樣的國內(nèi)網(wǎng)盤里去同步，也是可以的，但只有Sparkbox能不出問題，而你費很大力氣去同步的“庫”里的文件，始終是一個包含所有圖片，一點都沒歸類的文件夾。分類操作，只能在軟件里進(jìn)行。

好吧，說了這么多，終于輪到Bridge出場了，這位老爺子能解決上面遇到的各類問題嗎？能！

Bridge是什么？就是之前裝PS就會帶上的一個看著很復(fù)雜的不知所云的軟件,但其強(qiáng)大的功能其實能滿足我們上述提到的任何一種圖片管理需求，同時，還是一款方便的項目文件管理工具。

Bridge提供了多種過濾功能，其中的“星級”“標(biāo)簽”等等，我覺得都是次要功能。真正強(qiáng)大的，最能滿足上述兩大核心需求的，是“和系統(tǒng)一致的文件夾管理功能”和“寫入XMP標(biāo)準(zhǔn)的關(guān)鍵字功能”。這兩個功能分別完成了對圖片按照粗粒的“種類”一對一分類和按照細(xì)粒度“屬性”一對多分類的需求。

第一個很好解釋，系統(tǒng)文件夾分類什么樣，Bridge里就什么樣，完全是一樣的。

Bridge支持配置多種視圖，上圖是我的“靈感管理”視圖，可以看到三欄布局，左欄有樹狀文件夾瀏覽模式和文件夾收藏。其中樹狀文件夾能提高文件夾結(jié)構(gòu)的瀏覽效率，而文件夾收藏則相當(dāng)于快捷訪問區(qū)，你可以把文件夾直接拖到這里來，以后可以直接在這個面板訪問常去的文件夾。上邊欄是能快速導(dǎo)航的面包屑導(dǎo)航條，能自動展開子文件夾列表。瀏覽效率比起其他軟件只增不減，而且規(guī)避了“庫”的風(fēng)險。

第二條“關(guān)鍵字”是重點。Bridge的關(guān)鍵字功能完美支持對“一對多”的標(biāo)記需求，而且可以根據(jù)關(guān)鍵字搜索，篩選，輕松取并集。

上圖中，右側(cè)的關(guān)鍵字管理面板可以看到，添加了作者“Cosmin Capitanu”和風(fēng)格“friendly”作為關(guān)鍵字。左側(cè)過濾器中，可以根據(jù)關(guān)鍵字快速篩選圖片。

最為強(qiáng)大的是，關(guān)鍵字是直接寫進(jìn)圖片文件內(nèi)部的，你可以很方便的把圖庫所有分好種類的文件夾和里面的圖片文件直接丟到同步盤里進(jìn)行云同步，無論你把文件移動到哪個文件夾去，只要打開Bridge，就能讀取你添加的關(guān)鍵字，永遠(yuǎn)不會丟失。選擇一張圖片，右鍵-更多信息中，就能看到你用Bridge添加過的關(guān)鍵字。

Bridge就這樣把我們的問題解決了，無需使用危險的“庫”，管理功能也比其他同類軟件自由，強(qiáng)大。

（下）使用Bridge做設(shè)計項目文件管理

Bridge更為好用的功能，是其提供的多種項目文件管理功能，挑選幾個我常用的給大家拋磚引玉。

先來大致看下我配置的項目管理視圖，Bridge支持自定義工作視圖，我一般用兩種，靈感庫管理視圖和項目文件管理視圖，右上角可以一鍵切換。第二欄是列表視圖，方便瀏覽文件的全名、擴(kuò)展名和常用屬性。第三欄有預(yù)覽模塊和元數(shù)據(jù)模塊，能快速預(yù)覽圖片和文件自身的一切相關(guān)信息。

1. 多文件同時預(yù)覽

這個功能用途很廣，選中多個文件就可以直接預(yù)覽，不管他們是什么格式。

（1）比如，當(dāng)你可以預(yù)覽設(shè)計的一個功能的不同狀態(tài)。

（2）再比如你可以查看一組切圖資源是否正確。

（3）同一個設(shè)計，在不同尺寸應(yīng)用下的效果，想對比看下？沒問題！

2. 文件過濾器

很好解釋，特別好用。最經(jīng)常使用的是“按文件類型過濾”和之前講過的“按關(guān)鍵字過濾”。一個設(shè)計項目的文件夾里，肯定充滿著png，jpeg，psd甚至word，pdf各種格式的文件。在左側(cè)的過濾器一欄里，除了通過上面介紹的“關(guān)鍵字”過濾功能篩選圖片，你可以直接用文件類型來過濾，比如勾選psd，就把除了psd文件的其他格式文件都隱藏了。實際上，你幾乎可以按照圖片文件的任何一種屬性來進(jìn)行過濾。喜歡探索的同學(xué)，試著點下下面板右上角的小按鈕~

（1）你甚至可以不打開一個文件夾中的子文件夾，直接瀏覽其子文件夾的文件！只要在面包屑導(dǎo)航中點選“顯示子文件夾中的項目”，就可以用“父文件夾”這個屬性來過濾文件！

3. 多窗口管理

按一下command+n，就能新建一個Bridge窗口， 管理文件時，可以直接拖拽移動。

4. 批量重命名

想給一組切圖命名的后綴“@2x”變成“_night”或者“@3x”？太簡單了~瞬間完成，選中一組切圖——菜單欄——工具——批重命名。

5. 強(qiáng)大方便的縮略圖大小設(shè)置

右下角的滑塊能方便的調(diào)節(jié)縮略圖大小，ps：按下tab隱藏側(cè)邊欄，感受一下~純娛樂

Bridge還有智能收藏夾、文件堆棧等等強(qiáng)大的輔助功能，感興趣的同學(xué)可以自己研究下，這里就不深入講了。英文沒什么障礙的朋友可以直接設(shè)置成英文界面，就像這樣：

看上去簡（bi）潔（ge）美（geng）觀（gao）一些，不是嗎 ??

歡迎大家與我交流討論~

【設(shè)計師神器免費下載人氣榜】

Top 1：設(shè)計師必備的超快速摳圖神器！
《PS摳圖神器：KNOCKOUT 2.0漢化版下載及教程》

Top 2：時下最熱門的多邊形風(fēng)格創(chuàng)建神器！
《這效果超火！教你創(chuàng)建高大上的多邊形字體》

Top 3：省時高效的參考線神器！
《PS 參考線插件GUIDEGUIDE下載及使用說明》

原文地址：zhuanlan.zhihu
作者：@Juno-Ma

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：