設計靈感與素材的極限管理

2022-9-19    純純


這些年里,這款工具進行了快速的迭代和更新,響應設計師們的需求,不斷完善功能,成為設計行業(yè)推薦率(NPS)最高的軟件之一。

尤其是作為一款優(yōu)秀的買斷制軟件,不僅定價合理,甚至 5 年來 ¥199 的售價分文未漲。 

而我同期開始用的 Ulysses(用它寫了兩本書,寫過的公眾號內(nèi)容超100W字)、MindNode、Notability 等,全都在這期間從買斷制改成訂閱制,甚至訂閱價格還逐年上漲??







我從來不吝嗇于贊美優(yōu)秀的軟件工具,尤其是保持初心以純粹的產(chǎn)品功能來服務用戶的那種更甚。五年前我作為最早就推薦它的人之一,五年后我不介意再夸它一次。 

它就是 —— Eagle。 

Eagle官網(wǎng):https://cn.eagle.cool/











前面說過,Eagle 是一個設計資源管理器,它可以做的事情非常多,但我不是要在這里寫功能介紹的,而是來分享一下,我都用它做了什么。







2.1 圖片采集 

圖片采集是我使用 Eagle 的核心目的,他包含豐富的采集形式完美覆蓋我的實際使用需要。 

第一類采集形式就是通過瀏覽器插件或截圖工具,將網(wǎng)頁中看見的圖片下載到本地。 





第二類采集形式,則是通過粘貼花瓣或 Pinterest 的畫板地址,批量采集該畫板的所有圖片。這是我最喜歡的功能,沒有之一。







花瓣和 Pinterest 這類網(wǎng)站,真正的精華是優(yōu)質(zhì)用戶自己收錄的圖庫,而不是直接搜索出來的結(jié)果。批量采集,就是讓我在找到優(yōu)質(zhì)圖庫后,用最簡單的方式下載這些被精挑細選出來的圖集。 

2.2 篩選排序 

因為批量下載很方便,我可以很快的針對同一類目收集出成千上萬的內(nèi)容。但同一個類目下載那么多圖片或素材有意義嗎? 

數(shù)量從來不是我追求的目標,我會將任何類目的內(nèi)容數(shù)量進行精簡,只保留其中最精華的一小部分,即使它們是由一批最優(yōu)秀的設計師收藏的圖庫,我也只取精華中的精華。 

但是,光靠一張張圖看過去打星再篩選,會把我累死。于是,我就會利用 Eagle 的篩選與排序功能,快速剔除劣質(zhì)內(nèi)容,縮小選擇范圍。 







比如之前我分享過的 UI 配圖的素材,包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張,是我從上百個攝影畫板里批量采集下來的。







應用到大小、尺寸排序,色彩篩選,星級篩選等多種手段配合,幫助我快速篩選出各自質(zhì)量最好的 100 張圖片。而這前后大概只用了兩小時的時間。

2.3 資源管理 

通過前面兩個功能,我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置,需要根據(jù)一定的規(guī)律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。 

Eagle 的資源管理包含三個方向: 

1. 普通文件夾:類似電腦文件夾的邏輯,可以進行排序和上下級設置,收納 

2. 智能文件夾:通過一定條件設置,篩選出對應圖片和素材的動態(tài)文件夾 

3. 分類標簽:即可以作為分類來使用的標簽系統(tǒng),可以為一張圖片或素材打上多個分類標簽

我的資源管理方法論一直崇尚的是極簡主義,能用普通文件夾管理的情況我就一定不用智能和標簽。不是說這些功能不好,而是因為它們需要對素材進行二次的處理和維護,只有在必要條件下才會使用。 

我的素材資源管理是首先構(gòu)思我會用到的幾個大類,每個大類下會包含幾個二級分類,即 Eagle 中的1級文件夾,然后再創(chuàng)建對應的文件夾并命名和添加色彩,比如下面示例。





不要奢望一開始規(guī)劃分類能做到盡善盡美,只要大的方向上確定了,然后再根據(jù)日常收集的需要慢慢去添加下級文件夾,而這一級就沒有那么嚴格的限定,用到哪加到哪。







只有在一些非常特殊類目下,我才會去為圖片和素材增加標簽,而不是為了打標簽而打標簽。比如我收集的學員作業(yè)也存在 Eagle 中,會包含課程期數(shù)、作業(yè)類型兩個維度,我就需要用標簽進行管理,方便我后續(xù)進行跨文件夾的查看與篩選。 

