前端学习笔记入门篇----视觉稿

 网上上面一个页面从无到有，会经过交互、视觉、前端等几个角色的流水线工作。而前端开发一个页面的时候，首先要有视觉提供的视觉稿，包括视觉PS稿，线框图，标注图等。

第一次做一个整体页面，对于视觉提供的稿件并没有太在意，（主要原因可能是大体做个样子出来都已经很不容易了）。但后来由于发现所有的资料提供都是有原因的，那就是前端做出来的页面的评估标准，视觉的稿件也是守则。

下面来总结下，现有视觉稿用来做什么的。

1.视觉PS稿

这个稿件，准确的说是一个PS文件，里面是关于页面成形的各个图层和样式效果图。这个里面图层很重要，通过剥离这些图层，你能清楚页面结构，同时获取一些图片背景资料，作为页面DEMO的图片使用。

 

2.线框图/标注图

这些都是一些图片，但里面对于页面整体风格，比如对齐，居中，边距长度，字体、颜色，效果等都做了严格的规定，必须完全按照这些数字进行开发。特别要注意网格线，表示行距，字体对齐等规则；

 

3.标准图

这个图就是实际用户所看到的效果，如果前面的两个文件给出的一个规范，那么这些图给出的就是最后出来的效果，包括了用户浏览页面的各种情况。

 

所以做一个普通的前端开发人员，不仅仅要会写CSS，还要能够看懂视觉稿，处理特效的解决方案，最好还要同时考虑到页面性能，现有公司的底层框架和代码规范等。