「进阶」网页设计常见的31个错误

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

这些天爬网站的时候发现了一个好文，觉得可以分享给一些对网页设计还有疑惑的同学，Nikita Obukhov分析了人们在创建网站时常犯的错误。常见的设计错误要避免,下面列出了适用于web设计31个注意事项。Nikita Obukhov本人也有不少的文章很值得去看。

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

如果将信息分组到网站解结构中，用户就更容易消化它们。设置内边距为120 px-180 px，使用彩色背景分隔文本块。

NO: 在相关信息集之间几乎没有填充，而且这种设计需要颜色块来将内容划分为内容结构。结果，这些信息难以消化，也不清楚每个块应该包含哪些文本

YES: 字迹足够大，块之间用颜色隔开，这使一件事立即清楚—这些块包含不同类型的内容

2.网页内容之间不均匀的间隔

相同大小的空间应该围绕内容结构设置。否则，您的页面看起来会很乱，用户可能不会对每个部分给予同等的考虑。

NO: 不同宽度的空间看起来不均匀，给人一种公司信息链接到标题的印象，尽管每个块都同样重要

YES: 标题周围的相同大小的空格和正文复制有助于将逻辑块理解为包含同等重要的信息

3.填充太小意味着用户不能将内容分解成内容结构

为了避免结构部件混合，将它们分开，并在它们之间插入一个大空间(至少120 px)。

NO: 使用狭窄的填充，组成站点的块相互粘连。这会使页面超载，并且相当混乱——网站访问者会认为这是一个纯文本，而不是具有不同含义的部分

YES: 填充足够大，因此可以立即看到这两个块之间的差异

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

文本和背景之间应该有足够的对比。为了突出复制，在图像上放置一个对比度较高的滤镜。黑色是一种很流行的颜色，但你也可以用明亮的颜色混合搭配。

另一种选择是从一开始就使用对比度高的图像，并将副本放在照片的暗部。

NO: 此图像太亮，这使得阅读文本的难度太大

YES: 应用于照片的滤镜易于阅读

5.一页上的样式太多

一个页面上太多的字体和设计样式会让它看起来不专业，难以阅读。为了避免这种情况，您可以限制自己使用单一字体和两个饱和度选项，例如普通和粗体。

NO: 由于人们使用了太多的字体样式，所以不清楚重点在哪里

YES: 一种字体，一种颜色和两种饱和度。这页上的字体看起来很整齐清晰

6.这个色块太窄了

避免强调带有颜色的窄页元素。只是看起来不太好。例如，由于标题的大小、类型饱和度和填充，它们已经有了很好的标记。你想突出显示页面上的某个特定点吗?为整个区块使用颜色背景，包括相关的标题和文本拷贝。

NO: 颜色背景上的标题打破了页面的连续性，看起来像是独立的独立元素

YES: 标题和相关文本都具有相同的背景。它表明它们属于同一个内容结构

7.窄列内的文本太多

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

NO: 很长的，大量文本的专栏很难读

YES: 这些列中几乎没有文本，所以阅读起来很容易

8.居中文字太多

当页面上的文本很少时，对文本的居中效果很好，否则用户很难有效地导航它。同时，增加字体大小从24像素开始。

如果需要包含大量的文本，使用具有可折叠文本的设计

NO: 长而居中的文本不易阅读

YES: 标题下的短文本（两者都居中）在页面上看起来很好

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

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

NO: 这个标题挡住了这位女士的脸。有这么多的小细节，很难读懂文本

YES: 图像和文本的复制很容易阅读，形成良好的构图

10.滥用视觉层次结构

为了使信息层次结构在页面上清晰可见，封面上的标题应该比其他标题大，或者至少大小相同，特别是如果标题很长。 

NO: 标题上的标题比下面的标题小得不成比例，这是令人困惑的。为什么?它使第二个标题显得更加突出

YES: 标题上的标题比下一个块中的大，所以整个页面看起来是一致的

同样的原则也适用于内容结构中的可视层次结构。标题应该是页面上最大的设计元素，其次是较小的、不太突出的副标题。接下来，后面的特性标题应该明显小于标题，并且具有相同的权重。最小的字体应该用于特性描述。

这将有助于网站访问者区分最重要和最不重要的信息。

NO: 标题比功能标题小，似乎是次要的，虽然在这种情况下更重要

YES: 标题是页面上最突出的元素，尽管功能标题的字体更小，但它们仍然清晰可见

11.一个内容结构被一分为二

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

NO: 一个全屏图像看起来与上面的标题脱节，看起来像一个独立的内容

YES: 图像的背景与它上面的标题相同，这使得整个构图看起来很牢固

12.标题太大而且很长

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

NO: 一个太大的标题占据了整个封面，和其他设计元素争夺空间，标题难以阅读

YES: 这个页面的组成很好，所有的设计元素都是相互平衡的，并且很容易阅读

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

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

14.使用太多颜色

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

NO: 页面上有太多鲜艳的颜色; 这令人困惑

