微文案

Micro Copy Settings
文字
樣式
邊框
圓角
顏色
字型
文字陰影
版面配置

可能與實際介面略有差異。

變更預覽
Set the Microcopy here

This setting applies to the supplementary text

文字

文字
文字

可能與實際介面略有差異。

重點:
微文案顯示於按鈕外上方,適合放短訴求與標語。

影響:
能在主按鈕文案前先傳達價值訊息。

調整建議:
建議第 1 行放主訴求、第 2 行放補充資訊。

設定項目

  • 文字(最多 2 行)

註解:
文字為空時,微文案區塊不會輸出。

操作提示:
建議先定義固定文案格式,便於不同頁面複用。

樣式

樣式
樣式
01

可能與實際介面略有差異。

重點:
樣式用於快速切換微文案的裝飾強度。

影響:
同一段文案會因樣式不同而呈現不同優先級。

調整建議:
以不搶主按鈕焦點為原則,優先使用低強度樣式。

設定項目

  • Style(01~05)

註解:
樣式切換後,建議同步確認字距與內距是否仍平衡。

邊框

邊框
顏色
黑色
#000000
編輯調色盤清除
不透明度
1
寬度
1
樣式
solid

可能與實際介面略有差異。

重點:
邊框可明確界定微文案區域。

影響:
可提升識別度,但過粗會壓過文字本身。

調整建議:
建議先從 1px 左右測試,再視需求加強。

設定項目

  • 顏色 + Alpha
  • 寬度
  • Style

註解:
邊框太強時可先降低 Alpha,而非直接關閉。

圓角

圓角
圓角
0

可能與實際介面略有差異。

重點:
圓角可調整視覺語氣(俐落或柔和)。

影響:
會改變與按鈕本體的整體一致性。

調整建議:
建議比主按鈕圓角略小,維持層級關係。

設定項目

  • 圓角
  • 單位

註解:
圓角與邊框需一起檢查,避免轉角不連續。

顏色

顏色
文字顏色
黑色
#000000
編輯調色盤清除
不透明度
1
背景顏色
基礎
#FFFFFF
編輯調色盤清除
不透明度
1

可能與實際介面略有差異。

重點:
顏色設定決定微文案的可讀性與存在感。

影響:
對比不足會導致訊息被忽略。

調整建議:
優先確保文字可讀,再微調背景色濃度。

設定項目

  • 文字顏色 + Alpha

註解:
若背景已帶色,建議先以深淺對比確保文字可讀。

字型

字型
字型系列
預設
粗細
400
字型大小
12
行高
1.4
字距
0

可能與實際介面略有差異。

重點:
字型設定決定補充資訊的閱讀效率。

影響:
字級與粗細會直接影響主次資訊層級。

調整建議:
建議比主按鈕小 1-2 階、字重略輕。

設定項目

  • 字型系列
  • Font 粗細
  • 字型大小
  • 行高
  • 字距

註解:
補充文字通常不需過重字重,避免壓過主 CTA。

文字陰影

文字陰影
文字陰影OFFON
顏色
黑色
#000000
編輯調色盤清除
模糊
0
水平
0
垂直
0

可能與實際介面略有差異。

重點:
文字陰影可補強在複雜背景上的辨識度。

影響:
陰影過強會讓文字邊緣模糊。

調整建議:
先以低 Alpha、小 Blur 起步,逐步增加。

設定項目

  • 顏色 + Alpha
  • Blur
  • Horizontal
  • Vertical

註解:
陰影參數請小步調整,避免短文產生糊邊。

版面配置

版面配置
外距
0
內距
0
旋轉 (deg)
0

可能與實際介面略有差異。

重點:
版面配置決定微文案與主按鈕的距離與秩序。

影響:
間距不當會讓資訊閱讀順序混亂。

調整建議:
先調整外距(Margin),再視需要補內距(Padding)。

設定項目

  • Margin
  • Padding
  • Rotate
  • 響應式

註解:
微文案支援響應式個別設定,請檢查手機換行狀態。

操作提示:
若手機行數增加,優先調整 Margin 與字級,而非強行壓縮內容。