建站与推广知识

主页>资讯>盛世文库>建站与推广知识

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



一、网页尺寸 

我们在制作网页时选择的分辨率为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. 常用搭配 

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

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

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

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

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



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


十四年 建站经验

多一份参考,总有益处

联系盛世传媒,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-600-6240 / 大客户专线:13968746378