切图是无法直接用代码实现的元素，是UI设计师的重要输出和交付物。切图看似简单，其实有很多专业细节需要了解，也有各种提高切图效率的方法。本文将全面介绍UI设计中关于如何切图所需的所有知识。

本文概述：

什么是UI设计抠图？

裁剪是UI设计中的一个重要步骤，它将无法直接用代码实现的设计元素分解成不同的图形元素，以便在开发过程中被编程语言识别和应用。裁剪不仅包括图片元素的裁剪，还包括不同图形元素的组合和命名，以及到图形元素的链接和注释。通过裁剪，设计师可以将设计转化为实际的应用元素，以保证程序开发工作能够顺利进行，以及用户最终看到的界面清晰明了。

图片切图是前端做的还是美工做的？

切图不属于前端或美术设计的范畴，而是 UI 设计的一部分。切图的结果虽然可以被前端开发人员用来编程实现，但它是 UI 设计师将设计理念实现的工作。UI 设计师需要根据设计图裁剪出适合开发人员的图形元素，而前端开发人员则负责将这些图形元素转换成实际的界面。

但切图工作并不一定要由UI设计师来做，如果前端开发工程师能够很方便的获取设计稿上的设计元素，直接切图的效率和最终效果可能更好。切图也不一定全都用png格式，有时候jpg就可以，用svg格式的话体积更小，效果更好。这时候开发者对于实际应用场景中的设计元素，以及什么样的图片格式更好，体积更小，有了更清晰的认识。如果前端开发工程师能够直接切图，体验是可以一致的。

如果追求完美，设计师应该学习一些前端开发的基本知识，将正确的切图直接发送到前端，才能达到最佳效果。下面的内容将重点介绍UI设计师需要知道的切图知识。

UI设计裁剪规范

UI设计中图片的切图有固定的套路和流程，掌握相关的知识可以保证开发中最终的还原度。

格式：应该剪裁哪种格式？

裁剪格式的选择需要根据公司规范、实现方式、开发平台等来确定，如果公司有裁剪规范，那么就按照规范进行裁剪。

其他情况可按照以下原则考虑：

如果嫌麻烦，可以使用一些自动切图工具，比如 这样的产品，可以通过插件直接上传所有格式的图片，开发者按需下载，还可以自动压缩切图文件的大小；

尺寸：应该剪多大？

一般iOS提供@1x、@2x、@3x三种放大倍数；提供mdpi、hdmpi、xhdpi、五种放大倍数。微信小程序提供@2x（设计尺寸等于750时为1x，设计尺寸等于375时为2x），网页一般提供@1x和@2x。如果嫌麻烦或者需要投递到多个平台，也可以参考格式部分，使用等产品一键投递截图，会自动生成不同平台尺寸和格式的截图。

切片的命名约定

剪切图一般用英文命名，没有特别的标准，只要能表达剪切图的真实含义即可。

如果有多个单词，可以用“-”连接，或者将首字母大写。

如何剪切UI设计图给开发人员？

传统方式设计师会手动在设计软件中导出所有剪裁图，标注、打包后发送给开发人员，这种交付方式效率很低，现在大部分交付都是借助自动化工具自动完成的，下面介绍一些常用工具及介绍。

工具主要分为两类，一类是协同平台，优先支持多种主流设计工具通过插件的方式进行设计交付；一类是设计工具，自带交付功能。通过这两类工具，设计师可以一键分享设计稿给开发者，开发者可以获得相应的批注和抠图。

什么图片切割软件可以进行图片切割？（协作平台）

它是一种广泛使用的原型设计和设计协作工具，为设计师、开发人员和产品经理等团队成员提供了一个分享想法和协作设计的平台。

除了切割和标记之外，它还具有以下优点：

简单易用：界面设计简洁，操作方便，即使没有专业设计经验，也能快速上手。 高保真原型设计：支持高保真交互原型设计，可实现复杂的动效和用户交互体验，让产品设计更加逼真生动。 多人协作：支持多人协同设计评审，设计师、开发者、产品经理可在同一平台实时协作，提高团队沟通效率。 兼容性强：支持与其他设计工具集成，可导入多种文件格式，包括、、、等常用设计软件的文件。 安全可靠：采用先进的加密技术，保障用户数据和隐私安全。（协作平台）

它是一个专门为设计师和开发人员设计的协作平台，可以帮助团队更有效地管理和沟通设计规范和代码。

除了切割和标记外，主要功能还包括：

自动标注：可自动从设计图中提取标注信息，包括颜色、字体、排版等，并提供详细的文档和注释，方便开发者阅读理解。 响应式设计：支持多种设备和屏幕尺寸，可帮助开发者保证设计在各种设备上的显示效果。 版本控制：支持版本控制，可记录设计规范的每一次修改，并提供回滚功能，避免出错。 集成：可与、、Xcode等多种设计工具和开发工具集成，方便团队成员协作。 标注和注释：支持添加标注和注释，方便团队成员沟通、讨论设计问题。 协作（协作平台）

