1. 項(xiàng)目概述為什么“切圖規(guī)范”是UI設(shè)計(jì)師的必修課在任何一個移動端或Web端產(chǎn)品從設(shè)計(jì)稿到最終上線的漫長鏈路中UI設(shè)計(jì)師與前端工程師之間的協(xié)作往往是最容易“扯皮”的環(huán)節(jié)。設(shè)計(jì)師精心打磨的像素級視覺效果到了開發(fā)手里還原度可能大打折扣而開發(fā)工程師則常常抱怨設(shè)計(jì)師給的資源“沒法用”不是尺寸不對就是格式混亂或者命名讓人一頭霧水。這個矛盾的根源很大程度上就出在“切圖”這個看似簡單、實(shí)則暗藏玄機(jī)的環(huán)節(jié)上。UI設(shè)計(jì)切圖規(guī)范正是為了解決這一核心協(xié)作痛點(diǎn)而生的“工程化語言”和“協(xié)作契約”。它絕不僅僅是把設(shè)計(jì)稿上的圖標(biāo)、按鈕“切出來”那么簡單。一套完善的切圖規(guī)范定義了從資源命名、尺寸規(guī)格、文件格式、輸出目錄到狀態(tài)管理的完整標(biāo)準(zhǔn)。它確保了設(shè)計(jì)師的視覺意圖能被無損、高效地傳遞給開發(fā)也保證了開發(fā)同學(xué)能快速、準(zhǔn)確地獲取所需資源避免在溝通和返工上浪費(fèi)寶貴時間。尤其是在如今多端適配iOS、Android、Web、小程序、多分辨率屏幕1x、2x、3x、4x成為標(biāo)配的背景下沒有一套清晰的切圖規(guī)范項(xiàng)目幾乎寸步難行。這不僅是提升個人專業(yè)度的體現(xiàn)更是保障團(tuán)隊(duì)協(xié)作順暢、項(xiàng)目質(zhì)量穩(wěn)定的基石。2. 切圖前的核心準(zhǔn)備工作從源文件到思維框架很多新手設(shè)計(jì)師拿到設(shè)計(jì)稿后會迫不及待地開始用切片工具“框選”這是最大的誤區(qū)。切圖不是體力活而是需要精密規(guī)劃的技術(shù)活。在動刀之前必須完成以下幾項(xiàng)關(guān)鍵的準(zhǔn)備工作這直接決定了后續(xù)所有工作的效率和準(zhǔn)確性。2.1 設(shè)計(jì)稿的“清潔度”檢查與圖層管理一個混亂的源文件是災(zāi)難的開始。在切圖前你必須像外科醫(yī)生術(shù)前準(zhǔn)備一樣對設(shè)計(jì)稿進(jìn)行徹底的“消毒”和整理。首先是圖層的規(guī)范化命名與分組。雜亂無章的圖層名稱如“圖層1 拷貝3”會讓后續(xù)的查找和導(dǎo)出變得極其困難。你需要為每一個可交互或獨(dú)立的視覺元素如按鈕、圖標(biāo)、卡片的圖層或圖層組進(jìn)行清晰的命名。命名應(yīng)遵循“模塊_組件_狀態(tài)”的邏輯例如btn_primary_normal按鈕_主要_常態(tài)、icon_search_active圖標(biāo)_搜索_激活態(tài)。同時將相關(guān)的圖層進(jìn)行編組并隱藏或刪除所有在最終界面上不可見的輔助線、參考圖層和廢棄設(shè)計(jì)稿保持畫布的整潔。其次是確保所有元素的矢量化與柵格化邊界清晰。對于圖標(biāo)、Logo等元素應(yīng)盡量使用矢量形狀圖層Shape Layer或智能對象以保證在任何縮放倍數(shù)下都能輸出清晰的圖像。對于必須使用位圖如圖片背景的地方要確保其原始分辨率足夠高避免放大后模糊。一個關(guān)鍵技巧是在Sketch或Figma中使用“設(shè)置為導(dǎo)出項(xiàng)”或“創(chuàng)建組件”功能來預(yù)先標(biāo)記需要導(dǎo)出的元素這能極大提升后續(xù)批量導(dǎo)出的效率。最后是建立統(tǒng)一的樣式庫和組件庫。在開始具體頁面設(shè)計(jì)前就應(yīng)該定義好項(xiàng)目的色彩體系、文字樣式字體、字號、行高、投影、圓角等基礎(chǔ)樣式并創(chuàng)建按鈕、輸入框、導(dǎo)航欄等高頻組件的SymbolSketch或ComponentFigma。這不僅保證了設(shè)計(jì)的一致性在切圖時你只需要切出這些基礎(chǔ)組件一次開發(fā)即可通過代碼復(fù)用無需為每一個按鈕單獨(dú)切圖這是現(xiàn)代UI設(shè)計(jì)工作流的核心效率來源。2.2 明確適配策略一稿適配多端的核心邏輯“這個圖要切幾倍”這是前端工程師最常問的問題。答案取決于你的產(chǎn)品需要適配哪些平臺和屏幕。iOS平臺通常需要 1x、2x、3x 三種倍率的切圖。在750*13342x為基準(zhǔn)的設(shè)計(jì)稿中1x的圖就是縮小到50%3x的圖就是放大到150%。但注意有些純矢量的圖標(biāo)如用代碼實(shí)現(xiàn)的SVG或系統(tǒng)提供的SF Symbols可以只提供一份由系統(tǒng)自動縮放。Android平臺的密度體系更為復(fù)雜有l(wèi)dpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi等。目前最主流的做法是以xxhdpi通常對應(yīng)1080p屏幕縮放倍率3x作為設(shè)計(jì)基準(zhǔn)然后按比例生成其他密度的資源。許多設(shè)計(jì)工具和插件可以自動完成這個縮放過程。Web端的適配則更靈活。對于需要保持清晰度的圖標(biāo)可以準(zhǔn)備多倍圖如icon.png和icon2x.png通過CSS的image-set或srcset屬性讓瀏覽器根據(jù)設(shè)備像素比選擇加載。而更多的背景、裝飾性圖形則可以使用CSS3屬性如漸變、陰影或SVG矢量格式來實(shí)現(xiàn)減少對位圖的依賴。關(guān)鍵決策點(diǎn)在于哪些資源需要切圖哪些可以用代碼實(shí)現(xiàn)一個簡單的判斷原則是帶有復(fù)雜漸變、紋理、特殊形狀或動態(tài)效果的圖形需要切圖而純色填充、簡單圓角矩形、單色線條圖標(biāo)應(yīng)優(yōu)先考慮用CSS或平臺原生控件繪制。與前端工程師提前溝通這個邊界能節(jié)省雙方大量時間。3. 切圖實(shí)操詳解工具、流程與核心參數(shù)設(shè)置準(zhǔn)備工作就緒后我們進(jìn)入具體的切圖操作環(huán)節(jié)。這里以目前主流的Figma/Sketch工具為例詳解每一步的操作要點(diǎn)和背后的原理。3.1 切片工具的使用與導(dǎo)出區(qū)域設(shè)定在Figma或Sketch中切片工具Slice或Export是你的手術(shù)刀。選中一個圖層或編組后右側(cè)面板會出現(xiàn)導(dǎo)出Export的設(shè)置區(qū)域。第一步正確框選導(dǎo)出范圍。對于圖標(biāo)通常需要緊貼圖標(biāo)內(nèi)容邊緣不留多余透明像素這有助于減少文件體積也方便開發(fā)進(jìn)行對齊。但有一個重要例外當(dāng)圖標(biāo)需要與文字或其他元素保持固定間距時有時需要保留一定的“安全內(nèi)邊距”Padding這時導(dǎo)出的切片范圍就需要包含這部分空白。最佳實(shí)踐是與開發(fā)約定一個統(tǒng)一的Padding規(guī)則例如所有圖標(biāo)都導(dǎo)出為實(shí)際尺寸外增加2px透明邊距的正方形畫布。第二步處理包含背景的組件。對于一個按鈕你可能需要導(dǎo)出整個按鈕的圖形也可能只需要導(dǎo)出按鈕上那個小小的“”圖標(biāo)。這里涉及到“合并導(dǎo)出”與“單獨(dú)導(dǎo)出”的選擇。如果按鈕的背景是簡單的圓角矩形完全可以用代碼實(shí)現(xiàn)那么你只需要導(dǎo)出中間的“”圖標(biāo)通常是SVG格式。如果按鈕有復(fù)雜的漸變、內(nèi)陰影或紋理那就需要將按鈕作為一個整體切片導(dǎo)出。在切片時務(wù)必隱藏掉不必要的文本圖層文字通常由代碼渲染只保留圖形部分。3.2 文件命名規(guī)范讓機(jī)器和人都能讀懂混亂的命名是協(xié)作的噩夢。一套好的命名規(guī)范應(yīng)該做到“見名知意”并且便于工具自動化處理?；窘Y(jié)構(gòu)建議采用組件_類型_狀態(tài)_描述倍數(shù).格式。組件 (Component):指明元素所屬的模塊或大類如nav導(dǎo)航欄、btn按鈕、icon圖標(biāo)、tab標(biāo)簽欄、bg背景。類型 (Type):在組件內(nèi)進(jìn)一步分類如btn_primary主要按鈕、btn_secondary次要按鈕。狀態(tài) (State):描述元素的交互狀態(tài)這是最容易被忽略但至關(guān)重要的部分。常見狀態(tài)有normal常態(tài)、pressed/active按下/激活、disabled禁用、selected選中。例如btn_primary_pressed。描述 (Description):可選用于進(jìn)一步區(qū)分同類型元素如icon_search、icon_close。倍數(shù) (Scale):如2x,3x。對于SVG或PDF等矢量格式通常不加倍數(shù)后綴。格式 (Format):如.png,.jpg,.svg。示例btn_primary_normal2x.png主要按鈕-常態(tài)-2倍圖icon_back_disabled3x.png返回圖標(biāo)-禁用態(tài)-3倍圖bg_home_header.jpg首頁頭部背景圖必須遵守的規(guī)則全小寫避免因系統(tǒng)大小寫敏感問題導(dǎo)致資源找不到。使用下劃線_連接不要使用空格、橫線-在部分腳本中橫線可能有特殊含義下劃線是兼容性最好的分隔符。語義化優(yōu)先名稱應(yīng)準(zhǔn)確描述內(nèi)容而不是“image1”、“pic2”這樣的無意義字符串。3.3 輸出格式選擇PNG、JPG、SVG與WebP的適用場景選擇正確的格式能在視覺效果和性能之間取得最佳平衡。PNG支持透明通道Alpha通道的位圖格式首選。適用于圖標(biāo)、Logo、帶透明背景的UI組件。導(dǎo)出時務(wù)必注意顏色模式選擇RGB而非CMYK用于印刷。位深度選擇“24位 PNGRGB”加上“8位 Alpha通道”即通常工具中的“PNG-24”選項(xiàng)以確保色彩和透明度質(zhì)量。優(yōu)化勾選“導(dǎo)出為Web所用格式”或類似選項(xiàng)工具會進(jìn)行無損壓縮大幅減小文件體積。對于簡單圖形也可以考慮PNG-8索引256色體積更小但需檢查色彩過渡是否出現(xiàn)斷層。JPG/JPEG適用于色彩豐富、沒有透明需求的照片、漸變背景或復(fù)雜紋理。它是一種有損壓縮格式可以通過調(diào)整壓縮比質(zhì)量通常60%-80%即可在畫質(zhì)和體積間權(quán)衡。絕對不要用它來保存帶純色邊緣或文字的圖形會產(chǎn)生難看的噪邊。SVG矢量圖形的王者。適用于圖標(biāo)、簡單插畫。它由數(shù)學(xué)公式定義無限縮放不模糊且文件體積通常極小。在Web和現(xiàn)代移動開發(fā)中SVG的使用越來越廣泛。導(dǎo)出SVG時要注意在設(shè)計(jì)工具中確保圖形是真正的矢量路徑而不是柵格化后的位圖。導(dǎo)出前執(zhí)行“輪廓化描邊”Convert Strokes to Outlines避免在某些環(huán)境下描邊顯示異常。清理不必要的元數(shù)據(jù)使用工具或在線服務(wù)如SVGO進(jìn)行優(yōu)化刪除隱藏圖層、冗余節(jié)點(diǎn)。WebP谷歌推出的現(xiàn)代圖像格式在同等質(zhì)量下體積比PNG和JPG小很多同時支持透明度和動畫。它是Web性能優(yōu)化的利器。雖然部分老舊瀏覽器不支持但可以通過picture標(biāo)簽提供兼容方案。在設(shè)計(jì)工具中直接導(dǎo)出WebP可能選項(xiàng)有限通常由前端通過構(gòu)建工具如Webpack進(jìn)行自動轉(zhuǎn)換。格式選擇決策流需要透明嗎需要 - PNG 或 WebP。是圖標(biāo)或簡單圖形嗎是 - 優(yōu)先考慮 SVG。是照片或復(fù)雜圖像嗎是 - JPG 或 WebP。追求最佳性能和兼容性提供 PNG/JPG 后備主推 WebP。4. 多平臺與多狀態(tài)資源的特殊處理規(guī)范現(xiàn)代UI設(shè)計(jì)充滿動態(tài)交互一個按鈕有常態(tài)、按壓、禁用等多種狀態(tài)一個應(yīng)用需要適配iOS、Android、Web等多個平臺。如何高效、清晰地管理這些資源是規(guī)范的高級課題。4.1 交互狀態(tài)切圖不僅僅是換顏色一個按鈕的“按壓”狀態(tài)可能不僅僅是顏色變深還可能伴有輕微的位移、陰影變化或微妙的紋理改變。切圖時必須為每一種明確定義的交互狀態(tài)輸出對應(yīng)的資源。常見狀態(tài)包括Normal (默認(rèn)狀態(tài)):元素的初始外觀。Pressed / Active (按壓/激活狀態(tài)):用戶點(diǎn)擊或按住時的反饋。Disabled (禁用狀態(tài)):元素不可交互時的外觀通常降低透明度或變?yōu)榛疑?。Selected (選中狀態(tài)):用于標(biāo)簽欄、單選按鈕等表示已選中的情況。Hover (懸停狀態(tài)):主要用于Web端鼠標(biāo)懸停時的效果。Focus (聚焦?fàn)顟B(tài)):獲取鍵盤焦點(diǎn)時的狀態(tài)對于可訪問性至關(guān)重要。實(shí)操要點(diǎn)在設(shè)計(jì)稿中最好使用組件變體Figma Variants或符號覆蓋Sketch Overrides來管理這些狀態(tài)。切圖時通過切換組件的狀態(tài)分別對每個狀態(tài)進(jìn)行切片和導(dǎo)出。命名上必須清晰體現(xiàn)狀態(tài)如btn_submit_normal.png和btn_submit_pressed.png。千萬不要只提供一個狀態(tài)圖然后告訴開發(fā)“按下時把顏色值改成#XXXXXX”對于帶有復(fù)雜背景、邊框或內(nèi)部圖形的按鈕這種做法無法實(shí)現(xiàn)設(shè)計(jì)效果。4.2 多平臺適配iOS、Android與Web的差異化輸出不同平臺有其特定的設(shè)計(jì)語言和技術(shù)實(shí)現(xiàn)方式切圖也需要“因地制宜”。對于iOS (iPhone/iPad):格式偏好PNG是絕對主流對于App Icon等也需要提供特定尺寸的PNG。圖標(biāo)資源通常放入.xcassets素材目錄中系統(tǒng)會自動管理1x, 2x, 3x。命名規(guī)范除了通用的語義化命名有時需要遵循蘋果的特定命名例如啟動圖LaunchScreen.png應(yīng)用圖標(biāo)AppIcon.png實(shí)際上一組不同尺寸的圖。切片注意iOS的導(dǎo)航欄、狀態(tài)欄、標(biāo)簽欄圖標(biāo)有標(biāo)準(zhǔn)的尺寸要求如44pt點(diǎn)擊區(qū)域切圖時需要遵守。對于Android:資源目錄結(jié)構(gòu)資源按密度分目錄存放drawable-mdpi/,drawable-hdpi/,drawable-xhdpi/,drawable-xxhdpi/,drawable-xxxhdpi/。你需要將不同倍率的圖放入對應(yīng)文件夾。格式與命名PNG同樣首選也支持WebP。命名規(guī)則與通用規(guī)范一致但不能使用大寫字母不能使用橫線-橫線在Android資源命名中用于分隔資源類型和配置限定符容易沖突堅(jiān)持使用小寫字母和下劃線。.9.png 點(diǎn)九圖這是Android獨(dú)有的伸縮位圖格式用于聊天氣泡、按鈕背景等需要水平和垂直拉伸的區(qū)域。它通過圖片四條邊上的1像素黑線來定義可拉伸區(qū)域和內(nèi)容填充區(qū)域。雖然現(xiàn)在更多使用矢量圖或代碼實(shí)現(xiàn)但在處理復(fù)雜背景拉伸時它仍是重要工具。導(dǎo)出時需要專門工具生成。對于Web:靈活性最高格式上PNG、JPG、SVG、WebP均可。命名規(guī)范主要服務(wù)于前端工程目錄結(jié)構(gòu)。雪碧圖 (CSS Sprite) 的考量為了減少HTTP請求可以將多個小圖標(biāo)合并到一張大圖上通過CSSbackground-position來定位。雖然HTTP/2普及后其必要性降低但在某些場景下仍有價值。如果需要提供雪碧圖除了提供合并后的大圖還必須提供一份詳細(xì)的坐標(biāo)文檔通常由自動化工具生成。響應(yīng)式圖像對于重要圖片可能需要提供不同尺寸非僅不同倍率的版本以適應(yīng)從手機(jī)到桌面的不同視口。這通常通過img srcset...或picture標(biāo)簽實(shí)現(xiàn)設(shè)計(jì)師需要提供至少兩到三個不同寬度的圖片版本。4.3 可拉伸元素的處理.9圖與矢量方案的抉擇前面提到的.9.png是Android處理可拉伸背景的傳統(tǒng)方案但它有幾個缺點(diǎn)制作稍復(fù)雜多倍圖需要分別制作且不適用于非矩形拉伸?，F(xiàn)代更優(yōu)的解決方案是使用矢量圖形。SVG (Web):在Web端SVG可以完美實(shí)現(xiàn)任意形狀的縮放且體積小。矢量繪圖指令 (iOS/Android):在移動端可以使用平臺提供的矢量繪圖API。例如在iOS中你可以用代碼描述一個帶圓角、漸變和陰影的矩形在Android中可以使用XML定義的shape或矢量圖vector。作為設(shè)計(jì)師你的職責(zé)是向開發(fā)提供精確的圖形參數(shù)如圓角半徑、漸變色標(biāo)和位置、陰影的X/Y偏移和模糊度、邊框粗細(xì)和顏色等。這些參數(shù)應(yīng)詳細(xì)記錄在設(shè)計(jì)文檔或標(biāo)注工具中。決策路徑如果背景極其簡單純色圓角矩形直接給參數(shù)讓代碼實(shí)現(xiàn)。如果背景復(fù)雜但形狀規(guī)則帶線性漸變和陰影的圓角矩形優(yōu)先提供參數(shù)代碼實(shí)現(xiàn)性能更好。如果背景是復(fù)雜的、不規(guī)則的圖案紋理如布紋、水彩邊緣那么使用.9.png或直接輸出一張足夠大的位圖是更現(xiàn)實(shí)的選擇。5. 標(biāo)注與交付確保設(shè)計(jì)意圖的精準(zhǔn)傳遞切圖文件本身只是原材料沒有準(zhǔn)確的“說明書”開發(fā)仍然可能用錯。標(biāo)注Specification就是這份說明書它告訴開發(fā)每個元素的尺寸、間距、顏色、字體和狀態(tài)變化規(guī)則。5.1 設(shè)計(jì)標(biāo)注的核心內(nèi)容不止于尺寸和色值傳統(tǒng)的標(biāo)注工具如藍(lán)湖、Zeplin、Figma自帶標(biāo)注可以自動生成很多信息但設(shè)計(jì)師需要有意識地檢查和補(bǔ)充關(guān)鍵內(nèi)容尺寸與間距元素自身的寬高以及元素與元素之間、元素與屏幕邊緣之間的間距。特別注意對齊方式左對齊、居中對齊、右對齊。顏色提供HEX十六進(jìn)制色值對于透明度Alpha提供RGBA或HSLA值。標(biāo)注出所有用到的顏色并最好附上全局色彩樣式表。文字樣式字體、字重Regular, Bold等、字號、行高、字間距、對齊方式。行高Line Height尤其重要它直接影響多行文本的排版效果。圓角與邊框圓角半徑是統(tǒng)一值還是單獨(dú)設(shè)置邊框的粗細(xì)、顏色和類型實(shí)線、虛線。陰影與模糊陰影的X/Y偏移、模糊半徑、擴(kuò)散范圍和顏色含透明度。對于背景模糊毛玻璃效果需要標(biāo)注模糊度。交互狀態(tài)說明這是標(biāo)注中最容易遺漏的部分。必須在標(biāo)注中清晰地展示不同狀態(tài)如按下、禁用下上述所有屬性顏色、陰影等發(fā)生了哪些具體變化?？梢杂庙撁骀溄踊驙顟B(tài)切換的方式呈現(xiàn)。5.2 交付物清單與目錄結(jié)構(gòu)規(guī)范將一堆散亂的文件扔給開發(fā)是不負(fù)責(zé)任的行為。專業(yè)的交付應(yīng)該是一個結(jié)構(gòu)清晰、內(nèi)容完整的“資源包”。標(biāo)準(zhǔn)的交付物應(yīng)包含設(shè)計(jì)源文件最新版的Sketch/Figma/XD文件鏈接或存檔。切圖資源文件夾這是核心交付物。目錄結(jié)構(gòu)示例assets/ ├── icons/ # 圖標(biāo)類資源 │ ├── common/ # 通用圖標(biāo) │ │ ├── ic_add2x.png │ │ └── ic_add3x.png │ └── tab/ # 標(biāo)簽欄圖標(biāo) │ ├── ic_home_normal2x.png │ └── ic_home_selected2x.png ├── images/ # 圖片類資源 │ └── bg_login.jpg ├── components/ # 組件切片如按鈕背景 │ └── btn_large_normal2x.png └── splash/ # 啟動圖等特殊資源 └── launch2x.png可以按平臺再分一級目錄如assets/ios/,assets/android/。設(shè)計(jì)標(biāo)注鏈接/文檔提供藍(lán)湖、Zeplin的在線鏈接或?qū)С龅腜DF標(biāo)注文檔。確保開發(fā)團(tuán)隊(duì)所有成員都有訪問權(quán)限。設(shè)計(jì)規(guī)范文檔 (可選但推薦):一個獨(dú)立的PDF或Notion頁面系統(tǒng)性地闡述項(xiàng)目的設(shè)計(jì)語言包括色彩體系、字體階梯、間距系統(tǒng)、組件庫使用說明、動效原則等。這對于大型項(xiàng)目或長期迭代至關(guān)重要。更新日志 (Change Log):如果本次交付是版本更新應(yīng)附帶一個簡單的文本說明列出新增、修改和刪除的資源清單幫助開發(fā)快速定位變更。交付流程建議使用協(xié)同工具如Figma、藍(lán)湖進(jìn)行實(shí)時交付和更新是最佳實(shí)踐。如果必須發(fā)送文件包請使用壓縮包并確保包內(nèi)結(jié)構(gòu)清晰。在交付時通過團(tuán)隊(duì)協(xié)作工具如Slack、釘釘、飛書明確告知開發(fā)同學(xué)并附上關(guān)鍵變更點(diǎn)的簡要說明。6. 版本迭代與協(xié)作流程中的規(guī)范維護(hù)設(shè)計(jì)不是一錘子買賣產(chǎn)品會持續(xù)迭代。如何在高頻的修改中保持切圖規(guī)范的效力避免資源混亂是更大的挑戰(zhàn)。6.1 資源更新與刪除的規(guī)范流程“只增不改”是理想狀態(tài)但現(xiàn)實(shí)是資源經(jīng)常需要更新甚至刪除。更新資源當(dāng)某個圖標(biāo)或圖片需要修改時務(wù)必保持文件名不變只更新文件內(nèi)容。這樣開發(fā)同學(xué)只需要替換舊文件而不需要修改代碼中的引用路徑。如果視覺變化巨大需要更改命名則應(yīng)視為“新增廢棄”流程。刪除資源絕對不要直接從共享文件夾或協(xié)同工具中悄無聲息地刪除一個舊資源。正確的做法是在設(shè)計(jì)標(biāo)注中將該元素標(biāo)記為“已廢棄”或“待刪除”。與前端負(fù)責(zé)人溝通確認(rèn)該資源在代碼中已無引用。雙方約定一個清理周期如下個版本迭代然后在周期內(nèi)由開發(fā)移除代碼引用設(shè)計(jì)師再移除設(shè)計(jì)稿和資源文件。在交付清單的更新日志中明確記錄“刪除icon_old_feature.png”。新增資源嚴(yán)格按照既有的命名規(guī)范和目錄結(jié)構(gòu)存放新文件。在更新日志中記錄新增項(xiàng)。6.2 使用協(xié)同工具固化規(guī)范現(xiàn)代設(shè)計(jì)協(xié)作工具Figma, Sketch with Abstract等本身就能成為規(guī)范的載體。組件庫與樣式庫將顏色、文本樣式、組件全部建立在團(tuán)隊(duì)的共享庫中。當(dāng)庫更新時所有使用該庫的設(shè)計(jì)文件都會收到更新通知。這從源頭上保證了設(shè)計(jì)元素的一致性也間接保證了切出資源的規(guī)范性。自動標(biāo)注與切圖藍(lán)湖、Zeplin等插件可以自動從設(shè)計(jì)稿生成標(biāo)注和切圖并保持與源文件的同步。當(dāng)設(shè)計(jì)師更新主組件并發(fā)布庫后標(biāo)注和切圖資源可以一鍵更新極大地減少了手動操作的錯誤和溝通成本。設(shè)計(jì)評審流程利用工具的評論和審批功能建立設(shè)計(jì)評審流程。在評審環(huán)節(jié)就可以檢查切圖規(guī)范、標(biāo)注完整性將問題前置而不是等到交付開發(fā)時才暴露。6.3 建立團(tuán)隊(duì)共識與文檔規(guī)范的生命力在于執(zhí)行。再好的規(guī)范如果只有你一個人知道也形同虛設(shè)。團(tuán)隊(duì)內(nèi)宣導(dǎo)在項(xiàng)目啟動初期召集所有相關(guān)的UI/UX設(shè)計(jì)師和前端開發(fā)共同評審并確認(rèn)這份切圖規(guī)范。讓大家理解每一條規(guī)則背后的原因例如為什么命名要用下劃線而不是橫線這比強(qiáng)制要求更有效。創(chuàng)建活文檔將最終的規(guī)范整理成一份團(tuán)隊(duì)共享的文檔如Confluence、Notion、語雀頁面。這份文檔應(yīng)該包含所有細(xì)節(jié)命名公約、目錄結(jié)構(gòu)、格式標(biāo)準(zhǔn)、標(biāo)注要求、交付流程、工具設(shè)置指南等。并且隨著項(xiàng)目演進(jìn)和技術(shù)變化及時更新這份文檔。設(shè)立質(zhì)量檢查點(diǎn)可以在設(shè)計(jì)評審的checklist中加入“切圖規(guī)范符合性”這一項(xiàng)。或者在將設(shè)計(jì)稿交付開發(fā)前由資深設(shè)計(jì)師或設(shè)計(jì)負(fù)責(zé)人進(jìn)行一次快速的規(guī)范符合性檢查。從我過去在多個跨端項(xiàng)目中協(xié)作的經(jīng)驗(yàn)來看前期在規(guī)范制定和溝通上多花一天時間往往能在后期節(jié)省掉數(shù)十天因資源錯亂、溝通返工所浪費(fèi)的時間。切圖規(guī)范本質(zhì)上是一種預(yù)防性的工程思維它把設(shè)計(jì)師從重復(fù)、低效的“切圖民工”角色中解放出來讓其更專注于創(chuàng)造性的設(shè)計(jì)工作同時也為開發(fā)同學(xué)構(gòu)建了一條清晰、可靠的“生產(chǎn)線”。當(dāng)團(tuán)隊(duì)每個人都習(xí)慣并信任這套規(guī)范時整個產(chǎn)品研發(fā)的流水線就會變得順暢而高效。