Common webpage design mistakes(翻译:网页设计的常见错误)

1.内容没有使用逻辑块分开

如果使用逻辑块区分开内容的话,这有利于用户去理解信息。设置padding 120px - 180px 分开内容,而且使用不同的背景色。

这里信息块之间的padding,设置得太小了,另外,这个设计需要彩色块来把内容分为逻辑集。因此,这个设计,信息会让用户 难以消化,内容之间还不是很清晰,应该需要一个块来区分。

如果padding设计得大点,而且使用颜色块来区分,这样可以使内容展示得十分清楚了,不同的块包含不同的内容。

2.一张页面中,item们的间隔并不一致。

item们之间的间隔,应该要一直,否则,你的页面看起来会显得十分凌乱,还有用户们也许不会用相同的注意力去放在每一个不同的item。

上下的空间不相同,而且会造成一种公司的信息有一些重要,有一些不重要,看起来重要程度是由标题上面的空间决定的,虽然每个块都同样重要。

上下相同均匀的空间,能帮助用户察觉到逻辑块的重要性是一样的。

3.Padding设置得太小了,用户很难去分析逻辑块中的内容

避免逻辑块集融合在一起, 请用大一点的空间去分开他们(至少120px)。

使用狭窄的padding,这样会引起逻辑块们融合了在一起,这样会使页面看起来加载了一堆内容,显得相当混乱。 这会让用户们相信这部分内容和其他内容是在一起的意思。

当使用足够的padding的时候,马上就清晰可见了。

4.应该避免内容的颜色和背景的颜色,对比不明显

背景和文本的对比色,要足够。
为了突出文本,弄一个对比滤波器在背景层上面。黑色是一种很好的颜色,但是你应该使用光一点的颜色,来与背景混合
和匹配起来。
另一个方法是直接使用一张对比度高的背景图。

背景图太亮了,这样会使用户阅读起来相对困难。

对比滤波器应用在了背景层上,使得文本易读。

6.颜色块太狭窄了

不要为了增加标题的重要性,而去使用狭窄的颜色块来包裹。这样看起来不好。例如,一个根据他们text内容设置size的标题
。你想不想利用一种独特的方式去标识重点内容?利用一个背景颜色来设置一整个块,包含关联的标题和文本。

标题使用背景色来标识,这样会使内容和标题分开,独立两个元素

标题和文本使用同一种背景色,这样会使他们是一体的。

7.过多的内容在一个狭窄的列表中

当有过多的内容在一个狭窄的列中,这样会引起阅读困难因为用户需要一行一行地去浏览。除此之外,这样看起来并不好。
这最好去把内容缩短,否则,没有用户会那么耐心地去看!

长,好几个列,这样子难以阅读。

内容较短,这样阅读起来就容易多了。

8.过多的居中文本

当内容比较少的时候,使用居中文本是很不错的,如果内容多的时候,这样会难以使用户确定文本方向。
如果你的内容比较多的时候,你可以把内容给折叠起来

内容多,且文本居中,这样并不利于阅读。

较短的内容使得页面看起来十分舒服。

9.文本把有意义的背景图的一块给盖住了

我们应该要去避免文本遮住了,带有有意义的背景图片。
这样,你将使图像模糊,使文本难以辨认。
尝试去把内容给移去适当的位置吧,例如向左布局,相对调整下背景的位置。

这些文本盖住了lady的脸了。

这样背景和文本就和谐相处了。

10.滥用可视化的层次结构

为了使信息内容层次制度,清晰地展示在页面,在最顶部的title的字体大小,应该大于其他位置的字体大小。
至少也要保证一样的大小,但不能子title比父title大,尤其是title比较长的时候。

最顶的title与下面的title不成比例,这样很困惑用户的是,是不是第二个title更加重要呢?

最顶title大于下面的title,这样才是一致的。

同样你可以把这个原理作用于一个视觉层次结构的逻辑块。头title应该是设计中最大的,下面的标题应该小点,
分目录就不应该那么突起。
这样可以帮助用户去分清最重要的信息,和较不重要的信息。

标题二比标题一,看起来标题二才是重点。

这样,标题一就变成重点了,就很可观了。

11.一个逻辑的块,被分成了两部分

如果文本是与这张图片相关的,一个宽屏的画展或者图片,会使文本与图片是独立的。
如果你为画展周围添加padding,这样文本和图片看起来就是一体的了,而且共享了相同颜色的背景图
(padding就可以展示出画展的背景了)。

full-screen,看起来就像独立的块

画展拥有于背景图相同的色彩。

12.title太大且长

一个非常大的字体适合一个短句,如果headline太长,就使用小一点的字体。这会易读,而且
会为其他元素,提供所节省出的空间。

13.按钮中的border使用了错误的风格

我们很有必要在button是透明的情况下使用Border。为button添加带有色彩的border,是毫无意义的。
这会造成另外一个没有多大意义的设计特征。反而使用页面负载过重的样子(就是塞进了没有必要的东西)。

14.使用了过多的颜色

使用过多的色彩,是会令人审美疲劳的,而且这样会造成那些内容才是更重要的困惑。
1到2种的色彩,就足够去视觉突出那些真正重要的内容。

15.菜单负载过多

人们看网页,是为了去寻找能解决他问题的工具,帮助他们!使用菜单来帮助用户来导航,快速找出他们所需要的。
不要在菜单栏上过多地假如工具,5-7个足矣。

文章目录
  1. 1. 1.内容没有使用逻辑块分开
  2. 2. 2.一张页面中,item们的间隔并不一致。
  3. 3. 3.Padding设置得太小了,用户很难去分析逻辑块中的内容
  4. 4. 4.应该避免内容的颜色和背景的颜色,对比不明显
  5. 5. 6.颜色块太狭窄了
  6. 6. 7.过多的内容在一个狭窄的列表中
  7. 7. 8.过多的居中文本
  8. 8. 9.文本把有意义的背景图的一块给盖住了
  9. 9. 10.滥用可视化的层次结构
  10. 10. 11.一个逻辑的块,被分成了两部分
  11. 11. 12.title太大且长
  12. 12. 13.按钮中的border使用了错误的风格
  13. 13. 14.使用了过多的颜色
  14. 14. 15.菜单负载过多
|