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

奧革士發表於2017-04-26

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 提供的批次圖片收藏的功能,只需要一個點選,所有的圖片就儲存到你的收藏夾裡!

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

C. 內容區域截圖

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


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

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

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


1-2 螢幕截圖

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


1-3 支援第三方內容匯入

A. Pinterest 內容匯入
你可以將自己或者是其他 Pinterest 其他使用者收藏的內容迅速匯入到 Eagle 中收藏,大家都可以藉助這個功能,迅速成為一位收藏達人。

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

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


1-4 從剪貼簿新增內容

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


1-5 支援 Sketch 元件

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

用 Eagle 管理 Sketch 元件的好處:

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

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


1-6 支援各種常見的檔案格式

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


2、管理功能介紹

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


2-1 用資料夾分類圖片

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


2-2 用標籤分類圖片

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


2-3 自動標註標籤

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

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


2-4 批次歸類功能

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


2-5 在圖片上標註想法

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

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

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

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

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

2-7 圖片批次更改名稱

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

1. 新的名稱 + 序列號碼(%N)(支援格式 1, 01, 001, 0001 自動補 0 功能)
2. 新的名稱 + 時間(%D)
3. 原始名稱(*) + 序列號碼(%N) 或 時間(%D)
4. 自己決定序列號碼的起時數值

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


3. 內容查詢功能介紹

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

Eagle 目前提供幾種有效的方式可以讓你迅速的找到需要的內容,分別有:「顏色篩選」、「型別篩選」「迅速切換(類似 Alfred)」、「一鍵檢視分類或標籤」。

3-1 顏色篩選功能

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

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


3-2 迅速切換分類或標籤(就像 Alfred)

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

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


3-3 一鍵檢視其他分類或標籤的內容

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


4. 雲端同步及團隊協作

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

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


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/

相關文章