如何让你的网页看起来更美观

英文原文链接:Common webpage design mistakes

现在基本都离不开做网页,但是不同网页给人的感觉完全不一样,如何让你的网页看起来更加清爽,怎样让用户更愿意停留在你的网页中,就需要很好的设计了,偶然发现一篇《网页设计中常见的错误》,将其中的内容作了简单的整理。

把内容分解成逻辑块

把信息分组到逻辑块中,用户会更容易消化他们,设置内边距为 120px~180px ,并且使用彩色背景分割文本。

字体合适,并且块之间用颜色分开,使得每一部分内容都很清楚。

1569416092787.png

1569416099806.png

各部分内容间隔均匀

围绕逻辑块设置相同大小的间隔,这样可以避免页面混乱的情况,让用户给给予每个部分同等的考虑。

不同宽度的空间看起来不均匀,让人感觉到下面的内容是和上面的内容是从属关系,但实际上它们是同等重要的并列关系。

1569416113978.png

1569416125520.png

足够的内边距

太小的内边距会让用户无法梳理内容的逻辑,为了避免逻辑块的混乱,应该使用一个大的空间将它们分开。

过于狭窄的内容填充让页面显得混乱,容易让用户认为这是一个纯文本,而不是具有不同含义的逻辑块,使用足够的大的空间填充,就可以立即看到这两个块之间的差异。

1569416135927.png

1569416145729.png

增大背景与文字的对比度

有时候会使用图片作为文字内容的背景,为了突出文字内容,可以在图片上放一个遮罩层,然后再放上文字,推荐使用黑色遮罩层。当然,你也可以一开始就使用对比度比较高的图片作为背景。

背景图片亮度太高,阅读图片上的文字时就显得困难,加上一个黑色遮罩层,会让阅读变得轻松。

1569416157769.png

1569416167190.png

避免在同一页面有太多样式

在同一页面上使用过多的样式风格会显得不专业,同时也让阅读体验大打折扣,可以把你的字体限制在一种,字体的饱和度选项限制在两种,比如正常和黑体。

过多的样式让页面的重点不清晰,而经过修改后的页面看起来更加干净整洁。

1569416179111.png

1569416191396.png

避免强调窄页元素

使用颜色来强调窄页元素只是看起来不太好,例如标题本身的字体大小、字体样式已经给了它们很好的标记,如果想强调页面上某个特定的点,可以给整个区块使用颜色背景。

图中有颜色背景的标题打破了页面的连续性,看起来标题更像是独立的元素,把标题和文本都使用同一个颜色块作为背景,表示它们属于同一个逻辑块。

1569416203228.png

1569416214285.png

在狭窄的列中放太多的文本

当在一个狭窄的列中放置太多的文本时,用户必须从一行跳到下一行,而且很难看;最好是减少行数和缩短文本长度,否则没人愿意读它。

1569416224540.png

1569416234160.png

居中的文字不要太多

当页面上的文本很少时,将文本内容居中是个不错的选择,用户很容易就能注意到它,同时文字大小从 24px 开始,如果文本比较多时,使用可折叠的文本块比较好。

1569416243846.png

1569416252635.png

文字遮挡图像有意义的部分

避免使用文字遮挡图像中有意义的部分或小细节,这样你既能使图像变得模糊,又能使文本难以辨认。

1569416263434.png

1569416274340.png

避免滥用视觉层次结构

为了使信息层次结构清晰可见,封面上的标题应该比其他标题大,至少不能比其他标题小,尤其是标题很长的时候。

上面的大标题比下面的小标题还要小,看起来会很奇怪,也会让用户很困惑,清晰的层次结构能让用户区分重要和不重要的信息。

1569416283994.png

1569416293388.png

避免把同一个逻辑块一分为二

把一个全屏的图像放在文本之后,会类似于一个独立的模块,可以在图片周围添加填充,由于共享背景,文本和图像看起来才是一个逻辑整体。

1569416302928.png

1569416311721.png

别让标题又大又长

非常大的句子适合短句子,如果是很长的标题,使用较小的字体,这样会更加容易阅读,并且为页面上其他空间留下足够的空间。

一个太大的标题占据整个封面,会与其它元素争夺空间,选择更小的标题能让页面元素相互平衡,易于阅读。

1569416325028.png

1569416338562.png

错误的使用按钮边框样式

当按钮的样式是透明时,边框是必要的,而为有颜色的按钮添加样式就显得没有任何意义了,这会让页面显得超负荷了,不利于阅读。

1569416349188.png

使用过多的颜色

在页面上使用过多的颜色会让用户感到困惑,无法弄清楚哪个部分更重要,一到两种颜色就足以突出真正重要的东西。

1569416357517.png

1569416365198.png

过载的菜单栏

用户在访问网站寻找解决他们问题的办法时,菜单栏可以快速方便的让用户定位他们想要的内容,不要在菜单栏放置过多的信息,有 5-7 个菜单项就足够了。

1569416374750.png

1569416383396.png

前端设计翻译

我来吐槽

*

*