転転设计:比日本还强的收纳术,让你的素材图片资料夹乖乖听话!

転転设计・2018-08-21

我是 Celeste 👋🏻 ,目前是一名设计研究员/网页设计师(Design Researcher),在跨入科技领域前可以说是非常喜欢电脑的平面设计师,还记得小时候初接触网路的时候,最喜欢搜集各式各样喜欢的卡通、日式网页素材(记得分隔线和 8-pixel 的 gif 吗?)在电脑里新增各种文件夹搜集这些图片,这个搜集癖好就是从那个年纪开始的。

现在的工作时常面对各种提案,要制作时、客户多半不会有预备好的素材,因此平日我就成了一位 Resources hoarder;看见可能会用到的好素材就无法放过,绝对要存下来!然而接下来就遭遇到另一个问题:“要用的时候就找不到了。

你的图片文件夹也跟我一样吗?


看过 Eagle 开发者的文章,我其实相同地也寻求过 Pixa、Ember 与 Inboard 等图片管理应用程式做解决方案,但是不论哪一款总是会有一个用起来觉得可惜的地方。说“可惜”是,总是有那么些 UI 或 UX 可以更好用、更直觉,然而大多数写完回馈信之后常常是石沉大海或是系统回覆,更新频率比 OS 系统还要久。

直到某一天,同事兴冲冲地跑来说要跟我分享一款图片管理程式,我才认识了 Eagle 。那时是 Eagle 非常早期发布,大概应用程式的效能还不十分稳定、加上我很没有耐心😭 会自己关掉或储存时当掉等小问题、让我没有办法成为初期适应的使用者。

而不断让我回头的原因,就是因为每一次重新安装立即就发现它又比之前更好用了!之前回报的问题都被解决,提供的建议也都被参考采纳,软体开发者的态度使用者其实是可以最切身感受到的,用心聆听使用者经验来打造出产品,绝对是它成功的关键

从 Moodboard → Library 一次搞定 😳

Eagle 除了解决我设计师 Hoarding 的癖好之外,它最棒的地方就是拿来做专案开发

一开始我跟团队会一起建立一个专案的 Eagle 资源库放在 Dropbox ,这时候就是一个超好用的 Moodboard!大家可以根据要开发的页面或功能建立文件夹、找 Reference 放在里头。注解功能可以有效地在图片上笔记想要参考的部分,让团队成员可以很清楚地知道存取的原因。

等到专案要开始进行时,就会建立一个专门搜集可用素材的文件夹,这时候就不得不介绍一下 Eagle 强大的 Chrome extension 可以 Batch save 一个网页里面有的图片,还会留存图片来源网址,简直是日救星。

我的工作流程一般是会先在自己的 Eagle 资源库先依照专案去做文件夹的分类,同时搭配强大的标签功能注记图片,最后会汇出 Eagle package 档案一次放回去专案的资源库。

因为在搜集 Reference 的过程是非常发散的,当下看到觉得很棒的东西也许不适用这个专案、然而想记下来,先在自己的资源库做初步的筛选后再放回专案的资源库可以让目的保持清楚。

大致上我会为一个撷取下来的页面下三种标签:

  1. 外观描述(如颜色,形状⋯⋯等)
  2. 页面分类(如 404,about,blog⋯⋯)
  3. 种类描述(如 Selector,Datepicker⋯⋯)

虽然依照专案的页面分文件夹跟页面分类的标签会有重复,然而因为性质不同的专案在页面上会有不同解决方案(例如 EC 网站和官方形象网站的 About 页面就会十分不同),加上我非常依赖 Search 的功能,在发想时直接搜索页面种类就不会被专案的性质所限制。

所以专案的文件夹架构大约会长这样:

Eagle 最棒的事情是,我不用再管理两个资料库(工作/私人)并且也随时可以记录和搜集灵感,这对工作即是生活的设计师们来说十分重要,少了很多精神和时间去管理素材,更是大大辅助设计团队的工作流程让一切更有效率

分享在最后

UI 的制作是最常需要参考 Reference 的,平时作为使用者太直觉于使用这些元件,常常会失忆 UI 的长相和细节,这些网站搜集了通常的 pattern ,唤醒你的记忆。
Design Pttrns
Collect UI

做 Landing page 也是很需要灵感来源,要快速了解产业与抓到重点以外,找到炫炫的视觉效果~~挑战工程师~~参考更为重要。
酷站大全:优秀网页设计,最新的设计酷站推荐 - 大美工dameigong.cn
縦长のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
Landing Page Design Inspiration - Lapa Ninja

分享這篇文章
58.2K

相关文章