YES: 一种颜色的重复统一创造了多样性，不会分散页面内容的注意力

15.超载的导航菜单

人人们访问网站寻找解决他们问题的方法。帮助他们!使用菜单帮助人们浏览网站和找到他们需要的快速和容易。不要给他们提供过多的信息。有5-7个菜单项就足够了。

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

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

16.长而坚固的副本

大量的文字使阅读变得难以理解。为了便于导航，可以将其拆分为段落或引入中断，例如关键短语或图像。

NO: 一堵墙的文字很难看

YES: 拉引号或图像等元素使阅读文本更容易

17.标题位于前面和后面段落之间的相同距离

标题不应该以类似的距离“挂”在章节之间，因为它属于后面的段落。标题上方的距离应该是标题下方距离的2-3倍。与此同时，标题下的距离应该与段落之间的距离大致相同，或者稍微大一点。这样，标题将直观地引用后面的文本。

NO: 标题在上面和下面的段落之间的位置是相等的，不清楚它属于哪个段落

YES: 由于标题下使用了填充，很明显标题属于后面的文本

18.没有逻辑顺序

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

NO: 标题和子标题的大小大致相同，它们之间没有明确的层次结构

YES: 从逻辑上讲，标题比副标题更重要

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

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

NO: 如果标题和作者图像之间的空间太窄，那么作者似乎更多地与标题有关，而不是后面的文本

YES: 由于图像上下填充的大小相同，块看起来是相等的

20.标题位置太靠近图像

一方面，插图和说明组成一个整体，但这是两个独立的元素，标题不应该干扰图像。

NO: 图片上的标题与图片上的内容相吻合，我们很难正确地区分它们

YES: 在图像和标题之间有很多空白，但是很明显，标题与图像是一致的

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

子标题和后面的文本应该放在一起，但是如果文章中段落之间的空间大于子标题和下一段之间的空间，那么文章看起来就脱节了。

NO: 标题和段落之间的间距要比段落之间的间距小

YES: 标题后面的空格比段落之间的空格稍大

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

用作强调表达的元素，如关键短语或引号，是独立的对象。为了让它们真正脱颖而出，将它们设置在主拷贝的75- 120px位置。

NO: 主要文本和突出元素之间的距离太小

YES: 由于大填充，突出元素真正脱颖而出

23.低对比度元素

如果你想强调某个短语，用粗体，把关键短语比正文大10-15像素。让关键短语真正从文本中脱颖而出。

NO: 一个关键短语与剩下的部分融合在一起。看起来很乱，所以尽量避免这种情况

YES: 现在每个人都可以看到它，这要归功于大字体和文本周围足够的填充

24.窄文本块的彩色背景

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

NO: 子标题不要用背景颜色。使用更大的字体和填充应该足以使它在页面上弹出

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

在序列中使用多个全屏图像时，避免在它们之间留下空格。边界仍然是可见的，不需要添加额外的元素。它不会增加任何东西。

NO: 全屏图片之间的空白没有任何意义，也不好看

YES: 在这个例子中，图像之间存在和谐的流动

26.使用了太多的设计重音（字重）

设计重音(比如这里的黑体)在很少的情况下工作得很好。如果输入太多，就会妨碍阅读页面。

NO: 许多单词都用粗体字标注，所以文本看起来不完整

YES: 有几个标记的词会吸引注意力，不会干扰文章的其他部分

27.排版样式太多

设计不应干扰可读性。排版样式越少，重要的元素就越明显。强调标题和副标题就足够了，关键短语的对比也足够了。

NO: 这个文本有太多的排版。他们分散了读者的注意力

YES: 字体样式很少，重点很明显，文本层次结构也很明显

28.一篇长文的中心文本

居中通常应用于标题，以区别于其他文本。居中的长课文很难读。

NO: 中间的文字看起来很乱，而且很难阅读

YES: 左侧对齐的文字很容易阅读

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

标题是一个独立的设计元素。它不应该离下面的图像太近。对于一个成功的组合，设置内边距不少于60像素，并添加一个副标题——它将展开页面的内容，并在需要的地方放置正确的强调。

NO: 标题太靠近图像，此页面上没有喘息空间

YES: 这里标题通过子标题与图像分开，并且它与整个部分有关，而不仅仅是图像

30.在不需要时使用斜体

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

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

NO: 由于这个短语的字体大小和填充，所以在这里不需要斜体

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

31.结构相对于页面中心和彼此显得不合适

如果您在编辑页面(更改字体大小、对齐方式或缩进)并查看页面上的内容之后稍微休息一下，您就可以很容易地发现这个错误。

NO: 在本例中，标题向左移动，文本副本向右移动

YES: 所有文本元素都相互协调

这个翻译肯定还是有不少问题的，敬请谅解

—

有小伙伴私信我说上班都是QQ比较多

所以我建了个QQ设计交流群，欢迎来撩

—

—

好好学习  ·  天天向上

—

【版权声明】

凡未标注版权，其内容归原作者所有，如有侵权请您联系指正

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。