转载自:http://blog-en.tilda.cc/articles-website-design-mistakes，内容是机器翻译过来的，界面看着也不是很舒服的话，看原文吧。

全世界有成千上万的人在Tilda上创建网站。本文基于我和我的同事最近的研究。我们分析了人们在使用我们的平台创建网站时常犯的错误。以下适用于您网页设计时的一些注意事项。

一、首页设计错误

1. 内容不会分解为逻辑块

如果将信息分组为逻辑块，则用户更容易摘要信息。将填充设置为120 px-180 px并使用彩色背景分隔文本块。

在相关信息集之间几乎没有填充，此外该设计需要颜色块以将内容划分为逻辑集。结果，这些信息难以消化，并且不清楚每个块应该使用哪个文本		填充足够大，并且块被颜色分开，这使得一件事立即清楚 - 这些块包含不同类型的内容

2.网页上项目之间的空格不均匀

应在逻辑块周围设置相同大小的空格。否则您的页面看起来会很混乱，用户可能不会对每个部分给予同等的考虑。

各种宽度的空间看起来不均匀，并产生一种印象，即公司信息与标题相关联，尽管每个块都同样重要		标题周围的相同大小的空间和正文副本有助于将逻辑块视为携带同等重要的信息

3.填充太小意味着用户无法将内容分解为逻辑块

为避免逻辑部分混入，请将它们分开并在它们之间插入一个大空间（至少120像素）。

使用窄填充，组成站点的块彼此粘在一起。这会使页面过载并且非常混乱 - 网站访问者会认为这是一个纯文本而不是具有不同含义的部分		填充足够大，因此可以立即看到这两个块之间的差异

4.避免图像上文本复制的对比度低

文本和背景之间应该有足够的对比。要使副本突出，请在图像上放置对比度过滤器。黑色是一种流行的颜色，但您也可以使用鲜艳的颜色混合搭配。 另一种选择是从一开始就使用对比图像，并将副本放在照片的暗部分之上。

此图像太亮，这使得阅读文本副本太困难

应用于照片的滤镜使复印件易于阅读

5.一页上的样式太多

一页上太多的排版和设计风格使它看起来不专业且难以阅读。要避免这种情况，请将自己限制为单个字体和两个饱和度选项，例如，普通和粗体。

由于使用的排版样式太多，目前还不清楚重点在哪里		一种字体，一种颜色和两种饱和度。页面上的排版看起来整洁明了

6.颜色块太窄

避免使用颜色强调窄页面元素。它看起来不太好看。例如，由于标题的大小，类型饱和度和填充，标题已经很好地标记。您想突出显示页面上的特定点吗？使用整个块的颜色背景，包括相关的标题和文本副本。

放置在彩色背景上的标题打破了页面的连续性，看起来像是独立的独立元素		标题和相关文本都具有相同的背景。它表明它们属于同一个逻辑集

7.窄列内的文本复制太多

当窄列中有大量文本副本时，很难阅读，因为网站访问者必须从一行跳到下一行。另外，它看起来不太好看！最好减少列数并缩短文本副本，否则没有人会阅读它。

很长的，有争议的专栏很难读		这些列中的文字很少，因此阅读它很容易

8.太多的中心文本

当文本很少时，页面上的居中文本很有效，否则用户很难有效地进行导航。同时，从24像素开始增加字体大小。 如果您需要包含大量文本，请使用具有可折叠文本副本的块（在Tilda中，它是块TX12，TX16N或按钮BF703）。

长而居中的文本不易阅读		标题下的短文本（均为中心）在页面上看起来很好

9.文本复制叠加在图像的基本部分上

避免使用文本覆盖有意义的部分或图像的小细节。这样，您将模糊图像并使文本难以辨认。尝试不同的线条位置，例如居中或对齐文字或垂直放置。

这个标题阻碍了女人的脸。有这么多微小的细节，很难阅读文本		图像和文本副本易于阅读并形成良好的构图

10.滥用视觉层次结构

为了在页面上清晰可见的信息层次结构，封面上的标题应该大于标题的其余部分或至少相同的大小，例如，如果标题很长，则。

标题上的标题不成比例地小于以下标题，这令人困惑。为什么？它使第二个标题显得更加突出		标题上的标题大于下一个块中的标题，因此整个页面看起来一致

相同的原理适用于逻辑块内的可视层次结构。标题应该是页面上最大的设计元素，然后是较小的，不太突出的子标题。接下来，随后的功能标题应明显小于标题，并且重量相同。最小的字体应该用于功能描述。 这将有助于网站访问者区分最重要和最不重要的信息。

标题比标题更小，看起来是次要的，尽管在这种情况下它更重要		标题是页面上最突出的元素，虽然标题以较小的类型书写，但它们仍然清晰可见

11.一个逻辑集分为两个

跟随文本的全屏图像或图库类似于单独的独立块。如果在图库周围添加填充，由于共享背景，文本副本和图像看起来都是逻辑整体。

全屏画廊看起来与上面的标题脱节，看起来像一个独立的街区		画廊与它上方的标题共享相同的背景，这使得整个构图看起来很稳固

12.标题太大而且很长

非常大的字体非常适合短句。如果标题很长，请使用较小尺寸的字体。它易于阅读，并为页面上的所有其他设计元素留出足够的空间。

一个太大的标题占据了整个封面，而设计元素争夺空间，标题难以阅读		这个页面组合得很好，所有的设计元素都相互平衡，副本很容易阅读

13.错误地使用按钮的边框样式

当按钮透明时，边框是必需的。为颜色按钮添加边框没有意义，它只是另一个无意义的设计功能，它会使页面过载并使其难以阅读。

14.使用太多颜色

在页面上使用太多颜色会令人困惑，并且不清楚哪些位更重要。一种或两种颜色足以让视觉突出显示真正重要的东西。

页面上有太多鲜艳的颜色; 这令人困惑		一种颜色创造了多样性，并且不会分散页面内容的注意力

15.重载菜单

人们访问网站以找到解决问题的方法。帮助他们！使用菜单可以帮助人们浏览网站并快速轻松地找到他们需要的内容。请勿使用过多的信息使其超载。这足以拥有5-7个菜单项。

此菜单包含太多信息，使网站导航更加困难

简单的菜单可以轻松找到您需要的东西

二、文章设计中的错误

1.长而坚固的副本

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

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

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

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

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

3.没有逻辑顺序

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

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

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

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

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

5.标题位置太靠近图像

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

标题贴在图像上，我们无法与其中任何一个正确接触		图像与其标题之间有很多空白区域，但很明显标题与图像一致

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

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

标题和段落之间的空间小于段落之间的空间		标题后的空格略大于段落之间的空格

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

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

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

8.低对比度元素

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

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

9.窄文本块的彩色背景

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

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

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

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

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

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

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

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

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

12.排版样式太多

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

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

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

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

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

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

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

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

15.在不需要时使用斜体

斜体用于突出显示文本中的单词或短语。它不像粗体那样立即引人注目，但它确实可以让你在需要的地方强调它。 不要用斜体写出所有内容（正文，标题）。如果在文本副本中使用sans-serif字体，则完全避免使用斜体。

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

斜体在正确的位置，增加了适当的重点

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

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

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

---

作家：Ira Smirnova，Masha Belaya，Julia Zass 设计与布局：Julia Zass