想自主設計具備真實質感的 App 圖標嗎？本教程演示如何純用形狀工具（圓角矩形/橢圓/矩形）配合圖層樣式（斜面浮雕、漸變疊加、投影、內陰影、內發光、描邊），從零矢量繪製一枚擁有金屬邊框、玻璃面板、發光 Home 鍵、金屬筆槽細節的立體手機圖標。全程無需素材、無需手繪，全靠圖層樣式參數疊加，極適合 UI 設計師掌握「矢量圖標質感表達」核心技法，並可輕鬆擴展至各類產品圖標設計。

最終效果

核心結構拆解（共 8 個關鍵圖層組）

結構層級	形狀工具/參數	關鍵圖層樣式	視覺角色
1. 手機外殼	圓角矩形 256×256px、圓角 45px	斜面浮雕(內部/平滑/深度適中)+漸變疊加(金屬拉絲感)	整體金屬中框
2. 玻璃面板	複製外殼→高度 226px、左右縮 3-4px、去樣式	無（純形狀色塊，色值略深於外殼）	前蓋玻璃基底
3. 玻璃倒角/邊緣	複製面板→再縮 2px	投影(極淺)+內陰影(極淺)	玻璃厚度邊緣高光/陰影
4. 顯示區域	圓角矩形 222×192px、圓角 45px	投影+內陰影+內發光(邊緣微光)+漸變疊加(螢幕漸變)	螢幕顯示區
5. 顯示區內邊框	複製顯示區→上縮 20px、左右縮 5px、去樣式	投影+內陰影(比面板色深)+描邊(1px 深色)	螢幕內邊框/邊緣陰影
6. 明暗交界線與中縫高光	形狀工具繪製明暗分界曲面+10px 圓角矩形中縫	漸變疊加(明暗過渡)+漸變疊加(中縫高亮)	機身側面轉折光影+中縫精密感
7. Home 鍵發光環	橢圓工具畫同心圓（最大圓填充 0%、不透明度 30%）	內發光+外發光(同色系、尺寸適中)	指紋識別環呼吸燈效果
8. 觸控筆/手寫筆	垂直/水平繪製筆身形狀→旋轉 35° 定位	內發光+漸變疊加(筆身金屬感)+描邊(筆尖高光)	配件點綴，豐富場景

關鍵技法詳解

1. 圖層樣式疊加順序與參數微調哲學

• 斜面浮雕是「立體感」之源：樣式→內部斜面、技法→平滑、深度 100-150%、大小匹配物體厚度、角度/高度匹配全局光源。
• 漸變疊加賦予「材質感」：金屬用多色停點線性/徑向漸變模擬拉絲/陽極氧化；玻璃用黑白透明漸變模擬反射條；螢幕用深色系漸變模擬關機狀態。
• 投影/內陰影/內發光/外發光處理「空間關係」：投影落地、內陰影表厚度、內/外發光表發光體積。
• 描邊處理「精密邊緣」：1px 深色描邊模擬 CNC 切割邊緣。

2. 形狀工具矢量優勢：無限縮放、參數可編輯

• 所有結構層均為形狀圖層（矢量），隨時可用直接選擇工具（A）調整錨點、圓角、寬高，無損畫質。
• 圖層樣式為非破壞性特效，雙擊即可微調參數即時預覽。
• 整組圖標可作為智能對象置入不同尺寸畫布，保持銳利。

3. 細節決定成敗：觀察與微調

• 中縫高光：非純白，而是暖白→冷白→暖白三停點漸變，模擬金屬邊緣多面反射。
• Home 鍵同心圓：從大到小逐層遞減不透明度、發光尺寸，形成「向內收斂」的光場深度。
• 筆身漸變角度：旋轉筆體 35° 後，漸變角度同步 -35°，保持光源邏輯自洽。

進階延展：從「單枚圖標」到「設計系統」

• 建立圖層樣式庫：將「金屬中框」「玻璃面板」「螢幕漸變」「發光環」等存為樣式預設，新圖標一鍵套用。
• 參數化模板：將結構層級、圖層命名、顏色變量（主色/副色/高光色）固定為PSD 模板，換色即得新風格系列。
• 導出規範：配合導出為 (Export As)或生成資產，一鍵輸出 @1x/@2x/@3x、iOS/Android/Watch 多尺寸規範圖標包。
• 動態化：導入 After Effects，為 Home 鍵發光環添加脈動動畫，為螢幕區域添加UI 演示動畫，產出動態圖標/原型演示視頻。

避坑指南

圓角矩形縮放後圓角變形？

用直接選擇工具（A）調整單個錨點圓角半徑，或重新繪製目標尺寸形狀，避免自由變換導致圓角非均勻縮放。

圖層樣式疊加順序混亂導致效果錯誤？

遵循「幾何結構層→材質漸變層→空間光影層→邊緣細節層」的自下而上疊加邏輯，每層僅承擔單一視覺職能。

最終效果與實機/設計稿有較大色差？

全程在sRGB 色彩空間、校準顯示器下操作；導出時嵌入 sRGB 配置文件；參考 Apple/Google 官方設計規範中的色值標準。

這套「矢量形狀+圖層樣式參數化疊加」的圖標繪製方法論，不僅能畫手機圖標，同理可構建智能手錶、耳機盒、筆記本電腦、遊戲手柄等任意硬體產品的等距/透視/正視圖標。掌握它，你將擁有「無素材依賴、無限縮放、參數可控、風格可複用」的硬核 UI 圖標產出能力。