每一个优秀的网站都会遵循这4个基本设计规范!干货·设计规范

说起网站,大家都很熟悉,几乎每天都会通过网站浏览信息,而这些信息正是网站所有者们精心设计和编排出来的。

在现在创建网站门槛极低的时代,无论是企业还是个人都有能力通过网页展示内容,如何在众多网站中脱颖而出,这就是考验网页设计师的能力了。

网页设计需要基于程序来实现,那在开始动手制作网页之前,数艺君给大家整理了一些网页设计的标准与规范,希望大家能在设计出集艺术与规范于一体的网页设计图。

有奖互动:

网页设计的基本规范

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

分辨率与尺寸

◎网页设计的分辨率

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

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

网页分辨率设置

提示:

像素,缩写为px,英文Pixel。

◎网页的尺寸

在2011年10月~2012年3月期间,根据百度统计给出的中国网民分辨率使用情况数据可以看出,1024像素×768像素、1440像素×900像素和1366像素×768像素的显示器是网民使用的主流,如图所示。

2011年10月~2012年3月国内网民分辨率使用情况统计

截至2015年,大屏幕显示器的使用量逐渐上升,通过数据显示我们可以看出,尽管1366像素×768像素、1920像素×1080像素和1440像素×900像素这3种较大分辨率的显示器占据市场主流,但仍有一部分用户还是在使用1024像素×768像素的显示器,如图所示。

2015年国内网民分辨率使用情况统计

在2015年之前,由于小尺寸显示器在用户群中仍占有较高比例,为了兼顾这一部分用户的浏览需求,多数网页的内容区宽度都局限在900像素~1000像素。

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

淘宝网首页

网易首页

腾讯网首页

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

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

字体的选择

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

宋体、黑体字形对比

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

常规、加粗、倾斜字形对比

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

微软雅黑体网页显示效果

宋体和微软雅黑体网页显示效果对比

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

3种系统默认英文字体

字号使用规范

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

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

各个字号下的宋体、微软雅黑体显示效果如图所示。

不同字号下的字形展示

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

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

例如,网易新闻的标题样式一般设置为微软雅黑体字体,36像素的字号,如图所示。

腾讯新闻的标题样式一般设置为微软雅黑体字体,26像素的字号,如图所示。

通过这两张图可以看出,较大字号的微软雅黑字体笔画粗壮有力,与其他层级信息形成鲜明对比,作为标题在页面中显得非常突出。

段落、行间距规范

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

◎段落中“行长”与“对齐方式”的设置

行长:主要指段落文字的宽度,如图所示。

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

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

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

◎段落中“行间距”的设置

行间距:指段落中行与行之间的距离。

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

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

英文段落一般选择1.5倍行间距,如图所示。

好书推荐

延伸阅读

更多内容可以购买《形色网页设计法则及实例指导》详细阅读哦!

