常见的网页设计错误（下）

原文地址http://blog-en.tilda.cc/articles-website-design-mistakes
关注我的个人博客:pinbolei.cn，获取更多内容

文章设计中的错误

1.长而坚固的副本

文本墙使阅读难以理解。为了便于导航，将其拆分为段落或引入诸如关键短语或图像之类的中断。

1-1 1-2
图1-1，文字墙很难看。
图1-2，拉引号或图像等元素使阅读文本更容易。

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

标题不应该在类似距离的章节之间“挂起”，因为它属于下面的段落。标题上方的距离应比其下方的空间大2-3倍。同时，标题下的距离应与段落之间的距离大致相同，或稍大一些。这样，标题将在视觉上引用后续文本。

2-1 2-2
图2-1，标题位于其上方和下方的段落之间的相等距离​​处，并且不清楚它属于哪个段落。
图2-2，由于在标题下使用了填充，很明显标题属于下面的文本。

3.没有逻辑顺序

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

3-1 3-2
图3-1，标题和子标题大小大致相同，它们之间没有明确的层次结构。
图3-2，从逻辑上讲，标题比子标题更重要。

4.块上方和下方的填充不同

如果块具有相同的重量，则它们应具有相同的外观和感觉并且彼此之间的距离相等。

4-1 4-2
图4-1，如果标题和作者图像之间的空间太窄，看起来好像作者更多地关注标题而不是后面的文本。
图4-2，由于图像上方和下方的相同尺寸填充，块看起来相同。

5.标题位置太靠近图像

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

5-1 5-2
图5-1，标题贴在图像上，我们无法正确地与其中任何一个进行交互。
图5-2，图像与其标题之间有很多空白区域，但很明显标题与图像一致。

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

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

6-1 6-2
图6-1，标题和段落之间的空间小于段落之间的空间。
图6-2，标题后的空格略大于段落之间的空格。

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

用作重点表达的元素（如关键短语或引号）是独立的对象。要让它们真正脱颖而出，请将它们设置为75-120像素的主体副本。

7-1 7-2
图7-1，主要文本和突出元素之间的空间太小。
图7-2，由于大填充，拉引号真正脱颖而出。

8.低对比度元素

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

8-1 8-2
图8-1，关键短语与副本的其余部分混合在一起。它看起来很乱，所以尽量避免这种情况。
图8-2，现在每个人都可以看到它，这要归功于大字体和文本周围足够的填充。

9.窄文本块的彩色背景

如果您想突出显示页面的一小部分（例如作者信息），则足以在此周围设置足够的填充，这将产生空间印象。不要将此部分放在彩色背景上; 这看起来不合适。

9-1 9-2

不要使用颜色作为子标题。使用更大的字体和填充应足以使其在页面上弹出

9-3

10.两个全屏图像之间有一个空白区域

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

10-1 10-2
图10-1，全屏图像之间的空白空间毫无意义，看起来不太好。
图10-2，在这个例子中，图像之间存在和谐的流动。

11.使用了太多的设计口音

设计重音（例如这里的粗体）很少有效。放入太多，这将妨碍阅读页面。

11-1

许多单词以粗体标记，因此文本副本显示为已损坏

11-2
一些标记的词语引起了对自己的注意，并且不会干扰文本的其余部分

12.排版样式太多

设计不应干扰可读性。排版样式越少，重要的元素就越明显。它足以强调标题和小标题，并使用对比关键短语。

12-1 12-2
图12-1，这个文本有太多的排版设备。他们分散了读者的注意力。
图12-2，很少排版样式，重点很明确，并且观察文本层次。

13.在长篇文章中集中文本

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

13-1 13-2
图13-1，中心文本看起来很乱，而且很难阅读。
图13-2，左侧对齐的文字很容易在眼睛上。

14.标题看起来太靠近图像了

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

14-1 14-2
图14-1，标题太靠近图像，此页面上没有喘息空间。
图14-2，这里标题通过子标题与图像分开，并且它与整个部分有关，而不仅仅是图像。

15.在不需要时使用斜体

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

不要用斜体写出所有内容（正文，标题）。如果在文本副本中使用sans-serif字体，则完全避免使用斜体。

15-1

由于字体大小和填充，这个短语已经突出，所以这里并不真正需要斜体。

[图片上传失败...(image-ab7b77-1546571252136)]
斜体在正确的位置，增加了适当的重点。

16.块相对于页面中心和彼此显得不合适

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

16-1 16-2
图16-1，在此示例中，标题向左移动，文本复制到右侧。
图16-2，所有文本元素都相互协调。