3.2 基础的栅格系统

UI设计中引入了原来用于书籍装帧设计和平面排版的栅格系统，以保证基本的视觉元素之间的整齐。下面模拟一个从混乱到整齐的过程来演示栅格系统带来的实际效果。如下图所示是开始的排版效果，图中的“@”是作为调节效果的装饰元素。

倾斜且不整齐的文字

如下图所示是该排版面背后的“方块”。

倾斜且不整齐的方块

如下图所示是栅格系统的基本原理。

栅格的构成W=（A*n）-i

这里使用最简单的方式让A=a，然后对“方块”进行重构，用最基本的栅格使其中的元素对齐，如下图所示。

用栅格对齐的基本方块效果

修改后基本文字如下图所示。

用栅格对齐的基本文字效果

这样的面板看上去比原始的混乱的排版方式效果好一些，但是仍然差了很多，也就是说，仅仅整齐还不足够完成页面的良好设计，下面利用别的方法来解决这一问题。