站在 GUI 設計師視角，完整拆解 App 從立項到切圖輸出的標準化工作流。公司流程雖異，核心邏輯互通。聲明：非規範，乃方法論；技術迭代快，靈活應用為要。篇幅較長，建議分次閱讀，養成好習慣不厭煩。

Part 1：項目立項 — 好記性不如爛筆頭

完善公司會召開啟動會：PM 講解原型（定位/需求/賣點/性質/模塊功能/邏輯跳轉）→ 多部門評估工時協調 → 項目啟動。

設計師準備動作：

• 項目歸檔命名：「項目名稱+版本序列」
• 分類文件夾管理（按文件類型劃分），避免頁面多時單層目錄混亂。
• 工具鏈：PS/AI（高版本推薦）、標注工具 PxCook（Win 下順手，自動讀色但不識別透明度）、切圖神器 Cutterman（PS 插件，需官方完整版 CC）/ Assistor PS（切圖標注雙修，標注適應中）。

Part 2：Photoshop 設計規範 — 尺寸基準與參考線

主流設計尺寸演進

1. 640×960 — iPhone 4 時代（擬物風）
2. 640×1136 — iPhone 5/5s/5c（扁平化轉型）
3. 750×1334 — iPhone 6（現役主流基準）：向下兼容 4/5，向上適配 6 Plus；切圖即 @2x，修改上下邊界即可雙向覆蓋。總監建議採用此尺寸。

空白文檔參考線建立（良好習慣）

• 上下參考線：依 iOS 系統狀態欄/導航欄/Tab Bar 固定高度設置。
• 左右參考線：習慣設 24px（內容邊距），經對比國內外 App 認為不寬不窄最適合。非絕對規範，視設計習慣調整。

Part 3：頁面標注 — 工程師還原的生命線

標注質量直接決定還原度。原則：不必每頁標注，但標注頁面必須覆蓋所有組件類型，保證工程師無障礙開發。 工具：PxCook。習慣：PS 與標注軟件雙開，靈活補充無法自動識別的屬性（如透明度）。

標注核心內容清單

• 文字：字號、顏色
• 導航欄：背景色、透明度
• 分割線：導航欄下/Tab Bar 上分割線色值
• 內容區背景色（全局白可口頭約定）
• Tab Bar 背景色
• 色值雙標：16 進制 + RGB 並列（視實現方式而定）

典型首頁標注實戰

關鍵標注點：

1. 全局左邊距 24px（全局數據建議標注出來）
2. 導航欄：背景色、標題字號/色
3. Banner：全屏寬圖僅標高度
4. 菜單圖標：可點擊區域 ≥ 視覺區域（透明區域補齊防模糊），標注點擊區尺寸、四邊距；間距交由工程師動態等距處理（適配不同屏）。
5. 模塊間距：習慣標注，減少溝通
6. 圖文混排單元：圖片寬高（後台調取需定區域）、四邊距、標題/說明文字單獨標注字號色
7. Tab Bar：圖標+文字作為整體 Icon 切圖（視工程師習慣溝通）

列表頁標注兩派做法

• 標行高 + 元素垂直居中
• 標元素上下間距 + 確定行高

元素定位基準：距屏幕最左距離（如圖標 24px、文字 100px）。

標注金句

「標注方法沒有固定標準，工程師習慣不同，方法即異。網上方法不一定適合你，**一定和搭檔勤溝通，方法是死的，人是活的。**」

全頁面標注總結：建立組件化標注庫，複用最大化，溝通成本最小化。