在如今这个互联网时代，几乎每个企业都会设计专属于自己的企业网站，而网页设计的好坏将直接影响别人对这个企业的**印象，所以如何进行高端的网页设计定制就成了每个企业的必修课。

一、网页尺寸 

我们在制作网页时选择的分辨率为72像素/英寸，使用的画布尺寸为1920 px  * 1080 px。但这并不意味着我们可以在整个画布上进行绘制。

有两种主要的网页布局：居中布局和从左到右布局。不同的布局使得布局空间不同。

 居中布局中心布局一般分为两部分：顶部导航和主内容区。

顶部导航：承载了整个网站的品牌信息和结构信息，清楚地告知我们网站最重要的内容。通常放置在页面顶部，从左到右依次为：LOGO、顶层导航元素、辅助菜单（用户、设置、通知等）。主导航高度为64 像素，二级导航高度为48 像素。一级导航高度为80px，二级导航高度为56px。

上导航高度范围H（header）的计算公式为：48+8n（n为自然数）。

主内容区：用于显示网站的内容。通常内容区域设置为固定大小1200px（或1000px~1400px范围），整个页面布局稳定，不受用户终端屏幕影响。

上下层的结构符合用户上下导航的习惯，也是比较经典的网站导航方式。页面上下拆分的方式提高了主工作区的信息展示效率，但在垂直空间上会有一些折衷。另外，由于导航栏水平空间的限制，不适合顶层导航元素较多的信息结构。

上下布局方式是为两边的空白区域定义最小值M（Margin），当空白区域达到限定值时，动态放大中间的主要内容区域W（Weight）。

主要内容区常用的W尺寸有1200px、1190px、1168px、1152px、1000px、960px。两边空白区域M的最小值。最常用的尺寸是24px、16px、0px。我这里指的只是常用的动态设计参数。在实际设计中，一个完美的方案需要设计师有正面视角、平面构图视角、交互视角，并根据团队的产品整体确定这些。眼镜。

以W=1152px  和M=24px  为例。为了在响应性方面保证更好的预览效果，我们在主内容区外增加了24px的边距，防止屏幕尺寸小于1152px时内容卡住，所以需要将主内容区的**宽度改为1200 像素，然后将装订线边距增加到24 像素。

页脚：页脚（footer）也是展示页面中非常重要的部分，包括信息内容：实用导航、语言选择、社交链接、帮助与支持、作者和隐私权法案等。在页面的末尾。而且如果没有特殊要求，不建议固定在屏幕底部，否则会浪费垂直空间。

二、图片规范 

图片是网页设计中不可缺少的元素，在文字和色彩方面被称为网页的三种主要语言。

 1. 首图 **张图像**只使用高清图像。

2. 图片尺寸 对于必须全屏显示的图片，宽度尺寸严格设计为1920px。

不过需要注意的是，图片内容的有效范围不能超过网页内容的有效范围，应该控制在1200px以内，避免遇到小屏设备时显示不全，导致信息跳过。

三、网页文字 

这里我们考虑的是常规PC屏幕的尺寸（1920px  * 1080px分辨率）。

 1. 字体 中文建议：Microsoft  Yahei  英文建议：arial。最多使用三个混搭，首先使用每个操作系统的默认字体。

 2. 字号 文字：12px  ~ 18px  之间12px  适用于精选日期、版权等注释性内容； 14px  适合正常不显眼的正文内容； 16px  或18px  适合突出标题内容。英文可能更小：10px  ~ 16px  导航栏字体：14px  ~ 18px  范围，粗体禁用全站文字：12px  ~ 36px  范围可根据实际情况调整，但应使用偶数。可以通过更改字体颜色或粗体来反映级别的差异。

 3. 间距 两个相邻字符之间的间距，其实不用太担心，除非特殊需要，可以使用默认值间距。

行距：字体大小的1.5~2倍；段落间距：字体大小的22.5倍。

例如：使用14px字体时，行高：21px~28px；边距：28px  ~ 35px。

 4. 颜色 文字主色调，推荐使用公司品牌VI（Visual  Identity）颜色，可以提高公司网站与公司VI的关联度，增加可读性和记忆性。

正文字体颜色：#333333~#666666 之间的颜色注释和辅助文字：#999999 等较浅的颜色

 5. 文字块区域 避免大面积的纯黑色字体。

文本块可以酌情用1 px的虚线框包围，虚线框的颜色为RGB(0,0,0,0,15)。

四、网页留白 

1. 8倍数原则 使用8的倍数来指定页面上项目（按钮、输入框、图像等）的大小及其各自空间的大小。即无论需要自定义什么长度和宽度，margin和padding都必须是8的倍数。据统计，使用后台系统的用户主要分辨率以1920、1440、1366为主，部分系统还有1280显示设备，常规屏幕尺寸大多为8的整数倍。甚至如果某些屏幕像素的长度不是8的倍数，在布局中，您仍然可以尝试使自定义项、标记和填充的长度为8的倍数，以保持设计的一致性。

 2. 间距一致性 呈现田字形时，中心交叉间距必须一致。上下左右要对称统一。

 3. 组件留白 表格外边距使用16px，其他组件使用8px。

五、颜色规范 

1. 颜色特性 否同行行业普遍有自己的工业色彩。例如：金融行业网站：红色或金黄色。

 2. 背景色 背景色一般清晰优雅。避免使用复杂的图像作为背景颜色。同时，背景颜色应与文字颜色形成强烈对比。

3. 色彩数量一般控制在3-4色以内，可以通过调整各种颜色属性来改变。

常用的网页设计配色方案：同色、相邻色、相似色、中差色、对比色。

 4. 常用搭配 

蓝色、白色和橙色：蓝色是主要色调。白色背景、蓝色标题栏、橙色按钮或装饰图标。

青白兰：绿色是主调。白色背景、绿色标题栏、蓝色或橙色按钮或装饰图标。

橙色、白色和红色：橙色是主要色调。白色背景、橙色标题栏、深红色或橙色按钮或装饰图标。

深红色和黑色：主色深红色。黑色或灰色背景，深红色标题栏，文字内容背景为浅灰色。

万能色：黑、白、灰无所不能，可以搭配任何颜色。当您在某种配色方案上遇到问题时，请尝试使用黑色、白色和灰色。

以上是高端网页设计定制的详细内容，网页设计并不困难，设计出独特的网站也不是难如登天。相信本文一定会对您设计网页有所帮助。