网页设计的排版问题

使用超过3种不同的字体使网站看起来非结构化和不专业，太多的类型尺寸和样式一次也可能破坏任何布局。下面介绍网页设计的排版问题，希望可以为您带来帮助。

1.最少使用字体数量

使用超过3种不同的字体使网站看起来非结构化和不专业，太多的类型尺寸和样式一次也可能破坏任何布局。

一般来说，整个网站字体的数量限制在最多两种，一种一般就足够了。如果您使用多个字体，请确保字体系基于字符宽度互补。如图：左边组的字体相对就比较和谐，而右边字体的粗细对比太明显，则显得轻重比例很不和谐了。

2.尝试使用标准字体

字体嵌入服务(如Google Web字体或Typekit)有许多有趣而标准的系统字体，而因为用户更加熟悉标准字体，所以可以更快地读取它们。

除非您的网站对于自定义字体(如品牌宣传或创建身临其境的体验)非常有吸引力，否则通常最好使用系统字体。

3.限制线长度

如果你想要一个良好的阅读体验，你应该每行约60个字符。在每行上拥有适当的字符数量是您的文本可读性的关键。如果每行文字太短，视线必须反复折回来，打破读者的节奏。如果一行文字太长，用户的眼睛将很难专注于文本。

对于移动设备，您应该每行30- 40个字符。以下是在移动设备上查看的两个网站的示例。第一个使用每行50- 75个字符(打印和桌面的每行最佳字符数)，而第二个使用最佳30- 40个字符。

4.选择各种尺寸的字体

确保您选择的字体在较小的屏幕上清晰可辨!

5.使用可区分字母的字体

许多字体使得很容易混淆类似的字母，特别是与“i”和“L”(如下图所示)，所以当选择你的字体类型时，请确保在不同的上下文中检查你的类型，以确保不会为你的用户造成问题。

6.避免英文全部大写

请勿强制用户阅读所有大写字母，与小写类型相比，那只会大大延缓了用户扫描和阅读的速度，让他们分分钟爆炸。

7.不要最小化线间距

行间距一般是字符高度的30%，以便良好的可读性。

而段落之间的间距可以比行间距提高20%，留白可以为用户提供消化内容的时间。下图左：几乎重叠的文字。右：良好的间距有助于可读性。

8.确保您有足够的颜色对比度

不要对文本和背景使用相同或相似的颜色。文本越明显，用户能够扫描和阅读的速度越快。

△这些文本行不符合颜色对比度建议，难以根据背景颜色进行阅读

△这些文本行符合颜色对比度建议，并且易于阅读背景颜色

9.避免将文字着色为红色或绿色

建议使用除颜色以外的其他线索来区分重要信息。也避免单独使用红色和绿色来传达信息，避免有色盲用户无法顺利阅读的情况。

10.避免使用闪烁的文字

闪烁或闪烁的内容可能会使一些敏感人群发疯，并且对于一般使用者来说，这可能是令人讨厌或分心的。

网页文本排版设计中的常见错误

1.一大长串的文本

一大块文本比较难阅读。为了引导阅读，应将其拆分为段落或引入短语、图片之类的进行分段。

2.标题离前一段和下一段之间的距离相同

标题不应该离上下段都是一样的距离，它应该属于下一段，标题上方的距离应该比下方的距离大2-3倍。同时，标题下的距离应该跟段落之间的距离大致相同或稍微大一点。这样，标题的视觉效果是跟后文联系在一起的。

3.没有逻辑顺序

在排版中，对比用于在视觉上划分不同级别的文本并建立严格的层次结构。主标题应该是页面上最突出的，副标题应该相对较小但仍然清晰可见。

4.内容块上方和下方的间距不同

如果内容块的重要程度一样，则他们彼此之间的距离要相等。

5.标题位置太靠近图片了

一方面，插图及其标题本应该形成一个整体，但这两个元素是独立的，并且标题不应干扰图像。

6.副标题和文本之间的间距太小

小标题和后面的文本属于一起，但如果文章中段落之间的间距大于子标题和下一段之间的间距，则该文章看起来脱节。

