切图是开发无法使用代码直接实现的元素,是UI设计师的重要产出成果和交付物。切图看似简单,实则也有超级多的专业细节需要了解,以及各种方法来提高切图效率。本文将全面介绍UI设计怎么切图所需要的所有知识。
本文大纲:
UI设计切图是什么?
切图是前端还是美工?
UI设计切图规范
UI设计如何切图给开发?
有哪些切图软件可以切图?
界面中哪些元素需要切图?
UI设计切图是什么?切图是UI设计中的一个重要步骤,通过将开发不能直接使用代码实现的设计元素分解成不同的图形元素,以便在开发过程中能够被编程语言所识别和应用。切图不仅包括图像元素的切割,还包括不同图形元素的组合和命名,以及与图形元素的链接和注释等。通过切图,设计师可以将设计转化为实际的应用元素,以确保程序的研发工作可以顺利进行,确保用户最终看到的界面是清晰的。
切图是前端还是美工?切图并不属于前端或美工的范畴,而是UI设计的一部分。虽然切图的结果可以被前端开发人员用于编程和实现,但它本身是UI设计师为了实现设计理念而进行的一项工作。UI设计师需要根据设计图切割出适合开发人员使用的图形元素,而前端开发人员则负责将这些图形元素转化为实际的界面。
但切图工作不一定非得要UI设计师进行,前端开发工程师如果能方便的获取到设计稿上的设计元素,直接进行切图效率和最终效果可能会更好。并不是所有切图都是采用png格式,有时候jpg就够用了,可以使用svg格式的时候体积更小,效果更佳。此时开发更清楚设计元素在实际的应用场景中,什么样的图片格式效果更好,体积更小,前端开发工程师如果能直接切图,可以将体验做到一致。
如果要追求完美,设计师应该去了解一些基础的前端开发知识,直接将正确的切图发送给前端,效果最好。接下来的内容,将着重介绍UI设计师需要了解的切图知识。
UI设计切图规范UI设计切图有固定的套路和流程,掌握相关知识可以确保开发最终的还原度。
格式篇:应该切那种格式?
切图的格式选择需要根据公司规范、实现方式、开发平台等情况进行决定,如果公司有切图规范,则按照规范进行切图即可。
其他情况可以按照以下原则思路进行考虑:
能采用矢量切图的优先用矢量切图;
不同格式,效果相似的情况下,选择文件体积更小的格式;
如果觉得麻烦,可以通过一些自动切图工具进行,比如zeplin、摹客协作之类的产品,可以通过插件直接上传所有格式的切图,开发按需下载即可,还能自动压缩切图文件体积;
尺寸篇:应该切多大?
一般iOS提供
1x、2x、3x三种倍率,安卓提供mdpi、hdmpi、xhdpi、xxhdpi、xxxhdpi五种倍率,