1. 项目概述为什么UI设计切图规范是产品落地的“生命线”干了这么多年UI设计我见过太多因为切图不规范而引发的“血案”。前端工程师在深夜的办公室里对着模糊的图标和错位的间距抓狂测试同学因为一个按钮在不同手机上显示异常而反复提交Bug产品上线时间一拖再拖。所有这些问题的根源往往都指向同一个环节切图交付。UI设计切图规范远不止是把设计稿上的元素“切出来”那么简单它是一套连接设计与开发的精密协议是确保视觉设计能被100%还原为线上产品的“工程图纸”。没有这套规范再惊艳的设计都只是空中楼阁。简单来说UI设计切图规范定义了设计师如何将视觉稿通常是Sketch、Figma或Adobe XD文件中的元素转化为前端工程师可以直接使用的图片资源如PNG、SVG、WebP等并附带所有必要的尺寸、命名、格式和状态说明。它解决的核心问题是“信息无损传递”确保设计师的意图不被误解开发能高效、准确地实现。无论是刚入行的UI新人还是负责复杂中后台系统的资深设计师掌握并制定一套行之有效的切图规范都是职业道路上必须点亮的技能树。这不仅是专业性的体现更是提升团队协作效率、降低沟通成本、保障产品最终质量的关键。2. 切图规范的核心价值与设计协作流程定位2.1 从“各说各话”到“同频共振”规范的核心价值在团队协作中切图规范的价值体现在多个维度。首先它极大地提升了开发效率。想象一下如果前端工程师拿到的切图文件命名混乱如“新建图层1.png”、“未标题-22x.jpg”他们需要花费大量时间去猜测、询问每个图片的用途甚至可能用错资源。一套清晰的命名规范如btn_primary_normal2x.png能让开发者一目了然直接调用。其次规范保障了设计还原度。设计师精心调整的圆角、投影、渐变在切图时如果格式或输出设置不当就可能出现锯齿、毛边或颜色失真。规范明确了何种效果该用何种格式输出如纯色图标用SVG复杂渐变用PNG-24以及如何为不同屏幕密度1x, 2x, 3x提供适配资源从而在各类设备上保持视觉一致性。最后它降低了维护成本。产品需要迭代图标和界面元素会更新。规范的目录结构和命名逻辑使得替换或新增资源变得有条不紊方便版本管理和后续的视觉更新。对于动效规范还会定义Lottie JSON文件的输出标准确保动画效果能精准落地。2.2 在设计-开发工作流中的关键节点切图规范并非孤立存在它嵌入在整个产品设计到开发的工作流中是一个承上启下的关键节点。设计定稿阶段视觉设计完成后交互与视觉评审通过。此时设计师需要开始以“工程师思维”审视自己的稿件提前考虑哪些元素需要切图哪些可以用代码实现如纯色背景、简单边框。标注与切图阶段这是规范执行的核心环节。设计师使用蓝湖、Zeplin、Figma Dev Mode等协作工具或手动进行标注尺寸、间距、颜色、字体并开始根据规范切出所需资源。这个阶段要求设计师对前端实现有一定了解知道哪些属性是“样式”应交由CSS代码实现哪些是“资源”必须切图。交付与沟通阶段将切好的资源包通常是一个按模块分类的文件夹连同标注文件一起交付给前端。规范的交付物应包括资源文件、一份简明的规范说明文档README有时还包括动效参数文档。开发与走查阶段前端工程师根据规范实现界面。设计师在此阶段进行UI走查核对实现效果与设计稿的一致性而规范的统一使得走查问题更易于定位和描述例如“btn_submit的禁用状态颜色与规范文档中的色值#CCCCCC不符”。3. 切图规范详析从命名到输出的完整体系一套完整的切图规范通常包含以下几个核心组成部分命名规范、尺寸与倍率规范、文件格式规范、输出设置规范以及组织目录规范。3.1 命名规范让机器和人都能读懂混乱的命名是万恶之源。好的命名应遵循“可读性、一致性、语义化”原则。通用命名结构组件_模块_状态_描述倍数.格式组件 (Component)指明元素类型如icon图标、btn按钮、bg背景、tab标签栏、avatar头像。模块 (Module)指明所属功能模块或页面如home首页、profile个人资料、settings设置。对于全局通用组件此项可省略。状态 (State)指明元素的交互状态如normal默认、pressed按下、disabled禁用、selected选中。描述 (Description)对元素功能的简要描述如close关闭、search搜索、primary主要。倍数 (2x, 3x)指资源针对的设备屏幕像素密度倍数。这是为了适配Retina等高分辨率屏幕。格式 (.png, .svg, .jpg)文件格式。实操示例首页的搜索图标正常状态icon_home_search_normal2x.png全局通用主要按钮禁用状态btn_primary_disabled3x.png个人资料页的背景图bg_profile_header2x.jpg注意事项使用英文小写字母、数字和下划线禁止使用中文、空格和特殊字符。保持缩写的一致性。如果使用btn就全程使用不要混用button。对于非常用词团队内部应维护一份缩写词汇表。3.2 尺寸、倍率与适配规范3.2.1 基础尺寸与导出倍率设计师通常在1x基准分辨率下进行设计但需要导出多种倍率的切图以适应不同设备。1x适用于普通DPI屏幕如早期非Retina Mac。2x适用于大多数Retina屏幕如iPhone 8 Plus、主流安卓机。3x适用于更高分辨率的设备如iPhone 12/13/14 Pro Max、部分高端安卓机。导出原则以设计稿中元素的原始尺寸1x尺寸为基准导出2x和3x的资源。例如一个在1x设计稿中为44x44pt的按钮应导出为88x88px2x和132x132px3x的图片。许多设计工具如Sketch、Figma可以自动生成多倍图。3.2.2 可拉伸区域与.9图对于需要水平或垂直拉伸而不失真的元素如聊天气泡、按钮背景需要使用“可拉伸区域”或Android特有的.9.png图。可拉伸区域 (Slicing)在Sketch或Figma中可以为图层或切片设置“可拉伸区域”通常通过设置四条参考线定义图片中哪些部分在拉伸时保持不变如圆角哪些部分可以重复拉伸如平铺的纹理。.9.png一种Android特有的PNG格式通过在图片四周添加一个像素宽度的黑线来定义可拉伸区域和内容填充区域。虽然现在更多使用XML drawable或矢量图但在处理复杂渐变背景时.9图仍有其价值。注意与前端工程师明确沟通拉伸策略。有时一个简单的纯色带圆角的按钮背景完全可以用CSS代码实现border-radius无需切图。这能减少HTTP请求提升性能。3.3 文件格式选择PNG、JPG、SVG与WebP不同的视觉内容应选择最合适的文件格式以平衡质量、体积和功能。格式特点适用场景不适用场景导出设置建议PNG支持透明通道无损压缩颜色表现好。图标、Logo、需要透明背景的UI元素、简单图形。大型照片或复杂渐变文件体积会很大。PNG-24保证质量。对于纯色小图标可使用PNG-8减少体积。导出时检查“修剪画布”选项。JPG/JPEG有损压缩文件体积小不支持透明。大尺寸照片、复杂渐变背景图、不需要透明度的位图内容。图标、Logo、需要透明背景的任何元素。根据质量要求调整压缩比通常70%-90%在文件大小和视觉质量间取得平衡。SVG矢量格式无限缩放不失真文件小可用CSS控制样式。纯色或简单渐变的图标、Logo、数据可视化图形。包含复杂滤镜、位图纹理或过多细节的图形。导出前将文字轮廓化创建轮廓检查并简化路径节点以减小文件体积。WebP现代格式同时支持有损和无损压缩体积比PNG/JPG更小。可替代PNG和JPG的大部分场景特别是Web端。需要兼容非常老旧浏览器如IE11的场景。使用设计工具插件或在线工具将PNG/JPG转换为WebP。注意提供兼容性回退方案如.webp和.png两套图。实操心得对于移动端App图标类资源优先使用SVG通过Android的Vector Drawable或iOS的PDF矢量图方式集成这能完美适配各种屏幕密度且便于统一修改颜色。对于无法使用矢量的复杂图形再使用多倍PNG图。对于Web端在兼容性允许的情况下积极推广WebP格式能显著提升页面加载速度。3.4 输出设置与资源优化切片与画板管理在设计稿中应为每一个需要导出的元素创建单独的切片Slice或画板Artboard。切片范围要精确只包含元素本身和必要的透明边距避免切进多余空白。给每个切片按命名规范设置好名字这样导出的文件名会自动生成。压缩与优化导出的图片资源在上传至代码仓库或CDN前应进行压缩优化。无损压缩工具对于PNG可以使用TinyPNG、ImageOptim等工具进行无损压缩能大幅减小文件体积而不损失画质。有损压缩权衡对于JPG可以在导出时或压缩时调整质量参数。一个常见的技巧是对于缩略图等小图可以适当降低质量如降至70%人眼几乎无法察觉差异但体积减少显著。雪碧图 (CSS Sprite)对于大量小图标如状态图标、功能图标可以考虑合成雪碧图。这能将多个HTTP请求合并为一个减少网络开销。但雪碧图的维护和更新成本较高在现代HTTP/2和缓存策略下其优势已不如从前需与前端团队协商使用。4. 不同平台与场景的规范适配要点4.1 iOS与Android平台的差异处理虽然设计稿通常是一份但iOS和Android平台在实现细节上存在差异切图时需要特别注意。iOS (UIKit / SwiftUI)尺寸单位设计时使用点Points, pt导出资源时对应像素Pixels, px。1x下1pt1px2x下1pt2px3x下1pt3px。图标与图片主要使用PNG格式。App图标需要提供一整套尺寸从20x20pt到1024x1024pt。对于可拉伸控件使用UIImage的resizableImage(withCapInsets:)方法或Asset Catalog中的Slicing功能。矢量资源支持PDF矢量图在Asset Catalog中设置为“Single Scale”并勾选“Preserve Vector Data”也支持通过代码绘制SwiftUI的Shape。Android尺寸单位设计时使用密度无关像素Density-independent Pixels, dp导出资源时对应像素px。换算关系px dp * (dpi / 160)。通常需要为mdpi (1x)、hdpi (1.5x)、xhdpi (2x)、xxhdpi (3x)、xxxhdpi (4x) 提供资源。资源目录图片资源需放入对应的res/drawable-*dpi目录下。同名资源会根据设备dpi自动选择。矢量资源优先使用Vector DrawableXML格式的矢量图它比多套PNG更节省空间和内存。对于复杂图形或必须使用位图的情况才提供多倍图。.9.png如前所述用于定义可拉伸背景。协作要点交付时最好将iOS和Android的资源分文件夹存放如/assets/ios/,/assets/android/并在规范文档中明确说明平台差异。设计师应了解两端的界面指南如Material Design和Human Interface Guidelines在设计时兼顾两者减少平台特有的切图工作量。4.2 响应式Web与移动端H5的切图策略对于Web和H5页面屏幕尺寸和分辨率更加碎片化切图策略需要更灵活。响应式图片 (Responsive Images)使用HTML的srcset和sizes属性让浏览器根据屏幕条件如视口宽度、设备像素比自动选择最合适的图片资源。例如为一张头图提供400px、800px、1200px三种宽度的版本。切图时可以按几个典型的断点Breakpoints来导出不同尺寸的图片而不是固定导出2x, 3x。图标字体 (Icon Font) 与 SVG Sprite对于纯色图标系统将图标制作成图标字体如FontAwesome或SVG Sprite是更优选择。它们具有矢量、颜色可调通过CSS、易于管理等优点。切图时需要将每个图标导出为单独的SVG文件然后通过工具如IcoMoon、fontello打包成字体或合成SVG Sprite。H5活动页的特殊性活动页生命周期短但对加载速度和视觉效果要求高。常采用“视觉稿切大图”“代码实现动效”的方式。对于复杂的背景或装饰性元素有时会整体切出一张长图合成图通过CSS控制显示区域。但这不利于适配和性能需谨慎使用。大量使用CSS3来实现渐变、阴影、圆角减少不必要的图片请求。4.3 动效资源的交付规范Lottie现代UI中动效Animation已成为重要组成部分。交付动效资源时Lottie是目前最流行的方案。Lottie工作流设计阶段设计师在After Effects (AE) 中制作动画。必须使用Lottie支持的AE特性可查阅Lottie官方文档的支持列表。避免使用复杂的粒子效果、某些混合模式或表达式。导出阶段安装Bodymovin插件将AE合成Composition导出为JSON文件。交付与集成将JSON文件交付给开发。iOS/Android/Web均有对应的Lottie库来解析和渲染此JSON。交付规范要点文件命名与静态图片类似如animation_loading.json。资源内嵌动画中使用的图片资源如果有需要单独导出并与JSON文件放在同一目录或通过配置指定远程URL。性能与大小优化AE工程减少不必要的图层和关键帧。导出的JSON文件应尽可能小通常几百KB以内。复杂的动画可以考虑拆分成多个JSON文件按需加载。提供参数文档告知开发人员动画的默认循环方式loop、播放速度speed、是否可以交互控制如播放/暂停等。5. 工具链、交付物与团队协作实践5.1 设计工具与协作平台高效规范的执行离不开工具的支持。Figma / Sketch / Adobe XD主流设计工具。它们都内置了强大的切图和标注功能。Figma其“Dev Mode”模式允许开发者直接查看尺寸、颜色、代码片段并一键导出所需资源支持多格式、多倍率是目前协作体验最好的工具之一。Sketch需配合Sketch Cloud或第三方插件如Sketch Measure进行标注和交付。Adobe XD通过Adobe Creative Cloud分享链接开发者可以获取标注和资源。蓝湖 / Zeplin / Avocode专门的协作平台。设计师上传设计稿后平台会自动生成标注、样式代码CSS并提供便捷的切图下载功能。它们作为“设计-开发”之间的桥梁能强制执行一定的规范如预设的导出倍率。插件生态善用插件能提升效率。例如用于批量重命名切片的插件用于自动生成多倍图的插件用于优化SVG的插件等。实操心得团队应统一设计工具和协作平台。Figma因其卓越的实时协作和交付能力正成为越来越多团队的首选。无论用哪种工具关键是建立团队内统一的文件图层结构、组件Component/Symbol命名规范这能从源头上让切图更规范。5.2 标准交付物清单与版本管理一次完整的UI资源交付不应只是一个压缩包。标准的交付物应包括设计源文件最新的.fig、.sketch或.xd文件。标注与切图链接/文件如果使用蓝湖/Zepin提供共享链接。如果手动交付提供清晰的标注图标明所有间距、尺寸、字体、色值和切图资源文件夹。切图资源包结构清晰的文件夹例如按平台(ios/,android/,web/)或模块(home/,user/,common/)分类。文件夹内资源严格按命名规范存放。规范文档 (README.md 或 CHANGELOG.md)项目名称与版本号。设计稿使用的字体列表及下载链接。使用的色板Color Palette变量名和色值。图标库如果有的说明。动效Lottie文件的说明和使用注意事项。本次更新的主要内容和修改点。版本控制设计资源也应纳入版本管理如使用Git或设计工具自带的历史版本功能。每次交付时注明版本号如v1.2.0并与产品开发版本对应便于追溯和回滚。5.3 建立团队规范文档与持续维护切图规范不应是设计师电脑里的几行笔记而应是团队共享、持续维护的活文档。如何建立共识先行召集设计师、前端、客户端开发共同讨论制定初版规范。开发者的输入至关重要他们最清楚何种交付方式最高效。文档化使用Confluence、Notion、语雀或一个共享的Markdown文件将规范详细记录下来。包含所有命名规则、格式要求、工具设置、交付流程等。创建资源模板在设计工具中创建包含标准颜色样式、文本样式、常用组件库的文件模板。在模板中预设好常用的切片导出设置。培训与检查对新成员进行规范培训。在团队内部可以定期进行设计走查时也将切图规范性作为检查项之一。持续维护随着技术发展如新图片格式WebP的普及、工具更新如Figma新功能、团队扩张规范需要定期评审和更新。设立一个规范的“负责人”或轮值维护者。当出现因规范不清晰导致的协作问题时及时复盘并将解决方案补充到规范文档中。6. 常见问题、避坑指南与进阶技巧6.1 高频问题排查清单在实际协作中以下问题屡见不鲜问题现象可能原因解决方案图片在手机上模糊1. 只提供了1x图在Retina屏上被放大。2. 导出格式为JPG且压缩比过高。3. SVG图在导出时包含了位图效果。1. 确保提供2x和3x图。2. 检查并提高JPG导出质量或换用PNG。3. 简化SVG使用纯矢量路径。图标边缘有白边或锯齿1. 切图时背景不是透明或包含了背景色。2. PNG导出时未开启抗锯齿或画布未修剪干净。3. 可拉伸区域设置错误。1. 检查设计稿确保图标图层下方无背景导出时选择透明背景。2. 在导出设置中确保开启抗锯齿勾选“修剪画布”。3. 重新检查并设置正确的拉伸区域。颜色与设计稿不符1. 颜色模式不统一RGB vs CMYK。2. 导出为JPG时产生色差。3. 开发代码中色值写错。1. 所有设计、导出均在sRGB颜色模式下进行。2. 对颜色要求高的元素使用PNG-24格式。3. 交付时明确标注色值HEX或RGBA。开发反馈图片体积太大1. 使用了未压缩的大尺寸PNG或JPG。2. 该用SVG或代码实现的地方用了位图。3. 多倍图策略过于激进提供了不必要的4x图。1. 使用无损压缩工具处理所有图片。2. 与开发评审将纯色图形、简单图标改为SVG或代码实现。3. 根据产品用户设备分布合理制定倍图策略。动效Lottie无法播放或异常1. 使用了Lottie不支持的AE特性。2. JSON文件中引用的图片资源路径错误或缺失。3. 动画图层命名包含特殊字符。1. 制作动画前仔细阅读Lottie支持特性列表。2. 确保图片资源与JSON文件一起交付路径正确。3. 图层和资源命名使用英文、数字和下划线。6.2 独家避坑技巧与经验之谈“像素对齐”是圣旨在设计时所有元素的尺寸和位置都尽量使用整数特别是1x下。非整数的尺寸如10.5px在导出为位图时极易产生模糊和抗锯齿问题。在Figma或Sketch中打开“像素预览”模式仔细检查。与前端建立“组件化”思维对接不要只想着切“图”要想着交付“组件”。例如一个按钮交付的不仅仅是一个背景切片而应该是一个包含各种状态正常、按下、禁用和尺寸规范的完整描述。这促使设计师和前端共同维护一套设计系统Design System。为“可访问性”留出空间切图时要考虑触摸目标的最小尺寸iOS和Android指南通常建议不小于44x44pt/dp。一个很小的图标其可点击的热区可能需要更大这可能需要设计师在切图时预留透明边距或者前端在实现时额外处理。自动化是终极解决方案当项目庞大、资源繁多时手动切图和压缩效率低下且易错。可以探索自动化流程使用设计工具的API如Figma API或脚本如sketchtool命令行工具自动导出、重命名、压缩资源并集成到CI/CD流程中。做好资源回收站删除或修改的旧图标、图片不要直接从交付文件夹里移除。可以建立一个/deprecated/或/archive/目录按版本号存放旧资源。这可以防止因版本回滚或临时需求导致找不到资源的问题。6.3 从规范执行者到流程定义者一个资深UI设计师的价值不仅在于做出漂亮的设计更在于能建立并推动高效的协作流程。当你精通切图规范后可以更进一步推动设计系统落地将切图规范作为设计系统的一部分。建立统一的图标库、组件库并确保其输出资源完全符合开发要求实现“设计即代码”。优化团队工具链研究并引入更高效的协作工具或自动化脚本减少团队在重复性劳动上的时间消耗。数据驱动优化与开发、产品合作利用工具监控线上图片资源的加载性能和体积用数据说话持续优化切图策略和格式选型。切图规范这个看似枯燥繁琐的环节实则是设计师专业素养和工程化思维的试金石。它要求我们在追求视觉美感的同时始终保持严谨、逻辑和协作精神。把这套规范内化为习惯你交付的将不再是一张张图片而是一份能让整个团队放心、省心、高效合作的可靠契约。 UI设计切图规范全解析：提升团队协作与产品还原度的工程实践
1. 项目概述为什么UI设计切图规范是产品落地的“生命线”干了这么多年UI设计我见过太多因为切图不规范而引发的“血案”。前端工程师在深夜的办公室里对着模糊的图标和错位的间距抓狂测试同学因为一个按钮在不同手机上显示异常而反复提交Bug产品上线时间一拖再拖。所有这些问题的根源往往都指向同一个环节切图交付。UI设计切图规范远不止是把设计稿上的元素“切出来”那么简单它是一套连接设计与开发的精密协议是确保视觉设计能被100%还原为线上产品的“工程图纸”。没有这套规范再惊艳的设计都只是空中楼阁。简单来说UI设计切图规范定义了设计师如何将视觉稿通常是Sketch、Figma或Adobe XD文件中的元素转化为前端工程师可以直接使用的图片资源如PNG、SVG、WebP等并附带所有必要的尺寸、命名、格式和状态说明。它解决的核心问题是“信息无损传递”确保设计师的意图不被误解开发能高效、准确地实现。无论是刚入行的UI新人还是负责复杂中后台系统的资深设计师掌握并制定一套行之有效的切图规范都是职业道路上必须点亮的技能树。这不仅是专业性的体现更是提升团队协作效率、降低沟通成本、保障产品最终质量的关键。2. 切图规范的核心价值与设计协作流程定位2.1 从“各说各话”到“同频共振”规范的核心价值在团队协作中切图规范的价值体现在多个维度。首先它极大地提升了开发效率。想象一下如果前端工程师拿到的切图文件命名混乱如“新建图层1.png”、“未标题-22x.jpg”他们需要花费大量时间去猜测、询问每个图片的用途甚至可能用错资源。一套清晰的命名规范如btn_primary_normal2x.png能让开发者一目了然直接调用。其次规范保障了设计还原度。设计师精心调整的圆角、投影、渐变在切图时如果格式或输出设置不当就可能出现锯齿、毛边或颜色失真。规范明确了何种效果该用何种格式输出如纯色图标用SVG复杂渐变用PNG-24以及如何为不同屏幕密度1x, 2x, 3x提供适配资源从而在各类设备上保持视觉一致性。最后它降低了维护成本。产品需要迭代图标和界面元素会更新。规范的目录结构和命名逻辑使得替换或新增资源变得有条不紊方便版本管理和后续的视觉更新。对于动效规范还会定义Lottie JSON文件的输出标准确保动画效果能精准落地。2.2 在设计-开发工作流中的关键节点切图规范并非孤立存在它嵌入在整个产品设计到开发的工作流中是一个承上启下的关键节点。设计定稿阶段视觉设计完成后交互与视觉评审通过。此时设计师需要开始以“工程师思维”审视自己的稿件提前考虑哪些元素需要切图哪些可以用代码实现如纯色背景、简单边框。标注与切图阶段这是规范执行的核心环节。设计师使用蓝湖、Zeplin、Figma Dev Mode等协作工具或手动进行标注尺寸、间距、颜色、字体并开始根据规范切出所需资源。这个阶段要求设计师对前端实现有一定了解知道哪些属性是“样式”应交由CSS代码实现哪些是“资源”必须切图。交付与沟通阶段将切好的资源包通常是一个按模块分类的文件夹连同标注文件一起交付给前端。规范的交付物应包括资源文件、一份简明的规范说明文档README有时还包括动效参数文档。开发与走查阶段前端工程师根据规范实现界面。设计师在此阶段进行UI走查核对实现效果与设计稿的一致性而规范的统一使得走查问题更易于定位和描述例如“btn_submit的禁用状态颜色与规范文档中的色值#CCCCCC不符”。3. 切图规范详析从命名到输出的完整体系一套完整的切图规范通常包含以下几个核心组成部分命名规范、尺寸与倍率规范、文件格式规范、输出设置规范以及组织目录规范。3.1 命名规范让机器和人都能读懂混乱的命名是万恶之源。好的命名应遵循“可读性、一致性、语义化”原则。通用命名结构组件_模块_状态_描述倍数.格式组件 (Component)指明元素类型如icon图标、btn按钮、bg背景、tab标签栏、avatar头像。模块 (Module)指明所属功能模块或页面如home首页、profile个人资料、settings设置。对于全局通用组件此项可省略。状态 (State)指明元素的交互状态如normal默认、pressed按下、disabled禁用、selected选中。描述 (Description)对元素功能的简要描述如close关闭、search搜索、primary主要。倍数 (2x, 3x)指资源针对的设备屏幕像素密度倍数。这是为了适配Retina等高分辨率屏幕。格式 (.png, .svg, .jpg)文件格式。实操示例首页的搜索图标正常状态icon_home_search_normal2x.png全局通用主要按钮禁用状态btn_primary_disabled3x.png个人资料页的背景图bg_profile_header2x.jpg注意事项使用英文小写字母、数字和下划线禁止使用中文、空格和特殊字符。保持缩写的一致性。如果使用btn就全程使用不要混用button。对于非常用词团队内部应维护一份缩写词汇表。3.2 尺寸、倍率与适配规范3.2.1 基础尺寸与导出倍率设计师通常在1x基准分辨率下进行设计但需要导出多种倍率的切图以适应不同设备。1x适用于普通DPI屏幕如早期非Retina Mac。2x适用于大多数Retina屏幕如iPhone 8 Plus、主流安卓机。3x适用于更高分辨率的设备如iPhone 12/13/14 Pro Max、部分高端安卓机。导出原则以设计稿中元素的原始尺寸1x尺寸为基准导出2x和3x的资源。例如一个在1x设计稿中为44x44pt的按钮应导出为88x88px2x和132x132px3x的图片。许多设计工具如Sketch、Figma可以自动生成多倍图。3.2.2 可拉伸区域与.9图对于需要水平或垂直拉伸而不失真的元素如聊天气泡、按钮背景需要使用“可拉伸区域”或Android特有的.9.png图。可拉伸区域 (Slicing)在Sketch或Figma中可以为图层或切片设置“可拉伸区域”通常通过设置四条参考线定义图片中哪些部分在拉伸时保持不变如圆角哪些部分可以重复拉伸如平铺的纹理。.9.png一种Android特有的PNG格式通过在图片四周添加一个像素宽度的黑线来定义可拉伸区域和内容填充区域。虽然现在更多使用XML drawable或矢量图但在处理复杂渐变背景时.9图仍有其价值。注意与前端工程师明确沟通拉伸策略。有时一个简单的纯色带圆角的按钮背景完全可以用CSS代码实现border-radius无需切图。这能减少HTTP请求提升性能。3.3 文件格式选择PNG、JPG、SVG与WebP不同的视觉内容应选择最合适的文件格式以平衡质量、体积和功能。格式特点适用场景不适用场景导出设置建议PNG支持透明通道无损压缩颜色表现好。图标、Logo、需要透明背景的UI元素、简单图形。大型照片或复杂渐变文件体积会很大。PNG-24保证质量。对于纯色小图标可使用PNG-8减少体积。导出时检查“修剪画布”选项。JPG/JPEG有损压缩文件体积小不支持透明。大尺寸照片、复杂渐变背景图、不需要透明度的位图内容。图标、Logo、需要透明背景的任何元素。根据质量要求调整压缩比通常70%-90%在文件大小和视觉质量间取得平衡。SVG矢量格式无限缩放不失真文件小可用CSS控制样式。纯色或简单渐变的图标、Logo、数据可视化图形。包含复杂滤镜、位图纹理或过多细节的图形。导出前将文字轮廓化创建轮廓检查并简化路径节点以减小文件体积。WebP现代格式同时支持有损和无损压缩体积比PNG/JPG更小。可替代PNG和JPG的大部分场景特别是Web端。需要兼容非常老旧浏览器如IE11的场景。使用设计工具插件或在线工具将PNG/JPG转换为WebP。注意提供兼容性回退方案如.webp和.png两套图。实操心得对于移动端App图标类资源优先使用SVG通过Android的Vector Drawable或iOS的PDF矢量图方式集成这能完美适配各种屏幕密度且便于统一修改颜色。对于无法使用矢量的复杂图形再使用多倍PNG图。对于Web端在兼容性允许的情况下积极推广WebP格式能显著提升页面加载速度。3.4 输出设置与资源优化切片与画板管理在设计稿中应为每一个需要导出的元素创建单独的切片Slice或画板Artboard。切片范围要精确只包含元素本身和必要的透明边距避免切进多余空白。给每个切片按命名规范设置好名字这样导出的文件名会自动生成。压缩与优化导出的图片资源在上传至代码仓库或CDN前应进行压缩优化。无损压缩工具对于PNG可以使用TinyPNG、ImageOptim等工具进行无损压缩能大幅减小文件体积而不损失画质。有损压缩权衡对于JPG可以在导出时或压缩时调整质量参数。一个常见的技巧是对于缩略图等小图可以适当降低质量如降至70%人眼几乎无法察觉差异但体积减少显著。雪碧图 (CSS Sprite)对于大量小图标如状态图标、功能图标可以考虑合成雪碧图。这能将多个HTTP请求合并为一个减少网络开销。但雪碧图的维护和更新成本较高在现代HTTP/2和缓存策略下其优势已不如从前需与前端团队协商使用。4. 不同平台与场景的规范适配要点4.1 iOS与Android平台的差异处理虽然设计稿通常是一份但iOS和Android平台在实现细节上存在差异切图时需要特别注意。iOS (UIKit / SwiftUI)尺寸单位设计时使用点Points, pt导出资源时对应像素Pixels, px。1x下1pt1px2x下1pt2px3x下1pt3px。图标与图片主要使用PNG格式。App图标需要提供一整套尺寸从20x20pt到1024x1024pt。对于可拉伸控件使用UIImage的resizableImage(withCapInsets:)方法或Asset Catalog中的Slicing功能。矢量资源支持PDF矢量图在Asset Catalog中设置为“Single Scale”并勾选“Preserve Vector Data”也支持通过代码绘制SwiftUI的Shape。Android尺寸单位设计时使用密度无关像素Density-independent Pixels, dp导出资源时对应像素px。换算关系px dp * (dpi / 160)。通常需要为mdpi (1x)、hdpi (1.5x)、xhdpi (2x)、xxhdpi (3x)、xxxhdpi (4x) 提供资源。资源目录图片资源需放入对应的res/drawable-*dpi目录下。同名资源会根据设备dpi自动选择。矢量资源优先使用Vector DrawableXML格式的矢量图它比多套PNG更节省空间和内存。对于复杂图形或必须使用位图的情况才提供多倍图。.9.png如前所述用于定义可拉伸背景。协作要点交付时最好将iOS和Android的资源分文件夹存放如/assets/ios/,/assets/android/并在规范文档中明确说明平台差异。设计师应了解两端的界面指南如Material Design和Human Interface Guidelines在设计时兼顾两者减少平台特有的切图工作量。4.2 响应式Web与移动端H5的切图策略对于Web和H5页面屏幕尺寸和分辨率更加碎片化切图策略需要更灵活。响应式图片 (Responsive Images)使用HTML的srcset和sizes属性让浏览器根据屏幕条件如视口宽度、设备像素比自动选择最合适的图片资源。例如为一张头图提供400px、800px、1200px三种宽度的版本。切图时可以按几个典型的断点Breakpoints来导出不同尺寸的图片而不是固定导出2x, 3x。图标字体 (Icon Font) 与 SVG Sprite对于纯色图标系统将图标制作成图标字体如FontAwesome或SVG Sprite是更优选择。它们具有矢量、颜色可调通过CSS、易于管理等优点。切图时需要将每个图标导出为单独的SVG文件然后通过工具如IcoMoon、fontello打包成字体或合成SVG Sprite。H5活动页的特殊性活动页生命周期短但对加载速度和视觉效果要求高。常采用“视觉稿切大图”“代码实现动效”的方式。对于复杂的背景或装饰性元素有时会整体切出一张长图合成图通过CSS控制显示区域。但这不利于适配和性能需谨慎使用。大量使用CSS3来实现渐变、阴影、圆角减少不必要的图片请求。4.3 动效资源的交付规范Lottie现代UI中动效Animation已成为重要组成部分。交付动效资源时Lottie是目前最流行的方案。Lottie工作流设计阶段设计师在After Effects (AE) 中制作动画。必须使用Lottie支持的AE特性可查阅Lottie官方文档的支持列表。避免使用复杂的粒子效果、某些混合模式或表达式。导出阶段安装Bodymovin插件将AE合成Composition导出为JSON文件。交付与集成将JSON文件交付给开发。iOS/Android/Web均有对应的Lottie库来解析和渲染此JSON。交付规范要点文件命名与静态图片类似如animation_loading.json。资源内嵌动画中使用的图片资源如果有需要单独导出并与JSON文件放在同一目录或通过配置指定远程URL。性能与大小优化AE工程减少不必要的图层和关键帧。导出的JSON文件应尽可能小通常几百KB以内。复杂的动画可以考虑拆分成多个JSON文件按需加载。提供参数文档告知开发人员动画的默认循环方式loop、播放速度speed、是否可以交互控制如播放/暂停等。5. 工具链、交付物与团队协作实践5.1 设计工具与协作平台高效规范的执行离不开工具的支持。Figma / Sketch / Adobe XD主流设计工具。它们都内置了强大的切图和标注功能。Figma其“Dev Mode”模式允许开发者直接查看尺寸、颜色、代码片段并一键导出所需资源支持多格式、多倍率是目前协作体验最好的工具之一。Sketch需配合Sketch Cloud或第三方插件如Sketch Measure进行标注和交付。Adobe XD通过Adobe Creative Cloud分享链接开发者可以获取标注和资源。蓝湖 / Zeplin / Avocode专门的协作平台。设计师上传设计稿后平台会自动生成标注、样式代码CSS并提供便捷的切图下载功能。它们作为“设计-开发”之间的桥梁能强制执行一定的规范如预设的导出倍率。插件生态善用插件能提升效率。例如用于批量重命名切片的插件用于自动生成多倍图的插件用于优化SVG的插件等。实操心得团队应统一设计工具和协作平台。Figma因其卓越的实时协作和交付能力正成为越来越多团队的首选。无论用哪种工具关键是建立团队内统一的文件图层结构、组件Component/Symbol命名规范这能从源头上让切图更规范。5.2 标准交付物清单与版本管理一次完整的UI资源交付不应只是一个压缩包。标准的交付物应包括设计源文件最新的.fig、.sketch或.xd文件。标注与切图链接/文件如果使用蓝湖/Zepin提供共享链接。如果手动交付提供清晰的标注图标明所有间距、尺寸、字体、色值和切图资源文件夹。切图资源包结构清晰的文件夹例如按平台(ios/,android/,web/)或模块(home/,user/,common/)分类。文件夹内资源严格按命名规范存放。规范文档 (README.md 或 CHANGELOG.md)项目名称与版本号。设计稿使用的字体列表及下载链接。使用的色板Color Palette变量名和色值。图标库如果有的说明。动效Lottie文件的说明和使用注意事项。本次更新的主要内容和修改点。版本控制设计资源也应纳入版本管理如使用Git或设计工具自带的历史版本功能。每次交付时注明版本号如v1.2.0并与产品开发版本对应便于追溯和回滚。5.3 建立团队规范文档与持续维护切图规范不应是设计师电脑里的几行笔记而应是团队共享、持续维护的活文档。如何建立共识先行召集设计师、前端、客户端开发共同讨论制定初版规范。开发者的输入至关重要他们最清楚何种交付方式最高效。文档化使用Confluence、Notion、语雀或一个共享的Markdown文件将规范详细记录下来。包含所有命名规则、格式要求、工具设置、交付流程等。创建资源模板在设计工具中创建包含标准颜色样式、文本样式、常用组件库的文件模板。在模板中预设好常用的切片导出设置。培训与检查对新成员进行规范培训。在团队内部可以定期进行设计走查时也将切图规范性作为检查项之一。持续维护随着技术发展如新图片格式WebP的普及、工具更新如Figma新功能、团队扩张规范需要定期评审和更新。设立一个规范的“负责人”或轮值维护者。当出现因规范不清晰导致的协作问题时及时复盘并将解决方案补充到规范文档中。6. 常见问题、避坑指南与进阶技巧6.1 高频问题排查清单在实际协作中以下问题屡见不鲜问题现象可能原因解决方案图片在手机上模糊1. 只提供了1x图在Retina屏上被放大。2. 导出格式为JPG且压缩比过高。3. SVG图在导出时包含了位图效果。1. 确保提供2x和3x图。2. 检查并提高JPG导出质量或换用PNG。3. 简化SVG使用纯矢量路径。图标边缘有白边或锯齿1. 切图时背景不是透明或包含了背景色。2. PNG导出时未开启抗锯齿或画布未修剪干净。3. 可拉伸区域设置错误。1. 检查设计稿确保图标图层下方无背景导出时选择透明背景。2. 在导出设置中确保开启抗锯齿勾选“修剪画布”。3. 重新检查并设置正确的拉伸区域。颜色与设计稿不符1. 颜色模式不统一RGB vs CMYK。2. 导出为JPG时产生色差。3. 开发代码中色值写错。1. 所有设计、导出均在sRGB颜色模式下进行。2. 对颜色要求高的元素使用PNG-24格式。3. 交付时明确标注色值HEX或RGBA。开发反馈图片体积太大1. 使用了未压缩的大尺寸PNG或JPG。2. 该用SVG或代码实现的地方用了位图。3. 多倍图策略过于激进提供了不必要的4x图。1. 使用无损压缩工具处理所有图片。2. 与开发评审将纯色图形、简单图标改为SVG或代码实现。3. 根据产品用户设备分布合理制定倍图策略。动效Lottie无法播放或异常1. 使用了Lottie不支持的AE特性。2. JSON文件中引用的图片资源路径错误或缺失。3. 动画图层命名包含特殊字符。1. 制作动画前仔细阅读Lottie支持特性列表。2. 确保图片资源与JSON文件一起交付路径正确。3. 图层和资源命名使用英文、数字和下划线。6.2 独家避坑技巧与经验之谈“像素对齐”是圣旨在设计时所有元素的尺寸和位置都尽量使用整数特别是1x下。非整数的尺寸如10.5px在导出为位图时极易产生模糊和抗锯齿问题。在Figma或Sketch中打开“像素预览”模式仔细检查。与前端建立“组件化”思维对接不要只想着切“图”要想着交付“组件”。例如一个按钮交付的不仅仅是一个背景切片而应该是一个包含各种状态正常、按下、禁用和尺寸规范的完整描述。这促使设计师和前端共同维护一套设计系统Design System。为“可访问性”留出空间切图时要考虑触摸目标的最小尺寸iOS和Android指南通常建议不小于44x44pt/dp。一个很小的图标其可点击的热区可能需要更大这可能需要设计师在切图时预留透明边距或者前端在实现时额外处理。自动化是终极解决方案当项目庞大、资源繁多时手动切图和压缩效率低下且易错。可以探索自动化流程使用设计工具的API如Figma API或脚本如sketchtool命令行工具自动导出、重命名、压缩资源并集成到CI/CD流程中。做好资源回收站删除或修改的旧图标、图片不要直接从交付文件夹里移除。可以建立一个/deprecated/或/archive/目录按版本号存放旧资源。这可以防止因版本回滚或临时需求导致找不到资源的问题。6.3 从规范执行者到流程定义者一个资深UI设计师的价值不仅在于做出漂亮的设计更在于能建立并推动高效的协作流程。当你精通切图规范后可以更进一步推动设计系统落地将切图规范作为设计系统的一部分。建立统一的图标库、组件库并确保其输出资源完全符合开发要求实现“设计即代码”。优化团队工具链研究并引入更高效的协作工具或自动化脚本减少团队在重复性劳动上的时间消耗。数据驱动优化与开发、产品合作利用工具监控线上图片资源的加载性能和体积用数据说话持续优化切图策略和格式选型。切图规范这个看似枯燥繁琐的环节实则是设计师专业素养和工程化思维的试金石。它要求我们在追求视觉美感的同时始终保持严谨、逻辑和协作精神。把这套规范内化为习惯你交付的将不再是一张张图片而是一份能让整个团队放心、省心、高效合作的可靠契约。