視覺設計師如何收集整理海量的素材？

01-15

看到有相似的問題，但是問題說明都不太詳細，不敢貿然修改，於是重新提個自己的問題。
首先，作為視覺設計師，涉足的領域本身就異常寬泛，攝影，插畫，包裝，廣告，字體，標誌，VI，書籍，海報，服裝，建築，園藝等等等等超級繁多。
而素材的種類也多種多樣，教程，商業案例，AI/PS源文件、筆刷、字體、素材，PPT模板，大量各種各樣上面例舉的領域的圖片：成品電子圖片，實物圖片，展覽圖片，掃描圖片，或者是各種難以分類的攝影作品......

還得分類為專業領域資源/非專業領域資源，可免費商用的照片、圖標，不能商用僅供學習的各類資源/高解析度的優質資源和低解析度、帶水印的各類資源等等等等。
弄得我這個設計類小白學生超級痛苦，素材的累計對於設計師來講至關重要，可是在混亂的收藏夾里找資料就好比在一群牛頭梗里找林永健，在一群林永健里找孫紅雷......
所以來求助各位設計前輩，你們究竟如何分類整理資源？

身為一名設計師，有整理圖片素材習慣非常多年了，我應該很適合回答這個問題！

我認為，好的素材不僅要有完善的分類保存，也要能快捷地檢索到所需的素材。這幾年我常嘗試過很多款圖片素材整理應用的軟體，從幾年前的 Pixa 與 Ember，直到後來的 Inboard，但是都沒有一款真的順手好用，直到去年12月，突然冒出「自己來開發一款心目中的整理軟體」這樣的想法，與幾位夥伴構想這個想法後，最後決定開始開發這款新產品。

起初對這個產品目標很簡單，主要希望它能夠解決靈感收藏的這幾個部分：

1. 高效收藏：提供各種高效的收藏方式，迅速完成收藏。

2. 高效整理：迅速完成圖片分類與歸檔的任務。

3. 容易查找：不需花費大量時間就能夠找到收藏的素材。

4. 同步與團隊協同：與團隊隊員共享、協同，個人使用可以在多台裝置上同步。

5. 順手的操作體驗：產品如果做的不順手，即使擁有在多強大功能都是不合格的。

五個月過去了，很高興這個粗糙的想法可以從早期的「小玩具」變成後來數千位設計師愛用且樂意推薦與使用的一款「產品」，也就是這篇文章要向各位介紹的「Eagle」。

Eagle 介紹

Eagle 是專為設計師打造的圖片收藏及管理工具，可以輕鬆整理電腦上各種圖片、照片、屏幕截圖、海報、網頁設計、Sketch、Pinterest等各種圖片，提供雲端同步圖片功能，支援 Mac 與 Windows 系統。我會在文章接下來的部分介紹這款產品的各項功能以及這些功能在開發時背後的想法。

Eagle 下載：輕鬆整理圖片素材與靈感 | EagleEagle

影片介紹：http://v.youku.com/v_show/id_XMjcxMTU5MTYxMg==.html

1. 收藏功能介紹

首先我們先來介紹收藏功能的部分，分別是「瀏覽器插件」、「屏幕截圖」、「第三方內容導入」、「剪貼簿貼上」這幾個部分來介紹：

1-1 強大的瀏覽器插件（支持 Chrome 及 Safari）

逛網站時看到有用的資訊立刻收藏，大幅增加你的收藏效率，隨時隨地將網頁上的任意圖片，整個頁面截圖都儲存到你的收藏夾里。Eagle 的瀏覽器插件提供多樣的收藏功能，可以完成各種情境下的收藏，分別有：

A. 單一圖片收藏

收藏網頁的圖片很麻煩？現在你有一個更好的方式。安裝瀏覽器插件，只要在想要收藏的圖片點擊右鍵並點擊收藏，Eagle 就會自動幫你下載起來。

B. 批次圖片收藏

網站裡面有好多想要收藏的圖片怎麼辦？快試試看 Eagle 提供的批次圖片收藏的功能，只需要一個點擊，所有的圖片就儲存到你的收藏夾里

C. 內容區域截圖

你可以使用功能選單中的「區域截圖」來啟動截圖功能迅速的將靈感收藏下來，而且網頁的資訊也會自動幫你存下來哩！

D. 網頁整頁截圖

傳統網頁截圖一次只能截取一張，而且還要自己決定截圖的寬度，實在非常麻煩，如果想要一次收藏各種屏幕尺寸的截圖就得要操作很多次才能完成。Eagle 在網頁截圖功能上做了很棒的創新，你只需要一個點擊，網頁的各種尺寸都會為你截圖收藏下來！

