阿里巴巴新人設計師血淚總結：設計師不只是自由創意，更是「文檔管理者」「協作溝通者」「規範建設者」。 從圖層混亂的慘痛教訓出發，構建命名規範+Symbol組件化+Style Guide+切圖標準+標註工具鏈的完整工程化設計流程體系。

慘痛教訓：混亂圖層的連環災難

混亂症狀：默認Group命名、中英混雜、大小寫無序、邏輯層級崩塌、零Symbol使用、樣式管理真空

連環後果：

• 迭代修改地獄：百條分割線逐個手改顏色，默念「日了狗」
• 切圖交付黑洞：開發收到「Line Copy 2」命名，根本無法對應代碼結構
• 協作信任破產：工程師質疑專業度，溝通成本指數級上升

重構工程化設計流程體系

1. 頁面命名規範：模塊_內容_備註

例：`home_banner_promotion` `mine_setting_privacy`

2. 圖層命名規範：類型_位置_備註

例：`bar_project_leftview_segnav_selected` = 條塊/專案模塊/左視圖/次級導航/選中態

原則：視覺順序=圖層順序，所見即所得

3. Symbol組件化+Style Guide統一管理

• 高頻組件（icon/分割線/按鈕/輸入框/導航欄）全部Symbol化
• 字體樣式/圖層樣式/色彩變量集中在Style Guide頁面
• 一處修改，全局生效，「牽一髮動全身」正向賦能

4. 切圖交付標準：開發視角的同理心輸出

• @1x/@2x分目錄存放
• 通用組件單獨導出一份，業務獨有組件模塊化羅列
• 命名對接代碼結構：`separator_leftview_long`而非`Line Copy 2`
• 工程師確認：@1x無需標註，@2x尾部標註`@2x`

5. 標註工具鏈升級：Zeplin落地實踐

• 替代手動標註，自動生成規格/色值/間距/代碼片段
• 設計/開發雙端同步查看，溝通效率提升60%+
• 版本管理清晰，歷史對比一鍵可得

新人避坑指南：基本功即核心競爭力

「這些都是基本工作規範，但新人不犯錯就不知重要性。吃一塹長一智，做得細致，只會讓你更專業。」

收獲工程師最高評價：「比咱們公司設計專業多了」

規範不束縛創意，規範是讓創意高效落地、大規模協作、長期維護的基礎設施。從今天開始，把每一個圖層命名、每一個組件封裝、每一張切圖輸出，都當作專業簽名來對待。