对齐

对齐的根本目的是使页面统一而有条理。任何元素都不能在页面上随意安放,每一项都应当与页面上的某个内容存在某种视觉联系。

其效果类似于把客厅里四处散落的洋娃娃捡起来,并把它们放在一个玩具箱中。

文字对齐

页面中的字段或段落,应该有一个统一的视觉起点。

例如文章中的标题和段落应该左对齐。

亲密性

正确示例

标题与内容部分左对齐,段落首行不缩进
亲密性

错误示例

段落首行缩进,会打断视觉流

图片与文字对齐

页面经常出现图片与文字搭配排版,我们要在脑海里形成一条隐形的对齐线,并用它来对齐。

亲密性

正确示例

竖直方向图片和某一边对齐
水平方向图片与基线对齐
亲密性

错误示例

图片在列内居中,使页面中出现多个对齐线,居中对齐本身问题不大,但是未对齐部分加起来会使页面外观杂乱

亲密性

正确示例

如果照片或图片有明确的直边,可以沿着照片的这个直边与文本的平边对齐
亲密性

错误示例

文本左边有一条明确的对齐线,照片左侧也有但是在文本和照片之间截留了部分空白,这部分空白的不规则形状使页面杂乱,并且将照片和文字分割开来