《Eagle》一款 Electron 开发的图片管理应用

宦琪
2023-12-01

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 等等


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

希望正在看这篇文章的你也会喜欢 Ealge 这款产品,如果你在体验 Eagle 的过程中有遇到任何问题或者想给我们一些建议,请不要吝啬的告诉我们!透过下面方式联系到我们:

Eagle 下载连结:点击这里下载
Eagle 影片介绍:v.youku.com/v_show/id_X…
Twitter:twitter.com/eagle_app/
Facebook:www.facebook.com/eagleapp/

 类似资料: