# 排版 Layout

## 網格系統

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

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FCySj1EVHwSgORexwlgXa%2FThe-Reporter_grid-rec.png?alt=media\&token=ff174edb-70bd-40eb-abae-c7632d3f564e) ![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FM1svo7IBDKzDPnytPioZ%2FThe-Reporter_grid-rec_example.png?alt=media\&token=50b470ca-bb70-482c-83db-6075104c1f53)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FCA4qxe1W1PD8xzyQNVxL%2FThe-Reporter_grid-square.png?alt=media\&token=84f002e5-5767-454b-a0d5-c11e71cdab3a) ![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FlApyi1ib0WuF8tShiEUs%2FThe-Reporter_grid-squar_example.png?alt=media\&token=034858a7-c23c-47fd-b54d-c29c3bbbfdfa)

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

## 輔助圖形

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FMzGEHxP900wGYyP3jLer%2FTheReporter_graphic-type0.png?alt=media\&token=611f25db-02d8-4474-904a-797d3123e94e)

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

### Type 1. 全形開放

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

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2Fo9ivuLLE8Wndhdw4tQGb%2FTheReporter_graphic-type1_1.png?alt=media\&token=cbb5d822-151d-491f-8cd0-af7a2ba03cc2)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2Ftfd2gjSTjxX3v3O2SNX7%2FTheReporter_graphic-type1_2.png?alt=media\&token=7fed03c5-84e0-4bb1-89b6-0a18bdc491aa)

### Type 2. 局部空間

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

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FvzYCCWscBp1sTtChU13h%2FTheReporter_graphic-type2_1.png?alt=media\&token=c5b50367-1ff0-487e-bbc9-0b1dac8df75a)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2F846Zp1hxDoupHSpBhsOH%2FTheReporter_graphic-type2_3.png?alt=media\&token=fc4b4b4e-169e-4ac3-bb31-a09d1a365fe4)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FipcofCtSkpe7PFRwD2AK%2FThe-Reporter_graphic-type2_4.png?alt=media\&token=af06c895-e2e9-4027-9086-6813aa8572e8)

### Type 3. 線條

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

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2Fad9b9vqz7I3T6hGREr30%2FTheReporter_graphic-type3_1.png?alt=media\&token=dd6d4220-6789-44c6-857e-b4798e531cc2)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FJoyIE7AdJCNVe8AL9wqW%2FTheReporter_graphic-type3_2.png?alt=media\&token=75b50234-510d-4f2a-af05-81f7a3fa5799)

## 應用範例

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FmlzEPWU2OfZXdEeKVhB2%2FBillboard_compress.png?alt=media\&token=b3e38d98-a094-464d-b043-d3a98c8b70fc)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2Fyy3QCMBOQoU5EJz59rH8%2FPoster_compress.png?alt=media\&token=bc931a46-5725-4d75-bda1-49aec7c95035)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FBtVkKnntn4rC2qh2rgVr%2FFlag01.png?alt=media\&token=7ce4fdd5-c9c6-401f-875f-d2ea3441b186) ![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FV2VMT75CO81nkF5RL7Ot%2FBanner02.png?alt=media\&token=80f1c053-6bdf-455e-ab79-cc7097be2c2e)

## 不當使用示範

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FQXpSUCTnk50XmiEdqbmz%2FThe-Reporter_donts.png?alt=media\&token=1e301d82-61fc-42fd-af9e-39ea1656fe3c)