网页布局中的元素对齐与信息展示

2016-02-17 04:12 12 1 收藏

下面,图老师小编带您去了解一下网页布局中的元素对齐与信息展示,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - 平面设计 】

网页布局的对齐的根本目的是为了更好展示信息架构,也就是网站中的信息。因此只要能更好展示信息,并不需要刻意追求绝对对齐。

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

网页布局中的元素对齐与信息展示,PS教程,图老师教程网

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

像这种过度追求对齐而影响了信息架构的情况,在我们工作中不算少见,我个人不太赞同这种做法。

我比较倾向于适当打破一点对齐关系,但可以使阅读线路更清晰的做法,如下图。

网页布局中的元素对齐与信息展示,PS教程,图老师教程网

看看Yahoo的首页:

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

网页布局中的元素对齐与信息展示,PS教程,图老师教程网

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

网页布局中的元素对齐与信息展示,PS教程,图老师教程网

网页布局中的元素对齐与信息展示,PS教程,图老师教程网

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

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

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

来源:http://www.tulaoshi.com/n/20160217/1578382.html

延伸阅读
标签: Web开发
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,webjx.com也成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的...
标签: Web开发
关于CSS网页布局,随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网...
简介 如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊? 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的哇哦 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢。 这种布局适合于小数...
标签: PS PS基础
最后预览 这里是作品预览图. 点击此处预览全图. 新建PSD文件 1 开始创建文档(Ctrl+N); 高和宽均为1200 像素. 使背景图层可编辑 2 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑, 在图层面板双击背景图层 (如果图层面板未激活,按下F7触发). 另外一种方法, 你可以在背景层上击右键,选择 背景图层. 一旦...
基本的页面设计元素布局比例,给大家做个参考 标志图案 : 位置 统计结果 左上角 84% 右上角 6% 上方居中 6% 其他位置 4%   搜索功能 : 位置 统计结果 右上角 35% 左上角 ...

经验教程

470

收藏

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