引子：

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

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

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

（上）使用Bridge做靈感庫(kù)管理

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

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

今天我分享的“圖像管理術(shù)”，分“靈感庫(kù)管理”和“項(xiàng)目文件管理”兩部分，靈感庫(kù)管理方法可以好解決下列問(wèn)題：

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

管理目標(biāo)：在文件數(shù)以萬(wàn)計(jì)的圖庫(kù)中，用最快的速度找到自己需要的圖片所謂管理圖片，其實(shí)只需要我們做好“分類”和“查找”這兩部工作，就能在幾十個(gè)文件夾，上萬(wàn)張圖片中迅速檢索出所需圖片。

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

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

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

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

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

別急，先來(lái)看看市面上其他比較常見(jiàn)的圖片管理工具

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

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

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

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

我們來(lái)具體看下圖片管理功能。

Inborad是免費(fèi)軟件，功能是最少最弱的，先看它。

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

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

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

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

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

再來(lái)看下Ember，Ember雖然沒(méi)能擺脫不了萬(wàn)惡的“庫(kù)”機(jī)制，但它提供的管理機(jī)制還是相對(duì)靈活的。

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

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

好吧，說(shuō)了這么多，終于輪到Bridge出場(chǎng)了，這位老爺子能解決上面遇到的各類問(wèn)題嗎？能！

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

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

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

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

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

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

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

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

（下）使用Bridge做設(shè)計(jì)項(xiàng)目文件管理

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

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

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

網(wǎng)站欄目：設(shè)計(jì)師Juno的終極圖像管理術(shù)
當(dāng)前路徑：http://www.rwnh.cn/news/50456.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站策劃、App開(kāi)發(fā)、云服務(wù)器、網(wǎng)站排名、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)