网页设计中常见的错误

网页设计中，要避免使用文本覆盖有意义的部分或图像的小细节，通过这种方式，您将使图像模糊不清并使文本难以辨认。下面介绍网页设计中常见的错误，希望可以帮到您。

1.这个色块太窄了

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

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

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

2.窄列内的文本太多

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

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

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

3.居中文字太多

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

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

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

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

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

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

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

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

5.滥用视觉层次结构

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

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

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

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

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

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

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

在过去十年中，网站的可用性一直是大家讨论的核心，这是因为它在给用户提供良好体验的过程中扮演着很重要的角色。网站的可用性越高，越有助于建立品牌形象的知名度，网站和公司的口碑也会越来越好。如今，很多站长依旧对网站的可用性给予高度关注，这是因为不少公司都在实践中证明了可用性策略的有效性。在过去几年中，不少创业公司都通过网站的可用性成功打了个翻身战。有时候，简单的想法反而是最具有创造力的，网站的可用性就证明了这一点。可用性就是指在维持某个产品或特征的高质量的同时让他们更易于使用。

如今，很多文章在讨论网站的可用性时都会将它归纳为常识。但其实经过这么长时间的讨论以后，不少网站设计者在理解可用性这个概念或实际操作中仍有困难。网站的可用性不可忽视，下面就是大家建站时常犯的一些有关可用性方面的错误，希望大家能够从中有所启发和收获。

链接未突出显示

我经常发现某些网页的链接没有以这样或那样的形式突出显示，这让我的浏览体验很不顺畅，这可能也是我见过的最愚蠢的错误了。相比那些链接和普通文字使用同一颜色的，我更加愿意访问链接设置成突出蓝色的网站。因为这样的网站更显友好，用户需要知道如何前往不同的页面或在哪儿能点击链接。你不能指望访客使用鼠标一行行浏览所有文字去寻找"隐藏的"链接，不是所有访客都有足够的时间和耐心的。我也完全能够理解，有时候出于设计考虑(如保持协调一致等)，链接不能使用某种颜色来突出显示，否则它们会显得太过突兀。但在这种情况下，我们可以添加文字样式或虚线框。不管使用什么样的形式，只要能够起到强调链接的作用就够了。

访问过的链接也应当以不同的方式来显示，以区别于默认的链接颜色。这样的设置可以让用户知道他们已经浏览过哪些页面，从而确定下一步前往哪个页面。有些网站可能页面、链接比较多，不少访客在访问时会感到困惑，这时将访问过和未访问的链接区别开来，绝对能够让他们对网站更有好感，提升网站的可用性。

排版糟糕

排版并不总是与突出的标题或美观的文本区块联系在一起的。 当我们谈到排版在网站的可用性上的作用时，我们更加注重排版如何使网站内容更易于阅读。通常，紧密排列的大段文字只会使访客感到非常头疼，不过这对设计师来说简直是小菜一碟。因为设计师只需简单的增加行高，分段，增加文字大小，改变字体，就能够使整段文字焕然一新了。在网页设计中，如何搭配字体的或如何使用颜色触动访客的心理情绪并没有那么重要(当然，如果你会更好)。我强调这一点是因为在过去的几年中，我们总是错误的让网站的美感凌驾于网站的功能性之上，网站的排版很糟糕，各种内容和信息也无法有效的展示出来。其实网站最重要的特性在于它的可用性，有时候它不需要那么好看，能够正常工作就好。

让我来进一步解释一下，目前网站设计中最新涌现出的两股设计思潮，极简主义和扁平化设计，都聚焦于网站内容的良好呈现，而不是更加绚丽的背景图。它们变得越来越流行的原因就在于他们非常简单,而且性能良好。有时候真的很难相信如此简单的一个网站就能获得这么巨大的成功。访客进入网站, 获取自己想要的信息，然后退出离开, 没有任何其他元素会使他们分心, 没有Flash, 没有减慢网站加载速度的Javascript, 没有绚丽的背景图, 仅仅是内容而已。现在, 你应该明白了让内容变得易于访问是多么的重要了吧! 因此在设计网站时不要在第一时间花费太多的精力去思考该如何让网站变得多漂亮，而是应该注重网站的可用性，而合理的网页排版在这方面发挥着很重要的作用。

