《Eagle》一款 Electron 開發的圖片管理應用

Eagle 是一款圖片收藏及管理工具，能夠輕鬆整理各種圖片、螢幕截圖、海報、Sketch、Pinterest等各種圖片，支援 Mac 與 Windows 系統。

身爲一名設計師，相信咱們都有一件必作的事情：「整理電腦上的素材」。

如平常工做中由於某個項目所收集的圖片，或是平時逛設計網站所保存的圖，又或者是日常收集的一些源文件，管理起這些素材老是讓人頭疼。

這幾年我也嘗試使用過市場上其餘幾款圖片整理應用，包含 Ember、Inboard、Pixa、Pixave、Pincap 等。這當中我的以爲 Inboard 是最好用的，過去我曾推薦過很多朋友使用 Inboard 這款應用，比較惋惜的是這款軟件已經沒有再更新了，許多功能也沒有持續優化，特別是收藏的素材累積到一個程度後就變得難以整理了。

在去年12月的時候，忽然冒出「不如本身來開發一款心目中的素材整理工具」這樣的想法，與幾位朋友構想這個想法後，就開始開發這款新產品。

咱們但願這款新工具能夠知足下面這些需求：

1.高效收藏：提供各種高效的收藏方式，迅速收藏看見的靈感。
2.高效整理：迅速完成圖片分類與整理的任務。
3.容易查找：不需花費大量時間就能夠找到收藏的素材。
4.同步與團隊協同：與團隊隊員共享、協同，我的使用能夠在多臺裝置上同步。
5.順手的操做體驗：產品若是作的不順手，即便擁有在多強大功能都是不合格的。

好的素材管理軟件應當能夠方便快速地保存並有效地整理圖片、可讓設計師快捷地檢索到所需的素材、同時也能夠方便團隊之間進行分享。

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

---

Eagle 介紹

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

Eagle 下載：點擊這裏下載

---

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 支援 Sketch 元件

你能夠把全部畫過的 Sketch 設計都儲存在 Eagle 並依據各類元件名稱進行歸類，例如「按鈕」、「輸入框」、「導航列」等等，全部收藏的的元件均可以直接拖曳到 Sketch 直接修改使用。

用 Eagle 管理 Sketch 元件的好處：

A.避免重複造輪，加快設計流程
B.設計團隊共用，保持團隊風格一致

1-6 支持各類常見的檔案格式

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

---

二、管理功能介紹

當素材被咱們收藏下來後，如何有效地整理這些素材就變得很是重要，在整理素材這個部分，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

但願正在看這篇文章的你也會喜歡 Ealge 這款產品，若是你在體驗 Eagle 的過程當中有遇到任何問題或者想給咱們一些建議，請不要吝嗇的告訴咱們！透過下面方式聯繫到咱們：

Eagle 下載連結：點擊這裏下載
Eagle 影片介紹：v.youku.com/v_show/id_X…
Twitter：twitter.com/eagle_app/
Facebook：www.facebook.com/eagleapp/