我是 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 的過程是非常發散的，當下看到覺得很棒的東西也許不適用這個專案、然而想記下來，先在自己的資源庫做初步的篩選後再放回專案的資源庫可以讓目的保持清楚。
大致上我會為一個擷取下來的頁面下三種標籤：
- 外觀描述（如顏色，形狀⋯⋯等）
- 頁面分類（如 404，about，blog⋯⋯）
- 種類描述（如 Selector，Datepicker⋯⋯）
雖然依照專案的頁面分資料夾跟頁面分類的標籤會有重複，然而因為性質不同的專案在頁面上會有不同解決方案（例如 EC 網站和官方形象網站的 About 頁面就會十分不同），加上我非常依賴 Search 的功能，在發想時直接搜尋頁面種類就不會被專案的性質所限制。
所以專案的資料夾架構大約會長這樣：
Eagle 最棒的事情是，我不用再管理兩個資料庫（工作/私人）並且也隨時可以記錄和搜集靈感，這對工作即是生活的設計師們來說十分重要，少了很多精神和時間去管理素材，更是大大輔助設計團隊的工作流程讓一切更有效率。
分享在最後
UI 的製作是最常需要參考 Reference 的，平時作為使用者太直覺於使用這些元件，常常會失憶 UI 的長相和細節，這些網站搜集了通常的 pattern ，喚醒你的記憶。
做 Landing page 也是很需要靈感來源，要快速了解產業與抓到重點以外，找到炫炫的視覺效果挑戰工程師參考更為重要。
酷站大全：优秀网页设计，最新的设计酷站推荐 - 大美工dameigong.cn
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
Landing Page Design Inspiration - Lapa Ninja
