网页重点

网页设计规范

一、网站页面设计：

1、网站页面类型：“国”字型、拐角型、框架型（左右、上下、综合）、封面型、标题正文型、Flash型。

举例：“国字型”

2、网站页面构成：

1）页头（Header）：通常放置Logo（网站标志）、Banner（广告条）。

2）导航栏（Nav）：通常放置在页面左侧、右侧、顶部、底部。

3）主体：

4）页脚（Footer）：通常放置版权信息、联系电话、网站介绍、备案信息等等。

二、网页设计尺寸

1、网页布局

（1）左右型

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

2）右侧为内容板块范围，是网站内容展示区域。

（2）居中型

1） 居中布局，中间的蓝色部分为有效的显示区域，用于网站内容的展示。

2）两边均为留白，没有实际用途，只是为了适配而存在。

3）内容限制区域在好控制在1000px-1200px。

2、网页尺寸：

根据屏幕分辨率的大小设计网页的宽度，高度视网页内容而定。

（1）标准分辨率：1024px*768px（目前10%-20%的用户在用）

主体内容宽度约：1000px（常用宽度：960px，980px，1100px，1170px，1200px）首屏高度约：700px

（2） 其他常用分辨率：（1280*1024，1366*768，1440*900，1600*900，1920*1080）

主体内容宽度约：1200px（常用宽度：1100px，1170px，1190px，1200px） 首屏高度约：750px

注：1）一般网站内容显示区域为996px；国内网站大部分是以1000px为界限，因为超过1000px适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000px左右可以保证大部分用户的体验效果。

2）首屏高度：除去任务栏，浏览器菜单栏以及状态栏的高度，剩下的是首屏的高度。Window 7的首屏高度平均值是710px。

3、留白大小：

版块间距、版块与内容间距、内容与单元间距、内容之间间距均为10px；

注：大尺寸14号字体时，留白空间可以调整至15-20px。

三、网页字体规范

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

中文字体建议使用：宋体、微软雅黑。

英文字体建议使用：Arial 字体。

2、常用的字体大小号有：12px；14px；16px；18px；20px；

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

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

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

4） 网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要用适用的偶数字号。字体规格也不需要太多，最好适用三种混搭。

3、字体间距

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

2）行间距，推荐以字体大小的1.5-2倍作为参考。

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

例：当选用14px字体时，行间距为21—28px； 段间距为28px—35px；

4、字体颜色

1）正文字体：选用易读性的深灰色，建议选用#333333到#666666之间的颜色。

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

四、其他注意事项

1、让页面浏览变得更容易

用户浏览我们的网页时，并不是通读所有的内容，而是快速地扫描整个网页。我们在设计网站时，要确保网页标题、登录注册按钮、导航栏或其它同等重要的元素放在用户很容易看到的地方，以减少用户寻找的时间。我们的设计决定了用户先看到哪个，再看到哪个，最后看到哪个。

2、导航的设计要简单易用、清晰明了

导航设计是网页可用性的基石。如果用户在你的网站里找不到导航，那么无论你的网站有多好都没用。导航的每项对用户而言，都应该是清晰的，系统的导航页在每一页中都应该是一致的。用户以最少的点击次数，最快地到达他们想要浏览的网页，这才是导航设计的目的。

3、改变访问过的链接的颜色

链接是导航的一个关键因素。假如用户点击过的链接没有改变颜色，很可能导致用户多次点击同一个链接。如果用户知道自己过去访问的链接和现在还未访问过的链接，那么用户会更容易决定自己下一次要点击什么。

4、确保能点击的元素让用户看起来就能点击

一个物体的样子会告诉用户如何使用它。看起来像按钮或链接的视觉元素却不能点击，很容易困扰用户，例如：文字下划线并不代表超链接。我们要让可以点击的元素明显一点。

5、不要让用户等

网站用户的耐心和注意力是非常小的。根据研究，10秒是用户集中注意力完成一个任务的极限。当用户在等待内容加载时，他们很可能会变的沮丧。如果加载速度很慢，用户很可能会离开这个网站，即使是足够漂亮的加载动画设计也无法改变这个结果。所以尽量少使用图片，能用背景颜色的就不要用背景图片，能使用小图片的就不要用大图片。

6、不要有自动播放视频（有声音）

在后台自动播放视频、音乐或声音文件，都是用户难以接受的设计方式。用户很少使用这些元素，除非是在适当的时候。

7、不要为了网站的美观牺牲网站的可用性

最好不要在文字后使用繁重的背景、也不要使用让用户很难阅读或颜色对比不明显的配色方案。

8、不要使用闪烁的文字或广告

闪烁的内容或闪烁会导致易感人群的癫痫病。这样的设计不仅能引发癫痫，而且还会因吸引用户的注意力而惹恼用户。