Web UI 网页设计规范

一、网页尺寸

在制作网页时，我们通常采用72像素/英寸的分辨率，并设定画布尺寸为1920px*1080px。然而，这并不意味着我们可以在此全部范围内进行设计。网页布局主要分为两类：左右型布局和居中型布局。这两种布局方式的不同，决定了设计空间的差异。

1、左右布局

这种布局灵活性高，UI限制较小。左侧通常设置为导航栏，宽度可根据实际需求调整；右侧则是主要内容区域，用于展示网站信息。

2、居中布局

居中布局中，中间蓝色部分为有效显示区域，用以展示网站内容。两侧留白仅作为适配存在，无实际功能。

3、主流电脑屏幕尺寸

常见的屏幕尺寸中，网站内容一般显示在996px宽的区域内。国内很多网站以1000像素为界，超过此宽度适合大屏幕，小屏幕可能显得过于拥挤。因此，1000像素以内的宽度能确保大多数用户舒适浏览。

二、网页字体

字体设计应遵循可辨识性和易读性原则。中文常用系统字体包括宋体、微软黑体和苹果系统黑体；英文推荐使用Times New Roman、Arial、Comic Sans MS等无衬线字体。

常见字号大小如下：

12px适用于非突出的注释内容如日期和版权信息。

14px 适合普通正文。

16px、18px、20px、26px或30px 用于标题，注意偶数字号以避免毛边问题。

三、字体间距

相邻文字间距通常无需过多调整，除非有特殊需求。行间距建议为字体大小的1.5-2倍，段间距则推荐为2-2.5倍字体大小。如选用14px字体，则行间距为21-28px，段间距为28-35px。

四、字体颜色

除主色调外，其他六种颜色为场景色，根据不同场景使用。六种文字排版色通过颜色区分文字层次。主文字颜色宜选用公司品牌VI色彩，增强辨识度和记忆力。正文字体颜色建议选用深灰色，如#333333到#666666之间，保证易读性。

五、首屏内容

首屏设计对网页至关重要，需考虑构图和内容呈现。首屏高度扣除任务栏、浏览器菜单栏及状态栏后确定。Window XP平均为580px，Window 7为710px。实践中，可参考710px。全屏图片宽度设为1920px，但内容有效范围不超过1200px，以防小屏幕设备显示不完整。