UI中的“切图”是什么意思?为什么要切图?

2020-06-27 21:41发布

6条回答
Lener
2楼-- · 2020-06-27 22:34

切图是设计师交付给开发的产物之一,设计稿完成后,设计师需要将其切成便于制作成页面的图片。但因为开发经常需要不同平台不同尺寸的切图,如果全部由UI来做,不仅费时费力,可能还会因为细微的差距造成开发不能很好的还原设计稿。

所以可以用摹客之类的专业工具来自动切图。UI把Sketch、Adobe XD、PS的设计稿进行切图标记,上传至摹客后,开发就可以自主下载不同平台不同尺寸的切图和使用了。


欢乐的腾
3楼-- · 2020-06-28 09:51

设计稿完成后,设计师需要将其切成便于制作成页面的图片。但因为开发经常需要不同平台不同尺寸的切图,如果全部由UI来做,不仅费时费力,可能还会因为细微的差距造成开发不能很好的还原设计稿。 所以可以用摹客之类的专业工具来自动切图。

LLLiBW
4楼-- · 2020-06-28 10:00
切图严格来说并不是Ui设计师的工作
而是前端工程师的工作
指的是将设计师的设计转化为网页
是一种将设计师的“理想”转化为“现实”的工作
将psd进行切片重组 利用div+css  js等等前端开发代码来生成网页的一种技术


Eleven
5楼-- · 2020-06-28 10:16

是指把设计师将设计文件进行切片,然后利用代码来做成网页的工作

流年
6楼-- · 2020-06-28 14:43

UI设计中的切图本质上来说,就是需要让开发把一些图形打包到app的安装包内,这部分图形(比如说是图标)开发工程师无法用开发语言写出来,但是这些各种形状的图标也需要随着安装包安装到用户的手机里,所以这些图标就需要UI设计师给切出来,然后让开发工程师打包到app的安装包内。

李仁澍
7楼-- · 2020-06-28 16:02

能把所有设计稿里出现的图形元素按照基础要求切出来交给前端工程师。

对所有切图进行优化,有针对图片输出体积的优化、有利用 CSS Sprite 减少请求的优化、也有针对减少自己后期网站改版升级时候工作量的优化。这部分已经需要很多前段方面的知识了。要让切图也「语义化」必须得和前段配合得很好。

从超出「图片」的角度思考并且实现更高阶的效果,比如现在做网页经常需要考虑桌面和移动平台的不同分辨率,使用 Responsive 的布局的话切图应该怎么切,是不是需要切两套;遇到 iPad 或者 rMBP 的高清屏怎么处理网页中的图片以及背景;是否可以应用一些新的技术比如 Web Font、Font Icon、CSS 3 里的新特性来减少网页里的图片等等。