说明前端工程师以前,要先说一下什么是「切图」?最早的网页设计师,除了要做网站设计以外还需要设计flash动画、切图,「切图」是一种俗称,「切图」简单来说就是把网站设计好的「版型图片转换成html的过程」,过程就好像是拿美工刀把版型图片一片一片切割下来,一块一块转成html的网站,所以俗称「切图」,网站切图可以分成自动产出、手切、模板(例如:Bootstrap)。
什么是前端工程师?
「前端工程师」也有人叫「前端设计师」,以前没有「前端工程师」这个职位,只有网页设计师,网页设计师最常用的工具就是Adobe Dreamweaver、Microsoft frontpage,因为Dreamweaver、frontpage都是「即见即所得」的网页设计工具,只要用软体设计完成之后就已经自动产生html程式码,网页设计师的切图工作只有微调并不需要「从无到有」的切图,但是随着网页设计技术不断变革,网站走向多设备的整合,手机、平板、PC都要整合成一个网站,就是设计公司常说的RWD、AWD,这时候对于html代码的要求就已经不再单纯,除了切图转换html以外,还要求各家浏览器的兼容性、SEO构架、网站性能与速度,于是网页设计工作就慢慢把「前端切图」独立出来,于是有了「前端工程师」这个工作职位,前端工程师不负责网站的视觉设计,但前端设计师是网页设计师的实现者,好的前端可以帮助网页设计转换html过程中维持完整度,网站的动画与效果都是由前端工程师实现。
网站建设的专业分工
现代的网站建设都是专业分工,专业分工可以让网站工作变得更全面,设计步骤依照顺序为:网页设计 Design、前端工程师 Front End、后端工程师 Back End、网络营销 Marketing,前端工程师就是把网页设计师的「设计稿」变成网页(HTML)的人,为什么网页设计中的前端工程师如此重要呢?以下是我们的看法。
好的前端工程师有哪些价值?
网页设计还原程度高
当网页设计师根据客户需求把设计稿完成,这时候网站只是很多的图稿,前端工程师会根据图稿进行切图,把这些图切成HTML,并加入一些网页效果程式,好的前端工程师对设计稿的还原程度就越高,还原程度高代表事后的修改少,可以大大降低客户修改的机会,提升网页设计专案效率。
切图好坏是SEO的重要因素
好的SEO架构元素,例如:更精简的代码、速度更快的网站架构、适应更强RWD…等等,都是靠前端工程师去完成,对SEO架构有经验的前端工程师就能把符合架构的代码内置到网站,网站对各种设备的适应力会更完善。前端设计师撰写的js代码或是对于各种技术的掌握,可以让网站效果与SEO架构达到一个平衡的关键,好的前端工程师可以同时解决网站效果与SEO的冲突问题,切图效能最好的就是「手切」,手切因为html最精简,所以在SEO架构测试可以得到最高分,是用Bootstrap模板网站比不上的。
可以满足客户的需求改变
前端工程是一个非常专业的工作,前端工程必须懂很多html延伸技术,很多公司的网页设计师却兼职做了前端切图的工作,用了大量的Bootstrap模板,只会套不会改,遇到客户的需求大变动就只能回:「这个没办法改喔」,其实是「不会改,不是不能改」,这类的网站建设公司绝对不会说:「因为我们用了省时省力的Bootstrap,因此不会改」,专业的前端工程师绝对可以满足客户所有修改需求,遇到RWD与设计逻辑冲突的时候,总是可以提出其他的改善方案。
结论
早期的网页设计师要会视觉设计、FLASH动画、切图,因为移动设备崛起,RWD自适应式网站盛行,FLASH正式走入历史,于是产生了专职的「前端工程师」让网站的兼容性达到最高,好的前端工程师具备「设计还原能力」、「代码优化」、「满足客户需求」这三个重要的能力,好的网站建设公司一定有专职的前端工程师,而且具备「手工切图」的代码撰写能力,绝非只会套Bootstrap而可以依据需求进行修改,希望大家在寻找网站建设公司的时候,可以更专业的比「价值」而不是比「价格」,不然价格再低没有「SEO架构」,执行SEO也是会事倍功半没有效率。