2.1.3 iOS基本布局

1. 网格系统

网格系统（Grid Systems）又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序，如图2-8所示。

图2-8 网格系统

2. 组成元素

网格系统由列、水槽及边距3个元素组成，如图2-9所示。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。

图2-9 组成元素（❶列、❷水槽、❸边距）

3. 网格运用

单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS的最小单元格比较合适。其中，4px容易将页面切割得太细碎，所以比较推荐使用8px，如图2-10所示。

图2-10 单元格

列：列的数量有4、6、8、10、12、24这几种。其中，4列通常在2等分的简洁页面中使用，6列、12列和24列基本满足所有等分情况，但24列会将页面切割得太细碎，如图2-11所示，因此实际使用时还是以12列和6列为主。

图2-11 列的使用

水槽：水槽、边距及横向间距的宽度可以最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用，如图2-12所示。

图2-12 水槽

边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准，常见的边距有20px、24px、30px、32px、40px及50px。边距的选择应结合产品本身的气质，其中30px是让人最舒适的边距，也是绝大多数App首选的边距，如图2-13所示。

图2-13 iOS中的“设置”“通用”页面都采用了30px的边距