页面元素的对齐:阅读线路不清晰

2016-02-20 00:32 5 1 收藏

今天图老师小编要跟大家分享页面元素的对齐:阅读线路不清晰,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

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

1

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

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

2

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

3

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

4

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

来源:http://www.tulaoshi.com/n/20160220/1632060.html

延伸阅读
标签: Web开发
总结一下css让页面居中对齐的方法 1.我们常用的margin:0 auto;方法 这个方法是大家用的最多的方法,使用的时候必须为容器制定宽度! 例子:#main {width:960px;margin:0 auto;}这个在大部分浏览器里面都可以很好的实现效果。 但是在IE6之前的版本中却不被支持,下面看一下第二种方法 2. 用text-align实现居中,这个方法其实算是一个hack...
标签: Web开发
基本的页面设计元素布局比例,给大家做个参考 标志图案 : 搜索功能 : 导航模式 : 帮助内容 :
微信发照片模糊不清晰的解决办法   微信是我们现在很常用的手机通讯软件了,但是又些朋友发现微信发出去的照片不清晰,有时候图片都是模糊的。但是找遍了设置也没发现设置的地方,这个该如何解决呢? 小编说两句,其实你没有找到微信隐藏的功能。话说微信隐藏的功能是在太多太深了,好多实用的功能用户都不好找到。 1、发...
标签: windows系统
win8.1系统下字体显示不清晰的解决方法   现在大家对于电脑的配置都有所了解,选配电脑的时候主要看哪几个关键的配件,都是了如指掌的,所以现在不管是台式机还是笔记本,配置都还是可以的,不会存在电脑字体看不清的问题。但是现在有用户反馈说自己的电脑自从装上win8.1系统之后,电脑的字体不清晰了,这和显卡还有显示的质量是没有...
博思得C168打印不清晰的可能因素! 博思得C168小型条码打印机已经在市场获得广泛的应用,我们在打印过程中,经常会碰到这样那样的问题,本文针对打印条码不清晰的原因进行简单分析,一般来说,碳带与标签是否匹配、碳带是否安装正确、打印头是否完好、打印温度是否正常、已经其它因素都有可能引起打印质量问题,现深圳市互信恒科技工程师...

经验教程

490

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部