Layout
佈局定義了螢幕和元件之間的間距規則，為產品介面建立一致且和諧的視覺感受。
Anatomy
Margin (邊距)
Margin 是裝置畫面兩側的留白，讓內容與邊界保持距離，提供呼吸感。它確保版面看起來不會過於擁擠。
Column (欄位)
Column 是頁面佈局中的垂直區塊，用來分割內容區域，使排版整齊、更具結構性。
Gutter (欄間距)
Gutter 是兩個 Column 之間的空隙或間距。用於分隔內容，確保內容之間的分離和可讀性。
Mobile Layout Guide
預設尺寸
我們以多數主流iPhone機型作為設計稿的基準畫布尺寸，且內容區域都須遵循固定的邊距，以確保內容與螢幕保持呼吸空間：
| 項目 | 數值 |
| Screen Width | 375px |
| Screen Height | 812px (可根據內容延伸) |
| Left/Right Margin | 16px |
| Content Width | 343px |
斷點
在設計移動裝置時，同時須考慮小手機型號 、折疊手機、 平板等裝置螢幕大小：
| 斷點 | 最小寬度 | 裝置類型 | 備註 |
| 小 (S) | 320px | 小手機 | iPhone 5/5s/SE (1st gen) |
| 預設 (SM) | 375px | 標準手機 | iPhone 6/7/8 (375x667px) = 需考慮高度差 iPhone X/11/12/13/14 Pro (375x812px) |
| 中 (M) | 768px | 標準平板、折疊手機 | |
| 大 (L) | 1024px | 平板 |
8 Pixel Grid System
8px Grid的原則是使用8的倍數（8、16、24、32、40、48、56等）來設計元素的佈局、尺寸、內邊距和外邊距。
為什麼使用 8 Pixel Grid System?
- 一致性：
確保設計元素在不同部分之間保持一致的間距和尺寸，從而創造出統一且整潔的外觀。
- 可擴展性：
以8的倍數作為基本單位，使設計在不同屏幕尺寸和解析度下更容易擴展和適應。
- 易於管理：
以8的倍數為基準可以使設計更易於管理和修改.