学设计－图片素材 如何 多标签 整理？

一、学设计－图片素材 如何 多标签 整理？

身为一名设计师，有整理图片素材习惯非常多年了，我应该很适合回答这个问题！

我认为，好的素材不仅要有完善的分类保存，也要能快捷地检索到所需的素材。这几年我常尝试过很多款图片素材整理应用的软件，从几年前的 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/

二、设计师如何整理自己的素材、收藏的网站分类等？

回想一下，2017年靠什么活下来。一定是靠耍~流~氓~ 以及小金库——素材

收集素材有啥子用，嗯没啥用。就是平时看下恍然大悟了～

一个一个海报堆在一起不就是收集吗？说的没错，堆也得有规律的堆吧～

这样堆，扎心不。你要好好想收集，就要做个分类。（这次仅拿海报来说）

风格分类：几何 立体 渐变 日式...

颜色分类：赤橙黄绿青蓝紫...

事件分类：节日 餐饮 产品 人物 ...

你会纠结成千上万海报怎么分开，这些不重要。海报都是相通的，谁都不会阻止你继续往下延伸

分类之后，点开其中一个海报。随时开启你的大脑，不然你收集海报都失去意义

更加细致的去对待自己小金库，方便录入你脑中。这五个主题是可互相牵制，不是上下级的

-版面

脑中的版面出现，画出元素所在位置以及排列位置。不是说要你一对一copy过来，要在脑中过滤，找到更适合自己更好看画面。

图中1:用不规则图形打破外框与小框，想一下没有这个，是不是很单调

图中2:个人认为画面太过平均，需要来个圆分散下注意力

图中3：可背景纯色与彩色花纹进行对比。都是可以的，只不过表现出直观感受不同。一个沉重，一个趣味的

图中4:去掉他会怎样？ 那就去掉一些烦杂内容，会更好些（个人感觉）

-留白

留白存在的意义 就是更加突出主体，你留的越多主体物越清晰

在说，这个海报。表面上没有留白其实留了！谁说留白就必须是纯色的。他把复杂的背景作为留白元素，为何这么说。你第一眼看到的是啥？

运用对比—颜色完美的让主体截然不同。就如上图即使中间无内容一样夺目

-比例

和构图无法分开要素，文字放在那里？元素放在那里不会抢主体？第一想起黄金比例啦～当然不光这个比例

之前也有说过黄金比例，1:1.618=黄金比例。简便画法来表示一下

另一种常用于摄影，图中我有标注蓝色点就是可以把主体放在四个点范围内。作者把海报主体放在四点中心。视觉的中心最为明显。

-字体

首要判断文案，看为什么作者把这个文案作为强调。其次需要几层字体来区分文案的亲密性以及对比

一般字体分为两大主题（我指中文），正规字体与随意字体

正规字体：用于印刷严谨要求死板，例如 微软雅黑、adobe楷体、黑体、adobe宋体等

随意字体：一般是书法，要求有些随性。例如：叶根友刀锋黑草等

总体分成四组，字体样式是三种（如图中标注）告诉我们字体格式过多反而更繁乱。

用了不同方法对齐以及大小来区分，因为字体过多用了线框来辅助字体

-配色

第一感觉直观是主体色，不同颜色代表不同意义。当然，其他颜色搭配也会改变主观感受

主体颜色黑色力量、精深，本是死气沉沉颜色。加上亮色系涂抹形式，一下子活波起来啦～黑色不怕，用纯纯颜色加上。不但不死板，还能形成对比。

经常用这个方式来收集颜色。你会慢慢的拥有了自己的颜色卡～

海报图片来源：https://www.pinterest.ca/pin/146367056621903867/?lp=true

友情提示：你可以找一个载体（小本本或者记事情app）。按照这五大类来记，不需要多标准自己看明白就好。一旦没有idea，他会告诉你很多

有人会问，一个海报就要分析这么久。好麻烦。嗯我也是这么认为的。但当你有了一定积累会习惯这个方式。而且会越来越快。

推荐一个小网站

Download 100k+ Free Vectors, Clip Art Designs, Icons & Illustrations

这都是免费，分类超级细。下图是部分分类

他可以随时编辑，你不喜欢颜色分分钟改掉！而且不需要其他软件

可以看到工具栏，基本的都是有的。改图再也不用那么麻烦啦～

不叨叨了，祝大家新年快乐

有想要更多设计相关资讯以及有其他问题的小伙伴，加我微信：18201106689