成為更好的產品設計師(二):檔案命名及設計資源整理 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)