所有使用瀏覽器插件收藏的圖片，Eagle 都會自動為你儲存圖片來源的網站以及網站的名稱。

1-2 屏幕截圖

靈感隨時會出現在眼前，想要立刻收藏起來怎麼處理？這時候你可以使用 Eagle 提供的屏幕截圖功能捕捉眼前的看到的任何靈感，並快地進行整理與分類，所有的截圖 Eagle 都會自動幫你自動標註一個截圖標籤，透過這個標籤，我們可以在未來找到所有屏幕截圖的圖片收藏。

1-3 支持第三方內容導入

A. Pinterest、花瓣內容導入

你可以從Pinterest或花瓣將自己或其他使用者收藏的內容迅速導入到 Eagle 中收藏，大家都可以藉助這個功能，迅速成為一位收藏達人

B. Inboard 內容導入

你可以直接將 Inboard 上的資料進行備份，所有收藏的內容、標籤、資料夾都可以無痛轉移到 Eagle 來。

1-4 從剪貼簿添加內容

靈感可能來自四面八方，有些可能本地檔案、可能來自網頁上、可能來自其他繪圖軟體甚至是你的手機（iPhone 的跨裝置剪貼簿），無論上面說的哪一種來源你都可以直接將剪貼簿的圖片直接添加到 Eagle 收藏起來，非常的方便！

1-5 支持各種常見的檔案格式

目前 Eagle 支持各種圖片格式，包含 JPG、PNG、BMP、GIF、Sketch、PSD、AI、Base64 等等。

2、管理功能介紹

當素材被我們收藏下來後，如何有效地整理這些素材就變得非常重要，在整理素材這個部分，Eagle 也提供許多實用的功能，可以讓整理變得更輕鬆，分別有「資料夾」、「標籤」、「自動輸入標籤」、「批次分類」、「批次重新命名」、「防止重複收藏」等功能

2-1 用文件夾分類圖片

你可以依據不同的圖片類型建立固定的內容分類，例如「網頁設計」、「海報」等等，與傳統的文件夾不同，所有收藏在 Eagle 的內容都可以歸類到多個文件夾，而且不會佔用兩份以上的容量。

2-2 用標籤分類圖片

根據素材的特性可以撰寫特定的標籤，例如「扁平風」、「電商」、「趨勢」等等。

2-3 自動標註標籤

時常使用標籤功能的朋友應該會發現一個挺麻煩的問題，那就是常常需要輸入已經輸入過的標籤，非常浪費時間！現在你可以不需要這樣啦！在 Eagle 中，你可以為特定的文件夾設置自動輸入標籤，未來任何被添加到這個文件夾的靈感都會自動貼上文件夾特定標籤！

2-4 批次歸類功能

在 Eagle 中你可以迅速的將圖片靈感瞬間歸類到多個分類中，而且歸類後，所有的自動標籤也會全部添加到這個內容上，同時就可以完成分類與撰寫標籤兩個任務，大幅提升了收藏效率。

2-5 在圖片上標註想法

所有收藏下來的圖片，你都可以在上方框選並標註想要補充的想法，不管未來哪一天查看，你都可以快速了解當初覺得很不錯的地方在哪，團隊使用時，也可以知道每個成員收藏當下的理由與想法。另外，圖片標註內容與圖片本身是分開獨立的，也就表示你可以隨時更改或移除標註，都不會影響圖片本身。

2-6 防止重複收藏的提示

為了避免用戶重複收藏了同樣的靈感，Eagle 提供了相當強大的判斷功能，可以在添加內容的時候迅速計算是否有相似同樣的內容，也許是同一張圖片的不同尺寸、格式，這些都可以判斷出來，而且這個過程絲毫不會讓你感覺到延遲或停頓。

2-7 圖片批次更改名稱

收藏一系列的主題圖片，時常我們收藏下來的圖片名稱都不太一致，使用目前的修改名稱功能要進行序列的名稱修改也相當不容易。基於這個使用情境，我們重新開發「批次命名」功能，沒有太多繁雜的介面操作，只需要透過幾種簡單的代號就可以迅速完成以下任務：

1. 新的名稱 + 序列號碼(%N)（支援格式 1, 01, 001, 0001 自動補 0 功能）

2. 新的名稱 + 時間(%D)

3. 原始名稱(*) ＋序列號碼(%N) 或時間(%D)

