全栈设计师指南-前端有多前

以上几篇文章基本能解决流程中的设计问题，如果还没解决请留言，问题你提，办法我们想。

再来看看我们的友军-前端开发工程师，了解他们的战术和技能，才能更好的学习和协作。

百度曰过：前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间是从2005年开始的，是随着web发展，细分出来的行业。

在设计师还叫美工的那个年代，前端开发还叫切图仔，那时配合的「很默契」，以至于切图仔可以完美还原美工的设计图。对应的技术有图片地图热点（map area）、table布局、iframe等。那时候简单的页面甚至不用设计纯粹表格去展示文字，加载速度（当时网速也感人）和用户体验可想而知。再然后各种互联网公司的发展壮大驱动了技术与设计的发展，各种生产力也因需求的难度而不断提高。

前端领域目前比较常规的操作集有切图（严肃脸，此切图技术实现早已升级）、雪碧精灵图、CSS3动效、异形布局、Canvas、前后端分离、SPA、Hybird APP、Ajax等；所以你看，作为设计师的你可能并不懂这些，就如前端看到你用快捷键让图层居中蚂蚁线一样惊奇。

我们再来分析一下，以期能了解的更多一些。

基础介绍

如你所听说过的HTML5、CSS3是常规实现布局的技术，而如重力感应、视差效果、摇一摇、拍照，一镜到底等这些则需要JS、WebGL或者其他JS组件去实现，独立写出来是比较有难度的，但用大神的轮子去实现效果相对简单很多。当然你不能用上句话去攻击你们的前端，技术层级因人而异，尴尬如老板让你改了十几次设计最后选了第一稿时的心情。

客户端的开发中用到的开发语言有更深的逻辑，不过实际开发中的布局部分是可以直接用到IDE中的工具可视化调整，自己动手可以有效改善你的像素眼体验，后期我们整理客户端IDE的操作文章。

图层与代码

看完上面的介绍，是不是感觉好刺激。

但是其实，作为设计师的你经常接触的图层是能对应到前端中的代码的。

首先说下前端中页面的基础结构，就如PS中新建的一个画布，除了默认的背景层可以没有其他图层，PS中图层不用解释，前端代码里乱乱的英文且不用管。如下图：

只看body里面（与PS中的画布类似，都是主要内容的承载体）。

每增加一行文字或者一张图片，在PS中相当于增加了一个图层，对应到前端是增加了一个标签，看下图：

PS新增两行文字，前端中则是新增两行标签代码。

以上只是一些简单的布局部分，后续实例还有动效交互以及复杂的布局。不过就实现难度来说，单就布局也有前端无法实现的效果，譬如文字描边、异形布局等，或者能实现但却不入眼。在下一篇，我会着重介绍如何把设计图转化为代码。

互联网发展速度很快，前端现在面对的终端也不只有电脑端和手机端，还有电视端、VR设备等新型终端，技术迭代速度更快，前端有多前这个话题需要细说，请关注我们的线下分享会。