常见的网页设计错误(下)

本文为翻译的原文 原文地址http://blog-en.tilda.cc/articles-website-design-mistakes


文章设计中的错误

1.长而坚固的副本

文本墙使阅读难以理解。为了便于导航,将其拆分为段落或引入诸如关键短语或图像之类的中断。
1-1
1-2
图1-1,文字墙很难看。
图1-2,拉引号或图像等元素使阅读文本更容易。

2.标题位于前一段和下一段之间相同的距离

标题不应该在类似距离的章节之间“挂起”,因为它属于下面的段落。标题上方的距离应比其下方的空间大2-3倍。同时,标题下的距离应与段落之间的距离大致相同,或稍大一些。这样,标题将在视觉上引用后续文本。
2-1
2-2
图2-1,标题位于其上方和下方的段落之间的相等距离​​处,并且不清楚它属于哪个段落。
图2-2,由于在标题下使用了填充,很明显标题属于下面的文本。

3.没有逻辑顺序

在排版中,对比用于在视觉上划分不同级别的文本并建立严格的层次结构。主标题应该是页面上最突出的,副标题应该相当小但仍然清晰可见。
3-1
3-2
图3-1,标题和子标题大小大致相同,它们之间没有明确的层次结构。
图3-2,从逻辑上讲,标题比子标题更重要。

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

如果块具有相同的重量,则它们应具有相同的外观和感觉并且彼此之间的距离相等。
4-14-2
图4-1,如果标题和作者图像之间的空间太窄,看起来好像作者更多地关注标题而不是后面的文本。
图4-2,由于图像上方和下方的相同尺寸填充,块看起来相同。

5.标题位置太靠近图像

一方面,插图及其标题形成一个整体,但这些是两个独立的元素,并且标题不应干扰图像。
5-15-2
图5-1,标题贴在图像上,我们无法正确地与其中任何一个进行交互。
图5-2,图像与其标题之间有很多空白区域,但很明显标题与图像一致。

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

后面的小标题和文本副本属于一起,但如果文章中段落之间的空格大于子标题和下一段之间的空格,则该文章看起来脱节。
6-16-2
图6-1,标题和段落之间的空间小于段落之间的空间。
图6-2,标题后的空格略大于段落之间的空格。

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

用作重点表达的元素(如关键短语或引号)是独立的对象。要让它们真正脱颖而出,请将它们设置为75-120像素的主体副本。
7-17-2
图7-1,主要文本和突出元素之间的空间太小。
图7-2,由于大填充,拉引号真正脱颖而出。

8.低对比度元素

如果您想强调某个短语,请加粗,使一个关键短语大于主文本10-15 px。让关键短语从文本的其余部分中脱颖而出。
8-18-2
图8-1,关键短语与副本的其余部分混合在一起。它看起来很乱,所以尽量避免这种情况。
图8-2,现在每个人都可以看到它,这要归功于大字体和文本周围足够的填充。

9.窄文本块的彩色背景

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

不要使用颜色作为子标题。使用更大的字体和填充应足以使其在页面上弹出
9-3

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

在序列中使用多个全屏图像时,请避免在它们之间留出空格。边框仍然可见,并且无需添加其他元素。它只是没有添加任何东西。
10-110-2
图10-1,全屏图像之间的空白空间毫无意义,看起来不太好。
图10-2,在这个例子中,图像之间存在和谐的流动。

11.使用了太多的设计口音

设计重音(例如这里的粗体)很少有效。放入太多,这将妨碍阅读页面。
11-1
许多单词以粗体标记,因此文本副本显示为已损坏
11-2
一些标记的词语引起了对自己的注意,并且不会干扰文本的其余部分

12.排版样式太多

设计不应干扰可读性。排版样式越少,重要的元素就越明显。它足以强调标题和小标题,并使用对比关键短语。
12-112-2
图12-1,这个文本有太多的排版设备。他们分散了读者的注意力。
图12-2,很少排版样式,重点很明确,并且观察文本层次。

13.在长篇文章中集中文本

中心通常应用于标题和块引号,以区别于文本的其余部分。中心长文本难以阅读。
13-113-2
图13-1,中心文本看起来很乱,而且很难阅读。
图13-2,左侧对齐的文字很容易在眼睛上。

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

标题是个人设计元素。它不应该太靠近随后的图像。对于获胜组合,设置不小于60像素的填充,并添加一个子标题 - 它将展开页面的内容并将正确的重点放在您需要的位置。
14-114-2
图14-1,标题太靠近图像,此页面上没有喘息空间。
图14-2,这里标题通过子标题与图像分开,并且它与整个部分有关,而不仅仅是图像。

15.在不需要时使用斜体

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

不要用斜体写出所有内容(正文,标题)。如果在文本副本中使用sans-serif字体,则完全避免使用斜体。
15-1
由于字体大小和填充,这个短语已经突出,所以这里并不真正需要斜体。

15-2
斜体在正确的位置,增加了适当的重点。

16.块相对于页面中心和彼此显得不合适

如果您在编辑页面后稍微休息一下(更改字体大小,对齐或缩进)并查看其中的内容,您可以轻松地自己发现此错误。
16-116-2
图16-1,在此示例中,标题向左移动,文本复制到右侧。
图16-2,所有文本元素都相互协调。

本文标题:常见的网页设计错误(下)

文章作者:pinbolei

发布时间:2019年01月02日 - 16:08

原始链接:https://pinbolei.cn/常见的网页设计错误(下)/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!
0%