成為更好的產品設計師(二)：檔案命名及設計資源整理 File organization and naming
【本文適合想提升工作效率的設計工作者】
「欸欸小菜，你上次那個幫客戶A修改的檔案在哪啊？我怎麼找不到」
『等等喔，我看一下…』
『我記得是這個檔案，誒，怎麼長得不一樣，還是這個？好像也不對呀…』
(過了二十分鐘…)
「小菜，你是好了沒啊！客戶A等得有點不耐煩了」
以上的情形是否對你而言並不陌生呢？其實不是你的記憶差，而是我們需要一個更有條理的檔案歸納方式。
身為一個設計師，我們看到喜歡的設計，截圖存檔，卻沒有好好分類；又或是在創作時，為了貪圖一時方便，沒有養成命名的習慣，等到下次想要開啟檔案時，花費更多的時間尋找。
這篇文章教導你一步步地從小地方改變，養成檔案管理的好習慣，成為更有效率、條理的產品設計師。以下是這篇文章的結構：
- 觀念介紹 Introduction
• 為什麼？好處在哪？Why? Benefits?
• 基本觀念/步驟 Basic Mindset - 如何著手 How to Start?
• 檔案內元件：圖層命名及建群 Components/Layers & Groups
• 版本控制及收納格式：檔案及資料夾命名 Files & Folders
• 設計資源整理 Design Resources Collections - 結論 Conclusions
- 參考資料 References
有興趣的朋友，可以閱讀「成為更好的產品設計師」系列文：
1. 觀念介紹 Introduction
1.1 為什麼要命名檔案、分類整理？好處在哪？
- 易於搜尋 Easy to find
適當的命名可以節省時間，利用關鍵字快速地搜尋到需要的檔案，同時易於瀏覽。 - 易於修改 Easy to modify / manage
當檔案內的命名是有條理、有秩序的分群，我們可以更輕易的選取想要的元件進行修改。 - 易於合作 Easy to collaborate / scale
當產品設計團隊擴大時，不同的設計師會有不同的命名方式，若能統一檔案歸納的方法，可以確保檔案管理的一致性，減少不必要的來回溝通。
1.2 基本觀念
- 制定適當及一致性的命名格式 Naming appropriately and consistently
當你和其他設計師一起合作時，可以開個小組會議，根據內部需求及工作習慣，討論該如何分類及命名檔案 - 養成命名的習慣 Naming Conventions
為了更順暢的團隊溝通合作，一旦制定了格式，請每個人務必遵守 - 理性、有架構的歸納分類 Group Tidily
根據檔案格式、內容，並將符合的檔案存取在適當的資料夾
2. 如何著手 How to Start?
大處著眼，小處著手。要改變習慣不容易，但也沒想像中的那麼嚇人，我們可以先從基本的小地方開始，從檔案內的圖層、Grouping到歸納檔案及設計資源整理，我們接下來會一步步的說明。
2.1 檔案內元件：圖層命名及建群 Components/Layers & Groups
首先，我用Sketch畫了一個以地點搜尋活動的iPhone X 介面作為說明範例。設計原則可以參考先前文章：提升易讀性(二): 視覺層級介紹與實例Visual Hierarchy。乍看之下，左圖及右圖的設計完全相同。
- 工具：Sketch
- 螢幕大小：iPhone X (375 x 812 px resolution)
- 介面功能：查詢地點附近的推薦活動
不過，當我們仔細看版本一的圖層結構 (根本沒有結構（╯－_－）╯╧╧ )，可能是因為節省時間，創作者不斷複製、複製、再複製，並沒有因圖層性質命名，或者適當的建立群組，造成介面的內部雜亂無章。
相較版本一，版本二結構十分清晰，依照圖層性質命名，讓就算第一次開啟檔案的人，也能一目瞭然介面的結構順序 (小編：看起來舒爽多了啊～)。
當然，如果一開始不習慣更動所有名稱，也可以使用縮寫，例如event 1 → E1、Profile 1 → P1等。
當我們對照這兩個版本，便可以一分高下，版本二的圖層階級清晰， 讓搜尋及修改更加方便，即便是沒有使用過Sketch的初學者也能辨別介面的結構，讓人加深設計者的專業印象。
另外，我自己滿常使用的Sketch Plug-In插件之一叫做 Sortme，可以自動將圖層依據字母及數字排序，十分推薦像我一樣的偏執控使用哈哈
2.2 版本控制及收納格式：檔案及資料夾命名 Files & Folders
每一家公司有不同的檔案收納格式，有人用version、日期、或是內容區別，以下是Fevo產品部門的檔案命名格式，提供大家參考：
Project_MMDDYY_Author’s Initials_Content/Changes
項目名稱_月份日期年份_作者姓名開頭_檔案內容
這樣命名雖然長度較長，但好處是極大化搜尋效率及辨認檔案。假如使用v1, v2, v3或是01, 02, 03，雖然知道哪個檔案是最新的版本，卻不清楚裡面的內容，尤其過了一段時間，想要回頭修改細節，不免必須一一打開所有檔案，花了更多時間搜索介面。因此，我們在檔案的最後加上了附註，說明更改的內容，加深對檔案的印象。
2.3 設計資源整理 Design Resources
相信以下的桌面對你應該不陌生，充斥著各種檔案、截圖和資料夾。身為設計師的我們，看到喜歡的介面或是互動設計反射動作就是”截圖”！但往往最後這些好的設計名稱仍停留在Screen Shot 2018–03–15 at 2.00.07 PM，存放在一個永恆的資料夾”Design References”，再也沒打開過…(sad)
以下分享我個人整理設計資源的方式 / 工具：
2.3a Desktop Folders 桌面資料夾分類
基本上，我有一個總資料夾搜集不同類型的UX/UI 元件，包含：登陸頁面、註冊流程、支付流程、確認訊息、對話框、頁腳、純UX等等。看到好的設計，我會截圖並重新命名，當需要找尋靈感時，我常會到這資料庫瀏覽。
例如我需要設計價格頁面，便會到Price_Hierarchy的資料夾尋找適合的元件，在截圖之後，我會盡量重新命名成該網站名稱，以便重新Reference。
在這資料夾中，我可以立即看到不同公司對於Pricing Plan的設計，進而加速設計過程。不過這需要設計者較大的心力去維持，培養命名、分類的好習慣，才能發揮資料庫的最大效益。
2.3b Google Spreadsheet 表單
有時候，好的設計不僅是單一元件，有可能是整體網頁的排版、結構、互動設計、動畫等。因此，我會使用Google Spreadsheet將喜歡的連結分類整理成不同的Tabs，包含：設計師個人作品集、設計工作室、案例探討等。
在整理時，除了網頁名稱、連結外，還可以簡單地加上網頁的優點和附註，可以加深印象，以便之後回顧。
2.3c Pinterest Save Button
Pinterest 是收集及整理視覺設計靈感的網路剪貼簿，也是我常使用的工具之一，使用Chrome的朋友們可以安裝Pinterest extension，看到圖片按右鍵，可以將圖片加入自己的收藏，也可選擇加入不同標籤的分類資料夾。
Pinterest雖然很方便、節省時間，也可以自動儲存連結，但由於存取圖片時會壓縮檔案，造成解析度較低，我反而相對其他方法較少使用，但還是很適合有時偷懶的我 😬
2.3d Invision Boards
最後，來介紹功能最多元的Invision Boards。Invision除了大家熟知上傳介面的功能，Boards可以當作Brand Guides, Team Inspirations 或是Photo Gallery
ㄧ個Board裡可以建立不同的段落 (sections)、可以針對每一個介面留言討論，非常適合團隊內部溝通、呈現ideas的工具。
3. 結論 Conclusions
檔案歸納整理其實就跟收拾房間的道理大同小異，作者本身一開始也不是一個房間乾淨的人，不過自從學習慢慢收拾房間，試著將衣物收納到適當的位置，房間頓時清爽整齊許多。
這次的文章我們從三個面向討論：
- 檔案內元件：圖層命名及建群 Components/Layers & Groups
將Sketch, Photoshop, or Illustrator 裡圖層，依照元件屬性適當地命名及建群，方便未來進行修改、交接檔案 - 版本控制及收納格式：檔案及資料夾命名 Files & Folders
團隊裡應制定一致的命名方式，以便搜尋及規模化 - 設計資源整理方式 Design Resources Collections
本文提供四種不同的資源整理工具，包含桌面資料夾、Google Spreadsheet、Pinterest及Invision Boards，可以根據個人需求選擇適合的方法
養成良好的命名、歸納檔案的習慣，不但可以提升工作效率，同時增加他人對你的專業印象。如果大家有更好或是不同的命名分類方法及工具，也歡迎在底下留言分享喔！大家一起成為有效率的設計師吧！
4. 參考資料 References
- *Setup a design system
- Sketch Symbol Best Practices
- How to keep your design files neat and tidy
- Graphic designers — a filing system for design files that work
- Best Practices For Organizing Your Graphic Design Files
- Find Files Faster: How to Organize Files and Folders
- Designing Better File Organization (Part I)
