縮圖設定

覆蓋層

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

重點：
覆蓋層用於提高縮圖上的文字可讀性。

影響：
能壓低背景細節，讓焦點回到文案。

調整建議：
先從低透明度開始，逐步加強。

設定項目

• 顏色 / Gradient：設定單色或漸層，調整縮圖上的覆蓋表現。
• 不透明度：控制覆蓋層強度，平衡素材細節與文字可讀性。
• 混合模式：設定與下層影像的合成方式，調整視覺對比。
• 響應式切換：可針對裝置個別設定，避免不同尺寸下可讀性落差。

註解：
覆蓋層可快速改善縮圖上的文字可讀性。

註解：
縮圖的覆蓋層只作用於縮圖影像本身，與按鈕背景的覆蓋層設定彼此獨立；Hover 狀態也可分別設定。

影像

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

重點：
影像設定決定縮圖素材如何呈現。

影響：
影像裁切與位置會直接影響視覺重點。

調整建議：
先決定 Fit，再微調位置與透明度。

設定項目

• 媒體類型（圖片 / 影片）：選擇縮圖使用的素材種類。
• 圖片：重複、適合方式、旋轉 (deg)、不透明度，用於控制縮圖裁切、構圖與主張強度。
• 影片（PRO）：Video URL、Video Fit、Video 位置 X/Y，用於控制影片來源與顯示範圍。
• 響應式切換：可依裝置調整縮圖素材，避免手機端裁切失真。

註解：
影像素材建議以按鈕尺寸實際顯示比例來裁切。

PRO 功能：
縮圖影片設定為 ZenBlocks PRO 功能。使用影片 URL 或影片顯示位置時需要 PRO 版本。

顏色

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

重點：
顏色是縮圖底層的基礎視覺。

影響：
會影響縮圖與按鈕本體的層級對比。

調整建議：
優先保持與主按鈕文字的可讀對比。

設定項目

• 基底 顏色：設定縮圖底色，建立素材下層的視覺基礎。
• 不透明度：調整顏色層強度，避免與文案競爭。
• 混合模式：設定與背景的混合方式，影響最終色感。
• 響應式切換：可按裝置獨立設定，維持一致的可讀性。

註解：
若縮圖資訊較多，建議使用較單純的底色降低干擾。

Hover 顏色轉場限制：
縮圖顏色是直接對 background 屬性做轉場，因此「一般＝單色、Hover＝漸層」（或反向）時，瀏覽器無法平滑補間，會瞬間切換。若需要平滑轉場，請讓一般與 Hover 都使用單色，或都使用漸層。

尺寸

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

重點：
尺寸決定縮圖在按鈕中的存在感。

影響：
過大會搶主文案，過小則失去輔助意義。

調整建議：
先定寬，再用高微調比例。

設定項目

• 寬度：控制縮圖橫向佔比，影響畫面重心。
• 高度：控制縱向密度，影響資訊層級與呼吸感。
• 響應式切換：針對不同裝置調整尺寸，避免擁擠或過空。

註解：
先固定寬度再調高度，可較快找到版面平衡點。

邊框

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

重點：
邊框可讓縮圖與背景分離更清楚。

影響：
可提升辨識度，但過粗會讓畫面顯得笨重。

調整建議：
建議從細線起步，再依背景對比調整。

設定項目

• 邊框（ON/OFF）：切換是否顯示邊框輪廓。
• 顏色 + Alpha：調整邊框顏色與透明度，建立與背景的分離感。
• 寬度：控制邊框粗細，影響縮圖存在感。
• Style：設定線型樣式，調整視覺語氣。
• 響應式切換：可在各裝置維持一致邊界辨識。

註解：
邊框主要用於分離縮圖與背景，不建議過度裝飾。

圓角

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

重點：
圓角調整縮圖的視覺語氣。

影響：
與按鈕本體圓角一致可提升整體感。

調整建議：
先跟隨按鈕圓角，再做小幅差異化。

設定項目

• 圓角（整體 / 個別）：調整縮圖角落形狀，影響柔和感與品牌語氣。
• 單位：切換 px / % 等單位，控制不同尺寸下圓角比例。
• 響應式切換：各裝置分開設定圓角，避免比例失衡。

註解：
圓角建議與主按鈕圓角方向一致，維持整體視覺語氣。

位置

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

重點：
位置控制縮圖與文字的相對關係。

影響：
不當位移會壓到文案或造成版面失衡。

調整建議：
先確認不遮擋，再做精細偏移。

設定項目

• X / Y 位置：控制縮圖在按鈕內的水平與垂直配置。
• 單位：可用不同單位做精細偏移，對齊文案與圖示。
• 響應式切換：按裝置分別調整位置，避免遮擋 CTA。

註解：
位置調整後，請同步確認點擊熱區是否仍清楚。

透明度

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

重點：
透明度決定縮圖主張強弱。

影響：
過低辨識不足，過高會干擾 CTA。

調整建議：
先調透明度，再調混合模式。

設定項目

• 不透明度：調整縮圖整體可見度，平衡主按鈕與裝飾層關係。
• 混合模式：設定縮圖與背景的合成方式，改變視覺印象。
• 響應式切換：在不同裝置維持相近對比與層級。

註解：
不透明度調整建議搭配背景層一起檢查，避免意外變暗。

轉場

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

重點：
轉場控制縮圖懸停時的變化速度。

影響：
適度轉場可增加互動感且不突兀。

調整建議：
先以 200-350ms 測試，再微調 Easing。

設定項目

• 持續時間 (ms)：控制變化速度，決定互動回饋的快慢。
• 延遲時間 (ms)：設定開始前等待時間，調整節奏感。
• 緩動：設定速度曲線，調整變化的體感。
• 自訂值：可用 cubic-bezier 精細控制過渡質感。
• 重設：將本區轉場設定還原為初始值。

註解：
若縮圖切換過於突兀，可優先放慢 Duration。

註解：
縮圖轉場會套用到覆蓋層、影像、顏色、邊框、圓角與透明度的 Hover 變化，且與按鈕本體/圖示轉場獨立運作。

與背景/裝飾帶的差異：
縮圖不提供 圖案 與 變形（Skew） 設定。若需要帶圖案的裝飾層，請改用裝飾帶設定。另一方面，縮圖具備尺寸、邊框、圓角、位置、透明度等控制，這些並非背景設定的主軸。