2.4 素材預覽

除了基礎的靈感圖片外,我還往里面存了很多其它文件素材,包括但不限于下面這些種類。 







Eagle 能作為一個設計資源管理工具,并不是因為可以添加文件夾和標簽,再實現(xiàn)一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預覽。 

它比 Mac 自身的快速預覽更高效(后面會解釋),同時作為雙系統(tǒng)用戶,我得以在 Windows 系統(tǒng)下如下圖快速查看素材預覽,而不是安裝格式支持零碎的插件(或流氓軟件)來實現(xiàn)。







尤其是 Sketch、XD、Mindnode 文件,有了縮略圖,就不用通過打開源文件來查看內(nèi)容。并且字體文件支持在目錄中直接啟用和停用,可以非常方便的實時管理本地字庫,保證我在設計軟件中只會出現(xiàn)必要的字體,而不會全部顯示出來。

2.5 網(wǎng)址記錄 

Eagle 還有個特別的功能 —— 網(wǎng)址記錄,這也是我最常用的功能之一。 

早前有先用 Pocket 然后轉(zhuǎn)移 InstaPaper 和 Cubox 來收錄網(wǎng)上看到的優(yōu)質(zhì)設計文章,方便我需要引用原文和整理思緒的時候回看。







雖然最后采用的 Cubox 也是一個優(yōu)秀的稍后閱讀工具,但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以,自然而然的,我還是把網(wǎng)址全部遷移回 Eagle 中。 

只要安裝 Eagle 瀏覽器插件,我就可以快速收集網(wǎng)址到 Eagle 目錄中,之后隨時進行查看。 

可能有的同學喜歡用網(wǎng)頁整頁截圖來收集文章,只是我不太喜歡用圖片格式查看文本,所以這個根據(jù)個人喜好即可。

2.6 項目管理 

同時,我不止拿 Eagle 管理靈感和素材,也直接拿來做項目管理。 

在 Eagle 庫文件進行團隊同步以后,針對每個項目創(chuàng)建獨立的項目文件夾,用來收錄相關(guān)的文檔、靈感圖、情緒版、配圖和設計文件。





尤其是項目前期收集靈感圖和情緒板的階段,多人共同收集和編輯的結(jié)果可以最方便的查看和進行評價,非常好的優(yōu)化我們的協(xié)作流程和效率。 

2.7 作業(yè)評審 

作為一個設計講師,要觀察學生的作業(yè)和進行點評。自然而然,我也會優(yōu)先將所有作業(yè)添加到 Eagle 中去。 

通過對每份作業(yè)前期的打分,標注,來進行后面點評課程的分享和講解。





同時,這些收集的作業(yè),需要在后續(xù)其它場景中作為正、反面的案例。所以對作業(yè)的評級和標簽就變得必要起來,在相關(guān)場景下通過創(chuàng)建智能文件夾快速篩選出范圍內(nèi)的圖例。 

以上就是我使用 Eagle 最重要的 7 個場景,雖然實際應用還遠遠不止它們,但因為篇幅關(guān)系就先介紹到這里。













Eagle 作為一款被我長期使用和推薦的工具,不僅僅是因為上面的使用場景,它們是結(jié)果。所以,我要從更底層的角度,來解釋它的不同之處和特點。

3.1 獨立的 Eagle 庫文件 

從上線以來,Eagle 有一個飽受誤解和詬病的底層設計,就是它的 “素材包” 文件 .eaglepack 。用戶需要先創(chuàng)建一個 “庫“,之后添加的所有素材、文件,都會被保存到這個庫文件中去。







換句話說,相當于 Eagle 在你的電腦中創(chuàng)建了一個特殊的文件夾,用來保存你置入的文件。即使你添加的素材是已經(jīng)下載到本地,它也會再 “復制” 一份到這個庫中。 

很多設計師對這個邏輯感到很費解,為什么本地存的好好的,Eagle 要再復制一份,完全就是浪費系統(tǒng)資源和時間的做法。如果無法理解這個邏輯,就是不具備 ”產(chǎn)品思維“ 的特征之一。 

我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。







