点击上方蓝色字关注我们~

很多设计师在设计网页时不自觉的犯一些错误，导致页面的用户体验不好。下面列举15个比较常见的着陆页的设计错误及改正。

如果将内容分组分块展示，则用户更容易理解内容的信息。将上下间距设置为120 px-180 px，并使用彩色背景分隔文本块。

错误❌

在相关的内容之间没有间距，此外，这种设计需要色块做区分。结果，内容不容易理解，用户不清楚哪些内容是组合在一起的。

正确✔️

足够大的间距，不同块用不同的颜色做区分。这样，用户一看便知道哪些区块包含哪些内容。

应该让区块上下之间设置相同高度的空间。否则页面看上去会很混乱。用户可能会认为每个部分的内容不是相等的。

错误❌

上图中间距看起来不均匀会让用户认为“About Stenser Brothers”是整个页面的主标题，其实“About Stenser Brothers”与“Why choose us？”是并列关系。

正确✔️

标题周围的间距与正文周围的间距相同，用户会认为两个区块的内容是并列关系。

为了避免内容的混乱，请将间距调大到至少120像素。

错误❌

使用窄的间距，内容块之间像是粘在一起的。这会显得混乱并让用户觉得这是整段，而不是分开来的内容。

正确✔️

间距足够大，立即就能看出这两个内容块之间的差异。

文本和背景图片应该有足够的对比度。为了让文本突出，图片上可以加一层半透明的黑色，也可以用鲜艳的渐变色。或者挑选图片的时候，就选择对比度高的图片，文本放在图片比较暗或者亮的区域。

错误❌：此图片太亮，使得文本难以辨识。

正确✔️：照片上多一层滤镜效果，让照片上的文本容易阅读。

同一页面上太多的板式和设计风格会让页面看起来不专业而且难以阅读。要避免这种情况，请将字体限制在一种，只有粗细的不同。

错误❌

由于使用了太多的版式风格，用户不清楚页面的重点在哪里。

正确✔️

只用一种字体，一种颜色和两种字体粗细变化。页面上的排版看起来整洁明了。

避免使用较窄区域的颜色背景。看来起被切割了一样，不好看。例如下图：用色块突出标题，但是，标题已经用大号字体并加粗，已经很明显了，不需要再画蛇添足用背景色。

错误❌

标题的背景色打破了页面的连续性，标题看起来像是独立的内容块。

正确✔️

标题和相关的文本应该用相同的背景色，表面他们属于同一个内容块。

当较窄的列中使用大量的文本，文本很难阅读，用户必须要扫看很多行。而且，这样的排版看来起也不好看。最好是减少列数并缩短文本，否则没人会去阅读。

错误❌：居中的长段的文本列很难阅读。

正确✔️：这些列中的文字很少，因此很容易阅读。

当页面上的文本内容较少时，居中的文本容易浏览，否则就是灾难性的。不然，您得设计成折叠式的。

错误❌：长段而且居中的文本不易阅读。

正确✔️：标题下的短文本（两者都居中）在页面上看起来很好。

避免文本覆盖在图片中比较重要的位置上。不然，会让图片不容易识别。尝试不同的排版方式，剧中或者靠边对齐。

错误❌

这个标题挡住了女人的脸。图片中女人的脸有丰富微小的细节，这会让文本很难阅读。

正确✔️

图片和文本都容易识别和阅读，并且这样的构图也很漂亮。

为了使内容层次在页面上清晰可见，封面上的标题应该大于其它位置的标题，如果标题很长，则与其它位置的标题大小相等。

错误❌

头部的标题不成比例地小于下一个标题，这令人困惑。为什么？它使第二个标题显得更加突出。

正确✔️

头部的标题大于下一个内容块的标题，因此整个页面看起来和谐一致。

相同的原理适用于内容块内的可视层次结构。标题应该是页面上最大的设计元素，然后是较小的，不太突出的子标题。接下来的功能标题应明显小于标题，并且粗细相同。最小的字体应该用于功能描述。

这样才有助于用户区分最重要和最不重要的信息。

错误❌

标题比子标题更小，看起来是次要的，但其实应该更重要。

正确✔️

标题是页面上最突出的元素，虽然标题的子号不大，但仍然清晰可见。

全屏幻灯片看上去像是一个单独的模块。这时，应该在幻灯片周围留白增加空隙，与标题使用相同的背景，这样的文本和图片看起来才是对的。

错误❌

一个全屏画廊看起来与上面的标题脱节，看起来像一个独立的内容块。

正确✔️

画廊与它上方的标题具有相同的背景，这使得整个构图看起来很和谐。

大字体适合短小的句子。如果标题很长，请使用较小的字体。这样才易于阅读，并为页面上的其它设计元素留出足够的空间。

错误❌

标题太大并且占据整个页面，标题难以阅读。

正确✔️

这个页面组合得很好，所有的设计元素都相互平衡，副标题也很容易阅读。

当按钮是透明时，按钮是需要有边框。但是给有背景颜色的按钮添加边框没有意义。

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

错误❌：页面上有太多鲜艳的颜色，令人眼花缭乱。

正确✔️：一种强调性颜色可以多变，并且不会分散页面内容。

用户访问您的网站是希望找到解决问题的方法。所以，您要使用尽可能少的菜单选项帮助用户轻松找到他们需要的内容。

错误❌：此菜单包含太多信息，导致网站导航非常困难。

正确✔️：简单的菜单让您轻松找到所需内容。