小编教你网站设计中最基础的字体排版知识。

网站设计会涉及到很多的制作,本文主要给大家介绍最基础的字体排版,在开始动手制作网页之前,首先要了解网页设计的标准与规范,这样才能保证设计图符合网页设计的要求。

网页设计的基本规范

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

网站设计

1、字体的选择

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

▷ 宋体:源于书法体,主要特点是横细竖粗,笔画末端带有三角状装饰,字形端庄有力,常运用在文章正文当中。

▷ 黑体:字的主要特点是横竖均匀,笔画相对宋体较为粗壮,常用作文章标题,突出而醒目。

早在2006年Windows发布Vista系统时,微软雅黑体就已代替宋体,成为了新的系统默认字体。

那么当时为何要选择微软雅黑体来代替宋体呢?

原因是宋体是一款衬线字体,受到Windows平台字体渲染技术的限制,在小字号字体渲染方面表现略差,部分字号在显示时会产生锯齿、模糊等效果。

而微软雅黑这款非衬线字体,笔画丰满、简洁,常用字号的显示效果相比宋体更为优秀,同时识别度更高。因此,从Vista时代起,微软雅黑体就作为Windows的系统默认字体沿用至今。

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

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

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

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

2、字号使用规范

在网页设计中,一般选择使用双数字号,字号的大小并没有明确规定,但为了确保正常的阅读效果,可以参考以下参数:

▷ 在网页设计中最小的字号一般为12像素;

▷ 正文常见字号有12像素、14像素和16像素;

▷ 标题常见字号有18像素、20像素、26像素和30像素。

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

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

网页标题如何设计看起来会比较舒服?

答案是字体清晰疏阔,字号醒目易读即可。

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

微软雅黑字体,字号36px

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

微软雅黑字体,字号26px

网站设计

3、段落、行间距规范

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

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

行长:主要指段落文字的宽度。

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

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

段落对齐方式

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

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

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

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

行间距的设置

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

英文段落一般选择1.5倍行间距。

网页设计的标注规范

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

效果图的标注一般包括以下3个部分:

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

☉ 字体颜色、字号。

☉ 页面中各个模块的尺寸和间距。

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

☉ 保证标注的文字清晰易读。

☉ 标注所使用的颜色应与背景色区分。

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

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

在进行网页设计时,网页设计师必须熟读网页设计的原则和规范,且一切设计必须依照规范来进行。目前遵循的网页设计规范都是经过科学论证和用户调研得出的。随着科学技术的不断发展,这些规范可能需要与时俱进,但是对于现阶段的网页设计而言,这些符合当下用户体验的规范经验值得设计师学习和借鉴。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/275160.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
创业小编创业小编管理团队
上一篇 2023年6月13日 22:49
下一篇 2023年6月13日 22:49

相关推荐

  • 网站设计要从哪些方面考虑。

    一个好的网站要想留住客户,基本都要有良好的用户体验,对于网站来说,网站设计很重要,网站设计要从哪些方面去考虑呢?1、想要设计一个简单直观的网站,那么你应该为每个页面设定一个目标。每个页面最终是要引领用…

    2023年2月21日
    04
  • 我来分享B2B网站设计的五个要点是什么。

    B2B网站跟B2C网站的需求是不同的。两类网站面向的受众不同,企业与网站的互动,和顾客与网站的互动,也是不同的。比如,一位顾客可能会因为喜欢你的网站上的东西而陷入冲动购物,但如果你的客户是一家公司,这种情…

    2023年6月15日
    00
  • 小编分享网站设计需要哪些设计素材。

    网站设计是网站建设的第一步,好的开始是成功的一半,良好的网站规划是进一步开发的基础。网站规划时应该考虑以下几个问题:1、确认网站的目标,2、确认网站的技术实现,3、确认网站的优化和推广策略,4、确认网站…

    2023年6月15日
    00
  • 小编分享如何判断网站设计的动效是否合格。

    在设计页面的时候,我们都会运用到动效在增强网站的效果。网站设计中,一个完整的动效不仅要有趣,而且还要有清晰的逻辑性。动效的使用可以降低用户对网站内容的认知负担,在沟通的时候,可以更有效地进行交流。一…

    2023年6月8日
    01
  • 小编分享受众广的网站设计技巧是什么。

    你可能会认为,设计一个吸引国际消费者的网站要比设计一个针对较小地理区域的用户的网站容易得多。毕竟,如果你不专注于针对人群中的某一部分人,那么一切就都完了,对吧?在设计一个旨在吸引国际受众的网站时,必须…

    2023年6月13日
    00
  • 国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势。

    Hi,我是彩云。2021 年比 2020 年变得更好了吗?是的,如果我们探讨的是 UI 和 UX 设计的话。新的令人惊艳的网站和 APP 被开发出来,面向设计师的新软件得到更新和发布,创造力被进一步激发了出来。 当设计师被迫待…

    2023年3月1日 SEO操作
    04
  • 网站设计项目进度表。

    在你设计、制作网站时,你的客户常常会很想知道他们的网站设计到了什么阶段,网站设计是否马上能完成?我们很多人都有过这样的经历,坦白地说,这通常是因为客户不了解我们开发网站时幕后发生了什么。为什么呢?他…

    2023年2月19日
    05
  • 我来教你如何巧用多边形元素提高网站设计感。

    几何元素一直以来都是设计师在设计网站时十分喜欢的元素,如矩形页面布局,圆形logo等。但是,几何元素可远远不止这些,很多多边形的设计开始越来越频繁的出现在网站中,也受到了很多设计师的青睐。合理的使用多边…

    2023年6月15日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息