THE END
1.网站页面布局的原则有哪些呢?简述网页布局的基本设计原则在设计网站页面的时候,必须要讲究排版和布局,虽然页面设计和平面设计有很多地方都是不同的,但是还是有一些相似的地方,而这些地方应该合理的去运用。想要让网站页面拥有良好的视觉效果,就需要讲究页面整体布局的合理性,这样才有利于用户的浏览。 那么,网站页面布局的原则有哪些呢? https://blog.csdn.net/batman360/article/details/123392664
2.网页设计的基本原则包括哪些?高压汽提塔利用()为热源,由塔底进入塔内,自下而上与煤气水逆流,采用()加热方式。水蒸汽以气泡形式穿过煤气水时,水和气泡表面之间形成自由界面,使得溶解性气体或易挥发性物质不断向气泡内蒸发、扩散。气泡上升到液相时,就开始破裂并放出其中心的挥发性物质或溶解的气体。https://www.shuashuati.com/ti/3d1e487985d641fba222f04a33168004.html?fm=bd30f2d6e94dd7ebb254aeb9bea4913455
3.想要学好网页设计,先要搞懂网页设计的基本原则广州网站建设网页设计的基本原则 1. 明确设计方向 网页设计可以是一个极具创意的领域。话虽如此,但网页设计也要以目标为导向,以浏览者的体验为中心。 始终牢记一个目标,让设计团队调整每一个细节,都是为实现该目标的量身定制的设计。一个典型的例子是电子商务网站。品牌和设计师在设计风格、捕捉商店的视觉识别方面有很大的创新https://www.uweb.net.cn/guanyuyouwang/youwangxueyuan/16722.html
4.网站美工需要注意webUI设计原则有哪些网站美工需要注意web UI设计原则有哪些 之前的网站美工就是会使用PhotoShop或Firework设计页面,然后用ImageReady或Firework切割页面的图片后直接生成HTML网页,再把相应的内容填入网页中,最后加上各种Java和表单效果完成网页的制作。以下是关于网站美工需要注意web UI设计原则,希望大家喜欢! https://www.yjbys.com/edu/meigongsheji/348426.html
5.网页设计的基本原则你了解吗?网页设计是一件很繁琐的事情,因为设计者在设计时要考虑很多事情。为了简化网页设计这件事,本文列举了每个网站设计者都应该考虑的行为准则:包括能做什么、不能做什么。天津教育联展网小编在这里为大家整理了一些很简单的原则。 网页设计的基本原则你了解吗? https://www.thea.cn/ib_px_31517-1.htm
6.网页设计基础知识点(精选6篇)篇1:网页设计基础知识点 绪论:机械:机器与机构的总称。机器:机器是执行机械运动的装置,用来变换或传递能量、物料、信息。机构:是具有确定相对运动的构件的组合。用来传递运动和力的有一个构件为机架的用构件能够相对运动的连接方式组成的构件系统统称为机构。构件:机构中的(最小)运动单元一个或若干个零件刚性联接而成https://www.360wenmi.com/f/file4n2wsske.html
7.摄影基础功!有哪些经典的构图原则和构图大师?(附图例)有哪些经典的构图原则和构图大师?(附图例) 编者按:构图基础知识小科普!今天@无良球跟同学们聊聊几个经典的构图原则和构图大师,每个构图原则后都附上一张对应的相片,方便大家理解学习 >>> 何为构图? 构图,就是把构成整体的那些部分统一起来,在有限的空间里或平面上对作者所表现的形象进行组织,形成画面的特定结构,https://www.uisdc.com/classic-composition-principles-and-masters/
8.网页设计的四个基本准则本文介绍了四个网页设计的基本准则,其实,设计是相通的,本文也适用于平面设计和视频设计当中,希望对你有帮助,一起来看。 据小愤青我N年(N≤1)的经验来看,许多网页设计师或者网页设计爱好者都并非是科班出身,他们没有接受过系统的设计理论的教育。所以做网页设计时,往往是凭自己灵感或者参考别人作品,导致设计出来的作https://www.51cto.com/article/265472.html
9.网站设计的基本原则有哪些?网站设计的基本原则有哪些? 在互联网飞速发展的今天,相信大家对网站都不陌生,企业为了开通网络销售渠道、提供咨询、售后等服务都会建设网站,以方便消费者有更好、更方便的体验。而创业最初的个人,大多也会先选择建设网站进行网络销售,创建网络购物平台。那么,网站设计有什么原则?下面深圳网站设计公司为大家介绍。http://www.luntui.cn/zixun/139154.html
10.网页设计的原则要注意色彩的数量。初学者在设计网页时常常喜欢使用多种颜色,这样会使网页变得很“花”,给人的感觉是缺乏协调和统一。事实上,网站的色彩搭配并不是越多越好,一般控制在三种色彩以内就可以了,可以通过调整色彩的各种应用属性来实现不同的效果。 网页设计基本原则 https://m.oh100.com/kaoshi/web/507679.html
11.网页设计的五大原则是什么1、网站 设计要遵循哪些 原则? 如何设计发布一个合格的网站?众所周知,设计的特征非常突出。每个老师都有自己的概念设计,企业也有自己的需求,所以两者之间经常会有争执。因此,需要遵循相应的基本网页-2/1.网页 设计实现有明确的观点。为了保证观点清晰,要点明确,会顺应客户的需求,网站的主题会用简洁明了的语言和图片http://shouzuofang.com/article/epepsg.html
12.网站设计设计步骤 确定网站风格 网站色彩搭配 网页配色误区 相关事物 单页面 用照片做背景 色块设计 超大号的图片 聚焦简洁 响应式设计 视差滚动 强调字体 排名转化为流量 流量转化为质量 质量转化为销量 设计原则 设计版权 建站过程 要点 定制化网站 基本原则 制作流程 个性网站 在栏目编排注意 4发展趋势 5相关术语 代码语言https://baike.sogou.com/v297911.htm
13.web前端网页设计的基本原则是什么?Worktile社区除了以上的基本原则,网页设计还需要根据具体的项目和用户需求进行定制。 赞同 7个月前 0条评论 不及物动词 这个人很懒,什么都没有留下~ 评论 web前端设计的基本原则是为用户提供良好的用户体验,使网页界面简洁、易用、直观和吸引人。以下是一些基本原则: 简洁明了:网页界面应该简洁明了,减少混乱和杂乱的设https://worktile.com/kb/ask/799670.html
14.网站设计优化的十三条基本原则网页设计的原则有哪些?这些一定要遵守! 设计网页时,必须考虑消费者的心理需求和社会需求。只有正确分析用户需求,才能设计出符合用户需求的网页。然而,在设计网页时,仍然有相关的原则需要遵守。那么,网页设计的原则是什么? 1、符合用户需求 要完成网页设计工作,必须事先考虑用户的视觉和心理需求。只有满足用户需求的文字http://www.hooeoo.com/new-youhua/8346.html
15.网站建设的3个基本原则/大学生网页设计主题网站建设的3个基本原则,大学生网页设计主题,新手学做网站步骤,如何帮人做网站赚钱吗本文说的Mysql是5.6版本。Mysql的存储引擎主要有: 1. MyIsam , 2. InnoDB, 3. Memory, 4. Blackhole, 5. CSV, 6. Performance_Schema, 7. Archive, 8. Federated , 9 Mrg_Myisam。一.查看引擎用show engines可以查看自己http://www.yqsx.cn/news/307441.html
16.网页安全论文范文信息保密性、真实性、完整性、未授权拷贝、寄生系统的安全性等五个方面的内容构成了信息安全的整体统一。信息安全的原则也就指明了大中型石油企业“数字化”网络建设安全设计的基本原则。 1)保密性:对授权用户的保护和对非授权用户的防止,信息利用的用户、实体的专属性。 https://www.gwyoo.com/haowen/131164.html
17.网页制作基本原则是什么?photoshop爱好者造型的巧妙运用不仅能带来极大的美感,而且能较好地突出企业形象,而且能将网页上的各种元素有机的组织起来,它甚至还可以引导观者的视线。 五、设计的原则 设计是有原则的,无论使用何种手法对画面中的元素进行组合,都一定要遵循五个大的原则:统一、连贯、分割、对比及和谐。 https://www.cnblogs.com/hsp09/articles/3152827.html
18.前端工程师新手必读:掌握网页设计的基本技能和弄清设计的概念本文详细介绍了掌握网页设计的基本技能和弄清设计的概念,新手必读,赶紧看看吧 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 公司招了几个刚毕业的学生,作为重构的新手让我来带。 首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会,对我工作的肯定和https://www.jb51.net/css/59160.html
19.网站建设网页设计的基本原则?在企业网站建设时一定要遵守一定的基本原则才可以做出合适的网页,让整个网站才可以看着顺眼,因为每个行业需要的网页设计风格不同,需要的颜色搭配也不同,如果使用了跟行业不搭配的颜色整个网站肯定不会让用户看着舒服。所以网页设计到底应该遵守哪些基本原则我们以下简单介绍:http://jkwzsj.com/view/116181.html
20.Web网页绘图教程大全,几种绘图技巧教你画出高级感网站!了解Web 网页绘图设计原则,如对比、重复、对齐、层次等,可以帮助你创建有吸引力和清晰结构的网页设计。掌握基本的设计原则对于创建出具有吸引力和高级感的网页设计至关重要。学习这些原则可以提高你的设计技巧和创作效果,画出高级感网站。 3、学习色彩搭配 https://js.design/special/article/web-page-graphics.html
21.网页设计需要注意哪些事项?在网页设计中,网 页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性,影响观者对网站的印象。 在资讯类网站中,文字 是页面中最大的构成元素,因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的,通常我们将字体指定为宋体,大小指定为 12px,颜色要视背景色而定,原则上https://www.pageadmin.net/jianzhan/99.cshtml
22.网页设计论文1.2网页设计中的两种特殊应用 首先是鼠标在网页页面中移动所实现的动态图像显示,在网页被点击进入的初期,所显示的画面均为静态的,当鼠标移动进入到画面中时,图片会自动的播放,进入到动态显示效果中,这对网页的制作使用有很大帮助,并且可以减少缓存所需的时间,在内存上也能够节省大量的资源,对实现网页功能制作有很大的https://www.ruiwen.com/lunwen/6161857.html