网页规范总结

作者：黄志浩 日期：2019年7月12日
首先讲一下设计网页的工作流程，从原型图到视觉稿在到设计规范在到切图标注在到前端代办在到后台最后到项目走查。
那我就来讲讲原型图到切图与标注的知识及规范，原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

视觉稿阶段就是我们要根据原型图确定的内容和大体板式去完成网站的界面设计，在设计网站需要的图片时，我们需要一些图像和灵感的素材，比如我们做banner时，我们除了收集很多素材之外，也可以设计一个“风格板”。简单的说就是将一些与主题有关的资料和素材拼凑在一起，这样我们可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓住人们眼球，这时可能会使用到需求方提供的照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和团队成员沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

当视觉稿通过后，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

最后我要讲的是切图与标注了，网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握PS软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如Cutterman、Zeplin等切图插件中的Web选项为前端切出网站所使用的图片。然后就是标注 ，把该页面所有的尺寸出来，尺寸一般定位双数，敲过前段的人都知道双数会比单数好敲。