它們的運作機制,是通過運行該軟件,來讀取你的硬盤目錄和對應文件。使用它們并不會額外復制文件出來,即使你在軟件中置入素材,它們也只是幫助你正常保存到硬盤的對應位置。 

為什么這類工具會被我們放棄,有下面這些原因: 

第一,它們的核心一直都不是全領域的設計資產(chǎn)管理,而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理,尤其是攝影相關(guān)項目。 

第二,就像對比 Photoshop 相較與 XD 一樣,龐大的軟件體積和功能,對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響,降低操作的效率。 

第三,就是比較值得深入思考的地方,那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中,多出大量非必要的目錄和文件,嚴重增加我們的決策成本和管理成本。 

范圍太大或自由度太高并不是什么好事,就像 iOS 的相冊一樣,它是個封閉的圖片庫,不像安卓一樣讀取其它硬盤文件夾,從而讓相片的管理更簡單明了。 

自由雖然可以做更多事,但這些沒有必要的可能性增加就只會變成決策和行為中的負擔。簡潔明了,才是高效的前提條件。 

第四,就是設計文件的 ”預覽效率“ 問題。不管電腦的性能怎么提升,大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件,還是高達幾億像素的超清圖片,加載都是需要等待的。 

比如下方目錄中的作業(yè)文件,因為很多同學導出畫布不考慮圖片質(zhì)量尺寸,所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。





當這么多大型位圖聚集在一起,Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了,這個功能的代價是生成了大量的 ”緩存”,即這些縮略圖會暫時保存到緩存文件夾中。







緩存文件都只是過客,在你格式化系統(tǒng),換另一臺電腦打開,或者緩存超過了上面設置的 50G,那么舊的文件就會被刪除,你還是要重新加載該文件的縮略圖。相信我,超出緩存容量是非常容易的事,即使你加到 100G 也一樣。 

Eagle 的庫特性,是在添加素材進庫之前,會生成一個對應的縮略圖文件,之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件,而不是解析原圖。 

這種策略帶來的幫助除了在文件夾之間切換高效自如,也對本地內(nèi)存的壓力有非常大的緩解。 

在一般資源管理中,一個文件夾內(nèi)有幾千張高清圖片時,持續(xù)滾動到目錄底部就會發(fā)現(xiàn)越來越卡,因為占用的內(nèi)存越來越多,直至達到臨界點釋放掉上方列表加載的內(nèi)容(上滾會重新加載)。相信有用相機的同學一定很了解這種感受。 

綜合各種問題和影響,自建庫,并為每個素材生成不會被刪除的縮略圖就是最好的選擇。 

這不僅僅是 Eagle 一個工具的做法,即使 Adobe 也在 Lightroom 應用了相同的策略,新 LR 導入圖片素材到它的自建庫中進行管理,同時生成縮略圖用于列表加載(降低高像素調(diào)節(jié)延遲)。而老版的 LR 雖然還沒下架,但為它增加 Classic(古典) 的后綴,所以它們認為哪種做法更有潛力,你們自己也能判斷了對吧?







3.2 為什么不能聯(lián)網(wǎng) 

今天我們使用的絕大數(shù)軟件都是 SaaS(微軟:基于web的軟件服務),自帶聯(lián)網(wǎng)備份和同步,但是 Eagle 只能保存本地卻不符合我們的 “習慣”,這是為什么? 

因為成本是沒辦法控制的,重度用戶成百上千 G 的硬盤占用,是不可能輕易使用云服務來實現(xiàn)同步的。這些動輒幾 G 的 PSD 文件或其它大型設計文件,會讓整個同步過程充滿不確定性和沖突。 

同時,云同步是一種成本特別高的服務類型,和一般的云存儲空間不是一種概念,想要大容量又要免費,是不可能的。Adobe 同步盤 1T 容量港區(qū)售價 68 港幣,蘋果 iCloud 同步盤是 2TB 68 元/月。 





算起來他們的價格并不貴,但一定要清楚 Adobe 和蘋果云都是為了自家生態(tài)服務的,而且作為軟件業(yè)巨頭有自己的大型數(shù)據(jù)中心,降低云服務成本。類似 Eagle 這樣的初創(chuàng)團隊是不具備這種條件的,即使推出了,價格也不會便宜。 

