关于对Web前端的学习,众所周知,基础知识需要牢牢掌握。项目经验需要大量积累,二者缺一不可。然而提到切图对Web前端开发的影响,却鲜有人知。下面,千锋就相关切图问题给大家做下系统地梳理。
首先,我们先来简单了解下切图的历史。Web 2.0的时期,最流行的趋势就是大字体、鲜艳色、高光和倒影,甚至许多人没有自己的想法,盲目去追求,致使Web 2.0的网站变得千篇一律。这时有一些前卫的人,把平面设计等许多模式引入的网页设计,他们用Photoshop做精准Mock up,然后通过CSS来实现,也就是所谓的切图。通俗来讲,切图就是把设计稿切成一片片的,然后前端工程师运用DIV+CSS功能,最大限度的还原设计图,也就是要把零碎的图片整合成一张完整的图片。
那么切图是不是必须的呢?毫无疑问,切图是实际开发过程中不可或缺的一步。由于一张完整的设计稿是由不同的元素组成的,比如Logo、背景图、图标、文本等等,而部分元素,前端工程师是无法使用代码实现效果的,因此,需要将其单独切出来使用。切图资源的输出将直接决定产品的最终效果。
此外,还有一部分人认为极简主义是页面所需要的,极简主义放弃了花哨的图案和设计,把重心放到了浏览器的字体、line-height、布局、留白、以及交互。崇尚极简主义的人觉得网页不必要看起来很漂亮,但一定要用起来很舒服。当然对于从用户的角度来讲,用得舒服很重要,美好的视觉享受更容易让你的APP脱颖而出。所以切图仍然是前端开发中不可缺少的一步。
有的公司UI设计师会把需要的图切好,但更多时候是需要前端工程师自己来切。我们不能每次都依赖UI设计师,自己掌握切图技能还是很有必要的。作为一名优秀的Web前端工程师,切图是必备技能。我们做前端的,在做好繁复的技术工作同时,切图这个小技能也不能掉以轻心。