> For the complete documentation index, see [llms.txt](https://twreporter.gitbook.io/the-reporter-brand-guidelines/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://twreporter.gitbook.io/the-reporter-brand-guidelines/pin-pai-shi-bie-brand-identity/pai-ban-layout.md).

# 排版 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)