初衷

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

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

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

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

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

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

WEB端设计规范

常见网页尺寸

输入图片说明

[图片上传失败...(image-6fc135-1513684111749)]

输入图片说明

一般网站宽为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。国内尺寸设置比较保守，这样可以保证大部分用户舒适的浏览网页。

主流浏览器：

• chrome
• IE
• firefox
• safari
• opera

知道了浏览器的设计特点才能更好的设计页面，比如浏览器的头部的操作高度和信息的展示都会有所不同，那么页面在每个浏览器上面的展现就会有所不同。

点击操作：
主要通过鼠标点击、滑动、滚动、拖拽。

屏幕适配：由于受限于H5页面在移动设备上的屏幕是各种各样的。对设计影响比较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。而H5页面会有非常多的一个屏幕尺寸，那么在不同的屏幕下的界面适配就成了一个很大的问题。解决的办法就是通过响应式网站的设计方法来提升在不同分辨率下的兼容性。

响应式设计概念：指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交互可操作。

举例如下：

输入图片说明
输入图片说明
输入图片说明
输入图片说明

做响应式设计时需要遵循一个原则。由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
1、临界点：当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。
2、删格：将页面分成几栏、几块。

输入图片说明

以上是以12删格为基础的案例。它的设计原则就是将页面分成12个等分的栏，然后把页面的内容设计在12栏内。比如左边的一些商品展示它用到了一个删格的单位；其中的一个最大面积的商品展示它用到了比较多的删格；最右侧的操作信息用到了四个删格的比例。
3、使用Native App的UI控件：在设计H5页面的同时，能够尽量让样式与Native保持一致；文字字号颜色均可与APP设计一致；减少不必要的手势操作；避免与浏览器的交互冲突，如左右滑动。

尺寸大小

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

输入图片说明

字体大小

• 尽量避免出现一些单数的值。
• 明确指定标题和正文的字体大小。
• 对于非系统默认字体，需明确指定。

网页栅格

指定对应范围的栅格间距参数。示例如下：

输入图片说明

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

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

表单

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

输入图片说明
输入图片说明

留白

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

输入图片说明

板块间距均为10px
板块与内容间距均为10px
内容单元之间间距为10px
内容的间距均为10px

按钮

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

输入图片说明

图文规范

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

输入图片说明

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

图标

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

输入图片说明

就像上面的这些图标，去设计的时候也有几个要求。
第一个是制作规格上，要有一个统一的视角，统一的倒角，让他们的外形看起来是一个妈生的，还有就是材质的，不要有些是铁质的，有些又做成木质的，太多样会让页面看起来很乱，还有一个是颜色数量不要超过三种，太多颜色会很杂，所以简单点就好。
第二个是制作要求，要会意直观，说得明白点就是要让别人一眼就看出它是谁，这也是它用来区别文字的价值，如果看都看不出是什么，那还不如直接用文字。

很多图标如果能用css3样式完成的，参考这个网站Font Awesome。

banner图

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

App设计规范

这个设计聚合网站对Android和iOS，手机和平板电脑的设计做了详尽的说明，推荐阅读这个文档。

Android设计规范点击此处查看，也有一个中文版的，点击此处查看。
iOS设计规范点击此处查看。

后记

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

参考：设计聚合网站