网页设计规范(尺寸、字体篇)（网页设计尺寸规范及标准详解）

网页设计规范

在了解网页设计规范之前，我们先简单了解网站的分类，网站的分类按对象划分可分为 To C端和 To B端两种：

To C端是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。

To B 端是面向商家和专业人士，因而TO B与 TO C端在设计上是大相径庭的， To B 类网页最重要的是效率而不是体验。

因互联网的发展，现今对网页设计的要求也提高了，所以有个自己的设计规范会使设计简洁而高效。根据本大宝贝的设计细节，相信你很快就能与大神比拟了，哈哈哈哈，开个小玩笑，下面咱们就从尺寸、字体、图片、颜色等方面来开展深入探索！其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。今天我们就先来了解to c设计规范，后期会出TO B的设计规范 ！

一、网页尺寸

1.网页的布局主要有两种：左右布局和居中布局。布局不一样使设计的空间也不相同。

⑴、左右布局，灵活性强，UI限制小；左右通栏为导航栏，宽度没具体限制，可根据实际情况调整；右侧为内容板块范围，是网站内容展示区域。

⑵、居中布局，中间的深色部分为有效的显示局域，用于网站内容的展示；两边留白没实际用图，只是为适配而存在

2.当前最流行的分辨率是1920px*1080px的，所以建议创建网页尺寸为1920px*1080px，页面中心区域常设置为1200px（或1000px -1400px区间），以这个尺寸来设计相对标准。每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。

2.文字

网页中字体也是有使用规范的，合适的字体大小才能展现出最完美的效果（1920px*1080px分辨率下）

那些漂亮的网页设计，它们都是用的什么字体的？

网页设计字体的选择可以根据企业调性去挑选字体的，因为字体本身也是有性格的，为了方便大家使用，我把网页设计中经常用到的字体，希望能给新手一些指导，有自己的一套用字方法，那当然是极好的

说完字体咱们该说字体的字重、字号、行高、字间距、行间距、段间距了、字体颜色。

字号：

正文：12px－18px之间

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

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

英文可偏小些 ：10px－16px

导航栏字体：一般在14px-18px区间，最大不超过18px，禁用加粗

整站文字：12px-36px区间

某一个网页的规范：

网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要使用偶数字号。

1、字体规格也不需要太多，最多使用三种混搭，当一个页面中使用的字体超过 3 种时，会给用户带来“不专业”、“没有权威性”、“没有层次结构”之类的感觉。

2、层次的区别，可以改变字体颜色或加粗来体现。

3、字体优先使用各操作系统默认的字体。字体选择有版权、笔画严谨、清晰可读、经典。

字体间距

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

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

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

即，当用14px 的字体时，行间距：21px-28px；段间距：28px-35px。

字体颜色

主文字颜色，建议使用 公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。

正文字体颜色，建议选用 #333333到#666666 之间的颜色。

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

如果，你对颜色驾驭能力比较强，你也可以选用 偏公司VI颜色的深色，作为正文字体颜色或者辅助性文字颜色。

例如公司的品牌色是蓝色，那么，正文字体就可以选用偏蓝的深色。

这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。

以上皆是个人拙见，有不同意见的我们可以相互交流(*^▽^*)

想要学习设计可以来AAA教育进行咨询了解。

相关推荐：

如何规范高效做出banner

设计师的文本简历如何制作？

新手来看，不会排版的小技巧

UI设计师必看，作品集制作注意要点

提升设计美感及用户体验的七大原则