UI中的“切图”是什么意思?为什么要切图?
请各位详细回答!不要粘贴网上的UI切图教程,那个与本问题无关!
答得好有奖励,请各位专业人士给予回答!小弟在此感激不尽!
我之前的提问修改一下:是UI设计中“切图”的概念是什么?为什么要切图啊? 展开
切图是设计师交付给开发的产物之一,设计稿完成后,设计师需要将其切成便于制作成页面的图片。切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。
通俗来讲,把一张设计图 利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局。
切图大家都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,把图片切出来这个过程是叫切片。
切图的目的:第一个是让网页稿有了交互性,实现你平时看到的各种各样的功能。第二个是体积,所以切图时候一定注意少用图片工具:主流是dreamweaver,也有公司自己开发平台进行制作的。采用div+css布局更能减小网页体积 是表现与内容分离。
扩展资料
能把所有设计稿里出现的图形元素按照基础要求切出来交给前端工程师。
对所有切图进行优化,有针对图片输出体积的优化、有利用 CSS Sprite 减少请求的优化、也有针对减少自己后期网站改版升级时候工作量的优化。这部分已经需要很多前段方面的知识了。要让切图也「语义化」必须得和前段配合得很好。
从超出「图片」的角度思考并且实现更高阶的效果,比如现在做网页经常需要考虑桌面和移动平台的不同分辨率,使用 Responsive 的布局的话切图应该怎么切,是不是需要切两套;遇到 iPad 或者 rMBP 的高清屏怎么处理网页中的图片以及背景;是否可以应用一些新的技术比如 Web Font、Font Icon、CSS 3 里的新特性来减少网页里的图片等等
2023-12-06 广告
切图是设计师交付给开发的产物之一,设计稿完成后,设计师需要将其切成便于制作成页面的图片。但因为开发经常需要不同平台不同尺寸的切图,如果全部由UI来做,不仅费时费力,可能还会因为细微的差距造成开发不能很好的还原设计稿。
所以可以用摹客之类的专业工具来自动切图。UI把Sketch、Adobe XD、PS的设计稿进行切图标记,上传至摹客后,开发就可以自主下载不同平台不同尺寸的切图和使用了。
扩展资料:
切图用于完成html+css布局的静态页面,有利于交互,形成良好的视觉感。通俗来讲,把一张设计图利用到切片工具 把自己所需的切成一张张小图,然后前端开发用DIV+CSS完成静态页面书写,完成CSS布局。
切图大家都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,首先处理的是什么类型的页面图片型(EDM 或活动着陆页等)、图文型(门户网站或电商网站等)、界面型(Web App 等),把图片切出来这个过程是叫切片。
参考资料来源:百度百科-切图
而是前端工程师的工作
指的是将设计师的设计转化为网页
是一种将设计师的“理想”转化为“现实”的工作
将psd进行切片重组 利用div+css js等等前端开发代码来生成网页的一种技术
此为切图
也是本人的工作