復古風格支付圖標融合了 20 世紀中葉廣告插畫的溫暖色調、手繪質感線條、做舊紋理與標誌性視覺符號（如信用卡壓紋、簽名欄、磁條、舊式 POS 機按鍵），能為金融科技、電子錢包、複古風品牌注入信任感與情懷價值。本教學將帶你從視覺蒐研、草圖構思、向量建模、質感疊加到規範輸出，完整實作一組復古支付圖標集。

視覺蒐研與風格定義

• 時代錨點：1950–1970 年代美國中西部銀行廣告、信用卡早期宣傳海報、舊式收據單據。
• 色彩詞彙：芥末黃、鏽紅、鼠尾草綠、奶油白、炭黑、銅金屬色。
• 圖形語彙：圓角矩形卡片、壓紋數字、簽名簽條、磁條條碼、凸版印刷邊緣磨損、半調網點。
• 字體選擇：襯線體、手寫腳本體、等寬像素體，搭配字母間距微調。

向量建模標準化流程

1. 基礎幾何骨架

以「圓角矩形工具」繪製標準信用卡比例（寬高比 1.586:1，即 85.6×53.98 mm）。建立「卡片基底」、「晶片區」、「磁條區」、「簽名欄」、「發卡行 Logo 區」、「持卡人資訊區」六大功能區塊，全部為閉合路徑，圖層分組命名。

2. 復古質感疊加體系

在「外觀面板」為卡片基底疊加以下效果（由下而上）：

1. 填色：芥末黃漸層（線性 -45°）
2. 填色：半調網點圖案（色板 → 圖案 → 基礎圖形 → 半調點），疊加模式「正片疊底」，不透明度 15%
3. 填色：紙張紋理圖案（自製或素材庫），疊加模式「疊加」，不透明度 10%
4. 描邊：2 pt 炭黑，內部對齊，疊加模式「正片疊底」
5. 效果：風格化 → 內發光（模式「正片疊底」、顏色炭黑、不透明度 30%、模糊 3 px、邊緣）
6. 效果：風格化 → 外發光（模式「正常」、顏色奶油白、不透明度 20%、模糊 2 px）模擬邊緣磨損高光

整組外觀存為「圖形樣式：復古卡片基底」。

3. 關鍵 UI 元素向量化

• 晶片：圓角矩形 + 8 條等距金色細線（混合工具生成）+ 4 個金色圓點（接腳）。
• 磁條：矩形填充「線性漸層：深灰→黑→深灰」，添加「雜色」效果 5% 模擬磁性顆粒。
• 壓紋數字：輸入等寬字體數字，輪廓化，套用「效果」→「3D」→「擠出與倒角」（深度 1 pt、倒角「經典」、高度 1 pt），展開外觀後填充銅金屬漸層。
• 簽名欄：矩形填充白色，上方疊加「虛線描邊」（2 pt 虛線 4pt/間距 2pt），下方放置手寫簽名路徑（藝術畫筆繪製）。

4. 圖標集擴展與一致性管控

依據相同視覺系統設計：Apple Pay/Google Pay 手機殼模ockup、舊式 POS 機按鍵陣列、收據單據、保險箱、錢幣、存摺等圖標。建立「元件庫.ai」：符號（晶片、磁條、Logo）、色板（全域色彩組）、圖形樣式（卡片基底、按鍵、螢幕）、字體樣式（標題、數字、細則）。所有圖標統一畫板尺寸（如 128×128 pt），統一邊距、統一描邊寬度、統一圓角半徑。

成果展示

專業輸出交付清單

• AI 源檔（含元件庫、圖層結構、命名規範）
• SVG Sprite（每個圖標帶 ``，支援 CSS 變色）
• PNG @1x/@2x/@3x 透明底
• PDF 單頁多圖標版（供印刷校稿）
• Figma/Sketch 元件庫（透過 SVG 匯入轉換）
• 設計規範文檔：色彩值、圓角半徑、描邊寬度、間距系統、做舊效果參數表

避坑提醒

• ❌ 過度做舊導致辨識度下降 → ✅ 關鍵資訊區（卡號、有效期、持卡人）保持高對比度、無紋理干擾
• ❌ 磁條、晶片細節過繁導致小尺寸模糊 → ✅ 針對 16px、24px、32px 三個關鍵尺寸輸出簡化版
• ❌ 色彩模式混亂 → ✅ 全流程 RGB 作業，印刷輸出前統一轉 CMYK 並軟打樣

復古支付圖標設計不只是「套用濾鏡」，而是對歷史視覺語言的深度解碼與向量語言的精準重構。建立標準化元件庫與非破壞性外觀體系，將讓你在面對龐大圖標集需求時，依然能保持風格高度一致、產出效率極致、交付品質專業。