绿维网络绿维网络
 
建站资讯

建站资讯最新消息,企业数字化营销知识分享

网页设计的基本规范

人气:  作者:  发表时间:2021-01-21 10:38:58
网页设计规范是适用于Web端的人机交互界面的标准,是每个网页设计师从业时必须遵守的行为准则。网页设计规范的首要目的是优化Web产品、提升用户体验。同时,统一的网页设计规范可以让设计师重复利用相同的模块,有助于提高设计师的工作效率。此外,遵守设计规范也有利于前端工程师、交互设计师等其他岗位之间快速有效地传递信息。上岗前熟读设计规范并牢记要点可以帮助新人快速适应工作岗位,减少出错的可能性。

一、分辨率与尺寸
1、网页设计的分辨率
根据现阶段显示器的实现显示效果,在网页设计前设计师会选择“72像素/英寸”作为网页设计的分辨率标准,这样选择是因为较高的分辨率虽然会在一定程度上提升图片的显示效果,但是也会造成加载过慢、服务器超载的问题,而过低的分辨率又会影响图片的品质,使图像过于模糊。如果将分辨率按72像素/英寸这样的标准来设置,可以在保证显示效果正常的前提下,最大限度地降低图片的数据量,从而达到流畅加载和实现较优质显示效果的目的。

分辨率设置方法:在Photoshop的“菜单栏”中执行“文件>新建”命令,在弹出的“新建”面板中将“分辨率”设置为72像素/英寸。

2、网页的尺寸
在2011年10月~2012年3月期间,根据百度统计给出的中国网民分辨使用情况数据可以看出,1024像素X768像素、1440像素X900像素和1366像素X768像素的显示器是网民使用的主流。

截至2015,大屏幕显示器的使用量逐渐上升,通过数据显示我们可以看出,尽管1366像素X768像素、1920X1080像素和1440像素X900像素这3种较大分辨率的显示器占据市场主流,但仍有一部分用户还在使用1024像素X768像素的显示器。
在2015年之前,由于小尺寸显示器在用户群中仍占较高比例,为了兼顾这一部分用户的浏览需求,多数网页的内容区宽度都局限在900像素~1000像素。

而随着近几年来大尺寸显示器使用率的逐步上升,为了实现更好地视觉浏览效果,越来越多的设计选择将内容的宽度放大。目前主流网站普遍的内容区宽度在950像素~1200像素,例如,淘宝网网页内容区宽度为1190像素,网易网页内容宽度为960像素,腾讯网网页内容区宽度为1000像素。

那么目前应该具体采用什么宽度尺寸来设计网页呢?这里给出的建议是根据需求列表斟酌内容量的多少,同时根据需要实现何种展示效果来决定网页的宽度。

提示:对网页的宽度没有硬性要求,只要是适合的、符合规范即可,而针对初学者来说,可以参照大型网站的设计规范来做设计,那样基本不会出错。

二、字体的选择
对于大多数中国人来说,见过最多的字体应该就是黑体和宋体了,这两种字体是设计的基础字体,应用在生活的各个场景中。

其中,宋体源于书法体,主要特点是横细竖粗,笔画末端带有三角状装饰,字形端庄有力,常运用在文章正文当中;黑体字的主要特点是横坚均匀,笔画相对宋体较为粗壮,常用作文章标题,突出而醒目。

早在2006年Windows发布Vista系统时,微软雅黑就已经替代宋体,成为了新的系统默认的字体。那么当时为何要选择微软雅黑体来代替宋体呢?原因是宋体是一款衬线字体,受到Windows平台字体渲染技术的限制,在小字号字体渲染方面表现略差,部分字号在显示时会产生锯齿、模糊等效果。而微软雅黑这款非衬线字体,笔画丰满、简洁,常用字号的显示效果相比宋体更为优秀,同时识别度更高。因此,从Vista时代起,微软雅雅黑体就作为Windows的系统默认字体沿用至今。

在网页设计中,为了保证有较好的显示效果,主要标题的字体建议使用微软雅黑体,次要标题可选用宋体。

文章的正文可以选用宋体,也可以使用微软雅黑体。

此外,如果网页设计中遇到需要展示英文字符的情况,建议选择Arial、Verdana和Tahoma这几种系统默认字体。

三、字号使用规范
在网页设计中,一般选择使用双数字号,字号的大小并没有明确规定,但为了确保正常的阅读效果,在网页设计中最小的字号一般为12像素。正文常见字号有12像素、14像素和16像素;标题常见字号有18像素、20像素和30像素。

