【路在前端】我的前端工作流程梳理

学习的意义是，即便以后我们会忘记学到的大部分内容，但剩下的东西一部分会固化在我们心中，塑造了我们的思维模式和判断标准;另一部分则融入了生活，影响着我们的涵养和气质。——我

“前端开发”工作，狭义的定义是前端交互和网页外观的实现。我们团队的前端工作涉及到WEB前端技术的方方面面，覆盖了视觉设计、前端美工、网页实现、交互式设计等技术。

笔者作为一个刚入门的前端工程师，分享自己的拙见，目的是将“前端（广义）具体做哪些工作？”、“怎样按部就班地工作”介绍给接触前端的初学者。

一、WEB制作流程

“如果你不知道WEB，你仅仅是不知道WEB；如果你知道WEB，那你不知道的就多了。”

WEB开发技术日新月异，但一个完整的WEB网页的制作流程一般都是：需求——策划——原型图——设计图——制作——发布。

其中，我们需要重点关注内容，是原型图、设计图和制作三个部分（正常说来，这些分别该由交互设计师、UI设计师、前端设计师来完成）。其中，原型图只包括网页跳转和交互行为；设计图则需要拿出外观合适（与实际网页“看起来”一样）、功能完备（只能看，不能点）的具体页面；最后才是前端切图制作“可以点”的实际页面。

二、原型图设计——能点不好看

“好的交互设计师几乎都是强迫症。”

原型图设计，我的理解是需求可视化，虽然不能最后确定页面的设计，但哪个页面有哪些功能，这个页面又要链接哪些内容是肯定要展示出来的。比如做一个对内的门户系统，重点就老老实实地把常用功能列出来放在一起，放大，用特殊效果凸显，不要弄得太长太靠边，像其他门户网站1080px的横向页面重点放在300px~500px的做法一样，好的做法都是做的人总结的。

工作内容：

1、了解用户使用这个产品做什么

三个目的：确定原型设计所需要的东西，设定适当的期望值，确定恰当的保真度。

2、根据用例图构思架构的层级（导航栏的数量）和宽度（第一导航栏内链接的多少）

一般来说，层级不大于3，宽度在7左右。如果没有用例图，请先从需求里面提炼。

3、页面构思

包括布局、风格、交互效果的粗略设计。

4、使用“恰当”的工具进行“恰当”的设计

如果需求不高，用PPT甚至手绘都可以做原型，而原型图不是设计图，不要十全十美。最好的方法是吧亮点凸显出来，比如创新点的上色或者特殊功能按钮点击的动态效果。对于传统功能，可以截个图一笔带过。

软件要求建议：axure（高）、PS（低）

用好axure可以帮助我们更好地表达。但是，没有必要为了做一个完美的rp文件，而浪费大量的精力。我们追求不是完美的原型，而是好用的产品，清晰的结构，流畅的交互。

三、设计图制作——好看不能点

“评判设计图好坏的标准是：这幅图会不会让人忍不住去点”

如果计划顺利的话，最后网页的成品外观上看与设计图没有差别。它是设计师的创意，与编程无关，不必去问程序员能不能实现。它与原型图的区别在于重点是放在了页面外观上还是动作交互上。从某种意义上来说，和原型图设计异曲同工。

工作内容：

1、了解用户使用这个产品做什么

和原型图一样，甚至整个实现流程都要考虑的问题。这次重点在于站在界面美观而不是功能的角度看。一般根据原型图构思高保真的设计思路，然后完成板式结构的优化。比如游戏网站原型图提供的功能里，“下载游戏”的按钮一定要做大做突出；做企业门户则要考虑企业形象和主要业务；时限活动的banner一定要突出之类的。

2、优化、优化还是优化

①调整结构和组件大小，精确到像素。别用奇数值，因为不好居中。

②设置色彩规范，主色是什么，辅色有多少，文字色按层级如何使用，请用RBG模式#XXXXXX格式表示。

③设置文字规范，字体，字号（别用奇数值），行间距等，字体要考虑到用户端是否有这种字体，小段突出的字可以用图片（比如公司LOGO下的题字），否则用微软雅黑等默认字体是最稳妥的做法。

④设置图形和控件规范，图标如果有动作（鼠标经过变化），要标示出来，按钮按层级设置效果等。

3、填充具体内容和样式

说白了就是为原型图擦屁股，谁叫人家关键点在功能上不在图形界面上呢。大段文字内容删掉，设计有风格特色的图标和插图（大小别用奇数值）等等。好的设计确实吸引眼球，这是考验设计师审美和灵感的一关。

软件要求建议：PS（高）

需要高水平的PS技术，因为你做的就是用户看到的。为什么说一般做后端的看不起做前端的，做前端的看不起美工，因为很多美工做事不按照基本法(￣ˇ￣)

四、制作过程——好看又能点

“不想当设计狮的实习牲不是好程序猿”

说道前端的本职工作，无非就是把功能和界面合在一起，利用HTML/CSS/JS等语句完成网页的功能，至于能不能达到效果，那是后端的事，我们就假设后端足够聪明，能够传递正确的数据吧（这是后端看不起前端的原因么？）。

然而，即便是作为程序员而不是设计师的前端，也绕不开PS这道坎，你拿到手的就一个RP文件，一个PSD文件。不会PS然后用这个写HTML？Excuse me？

工作内容：

1、从PSD到HTML，一条名为“切图”的路

会做不难，但做好就需要经验和技术了。如果你做出来的和设计图不一样，设计师可不背锅。该切的切了吗？阴影保留了吗？抠出来是方的、圆的还是多边形？这里提几个建议：①分块切图效率更高；②多手动，少自动；③命名要注意，用户在注视着你。

2、HTML/CSS/JS各司其职

我这里不讲它们的使用和语法，也不提jQuery或者Bootstrap的使用，只说一下我理解的好的使用习惯。

HTML只做结构设计，看到几个部分就对应几个模块，从大到小，从外到内，从公共到独立，一目了然。重点是如果要改需求，目标也清晰。其他东西交给CSS和JS做。

CSS只做样式设计，这个模块大小、位置、颜色，做盒模型。另外，可以分成三个组，一是重置样式，用于修改一些不合适的默认格式。二是公共样式，主要是头尾以及LOGO等很多页面都会用到的样式；三是独立样式，用于只使用一次的样式。

JS只做行为设计，它不想和我说话并向我扔来了jQuery。

3、搭好框架填内容

HTML/CSS/JS的框架有了吧，具体动作设计原型图给了吧，图形窗口设计图有了吧，那还说什么，该填什么填呗。这部分粗讲没什么东西，细讲内容又太多，只有以后再细说了。

4、检查、测试

兼容性，数据传输什么的，为了前端开发的地位，不得不做啊。

软件要求建议：Dreamweaver（高）、PS（中）

想获得更大的成就感，那就去还原一幅设计图吧。前面的设计师做的都是假的，是特技，只有用程序，才能duang出来一个美丽世界。

五、总结

前端设计不仅是面向用户的，也是面向后端程序员，面向产品经理，面向老板的。高效地工作不仅是完成自己工作快，也是让其他人容易理解。在程序开始做之前就收到明确反馈，在改变需求时能很快完成，不管是改个形状、改个颜色，还是改个位置、改个链接。如果这篇引导文章能让实际工作时少做几次不必要的迭代，这个目的就达到了。

（以上部分图片来自花瓣网）