2026 年遊戲與 UI 素材交付避坑:9-patch PNG 拉伸區/內容區像素對齊與遠端 Mac M4 批量驗收清單

讀者:交付 Android .9.png 介面框、按鈕底板與遊戲 HUD 的設計師與前端。目標是可寫進合約的外圈 1px 規則、密度一致的整數對齊,以及建置前可自動擋錯的質檢腳本

結論:點九圖是「點陣版面 API」:上/左黑段為拉伸區,下/右為內距;對照表鎖透明邊、倍率與 sRGB。延伸:sRGB/P3 檢核Figma 像素對齊遠端批量質檢

痛點:

  1. 拉伸帶過窄:低密度下單一裝置像素拉伸會變雜訊。
  2. 內距混用安全區:下/右黑線才是子檢視內距,僅用參考線會頂到圓角。
  3. 外圈柔邊或未內嵌 sRGB:半透明灰偏移內距;描述檔不一則中性灰在 P3 與 sRGB 機上分裂。

目錄

規範解讀

最外圈 寬高各 1px中繼資料上/左純黑連續段=可拉伸欄列;下/右純黑段=子檢視內距邊界。環帶像素僅能為純黑或全透明,四角須透明以利分軸讀取。本體與環帶內緣至少相隔一個裝置像素,避免採樣碰裙邊。

外圈當韌體:禁柔邊、禁近似黑、避免旋轉加倍環帶厚度。

下表為設計與工程交付契約(一倍邏輯以 mdpi 為例)。

主題 1px 外圈規則 透明邊 縮放倍率(@1x/@2x/@3x) sRGB 匯出
拉伸(上+左) 純黑連續;每軸建議≥2px實段 非標記格全透明 1.0/1.5/2.0/3.0 整倍寬高 內嵌 sRGB IEC61966-2.1;P3 須簽核
內距(下+右) 與票證內距一致 四角透明 版面檢視器複核 dp 同 ICC、單一工具鏈
內部美術 距內緣≥1px 羽化不入裙邊 目標密度柵格化 sRGB 後無損重壓;清單記 ICC

批量匯出工作流

寫入 README/建置說明,讓設計到 Gradle 責任清楚,且徹夜質檢可在遠端 Mac mini M4重現。

  1. 凍結邏輯:dp 寬、圓角、可拉伸邊;每密度分桶一版母檔。
  2. 標記後合併:向量覆蓋貼齊網格畫拉伸/內距,再合併以利 diff。
  3. 目錄:統一 drawable-*dpi 或風味路徑,供 CI 萬用字元套用上限。
  4. 單鏈:衝刺內固定 sips 或 ImageMagick 參數,避免 Win/Mac 混出 ICC。
  5. 閘道:強制 Alpha;外圈 RGB 1–254 失敗;奇數邊禁則取模檢查。
  6. 清單:sha256、寬高、密度、ICC、預設版號。

常見偏色與鋸齒 FAQ

中性灰偏色?

預乘 Alpha、Gamma 與 ICC 組合問題;用直線 Alpha、內嵌 sRGB,並以 sRGB 中階機複測。

髮絲縫/鋸齒?

拉伸帶過薄或帶內有漸層;加寬實段、漸層移出拉伸區,每軸至少兩裝置像素實段較穩。

WebP 取代?

傳統 View 點九不可直替;Compose/向量另排期。

遠端 M4 批處理參數建議

徹夜腳本放遠端 Apple Silicon,釋放筆電;統一記憶體有利同開多張中型 PNG 做 Alpha 統計。

  • 並行:ImageMagick ≤ 實體核心減一
  • 防抖:末次寫入後 20–40 秒再檢。
  • 灰塵:外圈向內 2px 內 Alpha 1–254 預設失敗(除非豁免)。
  • 體積:xhdpi HUD 常 <180KB;重邊框多 ≤400KB(可調)。
  • ICC:內嵌 sRGB 或附核准之無描述檔豁免。

可引用:並行 ≤ 核心減一;防抖 20–40s;2px 禁半透明灰塵;HUD 級距;環帶僅純黑/全透明。

總結轉化

點九是點陣版面約束:外圈契約+腳本閘道,可消滅「設計機差不多、入門機露餡」的退回。驗收上遠端 Mac M4可對齊美術總監匯出環境。

站內方案與節點限期免登入瀏覽,再以使用說明鎖 SSH/VNC 與批次目錄,納入每晚建置。

選擇你的 Mac 節點與訪問方式

在遠端 Mac M4 上跑 9-patch 批量驗收

需要與本機一致的蘋果晶片環境執行質檢腳本時,可先瀏覽免登入公開頁:首頁技術見解

首頁 技術見解 立即租用 查看方案與節點 使用說明
9-patch PNG 交付 2026 遠端 Mac 批量驗收
立即租用