IT技术博客大学习 共学习 共进步

页面上元素对齐的问题

老邓态度 2010-02-25 09:27:37 累计浏览 2,005 次

    页面上各个元素的对齐,能使页面显得更加规整。以下图为例,能对齐的元素都对齐了,看起来很规整。

    1

    但这也导致了一个问题:阅读线路不清晰――究竟是“Z”型线,还是“N”型线?

像这种过度追求对齐而影响了信息架构的情况,在我们工作中不算少见,我个人不太赞同这种做法。
我比较倾向于适当打破一点对齐关系,但可以使阅读线路更清晰的做法,如下图。

    2

看看Yahoo的首页:
yahoo1
当然,也可以通过设计的处理,比如调整颜色,或者增加中间的间距,来解决这个问题,比如下图。

    3

    4

    但这些处理方式都不如打破对齐来得直接、简洁。

    毕竟,视觉设计是为信息架构服务的,而不能反过来。

建议继续学习

  1. 小tips: 使用等空格实现最小成本中文对齐 (累计阅读 4,463)
  2. 用TAB缩进, 用SPACE对齐 (累计阅读 4,145)
  3. 为什么我要垂直对齐代码(你也要如此!) (累计阅读 2,043)
  4. 小tip:中文或英文左右padding一致两端对齐实现 (累计阅读 1,805)