# Layout

佈局定義了螢幕和元件之間的間距規則，為產品介面建立一致且和諧的視覺感受。

[Mobile App](/content/1b2563de1/p/44d6e6-layout/b/11f521/index.html)

## 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) = 需考慮高度差<br>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的倍數為基準可以使設計更易於管理和修改.