浅析WEB网页设计的规范

　　一、网页尺寸

　　制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。

　　但是并不代表我们可以在整个画布上作图。

　　网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。

　　1、左右布局，灵活性强， UI的限制小;

　　左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整;

　　右侧为内容版块范围，是网站内容的展示区域。

　　2、居中布局，中间的黄色部分为有效的显示局域，用于网站内容的展示;

　　换句话说，两边均为留白，没有实际用途，只是为了适配而存在;

　　目前主流电脑屏幕尺寸有以下几种：

　　一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

　　二、网页字体

　　字体设计的总原则是：可辨识性和易读性。

　　网页的文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体，英文则建议使用arial无衬线字体

　　常用的字号大小有以下几种：

　　12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。

　　14px 则适用于非突出性的普通正文内容。

　　16px、18px或者20px 适用于突出性的标题内容。

　　三、字体间距

　　相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。

　　行间距，推荐以 字体大小的1.5—2倍 作为参考;

　　段间距，推荐以 字体大小的2—2.5倍 作为参考。

　　即，当选用14px 的字体时，行间距：21—28px;段间距：28px—35px。

　　四、字体颜色

　　主文字颜色，建议使用 公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。

　　正文字体颜色，保险起见，选用易读性的深灰色，建议选用 #333333到#666666 之间的颜色。

　　辅助性的，注释类的文字，则可以选用#999999之类的比较浅的颜色。

　　如果，你对颜色驾驭能力比较强，你也可以选用 偏公司VI颜色的深色，作为正文字体颜色或者辅助性文字颜色。

　　例如公司的品牌色是蓝色，那么，正文字体就可以选用偏蓝的深色。

　　这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。

　　五、首屏内容

　　做网页设计时，你还要特别注意网页的首屏内容，在构图和内容呈现上，首屏模块的设计至关重要。

　　除去任务栏，浏览器菜单栏以及状态栏的高度，剩下的是首屏的高度。

　　Window XP的首屏高度平均值是580px，Window 7的首屏高度平均值是710px。

　　综合考虑到Window XP已经逐渐退出市场，在实际操作时，我们 以710px 作为依据。

　　如下图所示，蓝色区域则是我们设计时需要着重考虑的首屏范围。

　　另外，是关于图片尺寸的问题。

　　需要全屏显示的图片，宽度尺寸严格设计为1920px。

　　但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，即控制在1200px以内。

　　避免遇到小屏幕设备时，内容显示不全，而造成信息的遗漏的情况。

　　六、响应式布局设计

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

　　由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。

　　对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);

　　无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化(当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。)

　　我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。

　　常见的主要有如下几种方式：

　　1、布局不变，即页面中整体模块布局不发生变化，主要有：

　　2、布局改变，即页面中的整体模块布局发生变化，主要有：

　　很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内(发生布局改变的临界点称之为临界点)保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。