这里需要注意的是,由于显示器分辨率的不断提高,12像素的字号在大分辨率显示器中会显得较小,对用户阅读造成一定的困难。因此,在目前的网页设计中很少使用12像素的字号,网站常规正文字号普遍使用的是14像素或16像素。

提示:宋体和微软雅黑字体均可以作为网页设计的常用字体。但在目前的网页设计中我们会发现,网页中基本都可以微软雅黑为主,而宋体已不多见。具体来说,微软雅黑相比宋体而言,少一些装饰性,同样字号,微软雅黑在视觉上更显粗壮有力,且辨识度更高,尤其是小字号的显示效果,微软雅黑体的视觉感会更为清晰与明朗。

网页标题如何设计看起来比较舒服?答案是字体清晰疏阔,字号醒目易读即可。

例如,网易新闻的标题样式一般设置为微软雅黑字体,36像素的字号。腾讯新闻的标题标式一般设置为微软雅黑字体,26像素的字号。通过这两张图可以看出,较大字号的微软雅黑字体笔画粗壮有力,与其他层级信息形成鲜明对比,作为标题在页面中显得非常突出。

提示:如何通过选择不同的字体和字号来区分信息的层级,是设计师们最常遇到的问题,因此建议读者有时间不读多看看同类型网站的设计,并收集一些有用的资料,相信它们会给你的设计带来一些新的启发。

四、段落、行间距规范
阅读是用户在网站上获取信息的重要方式,阅读体验的好坏直接关系到用户对产品的印象,作为信息展示的主体,漂亮的文字排版和巧妙的留白都能为整个网页增色不少。在网页设计中,文字排版的要点分为两个方面,即段落和行间距。

1、段落中“行长”与“对齐方式”的设置
行长:主要是指段落文字的宽度。

通常情况下,行越长,行间距越大,否则用户在阅读时很容易串行。在网页正文中,汉字一般以每行显示30~40个字为宜,英文一般以每行显示40~70个字母为宜。

段落:对齐方式主要有4种,包括左对齐、右对齐、居中对齐和两端对齐。

在国内,大段文字的设计,多数设计师会根据中国用户的阅读习惯,将对齐方式设置为左对齐。

2、段落中“行间距”的设置
行间距:指段落中行与行之间的距离。

行间距作为段落中的留白,让字与字之间有了可呼吸的空间。过小的行间距会使页面变得拥挤不堪,增加用户错读的可能性。而过大的行间距会占用大量的页面空间,缺乏美感。选择适当的行间距不仅可以提升文字的易读性,也可以最大限度地利用好页面空间。

传统中文文档默认行间距一般为1.5倍,在现阶段的网页设计中,汉字一般使用1.8~2倍的行间距。

五、网页设计的标注规范
在设计的日常工作中,设计师与前端开发人员的对接关系往往非常紧密,而设计图的标注可以提高前端开发人员的工作效率。

1、效果图的标注一般包括3个部分。

(1)页面中控件的颜色、尺寸、交互效果(如按钮、表单等)。

(2)字体颜色、字号。

(3)页面中各个模块的尺寸和间距。

2、在效果图标注中,应特别注意以下4个问题。

(1)保证标注的文字清晰易读。

(2)标注所使用的颜色应与背景色区分。

(3)标注应尽量在空白区域,不要对原图造成视觉干扰。

(4)标注信息条理清晰,同一模块的标注应摆放在同一位置,适当留有间隙,方便开发人员阅读。

标注工具有很多种,这里推荐使用MarkMan(马克鳗),MarkMan支持Windows和Mac双系统操作,界面简洁,使用简单易操作,非常适合设计者使用。

总结:在进行网页设计时,网页设计师必须熟读网页设计的原则和规范,且一切设计必须依照规范来进行。目前遵循的网页设计规范都是经过科学论证和用户调研得出的。随着科学技术的不断发展,这些规范可能需要与时俱进,但对于现阶段的网页设计而言,这些符合当下用户体验的规范经验值得学习和借鉴。
网页设计的基本规范:http://www.luweit.com/news/jianzhan/189.html
标签: 网页设计
热门标签
相关新闻
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

东莞市绿维信息技术有限公司致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围,并且涵盖基础的域名服务、主机服务;企业邮箱、网络营销等应用服务;
more>
立即咨询
快速获得解决方案
咨询电话
135 8088 5012
公司地址
广东省东莞市南城建设大厦7F
公司邮箱
Copyright ©2016-2021 东莞市绿维信息技术有限公司 粤ICP备18104664号-2