不参照惯例

参照设计惯例和一些关于网站可用性的建议是非常重要的。毕竟，这些惯例都是经过实践检验的，那些可用性的建议都是精心提炼出来的。也许它们并不能完美适应你的网站，但至少其中的大部分内容可以保证一定的访客量，让你和其他网站站在同一条起跑线上。

举一个例子来说。有这么一个网站，在导航菜单栏上放置了一个选项用来退出。大部分网站的导航菜单都不会放置这样的按钮，这个网站的设计就违反了惯例，它也无法起到什么实质性的帮助。 不过近几年这种情况不多，但还是存在一些不该出现的低级错误，比如：导航链接失效，或者点击链接的时候弹出了对话框。记得遵循一定的设计惯例。

未回答核心内容

访客在浏览网页时都是目的性的：娱乐一下、查找信息、又或是其他目的。不管是什么，这总有一个目标的存在。而绝大多数情况下访客浏览网站就是为了获得一些信息，比如，他们去谷歌上搜索信息，去维基百科上学习知识又或是浏览公司网站了解某种产品。

而不少网站就出现了没有核心内容的情况。这种问题在我身上已经发生n次了. 我能理解一些网站不将价格明确展示出来，因为产品的变量太多了。可是如果一个发廊不告诉我理发需要多少钱, 一家洗车公司的网站上不告诉我洗车多少钱，那我浏览网站的意义何在，我始终在这些网站上没有获得自己想要的答案，这只会让我对那些网站的印象变得更差。

因此，站长要尽量了解自己的目标群体，了解访客可能想要在网站上浏览的内容。如果有人想去下载博客主题, 那就引导他们到下载区域, 如果他们是为了玩游戏而来, 那就尽量多放些游戏在上面, 如果他们是来了解产品价格或者你所能提供的服务的, 那就突出强调它们。记住，一个网站就是为访客而建的，它的终极目的就是满足访客的需求。

小块可点击区域

自从我买了台Mac后，我就再也没用鼠标了，因为对我来说再没有什么需要用到鼠标的地方了。我还记得五年前，那是还在使用PC，鼠标并不总是很精确，而且在悬停于小块区域的时候定位比较困难。 现在我再也没有这个问题了，和我一样，大约有数以亿计的用户都在使用触屏和移动设备。小块可点击区域有时候令人觉得不舒服。你或许想让字体显得小一点，因为你相信这样看起来很漂亮，但你要考虑到它对可用性的影响。可点击的区域越小，访客在点击时的困难就越大。而且随着网站越趋向移动化，布局需要适应更小的屏幕的背后意味着可点击区域应该在便携式设备上变得更大，好让它们容易被点击。同样的策略也适用于桌面环境。新的扁平化用户界面的风潮是这个理念的助力者。在PC端享受到又大又清晰的点击区域，访客也会觉得更加轻松。

缺少联系信息

有一件事比糟糕的用户服务更让人觉得恼怒，那就是无法联系到该公司或事务的负责人，这个问题很多情况下都是由于缺少联系信息造成的。正如我们之前讨论的，访客总是带着目的来浏览网页。如果他们的目的就是跟你取得联系，你的网站上却没有联系信息，这样一来网站对他们来说就毫无意义了。一个网站缺少联系信息没有任何借口，也许你会说不想将自己的手机号码公之于众，那么你可以留下自己的email地址。你也可以选择使用Twitter或者Facebook地址，这些方法都可以，只要能给客户提供一种可以联系到你的方式。

在网站设计过程中，交互设计是一种有目标的导向设计，交互设计中所有的细节都是仅仅围绕用户习惯而进行的。站长也会站在用户的角度，分析用户的行为，这样的交互设计对用户来说才更方便，效率也特别高，用户体验自然就会上升。下面我们就来讨论一下交互设计过程中，我们到底要注意哪几个方面。

