爱企云-深圳网站建设
所在位置: 首页 > 动态 > 行业动态 > 网站排版:排版网页设计入门指南

网站排版:排版网页设计入门指南

Time: 2023-04-24
Click:

网站排版设计的最终目标是通过系统字体和网页字体的易读性和内涵来优化沟通。


当网站首次出现在互联网上时,它们通常用于共享基本的链接文档,这些文档通过一个简单的基于互联网的超文本系统进行标准化,该系统由HTML的初始和相对纯文本的网页设计组成。当基于超文本的系统得到其他标准化技术(如级联样式表(CSS)和JavaScript)的辅助时,网络似乎发生了变化。它建立了更有意义的基于网络的内容的大量分发,并伴随着一系列早期的网页设计和开发原则和做法。


最终,随着网页设计和发展趋势以及技术的进步,即使这一切还不够。要创建一个动态且引人注目的现代网站,您需要添加额外的花里胡哨的东西,包括更新的 Web 组件和元素,网站访问者可以享受和利用的不仅仅是您以前在网站上看到的常规内容。


随着所有关于新网络技术和概念的炒作,网站的一个特定基础内容因素不会偏离网页设计过程的要求列表 - 网页排版。


自万维网诞生以来,排版在网页设计和开发中发挥了重要作用,因为它是网页内容和信息呈现中使用的最基本元素。三十多年来,排版广泛影响了我们与各种形状、重量、大小和排列的不同单词的交流方式。排版就在我们身边的事实;从我们在设备上阅读的内容到电视节目,从书籍和杂志到在线产品,我们的社会充满了排版。


网络排版从字母开始,从单词到短语的基本文本元素,然后是句子。字体选择的类型(例如整个网站的字体系列、字体大小、字体颜色和字体样式)会影响每个内容的基础子结构通信。每个网页上的每个文本元素都传达了内容的视觉层次结构、情感、语气和信息,从而为网站访问者提供了有价值的信息线索。提高文本可读性会影响网站的整体可用性。


网页设计师和开发人员需要了解网页设计排版的基础知识,以向读者表达引人注目和清晰的信息。网页排版设计过程的最终目标是通过选择正确的字体和利用现有方法(如级联样式表 (CSS))来优化系统字体和 Web 字体的易读性和内涵的通信。CSS提供了通过水平或垂直空间优化和控制不同文本属性和块的方法,以实现有效和专业的Web排版。


排版既是一门艺术,也是一门科学的过程。网页设计师和开发人员应该学习永恒的排版知识的基础,并彻底了解优化文本的设计系统,而无需诉诸减慢网站加载时间的图形。


网络排版简史


在1980年代,计算机取代了排版机,为各种排版潜力打开了世界。通过不同类型的字体控制设计首次成为可能。通过各种公司的发现,世界开始使用各种各样的新字体。其中一家公司是国际字体公司(ITC)。ITC为金属和照相印刷机过渡到新的数字排字机时代开辟了一条道路。这些新的数字排字机可以在一台计算机中撰写文本并合并图形和布局。


在1990年代初期,Tim Berners-Lee引入了超文本标记语言(HTML)的概念,它与超文本传输协议(HTTP)和统一资源定位器(URL)并行工作。这些用于使用系统字体创建基于文本的基本文档演示文稿,这些字体链接在一起并由计算机的 Web 浏览器解释。


快进到1998年,级联样式表(CSS)工作组提出了@font面CSS规则的概念,该规则假设允许用户在Microsoft的Internet Explorer 4浏览器上的HTML文档中使用特定字体,但失败了。最后,在2008年,Apple Safari和Mozilla Firefox是两个成功集成CSS@font面规则的开创性浏览器,它开始了不同排版Web技术和平台的创新,如Typekit和Google Fonts。


二十世纪继续推进排版技术,因为@font面CSS规则得到了谷歌Chrome,Firefox,Safari和Edge等主要现代浏览器的支持。这导致了排版技术和实践的各种选择,包括使字体在不同的视口(包括台式机、平板电脑或手机)上响应。


网站排版基础知识