是一项基于云端的服务，旨在为产品设计师、开发人员和团队提供全面、高效的产品设计协作工具。

主要功能包括：

实时协作：团队成员可在同一文档中同时工作，实时更新设计稿，避免版本混乱、沟通不畅等问题。 智能+手动标注： 可自动从设计稿中提取标注信息，结合设计说明功能，为开发者提供详细的设计标注信息； 设计规范管理： 支持上传设计规范、关联变量和组件代码，开发者可直接在设计稿上获取规范信息； 全视图画板： 提供全视图画板功能，方便产品经理与设计师沟通产品需求、展示设计效果。 多样标注： 支持添加多种标注样式，方便团队成员沟通讨论设计问题。 快速交互原型： 支持快速交互原型，可帮助产品经理、设计师快速构建产品原型，进行用户测试并收集反馈。 团队管理： 提供团队管理功能，可创建多个项目、对团队成员进行分组、设置不同权限，管理团队信息和任务。 Figma（设计工具）

Figma 是一款云端协作矢量图形编辑器，支持多人实时协作，可用于设计网页和应用界面，是目前最流行的在线协作 UI 设计工具之一。

Figma 的主要优点包括：

实时协作：多个团队成员可以同时编辑同一个设计文件，实现实时协作。 丰富的功能和工具：Figma 提供了丰富的设计工具和功能，如遮罩、羽化、倾斜、曲线、布尔运算等，满足各种设计需求。 响应式设计：Figma 支持响应式设计，可以轻松创建适应不同设备和屏幕尺寸的设计。 自动保存和版本控制：Figma 自动保存设计文件，避免因意外断电或错误操作导致数据丢失。它还支持版本控制，因此您可以查看和回滚到以前的版本。 社区和资源共享：Figma 拥有庞大的社区，用户可以在其中分享自己的设计文件，也可以从其他人的设计中获取灵感和资源。 DT（设计工具）

DT是推出的一款网页设计工具，旨在为中国设计师提供快捷、高效的设计环境。

DT主要功能包括：

高效设计： DT提供了丰富的设计工具，包括布尔运算、贝塞尔曲线、路径合并、轮廓绘制、剪刀等，还有高斯模糊、背景模糊设置，可以帮助设计师快速实现设计灵感。 所见即所得： DT支持将颜色、文本样式、图层样式等保存为资源，并可重复添加到组件资源中，方便设计师管理和复用设计资源，提高设计效率。 原子设计： DT支持原子设计，修改颜色A或者圆角会影响所有引用颜色A和圆角的组件的样式。 实时协作： DT支持多人实时编辑，设计师可以与其他团队成员实时讨论、评论，实现无缝协作。 便捷功能： DT还提供了一些实用便捷的小功能，比如旋转副本、智能分布、等比例缩放等，可以帮助设计师更高效地设计。 零成本迁移： DT独家支持组件级智能排版功能，可完美兼容，并支持自动排版、自动换行功能；可完美兼容Figma，官方还支持直接导入、figma文件；需要切哪些图层？

不管是手动还是自动切割，设计师都需要确定需要切割哪些层，这样才能保证设计稿的最终效果。很多开发人员对设计软件的使用不是很熟悉，所以不能直接让开发人员在设计软件里切割，最好做好相关的切割标记。

设计师可以参考以下思路来确定哪些层需要切割：

通过判断设计稿上的元素是否可以用代码实现来决定是否需要对图片进行裁切，如果效果无法用代码实现，就必须进行裁切。但这不是唯一标准，有时候为了提高开发效率，降低开发成本，一些难以实现的元素也可以进行裁切。举几个例子就容易理解了sketch怎么合并图层，比如：图片、动画图片、多色非线性渐变形状填充、图标等，这些元素都是无法实现的或者实现成本很高的元素，需要进行裁切。

还有一些占位图是不需要裁剪的，比如用户头像，用户上传的图片等，这些素材只是在设计稿中作为占位符sketch怎么合并图层，开发者不会用到这些素材，而是直接使用用户上传的图片。

总之要把握一个原则：开发实现不了就截图，判断不了就咨询开发；

总结

本文主要介绍UI设计中切图的相关知识与规范，包括切图的概念、目的、规范、流程、工具等。切图是UI设计中的一个重要步骤，它将无法直接用代码实现的设计元素分解成不同的图形元素，以便在开发过程中被编程语言识别和应用。

图片裁剪不仅包括图片元素的裁剪，还包括不同图元的组合、命名，以及图元的链接、注释等。图片裁剪的规范包括格式、大小、命名等。掌握相关知识可以保证开发最终的还原。具备图片裁剪功能的工具有， ， DT等。

如有侵权请联系删除！