tangmyy/apple-ui-design

Apple UI 設計

靈感來自 Apple 的簡潔、極簡、高質感 UI 設計系統。

使用時機

• 打造需要卓越使用者體驗的現代介面
• 建立簡潔、極簡的美學風格
• 實作 Apple 風格的光澤與動畫
• 設計高質感的使用者體驗
• 針對 UI/UX 進行設計品質審查

工作流程

步驟 1：套用字體系統

使用 SF Pro Display，並遵循正確的層級（主標題、標題、內文、圖說）。

步驟 2：套用色彩哲學

使用深淺色模式變數，確保適當的對比度。

步驟 3：套用間距系統

遵循 4/8/16/24/48/96px 的間距節奏。

步驟 4：驗證檢查表

確保觸控目標、對比度和動畫符合標準。

---

核心原則

1. 清晰 - 內容為王，UI 隱於幕後
2. 服從 - UI 服務於內容，絕不搶戲
3. 深度 - 層次感創造層級

字體系統

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* 層級 */
--text-hero: 600 48px/1.1;      /* 大膽的陳述 */
--text-title: 600 32px/1.2;     /* 區塊標題 */
--text-body: 400 17px/1.5;      /* 易讀的內容 */
--text-caption: 400 13px/1.4;   /* 次要資訊 */

色彩哲學

/* 淺色模式 */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* 深色模式 */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

間距系統

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* 區塊間距 */

關鍵模式

卡片

.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

按鈕

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* 藥丸形狀 */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

微妙動畫

/* 微互動 */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* 頁面元素 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

UX 規則

應該做	不應該做
充裕的留白	擁擠的版面
一個主要操作	多個相互競爭的 CTA
漸進式揭露	所有內容一次顯示
微妙的回饋	突兀的動畫
系統字型	裝飾性字型

檢查表

• 觸控目標 ≥ 44px
• 對比度 ≥ 4.5:1
• 最大內容寬度 ~680px
• 一致的間距節奏
• 支援深色模式
• 流暢的 60fps 動畫