帶狀設定

覆蓋層

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

重點：
覆蓋層可快速調整裝飾帶上的文字可讀性。

影響：
可降低背景干擾，提升標籤辨識。

調整建議：
先調整透明度，再決定是否使用漸層。

設定項目

• 顏色 / Gradient：設定單色或漸層，調整裝飾帶的覆蓋表現。
• 不透明度：控制覆蓋層強度，平衡底圖細節與文字辨識。
• 混合模式：設定與下層素材的合成方式，調整視覺對比。
• 響應式切換：可按裝置獨立設定，維持不同尺寸下的一致性。

註解：
覆蓋層常用於提高文字辨識，建議先從低不透明度開始。

圖案

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

重點：
圖案可為裝飾帶增加質感與視覺記憶點。

影響：
過強圖案會稀釋主文案與 CTA。

調整建議：
建議低對比、低透明度起手。

設定項目

• 圖案類型：決定裝飾帶紋理樣式與視覺語氣。
• 圖案顏色：調整圖案對比，避免壓過主文案。
• 圖案尺寸：控制紋理密度與存在感。
• 圖案不透明度：調整圖案主張強弱，維持閱讀優先。
• 混合模式：設定圖案與底層素材的融合方式。
• 響應式切換：可為不同裝置分別設定圖案細節。

註解：
圖案對比建議低於主按鈕元素，避免視覺競爭。

影像

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

重點：
影像設定決定裝飾帶素材的呈現方式。

影響：
Fit 與位置不同會改變重心與可讀性。

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

設定項目

• 媒體類型（圖片 / 影片）：選擇裝飾帶素材來源。
• 圖片：重複、適合方式、旋轉 (deg)、不透明度，用於調整圖像構圖與主張強度。
• 影片（PRO）：Video URL、Video Fit、Video 位置 X/Y，用於控制影片來源與顯示範圍。
• 響應式切換：按裝置個別設定，避免行動端構圖偏移。

註解：
影片素材建議搭配靜態海報思維，確保未播放時仍可理解。

PRO 功能：
裝飾帶影片設定為 ZenBlocks PRO 功能。使用影片 URL 或影片位置設定時需要 PRO 版本。

顏色

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

重點：
顏色是裝飾帶的主視覺基底。

影響：
會直接影響標籤的層級感與辨識性。

調整建議：
先確保與主按鈕有區隔，再檢查整體一致性。

設定項目

• 基底 顏色：設定裝飾帶底色，建立主要視覺基調。
• 不透明度：控制色層強度，平衡裝飾與閱讀性。
• 混合模式：調整與背景層的融合方式。
• 響應式切換：針對裝置差異調整色彩表現。

註解：
顏色先以品牌色系為主，再透過透明度控制主張強度。

Hover 顏色轉場：
裝飾帶顏色在 Hover 時採交叉淡化（crossfade）機制，因此「一般＝單色、Hover＝漸層」（或反向）也能平滑切換。

尺寸

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

重點：
尺寸控制裝飾帶存在感。

影響：
太大會搶主文案，太小則失去提示作用。

調整建議：
先在桌機定基準，再逐裝置縮放微調。

設定項目

• 寬度：控制裝飾帶橫向覆蓋範圍。
• 高度：控制縱向厚度與視覺重量。
• 響應式切換：讓桌機與手機維持合理比例。

註解：
建議先固定高度再調寬度，可更快穩定外觀比例。

邊框

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

重點：
邊框可強化裝飾帶輪廓。

影響：
可提升分隔感，但太粗會顯得厚重。

調整建議：
先用細線測試，再依背景對比加強。

設定項目

• 邊框（ON/OFF）：控制是否啟用邊界線。
• 顏色 + Alpha：調整邊框可見度與背景分離度。
• 寬度：設定邊框粗細，影響裝飾帶重量感。
• Style：切換線型，調整視覺語氣。
• 響應式切換：確保不同裝置下邊界仍清楚。

註解：
若背景已複雜，邊框建議簡化為實線細框。

圓角

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

重點：
圓角可調整裝飾帶語氣與品牌感。

影響：
與按鈕本體圓角不一致時，整體感會變弱。

調整建議：
建議與按鈕圓角方向一致、數值略小。

設定項目

• 圓角（整體 / 個別）：調整角落形狀，決定視覺柔和度。
• 單位：切換 px / % 等單位以控制比例。
• 響應式切換：各裝置獨立設定，避免比例失衡。

註解：
與按鈕本體圓角保持相近可提升一致感。

位置

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

重點：
位置設定決定裝飾帶與按鈕的關係。

影響：
位置不當可能遮住關鍵文字。

調整建議：
優先確保不遮擋主文案，再做視覺偏移。

設定項目

• X / Y 位置：控制裝飾帶與按鈕文案的相對關係。
• 單位：可做細緻偏移，精準對齊內容區。
• 響應式切換：按裝置分別調整位置，降低遮擋風險。

註解：
位置偏移後請檢查是否遮住主文案或圖示。

透明度

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

重點：
透明度用於控制裝飾帶的主張強度。

影響：
透明度過低會失去辨識，過高則干擾按鈕本體。

調整建議：
以可讀性優先，先調透明度再調混合模式。

設定項目

• 不透明度：調整裝飾帶整體可見度。
• 混合模式：設定與背景層的合成方式，改變最終觀感。
• 響應式切換：可對不同裝置維持相似層級對比。

註解：
混合模式建議先從 正常 開始，再視需求嘗試其他模式。

變形

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

重點：
變形可增加動態感與視線導向。

影響：
過度傾斜容易造成版面不穩與閱讀負擔。

調整建議：
保持小角度，僅作微量裝飾。

設定項目

• Skew X / Skew Y：設定 X/Y 軸傾斜角，增加視線導向或動感。
• 單位（deg）：以角度精細控制變形幅度。
• 響應式切換：按裝置獨立設定，避免小畫面過度傾斜。

註解：
小角度傾斜最安全，過大容易造成觸控區誤判。

註解：
變形最終以 CSS transform: skew() 輸出，Hover 狀態也可分別設定。若傾斜角過大，請同時確認 overflow: hidden 下是否被裁切。

轉場

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

重點：
轉場控制裝飾帶在懸停時的變化節奏。

影響：
合理節奏可提升互動感，不會打斷閱讀。

調整建議：
先以 200-350ms 為基準，避免過長延遲。

設定項目

• 持續時間 (ms)：控制變化速度，影響互動回饋節奏。
• 延遲時間 (ms)：設定開始前等待時間，調整演出時機。
• 緩動：設定速度曲線，調整動作體感。
• 自訂值：可用 cubic-bezier 自訂過渡曲線。
• 重設：將本區轉場參數回復初始值。

註解：
若裝飾帶與主按鈕都在動，建議統一節奏避免干擾。

註解：
裝飾帶轉場會套用到覆蓋層、圖案、影像、顏色、透明度、變形的 Hover 變化，與按鈕本體轉場彼此獨立。

與背景/縮圖的差異：
裝飾帶在三層視覺（背景 / 縮圖 / 裝飾帶）中可調項目最多，且 變形（Skew） 僅裝飾帶提供。圖案 由背景與裝飾帶提供，縮圖不含圖案。若要做可獨立控制位置與形狀的裝飾層，優先使用裝飾帶或縮圖，而非背景層。