说起网站，大家都很熟悉，几乎每天都会通过网站浏览信息，而这些信息正是网站所有者们精心设计和编排出来的。
在现在创建网站门槛极低的时代，无论是企业还是个人都有能力通过网页展示内容，如何在众多网站中脱颖而出，这就是考验网页设计师的能力了。
网页设计需要基于程序来实现，那在开始动手制作网页之前，数艺君给大家整理了一些网页设计的标准与规范，希望大家能在设计出集艺术与规范于一体的网页设计图。
有奖互动：
网页设计的基本规范
网页设计规范是适用于Web端的人机交互界面的标准，是每个网页设计师从业时必须要遵守的行为准则。网页设计规范的首要目的是优化Web产品、提升用户体验。同时，统一的网页设计规范可以让设计师重复利用相同模块，有助于提高设计师的工作效率。此外，遵守设计规范也有利于前端工程师、交互设计师等其他岗位之间快速有效地传递信息。上岗前熟读设计规范并牢记要点可以帮助新人快速适应工作岗位，减少出错的可能性。
分辨率与尺寸
◎网页设计的分辨率
根据现阶段显示器的实际显示效果，在网页设计前设计师会选择“72像素/英寸”作为网页设计的分辨率标准，这样选择是因为较高的分辨率虽然会在一定程度上提升图片的显示效果，但是也会造成加载过慢、服务器超载的问题，而过低的分辨率又会影响图片的品质，使图像过于模糊。如果将分辨率按72像素/英寸这样的标准来设置，可以在保证显示效果正常的前提下，最大限度地降低图片的数据量，从而达到流畅加载和实现较优质显示效果的目的。
分辨率设置方法：在Photoshop的“菜单栏”中执行“文件>新建”命令，在弹出的“新建”面板中将“分辨率”设置为72像素/英寸，如图所示。
网页分辨率设置
提示:
像素，缩写为px，英文Pixel。
◎网页的尺寸
在2011年10月~2012年3月期间，根据百度统计给出的中国网民分辨率使用情况数据可以看出，1024像素×768像素、1440像素×900像素和1366像素×768像素的显示器是网民使用的主流，如图所示。
2011年10月~2012年3月国内网民分辨率使用情况统计
截至2015年，大屏幕显示器的使用量逐渐上升，通过数据显示我们可以看出，尽管1366像素×768像素、1920像素×1080像素和1440像素×900像素这3种较大分辨率的显示器占据市场主流，但仍有一部分用户还是在使用1024像素×768像素的显示器，如图所示。
2015年国内网民分辨率使用情况统计
在2015年之前，由于小尺寸显示器在用户群中仍占有较高比例，为了兼顾这一部分用户的浏览需求，多数网页的内容区宽度都局限在900像素~1000像素。
而随着近几年来大尺寸显示器使用率的逐步上升，为了实现更好的视觉浏览效果，越来越多的设计师选择将内容区的宽度放大。目前主流网站普遍的内容区宽度在950像素~1200像素。
淘宝网首页
网易首页
腾讯网首页
那么目前应该具体采用什么宽度尺寸来设计网页呢？这里给出的建议是根据需求列表斟酌内容量的多少，同时根据需要实现何种展示效果来决定网页的宽度。
对网页的宽度没有硬性要求，只要是适合的、符合规范即可，而针对初学者来说，可以参照大型网站的设计规范来做设计，那样基本不会出错。
字体的选择
对于大多数中国人来说，见过最多的字体应该就是黑体和宋体了，这两种字体是设计的基础字体，应用在生活的各个场景中。
宋体、黑体字形对比
早在2006年Windows发布Vista系统时，微软雅黑体就已代替宋体，成为了新的系统默认字体。那么当时为何要选择微软雅黑体来代替宋体呢？原因是宋体是一款衬线字体，受到Windows平台字体渲染技术的限制，在小字号字体渲染方面表现略差，部分字号在显示时会产生锯齿、模糊等效果。而微软雅黑这款非衬线字体，笔画丰满、简洁，常用字号的显示效果相比宋体更为优秀，同时识别度更高。因此，从Vista时代起，微软雅黑体就作为Windows的系统默认字体沿用至今，如图所示。
常规、加粗、倾斜字形对比
在网页设计中，为了保证有较好的显示效果，主要标题的字体建议使用微软雅黑体，次要标题可选用宋体，如图所示。
微软雅黑体网页显示效果
宋体和微软雅黑体网页显示效果对比
此外，如果网页设计中遇到需要展示英文字符的情况，建议选择Arial、Verdana和Tahoma这几种系统默认字体，如图所示。
3种系统默认英文字体
字号使用规范
在网页设计中，一般选择使用双数字号，字号的大小并没有明确规定，但为了确保正常的阅读效果，在网页设计中最小的字号一般为12像素。正文常见字号有12像素、14像素和16像素；标题常见字号有18像素、20像素、26像素和30像素。
这里需要注意的是，由于显示器分辨率的不断提高，12像素的字号在大分辨率显示器中会显得较小，对用户阅读造成一定的困难。因此，在目前的网页设计中很少使用12像素的字号，网站常规正文字号普遍使用的是14像素或16像素。
各个字号下的宋体、微软雅黑体显示效果如图所示。
不同字号下的字形展示
宋体和微软雅黑字体均可以作为网页设计的常用字体。但在目前的网页设计中我们会发现，网页中基本都以微软雅黑字体为主，而宋体已不多见。具体来说，微软雅黑体相比宋体而言，少了一些装饰性，同样字号，微软雅黑体在视觉上更显粗壮有力，且辨识度更高，尤其是小字号的显示效果，微软雅黑体的视觉感会更为清晰与明朗。
网页标题如何设计看起来会比较舒服？答案是字体清晰疏阔，字号醒目易读即可。
例如，网易新闻的标题样式一般设置为微软雅黑体字体，36像素的字号，如图所示。
腾讯新闻的标题样式一般设置为微软雅黑体字体，26像素的字号，如图所示。
通过这两张图可以看出，较大字号的微软雅黑字体笔画粗壮有力，与其他层级信息形成鲜明对比，作为标题在页面中显得非常突出。
段落、行间距规范
阅读是用户在网站上获取信息的重要方式，阅读体验的好坏直接关系到用户对产品的印象，作为信息展示的主体，漂亮的文字排版和巧妙的留白都能为整个网页增色不少。在网页设计中，文字排版的要点分为两个方面，即段落和行间距。
◎段落中“行长”与“对齐方式”的设置
行长：主要指段落文字的宽度，如图所示。
通常情况下，行越长，行间距越大，否则用户在阅读时很容易串行。在网页正文中，汉字一般以每行显示30~40个字为宜，英文一般以每行显示40~70个字母为宜。
段落：对齐方式主要有4种，包括左对齐、右对齐、居中对齐和两端对齐，如图所示。
在国内，大段文字的设计，多数设计师会根据中国用户的阅读习惯，将对齐方式设置为左对齐。
◎段落中“行间距”的设置
行间距：指段落中行与行之间的距离。
行间距作为段落中的留白，让字与字之间有了可呼吸的空间。过小的行间距会使页面变得拥挤不堪，增加用户错读的可能性。而过大的行间距则会占用大量的页面空间，缺乏美感。选择适当的行间距不仅可以提升文字的易读性，也可以最大限度地利用好页面空间，如图所示。
传统中文文档默认行间距一般为1.5倍，在现阶段的网页设计中，汉字一般使用1.8~2倍的行间距，如图所示。
英文段落一般选择1.5倍行间距，如图所示。
好书推荐
延伸阅读
更多内容可以购买《形色网页设计法则及实例指导》详细阅读哦！