作品展示

本教學以 30 張步驟圖示範計算機 App 圖標從基礎幾何體到材質渲染、細節刻畫、長投影與倒影的完整 UI 設計流程。

設計流程歸納

1. 基礎幾何：圓角矩形主體，圓角半徑符合平台規範（iOS/Android）。
2. 主體材質：漸層疊加模擬機身陽極氧化鋁或塑膠質感，內陰影增強邊緣厚度。
3. 螢幕區域：內縮圓角矩形，深色基底 + 細微漸層，模擬玻璃面板。
4. 按鍵區：網格排列圓角矩形按鍵，每顆按鍵獨立圖層樣式（斜面浮雕凸起、頂部高光、底部投影）。
5. 按鍵字符：白色/淺灰文字，圖層樣式內陰影（凹陷感）或外發光（發光鍵）。
6. 長投影：複製主體群組，填黑、自由變形透視、漸層蒙版淡出、混合模式「正片疊底」低不透明度。
7. 倒影/地面反光：垂直翻轉主體、漸層蒙版、高斯模糊、低不透明度。
8. 輸出規範：各尺寸規格（1024, 512, 180, 120, 87, 80, 58, 40, 29 pt 等）批次導出，檢查像素對齊。

進階技巧

• 使用「智慧物件」封裝按鍵元件，一次修改同步更新所有按鍵。
• 建立「圖層樣式庫」：金屬、塑膠、玻璃、發光鍵等預設，拖放套用。
• 透視網格（View > Show > Perspective Grid）輔助長投影角度精準。
• 色彩管理：sRGB IEC61966-2.1 色彩空間，確保跨裝置顏色一致。