标准的意义

 网页设计，可能大多数的人第一个想到的就是前端代码和后台的程序，但在做这两个之前，还有一个必须先有的，那就是设计图。没有设计图，前端工程师就没有依据去实现。可能很多人都会说我做网页设计图都没按照规范做过，这个也是可以的，那为什么我们还要花费那么多时间学规范呢？主要有这么几点原因。

1、统一识别

规范能使页面相同属性单元识别统一，防止混乱，甚至出现严重错误，避免用户在浏览时无法理解。

2、节约资源

除活动推广等个性页面外，设计其他页面使用规范标准能极大的减少设计时间，达到节约资源的目的。

3、重复利用

相同属性单元、页面新建时可执行标准重复使用，减少无关信息，就是减少对主体信息传达的干扰，利于阅读和信息传递。

4、上手简单

对于设计或前端新手来说，查看标准能使工作上手时间更快，减少出错。

因为存在这几点，所以我们去设计的时候按照规范来还是能更快去进行设计的，而且规范都是别人总结出来的，包含了很多用户体验的最佳数值，这个也是可以参考的。

网站的分类

而在设计网站的时候必须对网站的种类有一定的了解，需要弄清楚网站的特征是什么，对症下药。做到最好网站大类的可以分成这么五种，电商网站、企业网站、个人网站、门户网站、专题网站。他们每一种都有各自的特性，先做得更好的话最好都去了解一下。这些都只是他们的大类，小类去分的话会更多。

网站的规范

了解完上面的一些东西，接下来就可以进入状态来学习一下网站设计的时候有哪些规范了。

●尺寸大小

不论设计什么，我们都必须有一个作为画布，然后才能再画布上进行设计，那么我们这个画布该做成多大呢？这就是我们去设计的时候遇到的第一个问题。

一般我们去设计的时候都是依据电脑分辨率大小去设计的，也根据电脑显示屏的大小，现在用的比较多的是1920px的宽度，以前的版本也有用到1440px，比较小的还有1280px的，但现在屏幕越来越大，一般设计的设计的版面也会设置得大一点的尺寸。

那么，如果我们设计的时候使用的是1920px宽度大小的屏幕，那么我们内容该做成多大，是跟整体宽度一样大吗？一般不会有人这么做。

因为有些时候我们做出来1920px这么大的宽度，但有些人去浏览的时候他们的电脑宽度才只有1440px，那么旁边的那一部分就会显示不出来，所以我们就需要一个内容区域的大小，来保证不论在多大的显示屏都是可以完整的显示全部的内容，这个内容区域的大小一般设置的是1000左右，以前的设置得比较小一些，像960或者980，现在有些再设计的时候设置得大一点的话可以设计到1200px这么大。但保险点还是1000为好。具体的大小可以根据自己的要求去调整。

●字体大小

字体的要求也是蛮多的，都是数据，一般去设计的时候标题的大小设置在16px或者14px，注意不要设置成15px，尽量避免出现一些单数的值。

正文的大小也是用户最小能接受的字体大小：12px，这个就没必要设计得那么大。英文的最小码可以设置到9px，这个大小的话也已经能看清楚。

还有一个是使用什么样的字体，因为这个网站设计出来之后是要上线给别人浏览的，所以为了避免一些字体不能显示出来，所以采用的字体会要求采用系统自带的，像中文的有微软雅黑、黑体、宋体这些，英文的有Tahoma、Arial、Verdana。这些也是我们应该考虑的问题。

●网页栅格

先解释什么是网页栅格：

网页栅格就是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。简单的理解就是可以通过这些网页栅格去区分内容，将内容归类。它的计算是比较复杂的，我们这里大概的了解一下就行了。

上图中以980px为例子，将栅格分了两栏和三栏的时候他们之间的间距为10px。如果分成四栏，那又会有所不一样。

这是四栏的情况，而且也分成了两类，一类是二级页面，一类是三级页面，宽度分别为40px和30px。

●表单

相信学过前端的同学对这个就比较了解是什么了，所谓的表单就是那些输入框和单选框、复选框。他们之间的间距和大小都有一定的规范。

表单与表单的间距，表单与文字的间距，都有一些规范在上面，去设计的时候按照规范去做就行了，当然这些也只是规范，可以适当的放大或者缩小。

大部分的都只是一些数值，多做几个网站，自然就记住了。

●留白

适当的将内容进行留白，让整个界面的各个元素能明显的区分。

①板块间距均为10px 

②板块与内容间距均为10px

③内容单元之间间距为10px

④内容的间距均为10px

所以去设计的时候不要把所有东西全部堆积再一起，要进行有效的区分，留白能让看的人觉得界面给的感觉很舒适。

●Button

按钮的分类也比较多，有分为运用的按钮，例如交易、购买这些按钮，也有后台的按钮，例如：搜索、提交这些，不同的按钮，大小也是不一样的。

这些就是按钮的规范，做的时候可以看一下。

●图文规范

为了让网页看起来更加的整洁，而不像是堆积起来的，所以也要将文字与图片用距离区分开来，让它文字是文字，图片是图片。

图片与文字之间的间距一般是10px，标图与价格的间距也为10px，有些地方也会用到一些描边，这时候描边不要做得太大，一般是1px就够了，颜色也不需要复杂，简单点就好，这里推荐的是浅灰色#CCCCCC。

●图标

网页上也有很多用图标来代替文字，这样能让页面更加丰富，不会只有文字那样那么单调。

就像上面的这些图标，去设计的时候也有几个要求。

第一个是制作规格上，要有一个统一的视角，统一的倒角，让他们的外形看起来是一个妈生的，还有就是材质的，不要有些是铁质的，有些又做成木质的，太多样会让页面看起来很乱，还有一个是颜色数量不要超过三种，太多颜色会很杂，所以简单点就好。

第二个是制作要求，要会意直观，说得明白点就是要让别人一眼就看出它是谁，这也是它用来区别文字的价值，如果看都看不出是什么，那还不如直接用文字。

●banner图

这个banne图是可以根据平面的规范和要求来设计，在网页中宽度一般是满屏不会局限在内容区域里面，高度的话看设计师个人没什么硬性规定。

说到这里就差不多了，以上讲的只是规范，不是规定，所以不需要全部按照它的大小去做，一切依照设计师的想法可以进行更改，不要因为这些规范去限制你天马行空的现象。设计以美观为主，大胆的设计，大胆的创新，做出一些属于自己的设计风格。