在 Photoshop 中 1:1 重構蘋果經典產品 iPad 介面，是檢驗 UI 設計功力的絕佳練習。本教程採用非破壞性工作流：形狀圖層構建幾何、圖層樣式賦予材質、剪貼蒙版限制範圍、智能對象放置壁紙、圖層組管理結構。涵蓋機身邊框、黑色玻璃面板、屏幕壁紙、Dock 欄倒影圖標、頂部狀態欄、Home 鍵與側邊按鈕等核心元素。

最終效果預覽

第一步：畫布與基礎幾何

新建 624×921px、72dpi 白底文件。背景拉藍白垂直漸變。圓角矩形工具（半徑 22px）繪製機身外框，命名「border」（圖 1）。

第二步：邊框挖空與圖層結構建立

Ctrl+點擊「border」縮略圖載入選區 → 選擇 > 修改 > 收縮 6px → Delete 刪除內部，得邊框環（圖 2）。
魔棒工具點「border」內部得選區，新層填黑命名「Black Glass」。新層矩形工具畫屏幕區域命名「screen」。現有四層：background、border、Black Glass、screen（圖 3）。

第三步：邊框材質——圖層樣式疊加

選中「border」添加圖層樣式：斜面/浮雕、顏色疊加、描邊（圖 4-8）。參數精細調整出金屬邊框的倒角、陽極氧化質感與邊緣高光線。

第四步：黑色玻璃面板漸變

選中「Black Glass」添加「漸變疊加」：線性漸變 #5b5c60 到 #000000（圖 9-10）。

第五步：屏幕壁紙與 Dock 欄

導入壁紙素材置於「screen」上方，Alt+Ctrl+G 建立剪貼蒙版（圖 11）。
前景白，新層「Dock」畫長方形 → 編輯 > 變形 > 扭曲 拖上兩角向中間彎曲（圖 12）。添加「漸變疊加」#454637 到 #fafbfc，不透明度 58%（圖 13-14）。

第六步：圖標與倒影——真實感關鍵

導入 Safari 等圖標置於「Dock」上方調整大小（圖 15）。
複製圖標 → 編輯 > 變換 > 垂直翻轉（圖 16） → 不透明度 21% → 黑透漸變疊加（圖 17） → 刪除溢出屏幕部分（圖 18）。同法做其他 3 個圖標（圖 19）。

第七步：物理按鈕——Home 鍵與側邊鍵

Home 鍵：白圓 + 內部圓角矩形。小圓「漸變疊加」#4c4d51 到 #060606。小圓角矩形加描邊+漸變疊加，不透明度 19%（圖 20）。
側邊按鈕 A/B：圓角矩形半徑 2px 繪製（圖 21）。
側邊按鈕 C（靜音鍵）：圓角矩形形狀圖層模式 → 鋼筆加錨點 → 直接選擇工具移動錨點 3px 形成凹口（圖 22-23）。所有按鈕置於「border」層下方。

核心 UI 重構技巧總結

1. 收縮選區做邊框：比手繪邊框精確、可編輯。
2. 剪貼蒙版放壁紙：自動適配屏幕圓角，換壁紙零成本。
3. 扭曲變形做 Dock 彎度：比手繪路徑快且可隨時調整。
4. 垂直翻轉+漸變蒙版做倒影：標準 UI 倒影製作公式。
5. 形狀圖層+直接選擇工具改錨點：靜音鍵凹口精準可控。
6. 圖層堆疊順序即 Z 軸邏輯：按鈕在邊框下、圖標在 Dock 上、倒影在圖標下。

完成後可嘗試：替換壁紙、調整圖標佈局、添加通知紅點、制作深色模式版本。此非破壞性結構讓所有修改都在分鐘級完成。