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

楠楠11050528

楠楠11050528

2016-02-17 04:12

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

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

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

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

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

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

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

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

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

看看Yahoo的首页:

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

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页布局中的元素对齐与信息展示

CSS Div网页布局中的结构与表现

Web开发
CSS Div网页布局中的结构与表现

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

CSS网页布局中ID与class的理解

Web开发
CSS网页布局中ID与class的理解

网站构成的基本元素—网页布局

Web开发
网站构成的基本元素—网页布局

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

CSS+Div网页布局中的结构与表现

Web开发
CSS+Div网页布局中的结构与表现

Photoshop绘制展示软件产品的绿色网页布局

PS PS基础
Photoshop绘制展示软件产品的绿色网页布局

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

用户体验中图解用户研究流程

用户体验中图解用户研究流程

使用美图秀秀给给凤姐美美容

使用美图秀秀给给凤姐美美容
下拉加载更多内容 ↓