2.1.3 iOS基本布局

1. 網格系統

網格系統（Grid Systems）又稱為柵格系統，是利用一系列垂直和水平的參考線，將頁面分割成若干個有規律的列或格子，再以這些格子為基準，進行頁面布局設計的方式，能使布局規范、簡潔、有秩序，如圖2-8所示。

2. 組成元素

網格系統由列、水槽及邊距3個元素組成，如圖2-9所示。列是內容放置的區域。水槽是列與列之間的距離，有助于分離內容。邊距是內容與屏幕左右邊緣之間的距離。

3. 網格運用

單元格：iOS的最小點擊區域是44pt，即88px（@2x）。因此，在適用性方面，能被整除的偶數4和8作為iOS的最小單元格比較合適。其中，4px容易將頁面切割得太細碎，所以比較推薦使用8px，如圖2-10所示。

列：列的數量有4、6、8、10、12、24這幾種。其中，4列通常在2等分的簡潔頁面中使用，6列、12列和24列基本滿足所有等分情況，但24列會將頁面切割得太細碎，如圖2-11所示，因此實際使用時還是以12列和6列為主。

水槽：水槽、邊距及橫向間距的寬度可以最小單元格8px為增量進行統一設置，如24、32、40。其中32px（16pt@2x）最為常用，如圖2-12所示。

邊距：邊距的寬度也可以與水槽有所區別。在iOS中以@2x為基準，常見的邊距有20px、24px、30px、32px、40px及50px。邊距的選擇應結合產品本身的氣質，其中30px是讓人最舒適的邊距，也是絕大多數App首選的邊距，如圖2-13所示。