最終效果

畫布與背景構建

1. 新建 790×400 px (或適配目標設備尺寸)。
2. 背景填 #1c46e3 (深藍) → 添加漸變疊加：徑向，#1c46e3 → #0a1f6b，中心高亮，邊緣深邃，建立空間纵深。

界面底托：毛玻璃質感核心

1. 圓角矩形工具：250×90 px，圓角 2px，白色 #FFFFFF。
2. 圖層樣式：
   • 描邊：1px, 內部, #FFFFFF 20% 不透明度。
   • 內陰影：正片疊底, #000000, 15%, 距離 0, 大小 3px (內凹感)。
   • 內發光：螢幕, #FFFFFF, 10%, 大小 5px (邊緣微光)。
   • 倒角與浮雕：外部倒角, 平滑, 深度 100%, 方向上, 大小 3px, 光澤輪廓環形, 高光螢幕 30%, 陰影正片疊底 20% (微立體)。
   • 顏色疊加：正常, #FFFFFF, 10% (基底通透白)。

底托增強：呼吸光暈與陰影

1. 新建圖層 → 橢圓選區工具拉橢圓選區 (寬≈底托 80%, 高≈20px) → 羽化 50px → Alt+Delete 填黑。
2. Ctrl+T 壓扁 → 加蒙版 → 黑筆刷擦除中間保留兩側 → 模式柔光，形成底部「呼吸光暈」。

Loading 條：漸變色條 + 進度蒙版

1. 矩形工具畫 288×2px 色條 → 漸變疊加：線性，左 #FF6B6B → 中 #FFD93D → 右 #6BCB77 (紅黃綠三色流動感)。
2. 下方畫 1px 黑線 (#000000 20% 不透明度) 做分隔線。
3. 加圖層蒙版 → 黑白漸變從左向右控制顯示進度 (示例 36%)。

細節繪製：12px 級別的精細控制

• 直線工具 (1px, #FFFFFF 15%) 繪製分隔線、邊框高光、區塊邊界。
• 矩形選區 + Alt+Delete 填充微小色塊 (指示燈、狀態點)。
• 所有細節圖層歸類組「Details」，便於整體顯隱與不透明度控制。

文字與狀態

1. 文字圖層：字體 PingFang SC / San Francisco, 14px, 白色, 字重 Medium。
2. 文字添加描邊 (1px, #000000 30%) 增強可讀性。
3. Loading 文字同步更新進度百分比。

Loading 動態光效：關鍵幀預演

1. 新建圖層組「Loading_Animation」。
2. 選區工具/鉛筆工具 (1px) 在色條前沿繪製：高光點、光暈橢圓、粒子散射。
3. 每幀微調位置/大小/不透明度，形成「光流向前推進」動態序列 (約 8-12 幀循環)。
4. 導出時可在 PS 時間軸製作幀動畫，或交付前端由 CSS/JS 實現 (提供關鍵幀 PNG 序列)。

圖標與品牌標識

• 選用線性風格/極簡風格圖標集 (如 Feather Icons, Material Icons Outline)，保持風格一致。
• 圖標顏色統一為 #FFFFFF 80% 不透明度，懸停/點擊態對應變色。
• 右下角添加設計師簽名/版本號，模式疊加 10%。

最終潤色：光效素材疊加

1. 下載光效素材 (如 ZCOOL 共享的光斑/光暈/光束 PNG)。
2. 置入頂層，模式螢幕/線性減淡，Ctrl+T 縮放定位，蒙版擦除多餘。
3. 不透明度 20-40%，點綴關鍵視覺焦點 (Logo、Loading 條端點、品牌標識)。

設計師複盤：細節決定檔次

「初級設計師堆疊特效，高級設計師控制細節。」本案所有 1px 線條、2px 圓角、5px 羽化、10% 不透明度、36% 進度、8 幀動畫，每一個數值都是經過推敲的決策。建立自己的『UI 細節規範表』 (間距、圓角、描邊、陰影、動畫時長、缓動曲線)，是從執行者進化為設計系統建設者的必經之路。」