公司主页 / 文章 / 网站创建 / 新手网页设计师的排版指南

新手网页设计师的排版指南

排版是网站设计的重要方面。 选择字体样式很容易——大多数 现代网站建设者,只需单击三下即可切换字体样式。 然而,为网站选择*正确*的字体样式绝非易事。 具有正确排版的网站给人以专业的印象,并允许访问者轻松阅读。

在本文中,我们将探讨版式的不同元素,并分享为您的网站选择正确版式的技巧。 

什么是排版?

什么是排版? 排版解释

排版是安排字体的艺术和技术,使书面语言在显示时清晰、可读和吸引人。

在我们深入之前,您需要熟悉的一些基本排版元素包括: 

字体和字体  

字体是一组特定字符的设计。 例如,Times New Roman、Arial 或 Helvetica 是您过去可能遇到过的一些常见字体。 

字体是字体的特定粗细、宽度和样式,例如 Arial Bold 或 Times New Roman Italic。

字体大小

字体的大小以点为单位。 在网页设计中,字体大小以像素 (px)、ems (em)、rems (rem) 和百分比 (%) 来衡量。 像素 (px) 是一种绝对测量单位,它以固定的像素数定义字体大小。 另一方面,Ems (em)、Rems (rem) 和百分比 (%) 是基于网页中不同元素的相对测量单位。 正确的字体大小取决于屏幕大小和读者与屏幕之间的距离。 

一般来说,16px - 20px 推荐用于桌面,14px - 18px 推荐用于移动设备。 您正在阅读的本网站的字体大小为 18px,适用于桌面和移动屏幕。 

行间距

行间距是文本行之间的垂直空间量,也称为行距。

等级制度 

版式层次结构是指页面上不同级别文本的排列。 大多数网页设计师将内容按主题分成几个部分,并使用排版层次结构使内容易于浏览和消化。 

例如 – 这篇博文以标题文本(又名标题 1 或 H1)开头,然后是不同的部分标题 (H2) 和子标题(H3、H4、粗体)、正文(您正在阅读的内容块) ) 和潜台词(出现在页脚部分的小字体)。 

通过使用不同级别的标题、副标题、字体大小、字体粗细、颜色和空白——您可以创建清晰的视觉层次结构,引导用户注意您最重要的信息,并使其更容易浏览和消化内容。 

初学者的排版技巧

现在我们已经了解了基础知识 - 让我们看看一些可以应用于您的网站设计的可行技巧。

1. 选择能反映您网站品牌个性的字体

不同的字体有不同的个性。 选择与您网站品牌的身份和价值观相符的品牌非常重要。 通常 - 无衬线字体可能更现代和时尚,而衬线字体可能更传统和优雅。 

对于初学者来说,通常最好从常用字体开始,例如 Arial、Helvetica、Roboto、Open Sans、Lato、Montserrat,甚至是 Verdana。 这些字体类型不仅适合大多数布局设计,而且在大多数设备和浏览器上也广泛可用—— 这使他们“网络安全”

排版示例

选择字体时,要考虑易读性、可读性和语气等因素,并确保它与您网站的整体风格和品牌相匹配。 以下是从万维网上捕获的一些现实生活中的例子。 

版式样本 - Wired.com
接线 – 标题:Apercu & Druk / 正文:BreveText
排版样本 - NordVPN
NordVPN – 标题和正文:国际米兰
排版样本 - 99 种设计
99设计 – 标题:Larsseit-Bold / 正文:Graphik。
版式样本 - 纽约时报
纽约时报 – 标题:切尔滕纳姆/身体:帝国
排版样本 - BlueHost
BlueHost – 标题:Source Serif Pro / 主体:Montserrat。 另请注意,该网站使用对比鲜明的黄色背景来强调其优惠(而不是所有大写或动画文本)。
排版样本 - 等待,但为什么
等一下为什么 – 标题和正文:Noto Sans。
排版样本 - WordPress
WordPress – 标题:EB Garamond 和国际米兰/正文:国际米兰
排版样本-WHSR
WHSR – 标题和正文:系统字体。 使用默认系统字体可以更轻松地控制我们的网站设计布局和网页性能。

2. 使用不超过三种字体

少即是多。 使用太多的字体通常会导致设计混乱和混乱。 一般的经验法则是使用不超过 2-3 种不同的字体。 在 WHSR,我们在整个网站上只使用一种字体类型。 

3.注意字体配对

字体应该相互补充,而不是相互竞争。 使用字体配对工具查找可以很好协同工作的字体。

4.行与行之间使用足够的间距(行高)以提高可读性

建议正文的行高至少为 1.5,并且可以根据字体大小和类型进行调整。 适当的行高有助于防止文本显得局促或混乱——这使读者更容易扫描并快速掌握您的内容的想法。 

5.避免动画文字

我们不再生活在 90 年代了。 动画文本并不酷。 此外,它们可能会分散注意力并使您的内容难以阅读。 相反,应谨慎而有策略地使用动画来引起对重要信息的注意。 

例如,您可以使用动画突出显示号召性用语按钮或显示页面上的隐藏内容。 

使用动画时,一般的经验法则是它不会影响内容的可读性或可访问性。 

6. 尽量减少所有大写字母的使用 

所有大写的句子——无论是在正文还是标题中,都可能难以阅读。 如果您需要强调一点——考虑使用粗体或斜体字体样式,或者使用对比色背景。 

7. 在不同的设备和屏幕尺寸上测试你的排版 

在不同设备上测试您的排版有助于识别任何用户体验问题或设计不一致。 确保字体大小、行高以及其他设计元素针对小屏幕和大屏幕进行相应调整,以便您的网站易于浏览和理解。 

不要害怕尝试不同的字体、大小和布局。 与用户一起测试设计并根据网络分析数据(页面停留时间、跳出率等)和他们的反馈进行迭代。

有用的排版工具和资源 

FontPair 允许您浏览数百个免费的 Google 字体配对(点击这里查看).

这里有一些有用的网站和工具,可以帮助您为您的网站选择版式:

  • 谷歌FoNTS:免费的网络友好字体集合,可以轻松集成到您的网站中。
  • FontPair.co:适用于所有类型设计的免费字体和字体配对库。 
  • Fonts.com:一个提供大量专业设计字体供网络和印刷使用的网站。
  • 字体松鼠: 一个免费的字体资源,提供大量可供商业和个人使用的高质量字体。
  • 字体冲刺匹配器:一个免费的字体查找器工具,可帮助从上传的图像中识别字体类型。
  • DaFont:一个流行的网站,提供大量可用于个人和商业项目的免费字体。
  • 字体空间: 另一个免费字体集,提供广泛的高质量字体供个人和商业使用。
  • Fontanello:一种浏览器扩展,可让您通过右键单击显示文本的基本排版样式。

包起来

排版是一种 cruci网页设计的一个方面,可以极大地影响网站的可读性、易读性和整体用户体验。 通过了解排版的基础知识,您可以创建更有效和更具吸引力的网站。 

阅读更多

作者照片

作者:Jerry Low

继续阅读