UI设计怎么切图？初学者入门必读篇摹客设计云

切图是开发无法使用代码直接实现的元素，是UI设计师的重要产出成果和交付物。切图看似简单，实则也有超级多的专业细节需要了解，以及各种方法来提高切图效率。本文将全面介绍UI设计怎么切图所需要的所有知识。本文大纲：

UI设计切图是什么？

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

切图是前端还是美工？

切图并不属于前端或美工的范畴，而是UI设计的一部分。虽然切图的结果可以被前端开发人员用于编程和实现，但它本身是UI设计师为了实现设计理念而进行的一项工作。UI设计师需要根据设计图切割出适合开发人员使用的图形元素，而前端开发人员则负责将这些图形元素转化为实际的界面。但切图工作不一定非得要UI设计师进行，前端开发工程师如果能方便的获取到设计稿上的设计元素，直接进行切图效率和最终效果可能会更好。并不是所有切图都是采用png格式，有时候jpg就够用了，可以使用svg格式的时候体积更小，效果更佳。此时开发更清楚设计元素在实际的应用场景中，什么样的图片格式效果更好，体积更小，前端开发工程师如果能直接切图，可以将体验做到一致。如果要追求完美，设计师应该去了解一些基础的前端开发知识，直接将正确的切图发送给前端，效果最好。接下来的内容，将着重介绍UI设计师需要了解的切图知识。

UI设计切图规范

1.格式篇：应该切那种格式？

切图的格式选择需要根据公司规范、实现方式、开发平台等情况进行决定，如果公司有切图规范，则按照规范进行切图即可。其他情况可以按照以下原则思路进行考虑：

如果觉得麻烦，可以通过一些自动切图工具进行，比如zeplin、摹客协作之类的产品，可以通过插件直接上传所有格式的切图，开发按需下载即可，还能自动压缩切图文件体积；

2.尺寸篇：应该切多大？

3.切图命名规范

有哪些切图软件可以切图？

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

除开切图和标注，Invision还具有以下优点：

Zeplin是一款专门为设计师和开发者准备的协作平台，它能够帮助团队更高效地管理和交流设计规范和代码。

除开切图和标注，Zeplin的主要特点还包括：

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

摹客协作的主要功能包括：

Figma是一款基于云端的可协作的向量图形编辑器。它支持多人实时协作，可以用于设计网页和应用界面等，是现今流行的在线可协作的UI设计工具之一。

Figma的主要优点包括：

摹客DT是摹客旗下一款基于Web的设计工具，旨在为中国设计师提供一个快速、高效的设计环境。