從韓風網頁到蘋果水晶按鈕，國內設計圈曾長期陷入「跟風模仿」怪圈。本教程以青花瓷文化基因為核心，示範如何用 Illustrator 矢量工藝提煉傳統美學，打造專屬中國風 UI 組件——不盲目跟隨，只做自己的設計語言。

成品：釉面溫潤、青花筆觸生動、高光層次豐富的陶瓷質感按鈕

設計宣言：拒絕生搬硬套，提煉文化 DNA

「中國人不是沒有創意，只是在浮躁社會下，很多人是『不為』而非『不能』。」

青花瓷按鈕不只是畫幾朵花，而是釉面光學特性（高光/折射/厚度）、青花發色機理（釉下彩/鈷料暈染）、器型結構美學（器壁厚薄/邊緣倒角）的矢量化重構。

核心制作流程

第一階段：器型建模——從圓角矩形到有機器壁

1. 圓角矩形 (175×80px) #D7DDDD，調整圓角弧度
2. Ctrl+Shift+G 釋放圓角屬性 → 普通路徑
3. 鋼筆工具 (P) + 直接選擇工具 (A) 微調錨點控制柄，構建微微鼓脹的器壁曲線（陶瓷燒製後的自然變形）

第二階段：立體光影——濾鏡疊加與高光雕琢

• 內側陰影 ×2 + 投影 ×1：參數精細控制器壁厚度感（濾鏡順序影響疊加效果）
• 明部高光：中間矩形漸變疊加
• 頂底高光：鋼筆繪弧線 + 路徑擦除工具（去除兩端/加粗中間）→ 複製垂直翻轉置頂
• 側面高光：鋼筆勾勒弧面高光形狀 → 水平鏡像複製對稱

第三階段：青花紋飾——字體即圖形，漸變即筆觸

1. 裝飾字體「YY Old English Dingbats」輸入字符 M（或任意矢量花紋）
2. 輪廓漸變：填充類型選「輪廓」，手柄調節模擬毛筆筆鋒粗細、墨色濃淡變化
3. 墨暈效果：複製圖案 → 實心填充 #7c83a7 + 高斯模糊 2px → 置於原圖層下方，模擬鈷料釉下擴散

第四階段：釉面光澤收尾

複製側面高光置頂層，透明度 80%，模擬釉面頂層玻璃質感的鏡面反射。這一層極薄但極關鍵，是「瓷」與「泥」的分水嶺。

可複用組件庫建議

• 將器型、高光層、青花紋飾分別存為圖形樣式/符號/畫筆
• 構建「青花系列」組件庫：按鈕、圖標、分隔線、邊框、背景紋理
• 參數化色相：全局色板控制青花藍/釉面白/胎體土色，一鍵換色系

延伸應用：同邏輯衍生出的陶瓷系列圖標草圖

設計不只是排版工具的操作，更是文化自信的視覺表達。當我們用矢量語言重寫青花瓷的光影邏輯，就是在為數字時代鑄造屬於自己的設計詞彙。