# 樣式設計

### 上傳基本圖示

#### Logo

* 顯示於票卡畫面左上角，系統將預設使用您發證機構的帳號圖示商標。
* 在模板中變更圖示，僅會影響當下編輯的票卡模板。
* 建議使用透明背景 PNG，以適應不同票卡顏色。
* 將游標懸停在圖片上，即可重新上傳Logo 圖片。

<figure><img src="https://3277808804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me9cHBoZUXoAnZpkhUs%2Fuploads%2FxQ7lQKbKVIgtz7JVYgCA%2FTC-%E4%B8%AD%E6%96%87-%E6%A8%A3%E5%BC%8F%E8%A8%AD%E8%A8%88-Logo.png?alt=media&#x26;token=529bd378-0375-4b05-b6cc-b87d1f83ecdc" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
**Logo 格式：**\
**尺寸**：建議為 480 x 150 px\
**檔案格式**：PNG、JPG、JPEG\
**檔案大小限制**：4MB以內
{% endhint %}

#### 機構圖示 \[尚未開放通知功能]

* 顯示於裝置(手機/平板等)鎖定畫面上的通知圖標，系統將預設使用您發證機構的帳號圖示。
* 在模板中變更圖示，僅會影響當下編輯的票卡模板。
* 將游標懸停在圖片上，即可重新上傳機構圖示。

<figure><img src="https://3277808804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me9cHBoZUXoAnZpkhUs%2Fuploads%2F3vvxHitdCy4uZ9MJ27F7%2FTC-%E4%B8%AD%E6%96%87-%E6%A8%A3%E5%BC%8F%E8%A8%AD%E8%A8%88-%E6%A9%9F%E6%A7%8B%E5%9C%96%E7%A4%BA.png?alt=media&#x26;token=0df344c8-3367-42a8-886c-901c7ec078d1" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
**機構圖示格式：**\
**尺寸**：建議為 87 x 87 px\
**檔案格式**：PNG、JPG、JPEG\
**檔案大小限制**：4MB以內
{% endhint %}

### 上傳主視覺縮圖

* 顯示於票卡畫面右上角，建議使用 1:1（正方形）比例。
* 尺寸過小或比例差異過大可能影響清晰度。

<div align="left"><figure><img src="https://3277808804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me9cHBoZUXoAnZpkhUs%2Fuploads%2FoAQorZs1RJm6LBgzVt9Z%2FTC-%E4%B8%AD%E6%96%87-%E6%A8%A3%E5%BC%8F%E8%A8%AD%E8%A8%88-%E4%B8%BB%E8%A6%96%E8%A6%BA%E7%B8%AE%E5%9C%96.png?alt=media&#x26;token=d1fb52c9-6ae2-45b2-8dbc-ce8175761088" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
**縮圖格式：**\
**尺寸**：建議為 270 x 270 px\
**檔案格式**：PNG、JPG、JPEG\
**檔案大小限制**：4MB以內
{% endhint %}

### 變更顏色

* 點選顏色框，可變更背景、欄位名稱或內容文字的顏色。

<figure><img src="https://3277808804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me9cHBoZUXoAnZpkhUs%2Fuploads%2FDOk9O7DeLsuR5kfnBXFk%2FTC-%E4%B8%AD%E6%96%87-%E6%A8%A3%E5%BC%8F%E8%A8%AD%E8%A8%88-%E9%A1%8F%E8%89%B2.png?alt=media&#x26;token=ec60e86e-5823-41df-8553-05706287ed39" alt="" width="563"><figcaption></figcaption></figure>