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

排版是网站设计的一个重要方面。网页设计师选择字体样式很容易 – 使用大多数现代网站构建器,只需单击三下即可切换字体样式。然而,为网站选择*正确的*字体样式从来都不是一件容易的事。具有正确排版的网站会给人专业的印象,并让访问者轻松阅读。

1、什么是网站版式?

网站版式是一种排列字体的艺术和技术,使书面语言在显示时清晰、可读和有吸引力。在我们深入研究之前,网页设计师需要熟悉版式的一些基本元素,包括: 

1.1字体  

字体是一组特定字符的设计。例如,Times New Roman、Arial 或 Helvetica 是您过去可能遇到过的一些常见字体。 字体是字体的具体粗细、宽度和样式,例如 Arial Bold 或 Times New Roman Italic。

1.2字体大小

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

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

1.3行间距

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

1.4标签 

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

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

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

2、网页设计师初学者的排版技巧

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

2.1选择反映您网站品牌个性的字体

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

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

2.2使用不超过三种字体

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

2.3注意字体配对

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

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

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

2.5避免动画文本

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

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

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

2.6尽量减少全部大写的使用 

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

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

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

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

有用的版式工具和资源 

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

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

总结

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

滚动至顶部
扫描微信二维码联系我们 关闭