# 排版 Layout

## 網格系統

在開始設計前，可以先將邊距（margin）定義出來，欄距（gutter）則於必要時使用。邊距數值為版面最長邊的36分之1，若是正方形則以18分之1作計算；欄距則皆為邊距的2分之1，欄位以12欄為主，其餘格式將在必要時下降到9欄、6欄或4欄網格。

![](/files/6o69e5xYMxCsY0zfGGND) ![](/files/JtwkrhVs5wF6newEkJlP)

![](/files/22mXsCHprIp4Iwpg19Rx) ![](/files/5pvUGZhHBgxKvuf5shio)

{% hint style="info" %}
適當的留白、靈活的使用網格系統也是重要的原則，若版面開始變得複雜，請果斷放棄。
{% endhint %}

## 輔助圖形

![](/files/72whtRHxdYfH6PJYdbf8)

輔助圖形為品牌造型的延伸，透過輔助圖形的系統性安排，讓標誌與品牌的個性再一次延展至每一個設計應用的面向。《報導者》品牌輔助圖形包含三大類型的視覺元素，供不同場合語意表達使用。

### Type 1. 全形開放

第一類圖騰以《報導者》標誌作為應用元素，圖騰可在標誌等寬（x）至兩倍寬（2x）的範圍內自由變化，藉此呼應品牌自由、開放的精神。

![](/files/oAtDwH0TNTbKvNqhZhIS)

![](/files/ZV6qdaUxaqsrxN7PFoWP)

### Type 2. 局部空間

第二類圖騰以《報導者》標誌的局部作為裝飾性應用，用以展現畫面之立體空間與多面向的視角，其使用規則如下圖裁切方式所示。

![](/files/Ix1HJh4uIKnAmgoO7mPR)

![](/files/xROqt06KvhYDHJM3nJKx)

![](/files/Ep3xvoQbycJTmuQCB5AK)

### Type 3. 線條

第三類的圖騰以較寫意的方式作為裝飾性應用，視覺呈現上如同記者的手札一般，表現出手寫的溫度與現場感。適用於「強調」、「聚焦」等目的或者「非正式場合」之情境，強調線可與類型一或類型二的圖騰搭配使用。

![](/files/W8hdqABB47xc4DstAE38)

![](/files/9udYlCbFeNIYPjeqYifQ)

## 應用範例

![](/files/iMxqt7EQwPbgmCW7M9e6)

![](/files/1VaoG6b5Gk2lMEey1PHd)

![](/files/5sBEYanBNnrR8fCE00aX) ![](/files/jmtgFMvHEyBrwpBKeBbu)

## 不當使用示範

![](/files/5FH3TjT2QPMORceNxs7n)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://twreporter.gitbook.io/the-reporter-brand-guidelines/pin-pai-shi-bie-brand-identity/pai-ban-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.