claude sync: 2026-07-24 21:42

2026-07-24 21:42:30 +02:00
parent 8412196ceb
commit ec242205f7
13 changed files with 360 additions and 66 deletions
@@ -0,0 +1,58 @@
+---
+title: "UI-Guideline — ai-control Panel"
+project: ai-control
+created: 2026-07-23T17:15:08Z
+source: ai-control
+description: "Maßstab für den Panel-/Navigator-Umbau: Schriftgrößen, Dichte, 4-px-Spacing, Dialoge statt In-situ, sichtbare Aktionen"
+tags: ["ui", "design", "guideline", "panel"]
+---
+
+# UI-Guideline — ai-control Panel
+
+Grundlage: Recherche 2026-07-23 (Learn UI Design, Fluent 2, WCAG, Baymard, NN/g, Notebook Navigator). Maßstab für den anstehenden UI-Umbau von Panel und Navigator.
+
+## Schrift
+
+- Basisgröße interaktiver Flächen: **13–14 px**; Fließtext im Dokument 14–16 px.
+- Unter 12 px nur Meta-Zeilen (Datum, Pfad, Zähler) — nie für klickbare Labels.
+- Zeilenhöhe 1.4–1.6; Überschriften ~1.3.
+
+## Dichte und Maße
+
+- Interaktive Listenzeilen: Zielhöhe **28–32 px** (Fluent Compact: 32 px; Standard: 40 px).
+- Alles Klickbare mindestens **24×24 px** (WCAG); kleinere Icons bekommen entsprechend Padding/Hit-Area.
+- Dichte entsteht über eine konsequente Spacing-Skala, nicht über kleinere Schrift.
+
+## Spacing
+
+- Durchgängige **4-px-Skala**: 4 / 8 / 12 / 16 / 24. Keine Zwischenwerte (2, 3, 6, 7 px).
+- Innenabstand von Karten/Formularen: 12–16 px; Abstand zwischen Zeilen: 4–8 px.
+
+## Navigator (Wiki-Tab)
+
+- Zwei-Spalten-Muster beibehalten (Ordnerbaum links, flache Liste rechts) — entspricht dem etablierten Notebook-Navigator-Muster.
+- Listenzeilen großzügig: Titel + Meta-/Vorschauzeile, klare Trennung.
+- Tastatur-Navigation: Tab wechselt die Spalte, Pfeiltasten in Baum und Liste.
+- Klick wechselt Inhalt, erhält aber Auswahl und Kontext.
+
+## Dialoge statt In-situ
+
+- Abgeschlossene Aufgaben mit eigener Entscheidung (Anlegen, Umbenennen, Verschieben) laufen in einem **modalen Dialog** mit Platz: Titel, beschriftetes Feld, Bestätigen/Abbrechen, Enter/Escape.
+- In-situ nur für triviale, sofort reversible Einzelfeld-Edits.
+
+## Aktionen sichtbar
+
+- „Hide and hover" ist ein Anti-Pattern: Zeilen-Aktionen nicht erst bei Hover einblenden.
+- Aktionen dauerhaft sichtbar (gedämpft statt versteckt) oder als Kontextmenü pro Zeile.
+
+## Quellen
+
+- https://www.learnui.design/blog/font-size-principles-resources.html
+- https://developerux.com/2025/02/12/typography-in-ux-best-practices-guide/
+- https://fluent2.microsoft.design/layout
+- https://mantlr.com/blog/spacing-system-cheat-sheet
+- https://blog.logrocket.com/ux-design/all-accessible-touch-target-sizes/
+- https://blog.logrocket.com/ux-design/modal-ux-best-practices/
+- https://www.eleken.co/blog-posts/modal-ux
+- https://notebooknavigator.com/
+- https://baymard.com/blog/list-items-hover-and-hit-area