教學目標

建立一套可縮放、支援 Retina、可匯出矢量的 UI 元件庫，包含按鈕三狀態、標籤、開關、個人資料卡，便於後續專案複用與案例展示。

畫布設定

• 600×280px、72dpi、背景 #EDEDED。

核心元件製作

1. 預設按鈕

• 150×45px 圓角矩形（圓度 35%），三點線性漸層 #2685C9 → #268EDE → #F6EA7，描邊 1px #14466B（圖 1）。

圖 1 畫布與預設按鈕

2. 細節疊加

• 雜點量 2 + 內陰影（不透明度 43、距離 3、角度 -90°、大小 5）（圖 2）。

圖 2 雜點與內陰影

3. 內部高光邊

• 複製矩形 → 148×43px、左下移 1px → 無填充、描邊 1px #2B93E3（圖 3）。

圖 3 內部高光邊

4. 文字與群組

• Arvo 字體 20px 白 #FFFFFF 置中 → 複製文字下移 1px 色 #0D2C42 做陰影 → 全選 Ctrl+G 群組命名「預設按鈕」（圖 4-5）。

圖 4 文字設定

圖 5 圖層群組

5. 懸停/按下狀態

• 複製群組改名 → 部份選取工具 (A) 選矩形改漸層最右色 #1A6196（懸停，圖 6）。
• 再複製 → 翻轉漸層（按下，圖 7）。

圖 6 懸停狀態

圖 7 按下狀態

6. 標籤

• 55×28px 矩形 + 鋼筆畫左側三角 → 聯合 → 白底灰邊 #BFBFBF → 左側打孔 8px 圓 → 文字 Arvo 16px #666666（圖 8-9）。

圖 8 標籤形狀聯合

圖 9 標籤細節

7. 開關 ON/OFF

• 72×23px 圓角 100% 矩形，白填充灰邊 #C8C8C8 → 文字左/右對齊。
• 右側 23×23 圓：圓錐漸層 白→灰六色點做金屬感 → 複製置底、黑填無樣式、高斯模糊 2.1、下左移 2px、不透明度 50% 做投影（圖 10-12）。
• OFF 狀態：鏡像翻轉文字與圓、投影向右 4px（圖 13）。

圖 10 開關基礎

圖 11 開關金屬旋鈕

圖 12 開關投影

圖 13 OFF 狀態

8. 個人資料卡

• 200×170px 白卡灰邊 #999999 → 上方 200×82px 藍漸層標題欄（三色 #2685C9/#268EDE/#1F6EA7）+ 內層 2px 白邊 #2B93E3（圖 14-15）。
• 頭像 60×60px → 圓形蒙版切圓 + 2px 白描邊（圖 16）。
• 對齊面板快速置中（圖 17）。
• 簡歷文字區排版（圖 18，內容截斷）。

圖 14 資料卡外框

圖 15 標題欄漸層疊加

圖 16 頭像蒙版

圖 17 對齊面板置中

圖 18 簡歷區(部分)

輸出優勢：全向量結構，任意縮放不失真、支援 Retina、可匯出 SVG/PDF 供開發直接使用，元件化管理極利於設計系統維護。