Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
《報導者》秉持開放精神，將新聞編輯室的品牌識別與設計流程，整理為開源的設計規範。如果對這份設計規範有任何回饋或建議，請聯絡《報導者》 設計部：designers@twreporter.org
任何設計應用都必須保持品牌一致的調性，在不同載體上的設計，除了符合題材適切性之外，也應符合《報導者》品牌設計規範。
品牌設計在訊息的傳達上，必須明確且清晰，並且針對不同的分眾進行精準溝通。
所有的設計產物，除了易於傳達使用，也應考量內部應用傳承的方便性。
品牌設計規範本身可因應當代的設計思維與潮流做出調整。
© 2021《報導者》品牌設計規範以 創用 CC by-nc-sa 授權條款 釋出
《報導者》標誌由象徵圖形（Symbol）和文字標誌（Wordmark）組成，兩者皆為重要識別元素，但必要時可拆開單獨使用；其中象徵圖形為視覺焦點，肩負品牌即時識別的重任。
打開現場之門，看見需要被看見的；開啟對話空間，傾聽值得被傾聽的。
此標誌使用水平對齊方式，當標誌需要置左、置中時，可使用之。
此標誌使用垂直對齊方式，當標誌需要置中或置中對齊時，可使用之。
標誌對齊方式不適用於置左、置右等情形。
此標誌使用水平對齊方式，當標誌需要置左、置右、置中時，可使用之。
此標誌版本僅用於特殊情況。當沒有足夠的空間來顯示完整商標時，或已有足夠脈絡支撐品牌識別訊息時可用之。
為確保《報導者》標誌的辨識度，標誌在各載體上都應該保持最小淨空範圍。淨空距離為文字商標「R」寬度的2倍（僅 logo 純符號標誌距離為圖形高度的2分之1），並且不受圖形、攝影、排版和其他元素的影響。此外，標誌與（無論印刷或數位）畫面邊界之間的空間也是重要的，排版應盡可能提高標誌易讀性。
為確保《報導者》標誌的易讀性，請遵守標誌最小使用尺寸指南。在這些指南的基礎上，請以清晰度為前提做出標誌尺寸大小的判斷，使標誌足夠明顯。
保持標誌組合外觀的一致性非常重要，不當使用標誌將降低標誌的辨識度，削弱品牌識別的力道。請避免用字體代替標識，或者套用拉伸、壓縮、重新排列和添加效果。以下提供各種錯誤使用示範，請勿以下列任何方式（包含但不限）嘗試更改「THE REPORTER」標誌。
《報導者》為網路原生媒體，有邏輯的網格系統能讓版面佈局更有秩序，提昇讀者閱讀版面的舒適度。
在開始設計前，可以先將邊距（margin）定義出來，欄距（gutter）則於必要時使用。邊距數值為版面最長邊的36分之1，若是正方形則以18分之1作計算；欄距則皆為邊距的2分之1，欄位以12欄為主，其餘格式將在必要時下降到9欄、6欄或4欄網格。
適當的留白、靈活的使用網格系統也是重要的原則，若版面開始變得複雜，請果斷放棄。
輔助圖形為品牌造型的延伸，透過輔助圖形的系統性安排，讓標誌與品牌的個性再一次延展至每一個設計應用的面向。《報導者》品牌輔助圖形包含三大類型的視覺元素，供不同場合語意表達使用。
第一類圖騰以《報導者》標誌作為應用元素，圖騰可在標誌等寬（x）至兩倍寬（2x）的範圍內自由變化，藉此呼應品牌自由、開放的精神。
第二類圖騰以《報導者》標誌的局部作為裝飾性應用，用以展現畫面之立體空間與多面向的視角，其使用規則如下圖裁切方式所示。
第三類的圖騰以較寫意的方式作為裝飾性應用，視覺呈現上如同記者的手札一般，表現出手寫的溫度與現場感。適用於「強調」、「聚焦」等目的或者「非正式場合」之情境，強調線可與類型一或類型二的圖騰搭配使用。
插畫是品牌性格的延伸，其中每個細節都暗示著品牌特質，並以較為軟性的方式，將抽象的品牌價值轉化成具象化的圖像。
插畫繪製需建立於品牌標誌與色彩主色之上，整體風格應展現力量與溫度，不宜過於尖銳或圓潤。此外，插畫應搭配輔助圖形的線條做強調的裝飾線，讓畫面更靈活有機。
插畫人物比例由標誌向左旋轉90度、劃分10等分所構成，上下身比例約為4:6；斜口的服裝剪裁與標誌相互呼應，相對誇張的四肢則展現人物有力量的一面。
© 2021《報導者》品牌插畫以 創用 CC by-nc-sa 授權條款 釋出
在資訊氾濫的社群媒體上，一致性的網格與排版規則能幫助增強《報導者》品牌在網路傳播的辨識度。
社群圖片的版型承襲品牌的網格系統，延伸輔助圖形的應用，展現品牌視覺風格。
社群封面或圖像應考量該平台所建議之安全範圍作為排版的主要規範，其次再以品牌網格作為排版參考。
《報導者》在社群上的圖像設計應根據不同的傳達受眾、資訊內容多寡與情緒，選擇適宜的視覺語彙作為設計之基礎。
以影像為主體之報導、內容，主要在於展現影像本身之力道與情緒。
圖文兼具的內容與報導，可利用品牌輔助圖形作為裝飾、識別。
媒體自家公告或者與品牌高度相關之內容，在圖形與色彩應用上可使用高比例的品牌圖騰插畫，展現品牌本身之特色。
社群圖片的常用版型將整理在《報導者》設計部的 Figma 文件，並串接 Google Sheets。社群團隊可以在 Google Sheets 直接編輯文字，並在 Figma 輸出。
詳細定義的影片板式規範能幫助《報導者》的影像團隊與設計團隊更有效地協作，易於使用、清晰方便的元件系統也能提升影片製作的工作效率。
網格統一以96px為單位，在影片常見比例3:2的基礎之下，放滿格子後上下還會有24px的多餘空間，為了維持視覺的上下平衡感，天與地的空間增加為108px。
網格系統可分為以下兩種：
上緣的邊界距離採用3分之2格（即72px）作為間距，而下方所出現的物件通常重量感較大，考量視覺的平衡感後，維持108px。
考量上字幕後的視覺空間協調性，若影片有字幕，下緣的邊界距離採用3分之2格作為間距，即天與地皆為72px。
請勿使用非品牌規範中之字型與未授權之字型。
統一使用白色標誌，並固定於畫面右上角，依照 Brand Volume 調整標誌類型，示範如下：
Low Volume：寬度0.5格（48px）
Medium Volume：寬度0.5格（48px）
High Volume：寬度4格（384px）
影片的常用文字卡牌、字幕將整理在《報導者》設計部的 Figma 文件，並串接 Google Sheets。影像團隊可以在 Google Sheets 直接編輯文字，並在 Figma 輸出。
影片字型與編排應。中文標題與字卡為思源宋體，如需使用歐文則可使用 Merriweather 進行排版，字幕則皆為思源黑體。
Title | Pantone® | CMYK | RGB | Hex |
/ | 2, 30, 16, 0 | 244, 198, 198 | #F4C6C6 |
/ | 0, 71, 38, 0 | 247, 105, 119 | #F76977 |
1795 C/2347U | 0, 95, 79, 0 | 248, 11, 40 | #F80B28 |
7620 C/3546U | 16, 100, 90, 6 | 196, 13, 35 | #C40D23 |
/ | 25, 100, 87, 25 | 155, 5, 30 | #9B051E |
Title | Pantone® | CMYK | RGB | Hex |
/ | 27, 0, 21, 0 | 196, 242, 220 | #C4F2DC |
/ | 42, 0, 32, 0 | 153, 236, 201 | #99ECC9 |
570 C | 53, 0, 42, 0 | 110, 229, 181 | #6EE5B5 |
/ | 76, 21, 58, 5 | 60, 146, 122 | #3C927A |
/ | 89, 50, 63, 65 | 14, 53, 50 | #0E3532 |
Title | Pantone® | CMYK | RGB | Hex |
/ | 36, 0, 3, 0 | 171, 222, 244 | #ABDEF4 |
/ | 60, 33, 0, 0 | 109, 155, 224 | #6D9BE0 |
2387 C | 86, 66, 0, 0 | 47, 88, 204 | #2F58CC |
/ | 100, 87, 29, 11 | 20, 48, 113 | #143071 |
/ | 100, 87, 45, 51 | 5, 33, 66 | #052142 |
Title | Pantone® | CMYK | RGB | Hex |
468 C | 7, 27, 41, 0 | 237, 195, 157 | #EDC39D |
/ | 30, 44, 69, 24 | 158, 122, 78 | #9E7A4E |
/ | 47, 65, 82, 68 | 73, 48, 24 | #493018 |
Title | Pantone® | CMYK | RGB | Hex |
White | 0, 0, 0, 0 | 255, 255, 255 | #FFFFFF |
5315 C | 0, 0, 0, 5 | 241, 241, 241 | #F1F1F1 |
/ | 0, 0, 0, 11 | 226, 226, 226 | #E2E2E2 |
/ | 0, 0, 0, 15 | 216, 216, 216 | #D8D8D8 |
/ | 0, 0, 0, 20 | 205, 205, 205 | #CDCDCD |
/ | 0, 0, 0, 39 | 156, 156, 156 | #9C9C9C |
/ | 0, 0, 0, 50 | 128, 128, 128 | #808080 |
/ | 0, 0, 0, 71 | 74, 74, 74 | #4A4A4A |
/ | 0, 0, 0, 75 | 64, 64, 64 | #404040 |
/ | 0, 0, 0, 85 | 38, 38, 38 | #262626 |
Black 6 C | 0, 0, 0, 100 | 0, 0, 0 | #000000 |
簡報是品牌向外展演的出口，甚至許多觀眾是透過簡報的形式第一次認識品牌，因此明確的溝通與清楚的視覺識別，對於品牌體驗至關重要。
《報導者》的簡報系統遵循品牌的網格系統，並使用最新版的設計系統與色彩，以下為簡報設計原則與建議使用說明。
請選擇適用之軟體系統下載使用最新版本的簡報範本。
請使用最新發佈之簡報範本，並使用品牌規範定義之色彩。
請勿使用舊版本之簡報、標誌，避免使用模板中沒有出現之色彩。
請使用品牌所定義之插畫、圖標。
請避免使用網路上任意抓取之圖像插圖或變形插畫內容。
簡報字型與編排應遵循品牌規範定義。中文字為思源宋體，如需大量使用歐文則可使用 Merriweather 進行排版。
文字與資訊層級應清晰、簡明扼要。
請勿使用非品牌規範中之字型與未授權之字型。
請避免在同一張投影片中置入過多訊息與文字。
請使用與內容相符之圖片、並注意圖片內容傳播適切性。
請勿使用未經授權之圖片。
請使用簡報模板中所建議之圖表呈現與配色。
請勿使用品牌規範以外之配色，過於相近之色彩。
Faded
Pastel
Main
Heavy
Dark
Faded
Pastel
Main
Heavy
Dark
Faded
Pastel
Main
Heavy
Dark
Main
Heavy
Dark
White
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Black
