网页设计是一件相当复杂的事情。几乎没有明确的规则,每个人都喜欢对“好的设计”做出不同的判断。因此,在进行有效的网页设计的过程中存在一些陷阱。本文介绍了12个常见的设计缺陷。“流行的设计缺陷”-听起来很矛盾。当然,就它们被频繁制造的意义而言,它们只是“受欢迎的”。当然,最好不要犯这些错误。在本文中,我展示了12个Web设计要点-在我看来,这些设计要点经常被不利地实现。不利之处在于,这会使网站的可用性恶化,并减少经常引用的用户体验。

错误一:首页主题不明确

首页是网站上最重要的页面。如果访问者由于SEO的原因而不经常出现在子页面上,则默认情况下会从首页-主页开始访问网站。主页的问题在于,它应该以某种方式捆绑子页面必须显示的所有内容。可以这么说,是整个网站的“最佳”。访问者获得的不是一种“最好的”,而是一种目录。根据座右铭:“我们提供A,B和C。你得到X,Y和Z。我们有1.,2和3。”

这很容易引起人们的注意,并且通常集中在使用滑块上。在首页内容区域的顶部并不罕见。滑块的优点:你不必将自己局限于清楚的陈述,有意义的标题和合适的图片。不可以,滑块可以使用任意数量的文本,图像,按钮。好的,这将假定的优势变成了一个问题:不是简单,简洁地告诉访问者在这里的位置以及期望的内容,而是按数量减少声明。研究表明,没有访客停留在滑块前,并逐渐观察它,直到每个人都经过为止。

建议:

将起始页计划为网站的最后一页。然后,当所有其他页面(至少大部分情况下)完成时。然后设定明确的优先级。网站上等待访客的是什么。这是主要的报价,服务,产品。访客的意图是什么?关键信息,即公司(或产品或任何产品的意思)的含义可以简单地总结,然后拆分内容。并非所有内容(即子页面)都需要在首页上显示。

错误二:导航分类不明确

经典的是诸如“关于我们”,“服务”,“产品”和“联系”之类的导航点。到目前为止,这听起来是可以理解的。但是并不总是不言自明,也不是直观清晰。

建议:

从访问者的角度考虑导航。例如,PayPal 将主要导航区域划分为“私人客户”,“企业客户”和“合作伙伴和开发人员”区域-换句话说,划分为不同的目标组,并适当地命名了要点。导航时,不仅要使用反射标准术语和页面,还要仔细考虑单词的选择和页面结构(信息体系结构)(不止一次)。

错误三:难以辨认的字体

字体的选择范围很广的,由于不同的网络字体提供者,你可以花费数小时来寻找合适的字体。广泛的选择并不一定会带来更好的结果。类似于几十年来在印刷领域的情况,字体在网络上一次又一次地被使用,它们看起来以某种方式是“特殊的”。但是它们不容易阅读。

建议:

对于排版,可读性要先于美学。字体可能是如此“美丽”,并且个人和客户经理都非常喜欢它。如果看不清,则它在网站上没有位置。请注意:有些字体在大字体时仍然清晰可见,但在小字体(例如连续文本)中不再可用。

可读性很差的字体

错误四:段落太长导致可读性下降

此错误可能是“最受欢迎”。我几乎在其他所有页面上都找到它。文本(通常是小文本)覆盖整个内容。这本身并不是一件坏事,是的,如果内容宽度没有那么宽…… 那将很快超过1,000像素宽。字体大小在14到18像素之间时,一个段落将会很长。

建议:

推荐的行长建议约为70到90个字符。通常建议减少。但这始终取决于您选择的字体和大小。但是,此值是一个很好的指导。

错误五:图像和文字对比度地

图片必须尽可能大。但是,当然这也“浪费”了很多空间。因此,在图片上放置一个漂亮的标题。数十年来在广告中获得回报的一项原则(图片+标题)。仅当图像主题非常不安宁或明暗之间存在明显差异时,这才成为问题,然后文本(至少在某些地方)变得难以阅读。

建议:

如果要在图像上显示文字,则最好避免使用高对比度的图案。好的,当然这并不总是可能的。如果图片中没有可放置文本的地方(响应时间有时可能会更快地改变位置),那么通常只有条形才有用。用彩色条存储文本,该文本立即清晰可见(如果对比度足够高,请参见下一点)。

错误六:背景色和文字对比度过低

文本颜色和背景颜色之间存在明暗对比。如果没有,则两种颜色将相同,并且任何内容都不可读。这种明暗对比应该足够大,以使文本易于阅读,因为它与背景足够突出。白色背景上的黑色文本是明暗之间的最大对比。但是,以这种形式也不愿使用它,因为此处的对比度非常高(太高)。通常使用太少的对比度。这里的经典文字是白色背景上的灰色文字-经常很难阅读。

文字和背景色对比度过低导致阅读困难

建议:

与此处提出的所有“错误”一样:应用常识!出于美观原因,请勿选择太浅的灰色文本颜色。尽管这在整体布局中似乎非常吸引人,但可读性至关重要。 在线工具“ 颜色对比度检查器”可以帮助评估颜色组合。在这种情况下,可访问性之后。并且,如果此处存在组合,则易于阅读并且可以立即使用。

错误七:字体太小

尽管趋势是文本越来越大,但这种发展尚未普及到所有人。文字清晰度差的最常见原因之一是字体大小太小。字体太小会导致难以阅读,从而使可读性降低。

建议:

以前是12个像素,以前是14个像素,现在是16个像素-字体大小的最低限制。再次取决于字体和文本颜色,但连续文本不应低于此限制。或有充分的理由。

错误八:将文章内容或其他内容居中对齐

典型的Web文本是左对齐的,这有充分的理由:左对齐有较高的易读性!网页上的右对齐,居中对齐和对齐(即左对齐和右对齐)不太容易阅读。居中文本(如灰色文本颜色)可能看起来很时尚。但这不是用户友好的并且易于阅读。

建议:

仅在少量文本时使用居中文本。行情,诗歌等适用于此,但不适合“常规”正文。不要在页面内大量使文字居中对齐,这样会大幅度的增加跳出率。

错误九:行距过小

行距过小是排版中常见的一种错误。在各种图形程序中,行距设置为字体大小的120%。在网络上,这绝对是不够的。因此,请适当增加行距。

错误十:将文章内容文本背景设置为深色

除了中等的灰色阴影之外,几乎没有其他不适合的颜色(清晰,例外情况可以确认规则)。灰色本身是一种流行的颜色,并且也可以与明亮的颜色形成对比。深灰色适合作为例如文本颜色。灰色非常浅的阴影作为背景色。中等的灰色阴影有点困难。不管上面是浅色还是深色文本,明暗对比度始终很低。中度阴影总是看起来有点像“灰老鼠” ...

为文本内容设置灰色背景

建议:

灰色作为一种颜色几乎适用于每个网站。但是,请勿将黑色、灰色等暗色调当做文字背景,否则页面阅读起来非常压抑。