虽然自己更喜欢手机端的设计，但是现在开始实习了，公式主要以网页端为主，所以多了解网页端的设计规范还是很必要的，我们一起学习吧～～～

一、web常见尺寸

常见网页分辨率使用情况

目前我在公司，几乎都是以1920*1080的大屏网页进行设计的。因为前端开发师说他们自己会进行适配，这个大屏进行设计适配是做好的。虽然我也不知道为什么，但是查了了一下好多都是以大屏尺寸进行设计的。之前在学校一直是以1366*768进行设计的。这也说明了在实际工作中，还是得需要跟程序开发师进行沟通，以哪一种尺寸进行设计。

需要注意的是，我们选择何种尺寸进行设计，并不代表我们的设计会占满整个屏幕。网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。我们在设计网页首屏的时候，需要考虑网页的高度。window 7 的首屏高度平均值是710px。比如我们采用1920的大屏进行设计我们网站的首屏时，最好建立一个安全范围1200*710，我们在此范围内进行设计。

1.左右布局

左边通栏为导航栏，宽度没有具体的限时，可以根据实际情况进行调整；右侧为内容板块范围，是网站内容展示区域。

2.居中布局

中间部分为有效的显示局域，用于网站内容的展示，两边都有留白，没有实际用途，只是为了适配而存在。这种布局是国内网站常见的布局方式。

二、使用字体与大小

为了用户的易读性，都是使用非衬线字体，除非特殊的网站。中文使用苹方或者微软雅黑字体，英文则使用arial 字体。

常用的字体大小为12 14 16  18px。我在公司正文几乎都是使用14px，标题16px，最小字号为12px。

注意：

1、12px是用于网页的最小字体，适用于注释性内容。

2、14px则适用于普通正文内容。

3、16px或18px适用于突出性的标题内容。

4、网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要有限适用偶数字号。字体规格也不需要太多，最好适用三种混搭。如果需要更多层可以改变字体颜色或加粗来体现。

三、字体间距

之前也分享过行间距一般为字号大小的1.5-2倍。对于14px的正文内容。行距设置为21-28都是可以的。

四、字体颜色

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

2、正文字体颜色，选用易读性的深灰色，比如#333、#666。

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

五、间距问题

对于网页的设计，最好采用栅格布局，都以8像素为单位，间距为8 16 24 32等8的倍数进行设计。不同尺寸的屏幕和分辨率为设计师带来了不必要的麻烦。用8这样的偶数让缩放变得很简单，并且能够适用于大部分的情况。

8像素原则

最后想说，设计规范只是一个基础的常规的设计原则，并不会限制我们的设计。记住规范只是参考。