學習文件命名的目標

輸出專業規範的命名，建立有效高效的設計文件命名系統。

各階段的命名規則

1. 項目文件命名

項目之初大家都會建立文件夾系統，用來存放項目資源。這時大家可以運用杜威十進制的命名方式來管理文件命名，方便排序，讓我們的項目文件足夠清晰，在長期的項目管理中養成一種良好的命名習慣。

項目命名規則

• 項目文件夾：產品名稱 + 版本號 + 簡要迭代描述
• 項目資源文件：NO._文件類型名稱

下面以 用戶端 V2.1.0_新增直售展位 虛擬項目為例，創建各資源的子文件夾，初步完成文件管理：

00_需求文檔（PRD）

01_交互設計（原型）

02_設計文件（設計）

• 00_GUI 過程稿
• 01_GUI 定稿
• 02_設計說明
• 03_切圖文件

04_競品分析

05_動效設計

06_應用素材

07_參考資料

08_會議記錄

大家可以根據不同項目的性質和流程進行增刪，選擇最適合自己的項目文件管理方式。

2. 畫板及圖層命名

在設計文件中，我們最經常接觸的就是畫板、圖層，少則幾十，多則幾百，我們需要更輕鬆的命名排序方式來查找我們的目標，保證團隊命名風格統一，清晰的場景命名更便於設計輸出和協作，也可以高效支持後期測試用例的填寫。

此時的命名目標在於清楚展示頁面的從屬關係，以及流程上的交互關係。

畫板&圖層命名規則

• 畫板命名：功能模塊 ；
• 圖層命名：NO._NO.子模塊_NO.類型_NO.狀態；

每個畫板和圖層需要根據功能模塊/類型/狀態結合数字來進行命名，方便我們對頁面進行排序。数字可根據項目文件的操作順序和權重的具體情況來取捨。

00首頁

• 0_1新增廣告位_1單個
• 0_1新增廣告位_2多個
• 0_1新增廣告位_3組合
• 0_2無商品佔位
• …

01詳情頁

02購物車

03我的

…

在 Sketch 中我們會經常用到一個批量重命名的工具插件 Rename It，這個工具可以快速批量對畫板、組、圖層進行重命名。文末有一篇震震張關於這個插件的介紹，大家可以學習一下。

畫板和畫布的命名規範，是為了讓每個項目參与者都能快速找到目標，對於設計師而言，可以主動思考頁面之間的關係。

3. 切圖命名

一個應用通常需要導出的切圖包含眾多類型：

• 背景圖
• 插畫素材
• 動畫素材
• 圖標
• Logo
• …

對於切圖文件夾，可以通過通用文件、控件歸納等方法進行歸納管理。

對於切圖命名，可以無需考慮自己的英文命名具有普適性，記得命名最初的目標是：便於團隊檢索定位，因為開發人員有自己的命名習慣和命名體系。

切圖命名原則

標準命名原則：模塊_名稱_狀態 ，如導航欄_按鈕_點擊；

全局命名規則：模塊_全局_名稱_狀態，如導航欄_按鈕_全局_點擊（全局使用必須加全局標識）

• 導航欄_購物車_高亮.png
• 詳情_分享.png
• 登錄按鈕_點擊.png

注意事項

如果產品使用了兩個平台的獨立設計，需要 iOS 和 Android 兩個手機系統的切圖單獨建兩個文件夾，切圖文件分別導出，便於前端工程師檢索應用。

小結

以上是對設計項目過程中的文件管理及命名規範的一些筆記總結，持續優化~

養成一個好的習慣從現在開始。\（ツ）/

閱讀文章 >>

閱讀文章 >>

參考資料

• [1]RenameIt: https://i.ui.cn/ucenter/253893.html
• [2]App設計中，如何更專業管理設計命名系統？: http://www.woshipm.com/pd/685123.html
• [3]UI 設計師文件命名規範: https://www.uisdc.com/file-naming-specification-1

歡迎關注作者微信公眾號：「木子的小千世界」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五網址_如何建立高效的設計文件命名系統？這是我的常用方法！