如何科學優雅地管理設計文件？

始終相信：經由我手產出的每一份文件，都應經得起眾人審視——不僅是最終視覺稿，更是整個工作流程中的每個環節。讓文件結構一秒看懂、易於修改補充、讓協作者露出「哇，好專業」的星星眼。本文分享作者實戰驗證的文件管理體系。

一、新項目建立6個標準文件夾

（日常迭代需求可適當刪減）

• docs：需求文檔、多語言文案、產品數據、競品分析、郵件歸檔
• spec：交互文檔
• mockup：視覺源文件
• output：截圖、展示用完整視覺稿、Change Log
• measurement：視覺標注
• assets：切圖

💡 Pro Tip：每個文件夾內建archive子文件夾，存放舊版/廢棄文件，保持主目錄乾淨（感謝@JJ Ying建議）。

二、建立4種不同用途的源文件（以Sketch為例）

1. 標準名_for_me.sketch（個人工作台）
   創作過程文件：按主流程順序建Page；Mood Board頁存放所有素材靈感；EX頁存放實驗性半成品。給自己看，混亂有序、觸手可及。

2. 標準名_measurement.sketch（視覺標注）
   給開發者：提取通用組件統一標注；針對單頁面，從縱向佈局、橫向佈局、視覺樣式三維度說明。

3. 標準名_mockup.sketch（正式視覺稿）
   給所有人：整理確定界面，按版本號排列，供協作與進度展示。

4. 標準名_style_guide.sketch（Style Guide）
   設計完成後產出：說明規則、列舉可復用組件，保證後續迭代高效一致。

三、文件命名鐵律

文件名

• 交互文檔：`產品名_平台_產品版本_ui_spec_文檔版本/日期.pdf/sketch`
  例：`ae_android_4.0_ui_spec_20150101.pdf`
• 視覺稿：`產品名_平台_產品版本_mockup_文檔版本/日期.pdf/sketch/jpg/png/psd/ai`
  例：`ae_ios_4.0_mockup_v2.4.sketch`

頁面名 & 畫板名

• 頁面按主流程/版本號/其他維度分組
• 畫板遵循：`流程/場景_操作/說明_狀態`，方便隨時導出無需批量改名

圖層名

• 按功能分區Group，排序清晰
• 熟記不同平台術語差異（Web: header/main content/footer；iOS: navigation bar；Android: 底部三鍵）。或統一用top/bottom簡短不易混淆
• 善用Symbol功能，聰明偷懶

四、DOs & DON'Ts 速查表

✅ DO	❌ DON'T
小寫 + 下劃線/減號（與工程師同步）	空格、特殊字符
功能/屬性語義命名（如 `btn_pressed`）	樣式命名（如 `btn_blue`）
日期/版本號作後綴（如 `v2.4` `20150101`）	「修改1」「最新」「最最新」

設計工作流不僅要產出有說服力的作品，創作過程更應處處散發「專業」精神。Happy Designing! 🎨