可能與實際介面略有差異。
圖示設定預覽
圖示選擇
- Lucide~1,600
- Tabler~5,900
- Heroicons~650
- Feather~280
- Font Awesome~2,100
- RemixIcon~2,900
- Custom SVGCustom Addition
可能與實際介面略有差異。
圖示選擇預覽
重點：
圖示用來補強文案語意，幫助使用者更快理解動作。
影響：
選對圖示可提升辨識速度，選錯會造成理解負擔。
調整建議：
優先選擇與按鈕文案一致、且辨識度高的圖示。
設定項目
- 圖示選擇
- 線寬（Line Icon）
響應式
註解：
可為不同裝置設定不同圖示，手機端可使用更簡化版本。操作提示：
若按鈕文字已足夠清楚，圖示可維持簡單避免資訊過載。
圖示顏色
可能與實際介面略有差異。
圖示顏色預覽
重點：
圖示顏色需與文字與背景協調，避免突兀。
影響：
顏色過強會搶走文案焦點，過弱則失去輔助效果。
調整建議：
先與文字同色，必要時才切換為強調色。
設定項目
顏色Alpha響應式
註解：
色彩與文字一致時通常最穩定，特殊活動再考慮強調色。
圖示尺寸
可能與實際介面略有差異。
圖示大小預覽
重點：
圖示尺寸決定其在按鈕中的權重。
影響：
尺寸過大會破壞重心，過小則無法發揮引導作用。
調整建議：
以文字大小的0.9-1.2x作為起點微調。
設定項目
- 圖示尺寸值
- 單位（px / em / rem）
響應式
註解：
em單位可跟隨文字大小，跨裝置更容易維持比例。
圖示位置
X 位置
Y 位置
可能與實際介面略有差異。
圖示位置預覽
重點：
位置設定控制圖示與文字的距離與對齊。
影響：
會直接影響閱讀節奏與點擊導向。
調整建議：
先置中，再少量調整 X/Y 避免版面偏移。
設定項目
X 位置Y 位置- 單位（px / % / vw）
響應式
註解：
位置調整後請同時檢查按鈕內邊距，避免擠壓文案。
圖示框架
可能與實際介面略有差異。
圖示框架（基本）預覽
重點：
圖示框架能把圖示獨立成明顯的視覺元素。
影響：
可提升 CTA 強度，但框架過重會搶主文案。
調整建議：
強化框架時，建議同步降低按鈕本體裝飾強度。
設定項目
- 框架 開啟/關閉
- 背景顏色
- 框架尺寸（整體/個別）
- 邊框設定
- 圓角設定
響應式
註解：
框架在一般與懸停狀態可分別設定，適合做互動回饋。操作提示：
若框架已很強烈，圖示動畫建議降低幅度以維持平衡。
轉場
可能與實際介面略有差異。
圖示轉場預覽
重點：
圖示轉場影響滑過時的回饋質感。
影響：
合理的轉場可提升操作感，過度演出會分散注意力。
調整建議：
先以200-350ms為基準，再微調延遲與緩動曲線。
設定項目
持續時間 (ms)延遲時間 (ms)緩動自訂值重設
註解：
圖示轉場與圖示動畫（Animation 設定）是獨立控制。操作提示：
感覺卡頓時，先減少同時變化屬性（尺寸+位置+顏色）。