UC 瀏覽器設計團隊實戰分享，詳細記錄「遊戲中心」APP 圖標從風格探索、草圖、外框構建、遊戲手柄主體刻畫、細節質感疊加、最終合成倒影的完整專業流程。教程展示了大廠圖標設計的標準化 SOP：風格定調 → 模擬圖驗證 → 矢量構建 → 樣式疊加 → 像素級微調 → 輸出規範。

風格探索與定調

• 應用化時代背景：PC/Web/移動端全面進入「應用化」春天。
• 風格選擇：平面/立體/寫實/卡通？UC 選擇「較為立體的圖標風格」。
• 模擬圖驗證：先畫幾個簡單模擬圖找感覺，不求精細，定方向。
  
• 草圖定形：鉛筆/圓珠筆手繪草圖，選定滿意形態。
  

圖標拆解：外框 + 遊戲手柄

9 步精細構建流程

1. 外框雙層圓角矩形 + 漸變著色 + 圓角高光 + 1px 高光邊線
   兩個交疊圓角矩形建立立體厚度 → 漸變著色 → 圓角處添加高光過渡 → 明暗分界處加 1px 高光邊線增質感。
   
2. 暗底區域高光「二次混合模式疊加」
   高光區在暗底選區基礎上內縮 1px → 第一次「疊加」模式 → 第二次「濾色」模式 → 基礎上再加 1px 高光亮邊 → 晶瑩剔透感。
   
3. 右下角藍色 GAME 標簽
   45° 線性漸變基礎色 → 同向高光亮邊(同二次混合疊加) → 「GAME」文字(漸變+投影：黑色正片疊底/距離 1px/大小 2px) → 暗底層疊加藍色高光增剔透感。
   
4. 遊戲手柄主體
   鼠標繪製外形 → 簡單線性漸變 → 邊界陰影建立立體感。
   
5. 左側方向盤(凹凸感)
   暗色漸變外側添加反向漸變描邊 → 方向鍵漸變色區隔淡雅(不可過度反差)。
   
6. 右側功能按鈕(凹槽+按鈕)
   先畫四個凹槽 → 內置四按鈕 → 按鈕層樣式「斜面浮雕」簡單高光 → 不同色彩區分 → 按鈕外層加深色值產生細致立體間隔。
   
7. 底部操作桿(立體按鈕邏輯)
   「兩個圖形平移」：圓形複製向上平移 → 斜面浮雕高光 → 附屬小件點綴。
   
8. 手柄裝入外框 + 陰影拉開層次 + 小光點點綴 + 倒影
   外框暗色選區內給手柄四周打陰影 → 添加高光點綴 → 垂直翻轉蒙版漸變做倒影。
   

大廠圖標設計 SOP 總結

階段	關鍵動作	驗收標準
風格定調	競品分析+品牌調性→輸出風格關鍵詞	團隊共識、形成風格指南
模擬驗證	低保真草圖/模擬圖 3-5 組	方向確認、排除風險
矢量構建	形狀圖層+布爾運算+參考線	無鋸齒、可無限縮放、結構清晰
樣式疊加	圖層樣式非破壞構建質感	參數可複用、可批量修改
像素微調	1px 高光邊/邊緣銳化/對齊像素網格	視網膜屏無模糊、邊緒銳利
輸出規範	多尺寸/多狀態/多背景適配導出	符合平台規範、命名規範

結語

圖標設計是細致活，「孰能生巧」。建議設計師平時多練習、多拆解優秀圖標、建立個人樣式庫/筆刷庫/參考庫，才能在實戰中高產出高質量。