可能還有人會對比花瓣 Pro,它就支持云同步。但是,花瓣 Pro 只是官方網(wǎng)站的本地客戶端,更方便的訪問自己的官網(wǎng)個人中心,無法收集和整理圖片以外的其它素材,所以同步起來容易。





Eagle 的數(shù)據(jù)就只能保存本地,或者保存在笨拙的移動硬盤內(nèi),隨身帶著嘛?肯定也不是。 

庫文件的另一個管理好處,就是方便做備份。在今天同步盤服務逐漸成熟的環(huán)境下,你可以選擇購買類似 Dropbox、堅果云這類同步網(wǎng)盤,通過它們實現(xiàn)備份和多設備同步。



或者,可以購買群暉、威聯(lián)通、極空間為主導的個人云盤硬件,實現(xiàn)空間更大、更靈活的使用體驗。





如果有同學不知道怎么同步的,我會在后面分享。 

3.3 ARM 硬件的適配 

最后一點,就是對蘋果 ARM 架構(gòu)的適配了。在 Eagle 2.0 版本中,快速適配了 Mac 的新硬件架構(gòu),從而讓軟件的運行、讀取效率遠遠高于上一個版本,做到了絲般順滑的地步。





對軟件本身的優(yōu)化也是速度的保障之一,相信 Bridge 用的多的同學一定忽略不了它無處不在的延遲與卡頓。













4.1 Eagle 庫的同步方法 

Eagle 如果要進行網(wǎng)絡的備份和同步,那么一定要分清楚同步盤、網(wǎng)盤、移動硬盤的區(qū)別。 

其中,網(wǎng)盤和移動硬盤基本上是一樣的,它們的使用特點就是我們要主動把要保存的東西,拖拽進硬盤目錄內(nèi)。移動硬盤備份速度還好點,網(wǎng)盤的備份就要非常久的時間。 

如果你有兩臺電腦,使用移動硬盤的方案就得一直隨身帶著,用哪臺插哪臺上。非常容易在第二天忘記拔掉,然后回公司的時候沒庫可用。使用網(wǎng)盤的方案,那就更不可能的頻繁的備份和在另一臺電腦中下載。 

類似 Dropbox 或 同步盤工具,就是用來解決這類問題的。簡單點說,同步盤的原理就是本地安裝一個同步軟件和云端的服務器進行通信,這個同步軟件會綁定相關(guān)的本地文件夾。于是,這個文件夾內(nèi)有任何文件的變更,同步軟件就會自動把變更的軟件傳輸?shù)椒掌魃稀?nbsp;

而同步盤的特點并不是只能客戶端和服務器一對一傳輸,而是可以多對一同步。如果服務器內(nèi)容更新,它就會把更新的數(shù)據(jù)實時推送給其它客戶端,更新它們本地的文件。







通過這種模式,就能實現(xiàn)自己多臺設備,或者團隊多個成員設備的文件夾實時同步,無需你手動進行操作。 

當然,同步盤對服務器的資源占用與消耗遠遠大于一般網(wǎng)盤,所以基本只有付費的工具,而這種帶給我們生產(chǎn)力的提升和數(shù)據(jù)安全的預算是有絕對必要的。 

如果使用蘋果的同學,可以通過將 .eaglepack 保存到關(guān)聯(lián) iCloud 的文件夾即可(最好“文稿”里)。蘋果系統(tǒng)就會自動開始同步,其它 Mac 電腦就能實時接收。 默認的空間肯定不夠用,建議開通 200G 容量的服務。





如果用專業(yè)同步云軟件,以堅果云舉例,下載完客戶端,只要完成關(guān)聯(lián)包含 .eaglepack 的文件夾,那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云,就可以把該文件夾下載下來并自動同步。







4.2 靈活使用網(wǎng)頁采集

我收集靈感素材是非常有目的性的,比如一個項目需要的配圖素材,我會一口氣去收集幾十張覺得合適的圖。

Eagle 有一個瀏覽器的采集插件,這個插件非常好用。只要拖動瀏覽器的圖片,就會出現(xiàn)對應的采集彈窗,把鼠標移動到對應目錄上就可以完成采集。





如果你覺得整個頁面的圖片都想保存,也可以在插件圖標中使用批量收藏按鈕(或快捷鍵),就可以采集整個頁面中的所有圖片,以及通過尺寸篩選對應尺寸。





