marcus hinz
59 lines
2.6 KiB
Markdown
59 lines
2.6 KiB
Markdown
---
|
||
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
|