> 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-ying-yong-brand-applications/ying-pian-video.md).

# 影片 Video

詳細定義的影片板式規範能幫助《報導者》的影像團隊與設計團隊更有效地協作，易於使用、清晰方便的元件系統也能提升影片製作的工作效率。

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FFxRXNSeEE0t4RqwBtIgq%2Fvideo_overview.png?alt=media\&token=a6b49f3a-d651-4a8a-a948-ca1ff89157b9)

## 網格系統

網格統一以96px為單位，在影片常見比例3:2的基礎之下，放滿格子後上下還會有24px的多餘空間，為了維持視覺的上下平衡感，天與地的空間增加為108px。

網格系統可分為以下兩種：

### **一般通用網格**

上緣的邊界距離採用3分之2格（即72px）作為間距，而下方所出現的物件通常重量感較大，考量視覺的平衡感後，維持108px。

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FV2DAWDcae1lwiImMFCNs%2Fvideo_%E4%B8%80%E8%88%AC%E9%80%9A%E7%94%A8%E7%B6%B2%E6%A0%BC.png?alt=media\&token=eba49eca-9b97-4d84-9ec9-9578e96494df)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2Fco0IDKuqeYM4A4gUc3NH%2Fvideo_%E4%B8%80%E8%88%AC%E9%80%9A%E7%94%A8%E7%B6%B2%E6%A0%BC%E7%A4%BA%E6%84%8F.png?alt=media\&token=6c94c9ca-a210-4f3e-ac06-f00f7b74ae2a)

### **字幕使用網格**

考量上字幕後的視覺空間協調性，若影片有字幕，下緣的邊界距離採用3分之2格作為間距，即天與地皆為72px。

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FMJkB1QiiWvmXMFELAuEz%2Fvideo_%E5%AD%97%E5%B9%95%E4%BD%BF%E7%94%A8%E7%B6%B2%E6%A0%BC.png?alt=media\&token=3ccd1f09-5cee-42c3-8bab-92ff889c478f)

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FX7rGhIN1luN1bjZXnqW1%2Fvideo_%E5%AD%97%E5%B9%95%E4%BD%BF%E7%94%A8%E7%B6%B2%E6%A0%BC%E7%A4%BA%E6%84%8F.png?alt=media\&token=0b19b724-6093-41eb-a20b-a522be08b184)

## 字型編排

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FrJ2SL4g86aYLbi0qSOlk%2FThe-Reporter.jpg?alt=media\&token=0a784991-0ae4-485e-b591-1a20ceb35f4e)

{% hint style="success" %}
影片字型與編排應[遵循品牌規範定義](#zi-xing-bian-pai)。中文標題與字卡為思源宋體，如需使用歐文則可使用 Merriweather 進行排版，字幕則皆為思源黑體。
{% endhint %}

{% hint style="danger" %}
請勿使用非品牌規範中之字型與未授權之字型。
{% endhint %}

## 標誌使用方式

統一使用白色標誌，並固定於畫面右上角，依照 Brand Volume 調整標誌類型，示範如下：

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FtcVH9RbHX7iMOIRJmMBB%2FVideo_logo%E7%A4%BA%E6%84%8F.png?alt=media\&token=44eb39dd-103e-47ae-a7d6-c3152a0aa2e0)

* Low Volume：寬度0.5格（48px）
* Medium Volume：寬度0.5格（48px）
* High Volume：寬度4格（384px）

## Figma 協作示意

影片的常用文字卡牌、字幕將整理在《報導者》設計部的 Figma 文件，並串接 Google Sheets。影像團隊可以在 Google Sheets 直接編輯文字，並在 Figma 輸出。

![](https://2117275841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhr7WJgJAYGr6uENvcC%2Fuploads%2FbGHMfvULRkND3r5KYt6Q%2FRebrand-figma%E5%BD%B1%E7%89%87%E5%8D%94%E4%BD%9C.gif?alt=media\&token=bcbbb671-94a5-4bb4-bd4c-2d4a7e086b34)