切图是UI设计师的工作还是Web前端工程师的工作呢？

喜欢ヅ旅行 2023-02-25 03:55 3阅读 0赞

Web前端作为一门入门门槛不是很高的学科，一直以来，受到很多IT学习者的青睐。但是，一些Web前端的大牛往往在基础技能的前提下，掌握着大多数从业者不曾注重的技能，比如说切图。那么，切图在Web前端开发工作中占据什么地位呢?下面，我就相关切图问题给大家做下梳理。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70]  
首先，我们先来简单了解下切图的历史。Web 2.0的时期，最流行的趋势就是大字体、鲜艳色、高光和倒影，甚至许多人没有自己的想法，盲目去追求，致使Web 2.0的网站变得千篇一律。这时有一些前卫的人，把平面设计等许多模式引入的网页设计，他们用Photoshop做精准Mock up，然后通过CSS来实现，也就是所谓的切图。通俗来讲，切图就是把设计稿切成一片片的，然后前端工程师运用DIV+CSS功能，最大限度的还原设计图，也就是要把零碎的图片整合成一张完整的图片。

那么切图是不是必须的呢？毫无疑问，切图是实际开发过程中不可或缺的一步。由于一张完整的设计稿是由不同的元素组成的，比如Logo、背景图、图标、文本等等，而部分元素，前端工程师是无法使用代码实现效果的，因此，需要将其单独切出来使用。切图资源的输出将直接决定产品的最终效果。

此外，还有一部分人认为极简主义是页面所需要的，极简主义放弃了花哨的图案和设计，把重心放到了浏览器的字体、line-height、布局、留白、以及交互。崇尚极简主义的人觉得网页不必要看起来很漂亮，但一定要用起来很舒服。当然对于从用户的角度来讲，用得舒服很重要，美好的视觉享受更容易让你的APP脱颖而出。所以切图仍然是前端开发中不可缺少的一步。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70 1]  
有的公司UI设计师会把需要的图切好，但更多时候是需要前端工程师自己来切。我们不能每次都依赖UI设计师，自己掌握切图技能还是很有必要的。切图的实现，很大程度上让网页设计变得个性化，有生机，所以会切图的前端工程师也更加受市场欢迎。关注我，会定期为大家分享最新Web前端发展趋势、学习资料，助力大家学好Web前端。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70]: /images/20230209/56aa64d0f8dc475b999dd11ad7071156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230209/4bda689371374bd99c8e900c10c2424e.png