网页设计的常见错误 - 首页【译】

原文地址：http://blog-en.tilda.cc/articles-website-design-mistakes

原作者：Nikita Obukhov

转发请注明来源

首页设计的常见错误

1. 页面内容未分成对应的逻辑块

当页面被分成明显的逻辑块时，会更加利于用户阅读。试试设置 120px - 180px 之间的间距，并用不同的背景色块来区分不同的逻辑块。

不同的逻辑块之间只有一些小间距，并且没有用不同的背景色来做区分，增加了用户的阅读成本，且用户很难快速理解某一块文本属于哪个逻辑块；应用了足够大的间距和不同的背景色，高下立判；

2. 页面元素之间的间距不对称

逻辑块应该采用相同对称的间距进行包裹，否则页面会看起来一片混乱，用户不会留心观看每个逻辑块。

（译：简单来说就是会逼死强迫症）

不同的高度除了不对称，还会让用户以为页面主体信息（原文指公司引导页面的公司信息）与顶部相关，而实际上我们设计的每个逻辑块都应该是一样重要的。

3. 太小的块间距导致用户无法将页面内容分成明显的逻辑块

使用至少 120px 以上的间距来分开不同的逻辑块（每个块的上、下边距，即padding）。

太窄的块边距使得块之间靠得太近，页面看起来会有一种窒息感，且用户会困惑于相邻的文字是不是属于同一逻辑块；而足够大的间距则有显而易见的区分能力；

4. 避免图片上的文字与图片的对比度太低

文字与背景的背景的对比应该足够明显，为了让文字层更突出，可以给背景色加上一层遮罩，黑色是常用的遮罩颜色，但也可以试试混上明亮的颜色。

另一个方法是采用明暗对比明显的图片作为背景，并把文案放在暗色部分的顶部。

背景色太亮，文字变得难以阅读

添加了遮罩之后，文字变得很清晰

5. 单个页面用了太多样式

一个页面上应用了太多不同字体和设计风格会有一种不专业感且难以阅读。采用单种字体以及两种字重（如粗体和正常）来避免这种情况。

太多的样式使得页面中的重点很混乱；而采用一种字体、一种颜色、两种字重则使得页面干净、整洁；

6. 色块太窄

不要用色块来强调太窄的页面元素，比如说标题在采用了大字体、粗体和上下间距后已经足够明显了，无需再画蛇添足。当你想突出页面的某一部分的时候，不如直接为标题和内容部分整体添加一个统一的背景色块。

色块会打断页面的连续性，使得标题与文字失去了联系；为标题和内容同时添加背景色则不会有这个问题；

7. 在一个很窄的列里放置太多的文案

当在很窄的列里放置了太多的文案，用户不得不逐行阅读从而增加了阅读成本。砍短啰嗦的文案吧，不然也没人会去仔细看的。

难以阅读的长、多行文字；简短易读的文字；

8. 居中文本过多

文本比较少的时候采用居中排版可以增加美感，但是在文本内容过度的情况下，用户每次读新的一行都要找一下下一行开始的位置。如果你真的有很多内容，可以把它们分成几个块，并用标题来概括它们。

居中的长文本；将居中长文本打散成几个逻辑块；

9. 文案与背景图片的主体部分叠加

避免文案与图片的主体或重要部分重叠，这会使得图片与文字都变得难以辨认。试试改变文案的排版，比如居中、居左、垂直对齐。

标题覆盖了背景中女孩的脸，太多不同的背景细节使得文字难以阅读；图片与文字都变得更加清楚，构图也更好看了；

10. 主次不分

为了分清页面中信息的主次，封面上的字体应该大于或至少跟其他标题的字体大小一样，特别是标题很长的时候。

顶部标题比下文的标题字体还小，下方的标题反而更加突出了；顶部标题大于其他标题，页面显得和谐；

这个原则同样适用于逻辑块里的主次设计。主标题应该是最大的，然后才是次标题。次标题应明显小于主标题，并采用相同的字重，而次标题下面的内容应该采用相对最小的字体大小，这样有助于用户区分信息的重要性。

主标题很明显更重要，但却比次标题的字号还小；主标题足够突出，次标题尽管没有采用大字号，但也足够明显了；

11. 一个逻辑块被切成了2部分

文字后面采用了全屏图片或者滚动图片，看起来像两个相互独立的部分。如果在图片或者滚动图片周围添加一些空白，它们就会自然地变成一个整体，因为这时候能看到它们共同的背景色。

一个全屏的滚动图片看起来从上面的内容中脱离出来成为了一个独立的部分；滚动图片与顶部内容共用了背景，整个页面组织更加合理；

12. 标题过大、过长

超大字体对于短文本很合适，但当句子比较长的时候不妨换用小一点的字号，这样会更利于阅读，且不会占用太多其它元素的空间。

标题太大占据了整个封面，其他元素显得很拥挤；适当缩小标题大小后，页面看起来更舒服，标题与小文本都变得易于阅读；

13. 滥用按钮的边框样式

如果按钮是透明的，那么添加边框是很有必要的，否则就显得没什么道理，只会加重页面的负担且难以理解。

如图；

14. 采用了太多的颜色

一个页面采用过多的颜色显得很混乱，到底哪部分才是重要的？一到两个颜色对于区分主次已经足够了。

太多的颜色显得混乱；一种非文本颜色的使用让页面看起来活泼，且不会使用户分心；

15. 拥挤的导航栏

导航栏对于用户导航和内容查找很有帮助，但是不要过分地填充信息，这反而会让导航栏难用。导航栏上采用 5 - 7 个元素是比较合适的。

导航栏信息过多；

简单的导航栏就能帮用户找到想要的信息；