UI 圖標設計不僅是畫形狀，更是材質、光影、結構的立體建模邏輯在平面上的投影。本教程以圓形開關為例，從實物結構分析入手，分 8 步完成：畫布建立→按鈕側面/正面形狀繪製→正面質感樣式→側下方質感→凹槽結構→陰影投射→文字與紅色指示燈光效，全程圖層樣式參數化，可直接套用於同類圖標設計。

設計思維：結構拆解 → 圖層分級 → 樣式參數化

將開關拆解為：按鈕側面（圓環）→ 按鈕正面（扁圓）→ 凹槽（內凹圓環）→ 陰影（橢圓）→ 文字/指示燈。每個結構對應獨立圖層/組，樣式參數（倒角浮雕、內發光、投影、漸變疊加）可復用修改。

8 步製作流程

1. 畫布建立

新建 1136×640px 畫布（iPhone 5 尺寸，適配移動端）。

2. 按鈕側面（圖層「按鈕-下」）

橢圓工具畫圓形，填充任意色，圖層樣式稍後添加。

3. 按鈕正面（圖層「按鈕-上」）

新建層，同心圓，路徑選擇工具選中底邊錨點上拖至頂部，形成扁平正面形狀。

4. 正面質感樣式

「按鈕-上」添加：倒角浮雕（內部倒角、平滑、深度 200%、大小 10px）、漸變疊加（線性、角度 90°、淺灰到深灰）、內發光（噪聲 20%）、投影（距離 2px、大小 5px）。

5. 側下方質感

同「按鈕-上」層內添加副路徑/矢量蒙版繪製側下方，套用獨立樣式（顏色疊加深灰、內陰影、倒角浮雕外部）。

6. 凹槽結構（圖層「凹槽」）

稍大同心圓，樣式：倒角浮雕（內部、深度 300%）、內陰影（距離 3px、大小 5px）、顏色疊加深灰，形成按壓凹陷感。

7. 陰影投射

新建層，橢圓選區填黑 → 高斯模糊 10px → 不透明度 30% → 變形壓扁置於按鈕底部，落地感瞬間建立。

8. 文字與指示燈

文字工具輸入「OFF/ON」，字體粗體，圖層樣式：倒角浮雕+投影。指示燈：小圓形選區填紅→外發光（紅色、線性減淡、大小 15px）→ 內發光。

全過程圖層樣式面板圖解（12 圖）

效果預覽

製作步驟

1、建立畫布
新建一個 1136 × 640 像素的畫布。

2、繪製按鈕側面
使用橢圓工具在畫布上勾繪一個圓形，作為開關按鈕的側面，將圖層命名為「按鈕-下」。

3、繪製按鈕正面
建立新圖層，畫一個同樣大小的同心圓，選中底邊錨點向上拖動至頂部錨點位置，形成按鈕正面，命名圖層為「按鈕-上」。

4、編輯按鈕正面
對「按鈕-上」圖層進行編輯，繪製開關按鈕正面的形狀與質感，套用對應的圖層樣式。

5、編輯按鈕側下方
繼續編輯「按鈕-上」，繪製開關按鈕側下方的形狀與質感，套用對應的圖層樣式。

6、繪製凹槽
為按鈕按壓位置建立凹槽。使用同樣方式畫一個稍大的同心圓，命名圖層為「凹槽」，並套用下方所示的圖層樣式。

7、加入陰影
此時已完成約 70% 的製作。接下來加入陰影效果——使用一個稍微瘦長的橢圓形來產生陰影，讓整体視覺更加真實。

8、添加文字與光效
最後在按鈕上加上「OFF」和「ON」字樣，並增加一抹紅色光暈效果，即可完成最終圖標。

這樣就完成了！學會了嗎？趕緊動手試試看吧！