网页设计规范标准

网页设计规范标准 网页设计规范标准：

作为一名网页设计师，在平时的工作中，会找到设计网页过程中一些共性的东西，也就是所谓的一种标准。在了解这些标准之后，可以可好的提高我们的工作效率！

现将我平时了解到的网页规范标准整理如下：

一．导航

导航在一个网页中所处的位置是很醒目的，它在整个页面中起到一种导航，引导的作用。清晰明了的导航可以更好的引导浏览者查找到他们所想要的内容信息！

导航的排列方式有以下几种常用形式：

1》横列。大部分的网站都是采用这种导航形式。这种形式也是很符合人的浏览顺序的，从上到下的浏览顺序。这种导航的放置位置特别显眼。

2》竖列。这种导航目前在我们国内运用的还不是太多，好多英文网站上运用的会比中文网站要多。

导航的表现形式有以下几种常用形式：

1》背景上打字。这种导航在设计的过程当中，上面的文字形式最好是浏览器可以识别的字体，比如说：宋体，微软雅黑，黑体。最常用的是宋体。这种导航在交互的时候，只要上面的文字样式发生变化，就可以让用户体现到交互的感受。它的好处是，辨识度较高，可以让搜索引擎正确搜索到网站的导航信息。但难过缺点是：由于没有采用特殊字体，也是纯粹是静态的，让人浏览起来，感觉不是那么的炫！因此，在实际应用中，我们应该根据网站的不同特点，合理运用！

2》全部是图片的。这种导航可以采用特殊字体，比如说：方正大黑，华文行楷等。这种导航应用不同的字体，可以达到不同的视觉效果。为了实现交互，每个导航发生变化时的图片也要设计出来。因此在切图排版时，由于运用的特殊字体，就要切成图片的格式，缺点是，不容易让搜索引擎搜索到导航上的文字信息。因此，在实际应用中，我们应该根据网站的不同特点，合理运用！

3》纯flash的形式。这种导航在视觉上很有冲击力，很炫。在设计页面时，我们首先要把flash导航的形式设计出来，默认的状态是什么样的，鼠标滑动刀到上面是什么样的，鼠标按下去是什么样的，鼠标离开是什么样的，这些都要事先设计好，然后再做动画。这种导航的缺点是字节大小会比前面两种导航形式要大，会影响页面加载的速度。不过在动画制作过程中，如果可以尽量减小它的字节大小，也是可以运用的。因此，在实际应用中，我们应该根据网站的不同特点，合理运用！

导航的下拉形式有以下几种常用形式：

1》JS表现形式。有些导航在设计时，要出现二级下来。这里所说的JS，一种是专门的JS程序员写出来的代码形式，还有一种是直接运用Dreamweaver里自带的下拉形式。

2》DIV表现形式。运用p这种新技术也可实现导航的二级甚至是三级下来形式，是目前比较常用的技术。

二．KV的形式

KV在网页中能起到一种画龙点睛，突出主题思想，体现行业特性的作用。可见，在网页设计过程当中，KV的制作是多么的重要！一个网站的成功与否，可以毫不夸张的说，绝大部分是取决于KV设计的成功与否！

1》单纯是一张静态图片。有的网页在设计过程中，只运用一张静态的图片来体现网站的主题思想！这样做的好处是，可以加快网站加载的速度，对于一些喜欢简洁网页的客户来说，由于他不喜欢页面太过于热闹，动来动去让人看的眼睛都花了，那么可以运用这种形式，但前提是，这张图片可以准确的向浏览者传达他们公司的行业特性！

2》Flash的表现方式。对于一些互动性较强的网站来说，页面不能太过于安静，因此通过flash 来诠释KV的主题思想，也就变得顺理成章了。这种KV除了很炫，它也可以实现动态添加，这就需要和程序数据库有效结合，它是目前比较流行的。但是要注意的是，在不影响加载速度的情况下，采用这样的表现方式是可以的。

3》JS的表现方式。这种KV的表现形式，可以实现动态添加。它虽然达不到Flash那种炫酷的效果，但它有一个优点，那就是它所占的字节数据没有Flash大。

在KV的制作过程当中，我们所要主要的是：图片的宽高尺寸要取整数；

三、配色问题

一个网页的色彩最好不要超过3种，一面视觉效果混乱，用色柔和，对比度强的色彩不能应用于一般网站，时尚网站使用还可以。一般不好搭配的颜色，用灰度搭配。

几种配色方案

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了：）

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

在网页配色中，忌讳的是：

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

四、页面排版规范

1.总体部局

布局平衡页面简约、无多余空白行，页面尺寸：

1024×800分辨率下：页面宽度≤768，推荐高度：≤621：

800×600 分辨率下：页面宽度≤768，推荐高度：≤454。

2.排版规范

页面左右局中，中文段落必须有2个汉字的缩进，字间距采用默认大小，行间距为16px~20px即150%左右，段落之间空一行，中文使用12号宋体。

3.字体问题

最常用的字体有：宋体、微软雅黑、黑体这三种形式。比较常用的是宋体。因此网页中的正文文字信息，通常都是运用宋体。对于网页中的标题文字，最好是使用那三种字体，这样也方便切图和程序，减少他们的工作量，也加快网页显示速度。

对于客户发给我们的文字信息，我们不要一味的复制粘贴到页面中，要考虑到客户所给文字信息的特点，多做一些美化工作。比如说，可以换行，这样条理会清楚一些，因为没有人会喜欢看一段很枯燥的文字。可尝试运用一些图标来标示分割。也可尝试留白分割、线条分割、颜色块分割等。

在内页正文中，如果有大标题，小标题，还有一大段落的文字，这时候，我们可以通过字号，字体颜色来有效的区别出主次。大标题的字号可以是16px,字体颜色是#333333,小标题的字号是12px,加粗，字体颜色是#333333；那么段落的文字字号就是12px,字体颜色则用#999999，这样就可以让浏览者很清楚的看到内页正文的主次了！

1.很重要的一个问题，用标准字标准色，这是一个规范，行距一般控制在20px左右，不要太小，也不要太大，自己大小注意，中文12px，英文11px或者10px。不要用黑色字，可以用灰度或者其它柔和颜色，统一整个网页字体的色彩以及大小，规范整体。

2.文字布局：必须留有“天”“地”“左”“右”不能把版面占满。

3.文字颜色：一个页面主体颜色不超过三种，颜色协调，文字清晰。

4.文字长度：不要让一行或一段太长，特别是文字式网页，不妨加上显眼的标题或适当的插图，精彩的文章也要包装，既能精彩又能留住读者才算上乘。

…… 此处隐藏：2287字，全部文档内容请下载后查看。喜欢就下载吧 ……