7.突出元素放置得太靠近正文

用作重点表达的元素(如关键短语或引号)是独立的对象。要让它们真正脱颖而出，请将它们设置为离上下的正文75-120像素的间距。

8.不够明显的额外元素

如果您想强调某个短语，请将这部分加粗，让这个短语的字体大于主文本约10-15 px。让关键短语从文本中脱颖而出。

9.窄小的文本块添加色彩背景

如果您想突出显示页面的一小部分(例如作者信息)，只需在这个元素的周边设置足够的间距，不需要将此部分内容填充色彩背景，看来起不协调。

不要再为子标题填充背景色，使用更大的字体和留出足够间距已经是页面的焦点了。

10.两个全屏图片之间有留有空白区域

在序列中使用多个全屏图像时，请避免在它们之间留出空格。图片边框仍然可见，并且无需添加其他元素。

11.使用了太多的设计标记

在文本中加粗字体通常没什么效果，到处都是加粗的字体会影响阅读。

12.排版样式太多

设计不应该影响可读性。排版样式越少，重要的元素就越明显。

13.在长篇文章中让文本居中

居中通常应用于标题和块引号，以区别于文本的其余部分。居中长文本会导致文本难以阅读。

14.标题太靠近图片

标题是一个独立的设计元素。它不应该太靠近随后的图片。一个好的设计应该设置不小于60像素的填充，并添加一个子标题-它将展开页面的内容并将正确的重点放在您需要的位置。

15.用错文本的斜体

斜体用于突出显示文本中的单词或短语。它不像粗体那样立即引人注目，但它确实可以让你在需要的地方强调它。

不要将所有内容(正文，标题)使用斜体。如果在文本中使用无衬线字体，一定不要使用斜体。

16.内容块相对于页面中心显得不协调

如果您在编辑页面后稍微休息一下(更改字体大小，对齐或缩进)并查看其中的内容，您可以轻松地自己发现此错误。

网页设计排版中哪些元素最重要

1.文字

虽然有时候可能一个页面的文字没有几个，但你可千万别小瞧文字的作用。字体的选择，字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。在同一个页面有限的文字区域内你所用到的字体样式绝对不止一种，甚至会有三四种，这是为了打破单一字体给用户带来的单调感。字体的搭配是将两种或更多字体通过合理的排版达到最佳效果的过程。对于很多初学者来说，他们觉得选择只用选择漂亮字体就够了，事实上，选择漂亮的字体并不难，如何让它们完美地搭配在一起，相得益彰，这才是应该好好下功夫的地方。

2.图片

图片可以说是一个网站的核心了，许多设计师都会把大量的精力放在图片设计上，因为很多用户在浏览网页的时候停留的时间不会太久，更不会花太多时间阅读你的内容。这个时候，一张好看的图片就能够快速有效地抓住用户的眼球。大家所熟知的苹果公司官网大部分都是这样的套路，直接将产品的图片呈现在大家面前，没有过多的赘述，反而会让用户觉得简洁明了。

3.交互

交互设计在网页设计中有着相当好的势头，那么在设计交互的时候，必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上，要考虑的情况也就多了许多。在做交互设计之前，你必须站在用户的角度考虑，菜单导航应该在哪个地方最清晰可见?组件应该通过什么样的方式展现用户才会觉得方便?组件和组件之间要怎样排布才会不影响用户的视觉效果?这就要求网页设计师有一个流畅的原型设计过程，通过借助一些原型设计工具(Axure，Mockplus, Justinmind等)来设计出合理、带来良好用户体验的交互设计。

4.视频和动画

如果一个网页只有文字和图片这样静态的元素，难免少了一些生气。现如今，视频和动画的制作成本很低，网络传播性强，与社交媒体网站的兼容性好，甚至在一定程度上，视频和动画传播的有效信息比文本还要多。于是，在网页设计排版中，视频和动画也会被设计师们加入其中。但要注意的是，视频或者和动画设计在同一个版面上不能出现太多，最好一到两处就可以，否则会让用户感到眼花缭乱，甚至它们会喧宾夺主，导致顾客找不到你产品的重点。