网页设计规范是适用于Web真个人机交互界面的标准，是每个网页设计师从业时必须要遵守的行为准
则。网页设计规范的紧张目的是优化Web产品、提升用户体验。同时，统一的网页设计规范可以让设计师重复利用相同模块，有助于提高设计师的事情效率。此外，遵守设计规范也有利于前端工程师、交互设计师等其他岗位之间快速有效地通报信息。上岗前熟读设计规范并牢记要点可以帮助新人快速适应事情岗位，减少出错的可能性。
对付大多数中国人来说，见过最多的字体该当便是黑体和宋体了，这两种字体是设计的根本字体，运用在生活的各个场景中。
▷ 宋体：源于书法体，紧张特点是横细竖粗，笔画末端带有三角状装饰，字形端庄有力，常利用在文章正文当中。
▷ 黑体：字的紧张特点是横竖均匀，笔画相对宋体较为粗壮，常用作文章标题，突出而能干。
宋体、黑体字形比拟
早在2006年Windows发布Vista系统时，微软雅黑体就已代替宋体，成为了新的系统默认字体。
那么当时为何要选择微软雅黑体来代替宋体呢？
缘故原由是宋体是一款衬线字体，受到Windows平台字体渲染技能的限定，在小字号字体渲染方面表现略差，部分字号在显示时会产生锯齿、模糊等效果。
而微软雅黑这款非衬线字体，笔画丰满、简洁，常用字号的显示效果比较宋体更为精良，同时识别度更高。因此，从Vista时期起，微软雅黑体就作为Windows的系统默认字体沿用至今。
常规、加粗、倾斜字形比拟
在网页设计中，为了担保有较好的显示效果，紧张标题的字体建议利用微软雅黑体，次要标题可选用宋体。
微软雅黑体网页显示效果
文章的正文可选用宋体，也可利用微软雅黑体。
宋体和微软雅黑体网页显示效果比拟
此外，如果网页设计中碰着须要展示英笔墨符的情形，建议选择Arial、Verdana和Tahoma这几种系统默认字体。
3种系统默认英笔墨体
2、字号利用规范在网页设计中，一样平常选择利用双数字号，字号的大小并没有明确规定，但为了确保正常的阅读效果，可以参考以下参数：
▷ 在网页设计中最小的字号一样平常为12像素；
▷ 正文常见字号有12像素、14像素和16像素；
▷ 标题常见字号有18像素、20像素、26像素和30像素。
这里须要把稳的是，由于显示器分辨率的不断提高，12像素的字号在大分辨率显示器中会显得较小，对用户阅读造成一定的困难。因此，在目前的网页设计中很少利用12像素的字号，网站常规正笔墨号普遍利用的是14像素或16像素。
各个字号下的宋体、微软雅黑体显示效果如图所示。
不同字号下的字形展示
宋体和微软雅黑字体均可以作为网页设计的常用字体。但在目前的网页设计中我们会创造，网页中基本都以微软雅黑字体为主，而宋体已不多见。详细来说，微软雅黑体比较宋体而言，少了一些装饰性，同样字号，微软雅黑体在视觉上更显粗壮有力，且辨识度更高，尤其是小字号的显示效果，微软雅黑体的视觉感会更为清晰与明朗。
网页标题如何设计看起来会比较舒畅？
答案是字体清晰疏阔，字号能干易读即可。
▷ 例如，网易新闻的标题样式一样平常设置为微软雅黑体字体，36像素的字号。
微软雅黑字体，字号36px
▷ 腾讯新闻的标题样式一样平常设置为微软雅黑体字体，26像素的字号。
微软雅黑字体，字号26px
3、段落、行间距规范阅读是用户在网站上获取信息的主要办法，阅读体验的好坏直接关系到用户对产品的印象，作为信息展示的主体，俊秀的笔墨排版和奥妙的留白都能为全体网页增色不少。在网页设计中，笔墨排版的要点分为两个方面，即段落和行间距。
▷ 段落中“行长”与“对齐办法”的设置
行长：紧张指段落笔墨的宽度。
行长
常日情形下，行越长，行间距越大，否则用户在阅读时很随意马虎串行。在网页正文中，汉字一样平常以每行显示30~40个字为宜，英文一样平常以每行显示40~70个字母为宜。
段落：对齐办法紧张有4种，包括左对齐、右对齐、居中对齐和两端对齐。
段落对齐办法
在海内，大段笔墨的设计，多数设计师会根据中国用户的阅读习气，将对齐办法设置为左对齐。
▷ 段落中“行间距”的设置
行间距：指段落中行与行之间的间隔。
行间距作为段落中的留白，让字与字之间有了可呼吸的空间。过小的行间距会使页面变得拥挤不堪，增加用户错读的可能性。而过大的行间距则会占用大量的页面空间，缺少美感。选择适当的行间距不仅可以提升笔墨的易读性，也可以最大限度地利用好页面空间。
行间距的设置
传统中文文档默认行间距一样平常为1.5倍，在现阶段的网页设计中，汉字一样平常利用1.8~2倍的行间距。
不同数值的中文行间距
英文段落一样平常选择1.5倍行间距。
不同数值的英文行间距
4、网页设计的标注规范在设计的日常事情中，设计师与前端开拓职员的对接关系每每非常紧密，而设计图的标准化标注可以提高前端开拓职员的事情效率。
效果图的标注一样平常包括以下3个部分：
☉ 页面中控件的颜色、尺寸、交互效果（如按钮、表单等）。
☉ 字体颜色、字号。
☉ 页面中各个模块的尺寸和间距。
在效果图标注中，应特殊把稳以下4个问题：
☉ 担保标注的笔墨清晰易读。
☉ 标注所利用的颜色应与背景色区分。
☉ 标注应只管即便在空缺区域，不要对原图造成视觉滋扰。
☉ 标注信息应条理清楚，同一模块的标注应摆放在同一位置，适当留有间隙，方便开拓职员阅读。
下面，我们来看一张视觉设计稿的标注效果图。
视觉效果图标注
标注工具有很多种，这里推举利用arkMan（马克鳗），MarkMan支持Windows和Mac双系统操作，界面简洁，利用大略易操作，非常适宜设计初学者利用。
MarkMan启动界面
MarkMan操作界面
在进行网页设计时，网页设计师必须熟读网页设计的原则和规范，且统统设计必须依照规范来进行。目前遵照的网页设计规范都是经由科学论证和用户调研得出的。随着科学技能的不断发展，这些规范可能须要与时俱进，但是对付现阶段的网页设计而言，这些符合当下用户体验的规范履历值得设计师学习和借鉴。
专业设计网站推举网页设计师在入门前，首先要做到对“美”有精确的认知，能够准确判断什么是美、什么是丑，只有这样才能做好设计。作为新人，须要不断学习，多看多练是提高设计水平的王牌法则。海内近些年也有许多作品十分突出的网页设计师，他们的作品常常被揭橥在各大设计网站，读者在事情之余一定要多浏览设计网站，通过多看精良作品来提升眼界，在不雅观赏的同时汲取精良设计案例的履历，取长补短，将别人的优点融入自己的作品中，在学习中不断进步。
1、海内设计网站推举▷ 站酷（Zcool）
站酷网是一个人气设计师互动平台，聚拢中国大量的专业设计师，包括平面设计师、网页设计师以及插画设计师等，涉及艺术创作、交互设计、影视动漫、时尚文化和广告创意等领域。
站酷网
▷ 花瓣
花瓣网是一个类似Pinterest的网站，基于兴趣分享，为用户供应大略的素材采集做事，帮助用户将自己喜好的图片重新组织和收藏，设计师可以从中探求设计灵感和设计素材。
花瓣网
▷ UI中国
UI中国的前身为 Iconfans，是一个专业的界面交互设计平台，紧张为设计师们供应互换学习和作品展示做事，会员均为职业UI设计师，专业性较强，因此也是UI设计师人才流动的集散地。
UI中国
▷ Uehtml
Uehtml是优艺客（原韩雪冬网页设计事情室）旗下的设计师互换平台，专为网页设计和界面设计而生，拥有较多创意精美的网页设计作品。
UeHtml
▷ 优设
是海内比较专业的网页设计师互换学习平台，有许多关于设计师的职业理念和从业履历的网络与分享，另有好用的设计小插件可供下载。
优设网
2、国外设计网站推举▷ Dribbble
Dribbble是一个面向创作家、艺术事情者、设计师等创意类作品分享的平台，供应作品在线做事，供网友在线查看已经完成的作品或者正在创作的作品的互换网站。
Dribbble
▷ Behance
Behance 是一个设计社区，在这里创意设计人士可以展示自己的作品，欣赏别人分享的创意作品，还可以通过评论、关注、站内短信等办法与这些设计师进行互动。
Behance
模板下载推举网站▷ Freebiesbug
Freebiesbug一个免费PSD资源下载平台，包括APP设计、icon设计、Web展示模板、前端代码以及字体等素材资源。
Freebiesbug
▷ PSD REPO
PSD REPO一个大量佳构PSD源文件下载平台，涵盖目前设计主流方向如icon、移动端设计、按钮设计等，且均可免费下载。
PSD REPO
▷ 365PSD
365PSD有付费和免费两大类资源可供下载，种类繁多，方向划分较为详细，包括建筑、广告、Logo、
动物等。
365PSD
▷ MaterialUp
MaterialUp包含iOS、Android、Web等平台的干系设计资源，各种素材与当下潮流趋势紧密贴合。
MaterialUP