4. 自己決定序列號碼的起時數值

3. 內容查找功能介紹

當你把文章都收藏下來也都歸類好了，接下來最重要的任務就是在需要這些素材的時候，可以迅速找到它們。相信各位設計師都有類似的經驗，幾年裡整理下來的素材可能已經超過上百個分類，標籤也有幾百個，往往花費大量時間在這麼多資料中進行查找、點擊，不僅沒有效率而且也非常累人。

Eagle 目前提供幾種有效的方式可以讓你迅速的找到需要的內容，分別有：「顏色篩選」、「類型篩選」「迅速切換（類似 Alfred）」、「一鍵查看分類或標籤」。

3-1 顏色篩選功能

相較於其他競品，Eagle 擁有更強大的顏色搜尋能力，隨時可以幫助你尋找與你想要的色彩相關的收藏。正在發想紅色的設計方案嗎？沒問題，點擊上方過濾功能的紅色，立刻查看相似的靈感。

3-2 迅速切換分類或標籤（就像 Alfred）

隨著時間的累積，我們的收藏分類可能會變得非常多，不管在瀏覽或者歸類圖片都變得非常難用。Eagle 提供了一個「快速切換（Quick Search）」的功能，可以讓我們迅速的在數百個分類中迅速切換穿梭，再也不必一個一個慢慢找。使用方式很容易，點擊快速鍵 ? + J 啟動，輸入想要的關鍵字就可以迅速前往想要的「資料夾」及「標籤」啰！這裡有一個小細節，在關鍵字搜尋上，我們開發了一套模糊比對的演演算法，即使拼字不太正確，依然可以找到相關的分類或標籤哦！

3-3 一鍵查看其他分類或標籤的內容

選取圖片後，你會在右側檢視區看到這張圖片的標籤與資料夾，假如你想要查看這張圖片相關的標籤或其他資料夾的內容，你只需要點擊標籤或資料夾名稱就可以立刻查看到啰。

4. 雲端同步及團隊協作

你有多台電腦或者想要跟團隊成員一起收藏靈感素材嗎？沒問題，Eagle 可以很容易的就實現這個功能，只需要將靈感收藏庫放在常見的雲端硬碟服務（例：Dropbox、Google Drive、iCloud Drive、堅果雲），就可以輕鬆實現雲端同步與團隊協作啦。

5. 產品在細節上的設計

在整個產品開發過程中，我們花費非常多心力在產品的用戶體驗上，包含介面的動效、反饋、布局的合理性、以及像是各項功能預設值、偏好值記憶等，我在這裡分享一些我自己特別喜歡的部分：

A. 音效提使與反饋

刪除內容、發現重複圖片、內容下載成功時， Eagle 都會發出有趣的音效來提用戶任務已經完成。

B. Trackpad 支持

圖片列表與圖片展示畫面都支援 Trackpad 進行大小的縮放。

C. 超爽的放大體驗

將滑鼠移動至想要詳細查看的位置上，接著壓著 Command 按鍵加上滑鼠滾論，就可以很精準的放大想要查看的地方，完全不需要先放大、再移動。

D. 圖片排版方式

列表上的所有圖片都不會被截到任何一個部分，而且可以查看到每一張圖片的整體，而且又不像會像「瀑布流」排版那樣難以閱讀。

E. 瀏覽偏好記憶

每種文件夾都收藏著不同類型的圖片，這些圖片都有他們合適的查看尺寸，在切換分類時，你不需要自己手動的調整這個設定，因為 Eagle 會自動記住你在每個資料夾的偏好尺寸。

F. 中文標籤支持拼音排序

除了英文標籤之外，所有的中文標籤在標籤管理頁面中，也都會依據拼音的順序進行群組與排序。

6. 我們的下一步

A. 同時啟動多個資源庫，方便切換

B. 導入更多第三方服務上的內容（如Dribbble、Behance）

C. 內容導入/導出

D. 智慧型資料夾

E. Sketch 插件

F. 自訂快速鍵

G. 手機版本 App

如果你在體驗 Eagle 的過程中有遇到任何問題或者想給我們一些建議，請不要吝嗇的告訴我們！透過下面方式聯繫到我們：

Eagle 網站：輕鬆整理圖片素材與靈感 | Eagle

Eagle 影片介紹：http://v.youku.com/v_show/id_XMjcxMTU5MTYxMg==.html

Twitter： https://twitter.com/eagle_app/

Facebook： https://www.facebook.com/eagleapp/