第一、交互设计过程中容易发生的错误就是不进行对比。浏览一个网站的时候，我们都比较喜欢页面简洁的、比较清新的页面，同时会进行对比。如果用模板建站，较好也选择简约模板做网站设计。对页面进行对比的目的是什么呢?就是使得网站的内容在可读性方面比较高，并且可以指导用户轻松地完成网站的访问。不过有些网站在交互设计的时候却忽略了对比。

第二、导航的设计太奇怪。导航的设计不管是用什么类型的跳出框，都要站在用户的角度去考虑。导航的设计原则就是要清晰、简洁性、一致性以及相关性。注意不要设计得太另类，否则会影响网站整体的效果。

第三、非响应式的目标设计。响应式网站的设计在现代的网站制作中是非常重要的，尤其是在移动端上，没有必要创建一个在移动端上浏览的时候有难度的网站。如果不是做好了大量用户的测试，保证网站有良好的用户基础，就一定要做好非响应式用户的体验。

第四、设置太多动效。交互式设计中，有时使用动画可以提升网站的效果，增强网站的趣味。但是不要设置太多动效，让动效成为页面的负担，不要让用户在浏览网站的时候，有一种迷茫不适的感觉。

第五、网站的架构毫无条理。交互设计过程中，很多站长都会尝试创新的手法，想要自己的企业网站时与众不同的，可以在众多的网站中脱颖而出。如果将创新看成是为数不过的出路，那么交互式设计给网站带来的就是一场灾难。

第六、网站的排版不合理。用户在访问网站的时候，都想要直接方便地找到想要的内容。对那些混乱的，而且阅读起来非常难懂的，有阴影效果的字体都不敏感，甚至是反感。有些企业网站在设置背景的时候，采用移动的方式，或者是字体设置得太细。

交互式的网站设计常见的六大误区就是以上几个方面，站长们在设计网站的时候可以参考一下，避免出现这些不恰当的情况，让交互式设计出来的企业网站更加符合广大用户的需求。

一、颜色的选择不应过多

在颜色的选择时一定要注意，不要选择太多或者过于复杂的颜色，如果想让网站的颜色看起来不那么单一，也尽量选择同一色调的颜色，这对于网站来说非常重要。

同一色调的颜色能让网站开起来更有整体性，同时也可以很好的满足站长所期望出现的层次感，可以划分不同的内容又不失美观。比如，如果网站的主体色调为红色，那么就要保证网站中尽量不要出现大片绿色或者黄色的部分，如果作为装饰的话是可以的，但如果区域间的背景色跨度太大，这种强对比之间的颜色会对人的肉眼产生非常严重的刺激，十分影响阅读体验。

同时，如果选择了大量不同色系的颜色，也会让网站显得杂乱无章，同时也很难让网站的整体效果变得更好。我们一般建议同一网站中出现的背景色最多不要超过三种，三种颜色已经足够搭配出很好的效果。

二、在进行颜色填充时尽量注意层次性和保证舒适

虽说我们不建议大家在建设网站时使用过多的颜色，但这也不意味着整个网站都是一个颜色就是很好的选择。事实上，在颜色的设计中，体现出层次性才是更好的选择，如果没有颜色的变化，那么整个网站会给用户带来一种压抑的感觉，如深海恐惧症的患者就很难接受通篇都是深蓝色的网站，如果能在颜色的搭配中做到层层递进，就可以较好的解决这一问题。

同时，层次性是建立在网站颜色色调相关的基础之上，如果选择过于跳跃或者艳丽，这也很难给用户带来良好的使用体验。我们建议大家在建设网站进行颜色搭配时，用色调相近的颜色进行递进处理，这样也能够将一些重点内容体现出来，如头条、导航栏和站长希望用户注意的部分，就可以使用与主色调不同的颜色作为背景，这样也可以让用户使用网站时更加便捷，提升用户的使用体验。

三、选择合适的主体颜色

在主体颜色的选择上，也不能够放飞自我。最好的方式是根据网站的类型和所处的行业来选择网站的主体颜色，才能让网站看上去更加自然。例如一些企业的官网或是功能性较强的商务型网站，在选择主体颜色时应该尽量以冷色调为主，这样才能让人感觉不突兀。而如果是一些儿童网站、母婴网站或是针对二次元等的网站，则应该使用一些可爱的暖色调来作为主体颜色。