tangmyy/apple-ui-design

Apple UI Design

Apple-inspiriertes, klares, minimales und hochwertiges UI-Design-System.

Wann verwenden

• Entwicklung moderner Oberflächen mit außergewöhnlicher UX
• Erstellung klarer, minimalistischer Ästhetik
• Implementierung von Apple-ähnlicher Eleganz und Animationen
• Gestaltung hochwertiger Benutzererfahrungen
• Überprüfung von UI/UX auf Designqualität

Arbeitsablauf

Schritt 1: Typografie-System anwenden

Verwenden Sie SF Pro Display mit einer geeigneten Hierarchie (Hero, Titel, Fließtext, Bildunterschrift).

Schritt 2: Farbphilosophie anwenden

Verwenden Sie Hell-/Dunkelmodus-Variablen mit angemessenem Kontrast.

Schritt 3: Abstandssystem anwenden

Beachten Sie den 4/8/16/24/48/96px Abstandsrhythmus.

Schritt 4: Checkliste überprüfen

Stellen Sie sicher, dass Touch-Ziele, Kontraste und Animationen den Standards entsprechen.

---

Kernprinzipien

1. Klarheit - Der Inhalt ist König, die UI tritt in den Hintergrund
2. Zurückhaltung - Die UI dient dem Inhalt, konkurriert nie mit ihm
3. Tiefe - Schichtung schafft Hierarchie

Typografie

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

/* Hierarchie */
--text-hero: 600 48px/1.1;      /* Fettgedruckte Aussagen */
--text-title: 600 32px/1.2;     /* Abschnittsüberschriften */
--text-body: 400 17px/1.5;      /* Lesbarer Inhalt */
--text-caption: 400 13px/1.4;   /* Sekundäre Informationen */

Farbphilosophie

/* Hellmodus */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* Dunkelmodus */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

Abstandssystem

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* Abschnittsabstände */

Wichtige Muster

Karten

.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);
}

Buttons

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

Dezente Animationen

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

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

UX-Regeln

Do	Don't
Großzügige Leerräume	Überfüllte Layouts
Eine primäre Aktion	Mehrere konkurrierende CTAs
Progressive Offenlegung	Alles sichtbar
Dezentes Feedback	Ruckartige Animationen
Systemschriftarten	Dekorative Schriftarten

Checkliste

• Touch-Ziele ≥ 44px
• Kontrastverhältnis ≥ 4.5:1
• Maximale Inhaltsbreite ~680px
• Konsistenter Abstandsrhythmus
• Unterstützung des Dunkelmodus
• Flüssige 60fps Animationen