浅谈网页设计（Web UI设计）规范

　　网页设计，也叫Web UI设计，是UI设计行业中重要的一部分，也是我们UI设计师培训中的学习重点之一，而网页设计规范相关的知识，是每一个设计师都要牢记于心的，今天天水网页设计就带您简单地了解这些规范中的重点。

　　首先肯定是网页的尺寸以及布局。现在我们的屏幕技术是越来越先进，不仅外观尺寸做的越来越大，里面的分辨率也是越来越高，所以我们在进行布局的时候首先就要考虑到让自己的作品能够尽可能的适应的所有型号的屏幕。而布局的话就比较灵活了，可以分为左右布局，居中布局等等，这些布局一是要考虑到适配，二是要考虑到我们网站的主题，突出网站的重点内容。比如我们看到的各种购物网站，他们的布局都有相似之处，也是由于网站类型所决定的。

　　在这里提一个比较特殊的网页布局设计，叫做响应式布局设计。这个指的是针对不同的设备、屏幕、分辨率等，能够让各种网站信息在不同环境下表现一致，同时让页面可交互也能正常操作。比如在电脑这种比较宽的设备上我们可以用很宽的条幅来展示比较多的信息，但是对于平板或是手机上这种比较窄的设备上，就把这些变成以竖列的形式进行展示，这就是响应式网站的好处。下面天水网页设计提几点建议共勉：

　　一、尺寸规范

　　在网页设计中首先要解决的是网页布局大小及尺寸的问题，当今常见web网页尺寸，最常见尺寸宽度为1200像素。

　　为了适应屏幕的显示，页面宽度设制要有一定的范围值，其实在设计及设计学中也没有相关硬性规定，但是为了兼容大多数浏览器一般是设置960px，随着现在浏览器分辨率的变化，已开始1000px,1200px宽度发展，例如淘宝(1000px)京东商城(1200px)。如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，工作量也就随之增加了。

　　二、文字规范

　　字号常用：(系统默认字体)

　　黑体 微软雅黑 宋体(12PX-16PX边缘必须给无;大于16PX边缘不能给无)

　　字体 ：(使用偶数)

　　12PX (最小)14PX 16PX 18PX

　　英文(10号最小)

　　字体单位：使用像素

　　三、屏幕分辨率

　　72像素/英寸

　　颜色模式：

　　RGB 8位

　　四、网页背景

　　纯色

　　渐变色或者底纹

　　通栏图片 宽1920

　　五、网页设计所需注意事项

　　没有内容层次用户的眼睛喜欢有秩序的设计，如头部包含导航和LOGO，特定内容使用lightbox，三列分栏，页脚。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。

　　太多的色彩背景一种颜色，内容文本一种颜色，链接一种颜色，页头和lightbox一种颜色，图案和页脚各一种颜色。这很好，因为它帮助区分了有用的内容。但是，多重渐变几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白灰黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。

　　太多的字体一般一个简单的网页设计，一般字体不超过3种。多则乱没有足够的空白空白可以说是设计中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间不考虑用户的分辨率。

　　对比的问题你考虑过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好，其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字，考虑一下改变字体大小或方式。

　　不一致，一致性是网页设计的关键。它是把网页设计组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的情况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体大小和色彩，用户很快会觉得不知所措。

　　没有足够的文字间距与空白有关，文字间距有两个部分，一个是字距，关系到字母之间的空白。一个是行距，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。

　　网页界面设计容易犯的几个错误

　　1、留白太少

　　留白是网页设计中一个重要部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间。

　　2、字体设置过多

　　通常来说一个网页中最好不要超过三种字体。

　　3、色彩太多

　　文本、背景、框架等各为不同的颜色，虽然看似鲜艳但是，多重渐变、几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白、灰、黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。

　　4、内容过于堆叠

　　网页的内容繁多，各种分支信息占据的空间过多，没有突出关键的主题。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩、价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。

　　5、没有足够的文字间距

　　间距过小是造成网页缺陷的一个重要原因。网页一个是行距，可以用CSS直接调整，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。