副文字

Sub Text Settings
文字
顏色
字型
文字陰影
版面配置

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

變更預覽

This setting applies to the supplementary text

文字

文字
文字

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

重點:
補充文字顯示於按鈕內主文案下方。

影響:
可補充條件,降低點擊後認知落差。

調整建議:
建議短句呈現,避免壓縮主文案可讀區域。

設定項目

  • Sub 文字(最多 2 行)

註解:
文字為空時不顯示此區塊,且不提供 hover 專屬設定。

操作提示:
建議放價格條件或期限資訊,避免與主文案重複。

顏色

顏色
文字顏色
黑色
#000000
編輯調色盤清除
不透明度
1

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

重點:
顏色設定決定補充文字是否容易被閱讀。

影響:
對比過低時,關鍵條件容易被忽略。

調整建議:
維持比主文案低一階,但仍符合可讀性。

設定項目

  • 文字顏色 + Alpha

註解:
如內容重要度高,可略提高對比但仍低於主文案。

字型

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

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

重點:
字型設定控制補充文字的可讀與層級。

影響:
不當字級會讓按鈕內資訊顯得擁擠。

調整建議:
先確認手機 2 行狀態,再回調桌機版。

設定項目

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

註解:
先在手機檢查 2 行顯示,再調整桌機字級。

文字陰影

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

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

重點:
文字陰影有助於提升背景上的辨識。

影響:
太重的陰影會削弱文字乾淨度。

調整建議:
優先小幅設定,避免視覺噪音。

設定項目

  • 顏色 + Alpha
  • Blur
  • Horizontal
  • Vertical

註解:
背景純色時建議關閉陰影,維持乾淨視覺。

版面配置

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

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

重點:
版面配置用於整理主文案與補充文字的距離。

影響:
間距不足會造成資訊擠壓,影響可讀。

調整建議:
先固定 Margin,再視需求調整 Padding。

設定項目

  • Margin
  • Padding
  • Rotate
  • 響應式

註解:
與微文字同時使用時,請特別確認行高與上下留白。

操作提示:
若文字過擠,優先增加內距而非縮小字級。