互联网对排版的工作方式产生了特殊影响,并在短时间内呈现。渐渐地,程序员创造了设计网页排版的新方法,这带来了类似于印刷设计的更大灵活性。排版已经影响了图形和网络媒体平台,并已成为以积极和有意义的方式连接人们的视觉交流的重要媒介。良好的排版有助于吸引合适的受众,发送正确的信息,并销售更多的产品和服务。


大多数网页内容由文字组成。网站的文字应该被访问者阅读,这应该创造良好的阅读体验。因此,排版可以决定体验以及如何理解单词,这可以是差的、平均的或优秀的。这就是为什么网页排版由微小的细节组成,例如字体大小、粗细、样式,甚至字体堆栈和字母的行高,加起来就是网站设计的伟大之处。


优秀的排版和字体可以为设计的整体输出带来很多。虽然排版有时可以是一种自我表达的形式,但如果您使用来自数千种在线字体的随机字体而没有明确的目标,它可能会很混乱。除了情感或语气之外,排版的主要作用始终是确保易读性和可读性,以阐明结构和与其他Web组件的关系。


微信图片_20230424143506.png


什么是网页设计基础中的排版?


排版在网页设计基础知识中起着至关重要的作用,通过选择合适的字体来确保网站每个基于文本的内容的可读性和理解性。与印刷设计一样,排版也包含在设计过程中,特别是利用合适的字体和合适的尺寸、样式、重量、行高、颜色、形状和 CSS 操作来创造平衡和愉快的阅读体验。


排版基本术语


作为网页设计师和开发人员,了解排版的关键术语至关重要。如果您不知道所指向的关键术语,那么就很难有效地使用某些排版概念,以使读者能够以身临其境的方式使用文本。


网页排版


字体


网页安全字体


衬线字体


符号、实体和重音符号


基线


字距调整


反差


颜色


等级制度


网站排版设计指南


使用排版设计网站可能是一项奇怪但令人愉快的任务。随着数以千计的在线网络字体的出现,设计师和开发人员有很多选择可供选择,并利用不同的排版设计因素,如大小、重量、样式等。

在开始任何排版设计之前,必须了解一些正确的排版方法。以下是您在使用排版设计时可以使用的一些准则。


使用 ems 而不是像素。


CSS 中 em 的好处是它提供了一个专门用于排版的长度单位。Ems 使任何使用它的人都可以设计可扩展的 Web 内容。Ems 用于垂直和水平空间中的宽度、高度、边距、填充和其他基于 Web 的测量,并提供与字体大小相等的距离。


为正文文本选择无衬线字体。


在为网络创建排版时,与衬线相比,无衬线更清晰。无衬线字体(如 Helvetica)与装饰性字体相比,可以轻松阅读。


使用移动方法文本。


响应式网页设计已经存在多年。若要确保文本块在所有设备上看起来都不错,在开始排版设计时,必须首先考虑使用 CSS 媒体查询为移动设备进行设计。 使用段落的默认字体大小。设计版式内容时,建议使用浏览器的默认大小。几乎每个设备设置的标准初始大小都是 16px。


使用大写文本时要小心。


有时,使用大写文本可能不合适,因为它可以表达强烈的情感和语气。如果你想对特定的文本做一些强调,你总是可以根据需要使用字体粗细。


有目的地使用字体。


使用多种字体可能会很混乱。您一起使用的字体越多,受众就越难阅读和理解它。简单性始终是任何排版设计的关键。建议最多使用两到三种标准字体,以确保与内容主题的一致性和相关性。


总结


排版有各种形状和形式。随着每年构建越来越先进的设备,网站设计师和开发人员需要渴望创建灵活、可扩展和适应性强的 Web 排版,这些排版既能取悦读者的眼睛,又易于理解。


熟悉排版基础知识及其设计过程将使您能够为您的网站或应用程序创建更好的排版。

联系爱企云
LET'S TALK
LET'S TALK
做品质网站,直接与总监谈
我们不搞销售套路,只有真正懂设计、懂技术、懂方案的人在与您交流
咨询直达   熊总监