现代网页设计最佳实践:版式

在过去的十到二十年中,网站设计的发展速度如此之快,以至于很难跟上当前的趋势和最佳实践。不久之前,基于表(table)的网页设计被认为是最先进的,而CSS则是闻所未闻的。为了解决这个问题,有时几乎不可能找到关于“正确设计”最新信息。

为此,我们已经收集了100多种用于设计现代网站的最佳实践,涵盖了从CSS和编码到图像、图形和版式的所有内容。连同实践本身一起,您可以获取更多信息,以帮助您直观地了解我们在说什么。

确保您的字体大小合适

字体太大或太小都会为您的网站描绘错误的图像。确保标题大于正文,并且所有字体选择均可读。

应谨慎使用特殊类型的样式(粗体,斜体)

不要将网站上的所有其他字都加粗或斜体。仅在要强调一些重要事项时才谨慎使用它们。

注意排版的整体结构

看看您的不同字体风格如何相互影响并一起看待。确保标题类的大小符合逻辑(H3标签最大,影响最大,H6外观最小,最不重要)。

不要忽视印刷术的细节

字体设计的前导,间距和其他细节等细节可能会对您网站的整体外观产生巨大影响。确保字母,单词和行之间以及标题和段落之间有足够的间距。这些小细节可以带来很大的不同。

使用适当的文字颜色

确保您的文本颜色与背景颜色具有足够的对比度,而不会刺眼或刺眼。鲜明的对比(尤其是那些在深色背景上带有浅色文字的对比)对于大块文字而言尤其难以阅读。

不要使用居中的文本块

居中的文本适合标题,但避免用于段落或其他较大的文本块。锯齿状的边缘需要更长的时间才能阅读,并且往往会中断文本的流动。

接受SANS SERIF字体进行正文复制

通常,无衬线字体比衬线字体更容易在屏幕上阅读。尽管有一些衬线字体适用于大块文本(乔治亚州最为突出),但衬线字体通常是较安全的选择。

使用EM单位调整文字大小

Em单元允许访问您的网站的访问者根据自己的喜好调整文本大小。这使得它更容易为那些视力不好,享受您的网站不亚于那些有20 / 20的视力。

不要使用太多的字体或粗细

字体和其他字体样式太容易过分了。但是,使用太多内容只会使您的网站显得杂乱无章,更糟糕的是,它不专业。将字型限制为两个或三个,并确保字型权重反映要应用这些字型的元素的相对重要性。

在版式设计中使用刻度

制定了比例尺,以使版式看起来平衡且成比例。无论您使用的是15世纪开发的原始字体比例尺还是自己使用的比例尺,请确保您网站上字体大小之间的关系一致并且看起来很好。

合理地设计标题

标题的样式应基于其重要性。换句话说,h3标签应该在所有标题样式中具有最大的影响力,比其他样式更大,更重。您的H6标签应该是最小的(可能仅比您的身体字体大小大一两个),并且应最轻。

确保您使用的是WEB安全字体或非常常用的字体

并非所有人都将在您的计算机上安装与您相同的字体。而且,在许多情况下,人们永远不会在计算机上预先安装的基本系统字体之外安装任何字体。确保为网站选择的字体是网络安全的,或者已在大多数系统上预安装。并指定一系列字体,这样如果您的第一选择不可用,它将加载到次佳的字体中。

除了链接以外,什么都不加底线

人们期望在线下划线的文本可以链接到某些东西。如果不是,您什么也做不了,只会使您的访客感到困惑。

注:本文翻译引用自国外