應對日??吹降膬?yōu)質(zhì)作品、靈感圖,也可以非??焖俚膶崿F(xiàn)采集??梢宰罘奖愕氖占{我們自己的采集資料。

4.3 UI 靈感庫的搭建模式 

作為移動端 UI 設計師來講,收集日常見過的優(yōu)秀 APP 界面,是必要的職業(yè)素養(yǎng)。而使用 iPhone + MacOS 再結(jié)合 Eagle 的話,這個過程就會變得非常的簡單。 

首先以完整頁面收集為例,之前看過不少人推薦使用 iOS 的跨設備復制圖片到 Mac 中黏貼的操作,是完全沒有必要的,因為一次只能復制一張截圖。 

你要做的就是開啟相冊的云同步,日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間,在電腦的相冊中打開 ”截屏“ 相冊,就有你這段時間收集的所有截屏??蜻x相關(guān)內(nèi)容,拖進 Eagle 對應文件夾中就完成收集,然后再刪除原圖。 





而且因為相冊特殊的機制,直接拖拽出的圖片是壓縮后的版本,讓截圖的文件的體積大幅度縮小,從3M 變成 300K(完全夠看),非常好的降低硬盤占用量。 

除了收集頁面,更重要的 UI 靈感是頁面中的 ”組件“,我們需要根據(jù)組件為目標去收集相關(guān)的案例。直接拖進整頁截圖的方式就不太合適,比如下面的瓷片區(qū)案例區(qū)。







所以,我們要開啟 Eagle 的自帶截圖功能,并設置好你覺得順手的快捷鍵。





記得打開第一個選項 ”彈出分類“,就可以每次截圖后選擇指定的文件夾。不管是你的截圖,還是網(wǎng)上的其它案例,你都可以用最高效的方式收集這些組件樣式,輕易搭建自己的組件靈感系統(tǒng)。





4.4 文件的自動導入

前面講過,我會用 Eagle 來放 Mindnode 這類思維導圖文件。但是,Mindnode 先創(chuàng)建保存,再拖進 Eagle 的步驟太麻煩了。 

所以,我正常新建并保存 Mindnode 思維導圖會到它默認文件夾中,然后使用 Eagle 的文件夾檢測功能關(guān)聯(lián)它,之后所有保存的文件就會出現(xiàn)在 Eagle 的目錄中。



之后,我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處,還可以讓我使用 Windows 系統(tǒng)的時候能夠正常預覽思維導圖。 

4.5 高效的字體的管理

Eagle 是可以管理字體的,我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。



可能你們會有疑問字體丟進字庫就行了,還管理它們干什么?或者說有字由之類的字體軟件,用 Eagle 干什么。 

一方面是我會盡量精簡使用工具的數(shù)量,另一方面,就是使用團隊同步盤的時候,我們的團隊字庫是統(tǒng)一的,隨時可以找到啟用的,最快解決其他人的設計文件字體缺失問題。 

同時,當我在使用 UI 軟件設置字體覺得選擇起來太困難時,就會去關(guān)閉掉大多數(shù)最近不會用的字體。實現(xiàn)這個操作非常的簡單,只要新建 ”智能文件夾“,并添加選項 ”字形文件“ 和 ”已安裝“,那么啟用的字體就會全部出現(xiàn)在這個列表中。







用一兩分鐘的時間就可以批量選擇你想要停用的字體,右鍵停用即可,它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾,每次清理只需要一兩分鐘時間。 













目前上方截圖中的很多案例還不是最終的完整版,最近上海疫情居家隔離,大多數(shù)工作暫停中,我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西,所以這次我把整體素材都導出后重新進行整理中,也是為什么會寫這篇內(nèi)容的原因。





Eagle 帶給我最大的價值,就是為我和團隊節(jié)省了海量的時間,讓我有可以更快的找到參考素材,更快的整理分類,更好的同步項目文件。 

上面分享的很多體驗和總結(jié),都是在 5 年來長期使用中一點點摸索,適應,并形成習慣的。任何工具的使用與自己工作學習的結(jié)合,都是漸進磨合的,每個人都可以在這個工具中挖掘出適合自己的用法。 

但依舊要給大家一個建議,不要為了收集而收集,也不要沉迷與堆積素材的數(shù)量,讓它為我們服務,恰到好處的出現(xiàn)在我們的實踐過程中。

作者:酸梅干超人   來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