UI 圖標設計中，小尺寸按鈕要求「結構清晰、材質飽滿、視覺重心穩」。本教程以一枚黃色水晶圓角矩形按鈕為例，展示如何用「自定義形狀工具 + 圖層樣式疊加 + 高光輔助層」在極短步驟內產出商業可用質感。全程無筆繪操作，純參數化配置，極適合批量生產同風格圖標系列。

最終效果

極速製作流程 (6步完成)

1. 文檔與基礎形狀

• 新建 280×160px，背景淺藍色 (襯托按鈕)
• 新建圖層，圓角矩形工具 (半徑自定) 畫白色圓角矩形 — 基礎幾何

2. 核心材質：圖層樣式三件套

雙擊圖層啟用並配置：

樣式項	作用	典型參數傾向
斜面與浮雕	主體體積感、邊緒厚度	內斜面/平滑/深度 100-200%/方向 上/大小 10-20px/柔化 0-3px
光澤	表面高光反射條	線性淺化/白/不透明度 30-50%/角度 120°/距離 0/大小 10-30px/輪廓「環形」
漸變疊加	黃色水晶本色與通透感	線性/角度 90°/黃→淺黃→深黃 多色標/不透明度 100%/混合模式 正常

3. 頂部高光帶——「柔光白條」技法

• 新建圖層 → 載入形狀 1 選區 (Ctrl+點擊縮圖) → 直線套索工具減去下半部 → 填充白色
• 圖層模式「柔光」，不透明度 50% → 形成自然頂部高光帶，比「漸變疊加」更柔和可控

4. 中央高光條——高斯模糊白條

• 新建圖層 → 矩形選區填白 → 取消選區 → 高斯模糊 4px → 不透明度 85%
• 模擬曲面頂部鏡面高光條，比手繪漸變更標準化

5. 文字與完成

• 輸入白色文字，居中對齊，必要時添加投影/描邊增強可讀性

參數化按鈕生產線設計指南

將教程邏輯抽象為可配置的「按鈕生成器」參數表：

參數類別	可變參數	預設範圍	影響輸出
幾何	畫布尺寸、圓角半徑、長寬比	280×160 / 8-16px / 1.5-2.0	按鈕規格、觸控友好度
基礎材質	斜面深度/大小、光澤大小/輪廓、漸變色標/角度	見上表	質感硬度/濕潤度/厚度感
色彩系統	主色相 (H)、飽和度 (S)、明度範圍 (B)	H: 45°(黃)/210°(藍)/0°(紅) / S: 60-90% / B: 40-90%	品牌色系、狀態色 (正常/懸停/按下/禁用)
高光體系	頂部高光不透明度/寬度、中央高光模糊半徑/不透明度	柔光 30-60% / 高斯 2-6px 80-95%	材質光澤度、曲率感知
文字	字體/字重/大小/顏色/投影	系統 UI 字體 / Medium / 14-16px / 白 / 投影 0 1px 2px rgba(0,0,0,.3)	可讀性、品牌語氣

現代工作流對接

• Figma/Sketch 元件化：將上述參數映射為組件屬性 (Variant Properties)，設計師拖拽即用、屬性面板即改。
• Design Tokens 落地：將色彩、陰影、圓角、漸變定義為 JSON Tokens，工程端直接消費，保證設計與代碼 1:1 還原。
• 批量導出：PS 動作/腳本 + 變量數據集 (CSV) → 一鍵生成 50+ 狀態× 3 尺寸× 2 色系 = 300+ 圖標資產。
• 動態狀態延伸：為「懸停/按下/聚焦/禁用/載入中」設計樣式變體，導出至 Principle/Lottie/Code 實現微交互。

避坑與優化提示

• 小尺寸銳利度：圖層樣式「描邊」1px 內側淺色 + 「內發光」1px 深色，增強邊緒對比，防止縮放模糊。
• 色盲友好：黃色按鈕需確保對比度達 WCAG AA (4.5:1)，必要時加深邊框或文字權重。
• 深色模式適配：準備對應的 Dark Mode 參數集 (背景深、按鈕高亮反轉、高光增強)。
• 智能對象化：將按鈕主體轉為智能對象，內部編輯不影響外部實例，支援非破壞縮放。

這枚小小的黃色按鈕，藏著「幾何構建→材質參數化→高光標準化→文字排版→組件化交付」的完整 UI 設計工程化微縮。掌握其背後的參數邏輯與工作流思維，你就能用 PS 構建出可維護、可擴展、可交付的設計系統基礎組件庫——這才是教程真正的價值所在。