Files

T

karim ca859c4aa4 Browser-BIM (cad): semantisches Modell, abgeleitete 2D/3D-Sichten, Zeichenwerkzeuge

Standalone-Browser-Port von DOSSIER. Enthaelt das semantische Modell mit
Plan-/3D-Ableitung, Zeichen- und Editierwerkzeuge, Rhino-artiges Befehlssystem,
dockbares Panel-System, Resource-Manager, DXF/.lin/.pat-Import, i18n (de/en)
sowie Projektdokumentation und Probe-Harness.

2026-06-30 20:52:27 +02:00

34 KiB

Raw Blame History

UX/UI-Patterns moderner Browser-CAD/BIM-Tools — Research & Leitplanken

Recherche für unser Browser-BIM (React + TS + Three.js, DOSSIER-Port, Wohnbau, CH/SIA-Kontext). Ziel: konkrete, übernehmbare Interaktions- und UI-Muster. Stand: 2026-06-29.

Untersucht: Arcol, Snaptrude, TestFit, Onshape (Browser-CAD), Vectorworks (Resource/Navigation-Modell), Figma (Canvas-Interaktion, Inspector). Querschnitt: Snapping/Inferencing, Grip-Editing, perceived performance, Command-Palette, Onboarding.

Jeder externe Claim ist mit Quelle verlinkt. Am Ende: „Leitplanken für unsere UI" — priorisierte Empfehlungen.

0. Kurzfazit (TL;DR)

Die ganze Klasse moderner Browser-CAD/BIM-Tools konvergiert auf ein gemeinsames Set von Mustern, das wir fast 1:1 übernehmen sollten:

Ein Modell, viele synchrone Sichten (2D-Plan ⇄ 3D ⇄ Daten/Sheets), Änderung in einer Sicht propagiert sofort in alle anderen. (Arcol, Snaptrude)
Kontextuelle UI statt voller Werkzeugleisten: Buttons/Felder erscheinen nur, wenn die aktuelle Auswahl sie erlaubt. (Arcol, Onshape, Figma)
Drei-Zonen-Layout: links Navigator/Layer-Baum, Mitte Canvas + schwebende Tool-Palette, rechts Inspector. (Figma, Vectorworks, Onshape)
Aggressives Snapping/Inferencing mit Live-Glyphen + Modifier zum Unterdrücken. (Onshape) — für Maus-im-Browser unverzichtbar.
Direkte Manipulation per Grips statt Dialogen. (Figma, DOSSIER-Backlog)
Perceived performance über Skeletons, optimistic UI und gescopte Ladezustände — im Browser-3D-Kontext ein Differenzierungs-Hebel.
Command-Palette (Ctrl/Cmd-K) als Discovery- und Speed-Layer.
Onboarding via „learn by doing" an einem mitgelieferten Sample-Projekt + progressive disclosure.

Unsere bestehende Architektur (semantisches Modell als Single Source of Truth, abgeleitete Sichten, Vectorworks-Terminologie) ist exakt der richtige Unterbau für diese Muster — die meiste Arbeit liegt in der UI-Schicht, nicht im Datenmodell.

1. Gesamtlayout & Navigator-/Layer-Panels

1.1 Was die Tools machen

Figma strukturiert die Fläche in vier Zonen: eine Toolbar, zwei Panels und einen scrollbaren Canvas. Links das Navigation-Panel mit Layern und Pages, rechts das Properties-Panel; der Layer-Baum „enthält und organisiert alle Elemente auf dem Canvas … und zeigt, wie Elemente verbunden sind" (Figma: left sidebar, Figma: Interface).

Vectorworks trennt sauber zwei Konzepte, die für uns 1:1 relevant sind:

Die Navigation Palette gibt Zugriff auf Classes, Design Layers, Sheet Layers, Viewports, Saved Views, References — jeweils als eigener Tab mit Liste. Sichtbarkeit wird per Klick in einer Visibility-Spalte gesetzt; Doppelklick aktiviert einen Layer/eine Class. Die Zeichenfläche bleibt nutzbar, während die Palette offen ist (VW Navigation Palette).
Paletten sind andockbar/ein-/ausblendbar pro Workspace (VW Palettes & Tool Sets).

Arcol baut beim Modellieren einen Model Tree im Menü auf — pro BIM-Komponente wächst der Baum mit (AEC Magazine: Arcol BIM in browser).

Onshape zeigt links den Feature-/Assembly-Baum (parametrische Historie: Sketches, Features, Mates) — die Bauhistorie ist die primäre Navigation (Onshape UI Basics).

1.2 Übernahme für uns

Unser Dokumentmodell hat zwei unabhängige Achsen (siehe ROADMAP §2c): Zeichnungsebenen (Geschosse + Schnitte/Ansichten) und Ebenen (Grafik-Kategorien-Baum 00 Raster … 80 Plangrafik). Das mappt fast wörtlich auf das Vectorworks-Navigations-Modell:

Linke Sidebar, getabbt wie die VW-Navigation-Palette:
- Tab „Geschosse / Ansichten" (= unsere Zeichnungsebenen): EG/1OG/…, Schnitte, Ansichten. Mit Visibility-Toggle, Lock, und Doppelklick = aktiv setzen (welches Geschoss editiert wird).
- Tab „Ebenen" (= Grafik-Kategorien-Baum, in jedem Geschoss gleich): Baum mit Code, Name, Farb-Swatch, Linienstärke, Visibility, Hatch. Pro Ansicht schaltbar (das ist genau VWs „Sichtbarkeit pro Viewport/Saved View").
- Tab „BIM-Tree / Elemente" (aus DOSSIER-Backlog §11: Element-Übersicht Geschoss→Kind→Element, Suche, Shift-Klick = Zoom). Das ist unser Pendant zu Arcols Model Tree + Onshapes Feature-Baum.
Visibility-Spalte als Erstklass-Interaktion (VW-Muster): Auge-Icon je Zeile, Klick togglet sofort, kein Dialog. (Wir haben bereits EyeIcon.tsx — das ist die Keimzelle.)
Wichtig: Geschoss wird im 3D oder Plan betrachtet, keine getrennten Daten — der View-Umschalter (siehe §2) gehört in die Geschoss-Auswahl, nicht in separate Dokumente.

Anti-Pattern vermeiden: Vectorworks selbst leidet unter Paletten-Wildwuchs (viele frei schwebende Fenster). Für ein fokussiertes Wohnbau-Tool: feste 3-Zonen-Shell (links Navigator, rechts Inspector), nicht N frei schwebende Palettenfenster. Figmas Striktheit schlägt VWs Flexibilität für unsere Zielgruppe (Architekt:innen, die schnell ein EFH zeichnen wollen).

2. 3D ⇄ Plan-View-Umschaltung (das Herzstück)

2.1 Was die Tools machen

Snaptrude: Nutzer arbeiten in 2D und 3D gleichzeitig; Änderung in einer Sicht spiegelt sich automatisch in der anderen. Objekte sind nach Geschossen klassifiziert, was es erlaubt, „3D-Geometrie zu zeichnen, während man in einer 2D-Grundriss-Ansicht arbeitet". Push-an-einer-Fläche „fühlt sich an wie eine Linie ziehen", berechnet aber sofort Flächen/BIM-Daten neu (ArchDaily: Snaptrude, Snaptrude).
Arcol: „Every view is 3D in Arcol" — und Boards (Präsentations-Layouts) sind live-synced: ändert sich das Gebäude, aktualisieren sich die Layouts automatisch (kein statischer PDF-Export) (AEC Magazine: Arcol BIM 2.0).
TestFit: explizites Expand/Collapse von Optionen — man klappt Varianten auf zum Vergleichen und wieder zu, um sich aufs Detail-Editieren im Canvas zu konzentrieren („smoother flow between setting up a site, reviewing options, and refining a design") (TestFit 5.19).

2.2 Übernahme für uns

Das ist genau unsere Kern-Architektur (ROADMAP §2c: „Ansichtstyp = Kamera- Projektion + optionaler Schnitt"). Konkrete UI-Muster:

View-Switcher als segmented control direkt am Canvas (oben links oder oben mittig): 3D | Grundriss | Schnitt | Ansicht. Plan-View = orthogonale Top-Kamera + Clipping-Ebene auf okff + schnitthöhe (steht bereits so im Modell).
Kein Moduswechsel der Daten, nur der Kamera + Schnitt — visuell als weicher Übergang (Kamera-Animation) kommunizieren, damit Nutzer Orientierung behalten (Snaptrude/Arcol-Gefühl: „dieselbe Sache aus anderem Winkel").
Optional, stark differenzierend: Split-View (3D links, Plan rechts) wie Snaptrudes „2D + 3D simultan". Da unsere Sichten ohnehin reaktiv aus einem Modell abgeleitet werden (Zustand-Store → SVG-Plan + Three-Scene), ist Split-View technisch billig und ein Wow-Moment im Onboarding.
Kamera-Presets (aus DOSSIER-Backlog): Kardinal N/O/S/W, Iso-Oktanten, Norden-Rotation (CH/Swisstopo-Georeferenz) — als kleine Würfel-/Kompass-Gizmo oben rechts im 3D (ViewCube-Muster, bekannt aus Onshape/CAD allgemein (Onshape UI Basics)).
Drawing Layers (Schnitte/Ansichten) sind „Saved Views": Auswahl in der linken Sidebar = Kamera + Schnitt + Maßstab + Layer-Kombination springt an (VW „Saved Views" / DOSSIER „Ausschnitte"). Das ersetzt Ordner-Wildwuchs bei 50+ Ansichten.

3. Zeichnen & Editieren: Snapping, Inferencing, Grips, Tool-Paletten

3.1 Snapping / Inferencing — das wichtigste Detail im Browser

Onshape ist hier die Referenz (sehr konkret dokumentiert, Onshape Automatic Inferencing):

Inference-Typen: horizontal, vertikal, midpoint, parallel, coincident, Ausrichtung zum Origin/zu anderen Entities, Tangente, Perpendikular.
Visuelles Feedback:
- gelbe Highlights auf Vertices/Mittelpunkten beim Hovern,
- orange gestrichelte Linie zeigt eine vorgeschlagene H/V-Ausrichtung,
- orange Highlight verwandter Geometrie beim Ziehen (relationales Feedback).
Steuerung: Linksklick akzeptiert die vorgeschlagene Bedingung; Shift gedrückt halten unterdrückt Inferencing temporär (loslassen = wieder an).
„Wake-up"-Inferences: kurzes Verweilen über einer Geometrie „weckt" deren Bezugslinien (z. B. erst Mittelpunkt antippen, dann woanders zeichnen → bekommt Ausrichtung zu diesem Mittelpunkt).
Post-hoc: vorhandene Geometrie ziehen triggert erneut Inferencing (Center eines Kreises vertikal zum Origin ziehen → fügt automatisch vertikale Constraint).

Constraint-Sichtbarkeit: Constraint-Icons sind farbcodiert (blau = externe/Referenz, weiß = intern) und ein-/ausblendbar (Onshape Working with Constraints).

3.2 Übernahme für uns (Snapping)

Für ein Maus-bedientes Browser-Tool ist gutes Snapping der Unterschied zwischen „Spielzeug" und „Werkzeug". Konkret:

Snap-Targets (Wohnbau-relevant): Wand-Endpunkte/Achsen, Wand-Mittelpunkte, Rechtwinklig/Parallel zu bestehender Wand, Raster (Achsraster 00 Raster), Öffnungs-Achsen, vorhandene 2D-Linien-Endpunkte, Schnittpunkte.
Feedback exakt wie Onshape übernehmen: Snap-Glyph am Cursor (● Endpunkt, △ Mitte, ⟂ rechtwinklig), gestrichelte Hilfslinie für Achsen-Alignment, Hover-Highlight des Snap-Ziels.
Modifier: Shift unterdrückt Snapping (Onshape-Konvention) — Nutzer erwarten das bereits aus anderen Tools. Zusätzlich Ortho-Modus (z. B. Shift für 0/45/90° beim Linienziehen — Figma-Konvention) sauber davon trennen oder per Toggle.
Live-Maßeingabe beim Zeichnen (CAD-Standard, auch Onshape): während des Ziehens Länge/Winkel tippbar (Tab zwischen Feldern). Das ersetzt nachträgliches Dimensionieren und ist für Architekt:innen Pflicht.
Wir brauchen kein volles Constraint-Solver-System wie Onshape (mechanisches parametrisches CAD). BIM-Wände sind achs-basiert; Inferencing beim Setzen genügt, persistente geometrische Constraints sind Overkill für Wohnbau.

3.3 Grip-Editing / direkte Manipulation

Figma: Auswahl zeigt Bounding-Box mit Resize-Handles; ziehen manipuliert direkt; Smart-Guides/Maße erscheinen relativ zu Nachbarn beim Bewegen (Figma right sidebar).
Snaptrude: Push/Pull an Flächen als primäre 3D-Edit-Geste (ArchDaily).
DOSSIER-Backlog (§11) listet Grip-Editing (Wand-Endpunkte, Schnitt-Symbole im Plan) explizit als Aufwand L, Phase 3–4 — und das 9-Punkt- Objekt-Info (lesen + verschieben/skalieren/rotieren direkt).

Übernahme: Grips sind der wichtigste „pro feel"-Hebel.

Wand-Endpunkt-Grips im Plan und 3D, mit Snapping (s. o.) und Live-Maß.
Öffnungs-Grips (Position entlang Wand, Breite) — Host-Beziehung bleibt erhalten.
Schnittlinien-Grips im Plan (Schnittlinie ziehen → Schnitt-Ansicht re-deriviert) — das ist Grip-Editing über die Sicht-Grenze hinweg, ein starkes Differenzierungsmerkmal.
Selektion → bounding handles (Figma-Muster) für 2D-Plangrafik (Linien, Rechtecke, Text).

3.4 Tool-Palette & kontextuelle Werkzeuge

Kontextuelle UI ist das durchgehende Muster:

Arcol: „buttons appear only when they can be used" — Loft/Sweep erscheinen bei Auswahl zweier Sketches, Boolean bei zwei Extrusions (AEC: Arcol sneak peek).
Onshape: Sketch-Toolbar erscheint beim Betreten des Sketch-Modus; Tools in Gruppen (vertikale Trennlinien), Dropdown-Pfeile für Varianten; Dialoge mit blau hinterlegtem Feld, das eine Auswahl im Graphics-Bereich verlangt (Onshape sketch toolbar, Onshape Constraints).
Figma: schmale Bottom-/Top-Toolbar mit den Kern-Tools; alles Weitere kontextuell rechts.

Übernahme:

Schlanke Tool-Palette (Figma-artig), gruppiert nach unserer Domäne: Wand · Tür/Fenster · Decke · Treppe · Dach · Raum (BIM) und Linie · Polylinie · Rechteck · Kreis · Bogen · Text · Bemaßung (2D auf 80 Plangrafik).
Modus-bewusste Tools: im Grundriss andere Defaults als im 3D; im Schnitt/Ansicht nur Annotation/2D-Tools.
Contextual action bar bei Auswahl (Arcol-Muster): selektiere eine Wand → schwebende Mini-Toolbar „Tür einsetzen / Fenster / Wandtyp / verschneiden". Selektiere zwei Wände → „verschneiden / verlängern".
Aktives Tool sticky + ESC bricht ab, Leertaste = Pan, Scroll = Zoom (Figma/CAD-Konventionen — Nutzer bringen Muskelgedächtnis mit).
LoD-bewusste Tool-/Stil-UI (DOSSIER-Backlog: zeigt nur passende Controls je Geometrie-Typ) — keine Füll-Optionen bei 3D-Auswahl. Deckt sich mit Figmas „controls appear based on layer type".

4. Property-/Inspector-Panel

4.1 Was die Tools machen

Figma — rechte Sidebar (für uns das Vorbild, Figma right sidebar):

Tabs Design / Prototype (bei Edit), Inspect / Properties (bei View-only).
Kategorien: Alignment/Rotation/Position → Dimensions → Constraints/Layout → Appearance (Fill, Stroke, Effects) → Export.
Controls erscheinen je Layer-Typ (kontextuell).
Dev-Mode/Inspect liefert konkrete Werte + Abstände zwischen Objekten + Code.

Arcol — rechtes Panel zeigt Gebäude-Metriken kontextuell: Geschossfläche, Anzahl Geschosse, GFZ/FAR, Unit-Count, Standortfläche, Kostenschätzung (Arcol BIM 2.0).

TestFit — ein zentrales Parameter-Panel: „alle Schlüsselparameter an einem Ort" (Unit-Counts, Parkplatz-Ziele, Gebäudegrößen-Limits) → sofortige Wirkung auf generierte Optionen (TestFit 5.19).

Onshape — Feature-Dialoge: Erstellen/Editieren über Dialoge mit Pflicht- Selektionsfeldern (blau) (Onshape UI Basics).

4.2 Übernahme für uns

Rechter Inspector, kontextuell nach Element-Typ (Figma-Muster):
- Wand → Wandtyp (→ WallType-Bibliothek), Referenzlage mid/left/right (DOSSIER-Backlog), Höhe, Achs-Endpunkte (9-Punkt/Maße), Stil-Overrides.
- Tür/Fenster → Breite/Höhe, Brüstung, Schwenkbogen/Anschlag, Detailgrad, Symbol.
- Decke/Slab → SlabType, UK/OK-Override, Aussparungen.
- Raum → SIA-416-Kategorie (HNF/NNF/VF/FF/GF/AGF), Fläche (read-only, berechnet), Stempel-Felder.
- 2D-Element → Linienstil (→ Line Manager), Hatch (→ Hatch Manager), Farbe.
Sektionen kollabierbar (Figma) — Wohnbau-Inspector kann lang werden; Default-Sektionen offen, Fortgeschrittenes (Overrides) zugeklappt (= progressive disclosure, s. §7).
Mixed-value-Handling bei Mehrfachauswahl (Figma): bei Mehrfachauswahl abweichende Werte als „Mixed/—" zeigen, gemeinsames Editieren erlauben. Wichtig z. B. „alle EG-Wände auf Wandtyp X".
Live-Metriken-Block (Arcol-Muster) — selbst im Wohnbau wertvoll: Bruttogeschossfläche, SIA-416-Bilanz, Raumzahl, Volumen. Im Inspector wenn nichts selektiert ist = „Projekt-Übersicht" (vgl. Figmas Canvas-Level-Optionen bei leerer Auswahl).
Read-only-Felder klar markieren (berechnete Flächen/Volumen) vs. editierbar.

5. Resource-Manager (Bibliotheken)

5.1 Was Vectorworks macht — unser direktes Vorbild

Der Resource Manager ist „ein zentraler Ort für Assets" (Symbole, Linientypen, Texturen, Materialien …) (VW Resource Manager):

Zwei-/Drei-Pane-Modell: File-Browser (offene Dateien, Favoriten, VW-Libraries, User-/Workgroup-Libraries) → Resource-Viewer (Ressourcen der gewählten Datei) → optional Preview/Metadaten (VW File browser pane, VW Resource viewer pane).
Organisation mehrdimensional: nach Quelle, nach Typ (Dropdown-Filter), nach Ordnerstruktur.
Ansichten: Thumbnails / List / Thumbnails-List; Suchfeld mit Filtern.
Resource Selector: dieselbe Bibliothek erscheint in Dialogen und zeigt dort nur kontextuell passende Ressourcen.

5.2 Übernahme für uns

Unsere ROADMAP §2d definiert bereits Line Manager / Hatch Manager / Component Manager, mit Verweis-per-id-Architektur (Components → Hatches → LineStyles). Das Vectorworks-Modell passt perfekt:

Ein gemeinsames Resource-Browser-Pattern für alle Bibliotheken (Linienstile, Schraffuren, Components/Baustoffe, später Wand-/Öffnungs-Stil-Kataloge, Material-PBR, Raumstempel-Layouts). Eine wiederverwendbare React-Komponente, parametrisiert nach Ressourcentyp.
Zwei Erscheinungsformen (wie VW):
1. Manager-Ansicht (großes Panel/Modal) zum Anlegen/Editieren/Duplizieren.
2. Inline-Resource-Selector im Inspector — beim Setzen eines Wandtyps/Hatch öffnet sich ein kompakter Picker mit Thumbnails, gefiltert auf den passenden Typ. (Figma macht das analog mit „Styles/Variables".)
Thumbnails sind im CAD-Kontext kritisch: Hatch-Vorschau, Component- Schichtaufbau, Linienstil-Strich als gerenderte Mini-Previews.
Zentrale Änderung propagiert (unsere id-Referenz-Architektur): Component-Farbe ändern → alle Wände mit diesem Component aktualisieren live. Das ist Arcols „single source of truth" auf Ressourcen-Ebene.
Cross-Projekt-Presets/Favoriten (DOSSIER-Backlog, LocalStorage; VW-Favoriten): „einmal speichern, überall nutzen".

6. Perceived Performance (gefühlte Geschwindigkeit)

Browser-3D + WASM-Geometrie (web-ifc, OpenCascade) + HLR-Projektion = echte Latenz an mehreren Stellen. Gefühlte Performance ist hier ein Differenzierungs-Hebel gegenüber schwerfälligem Revit/ArchiCAD.

6.1 Belegte Muster

Skeleton-Screens lassen Apps 20–30 % schneller wirken als Spinner bei identischer realer Ladezeit (LogRocket: skeleton screens, UI Deploy).
Indikator zur Situation passen: Spinner für kurze Waits, Skeleton für Content, Progress-Bar für messbare Operationen, optimistic UI für „instant-feeling" Aktionen (Onething: skeleton vs spinner).
Optimistic UI: UI sofort aktualisieren, Server-Bestätigung abwarten, nur bei Fehler zurückrollen — ideal für häufige, risikoarme Aktionen (Smart Interface Design Patterns).
Verzögerung vor Indikator (100–200 ms): schließt die Operation vorher ab, gar kein Indikator → kein Flackern (Onething).
Gescopte Ladezustände (React Suspense / Next loading.tsx): nur der betroffene Bereich lädt, der Rest bleibt interaktiv; aria-busy, Live-Regions, reduced-motion respektieren (LogRocket).

6.2 Übernahme für uns (konkret)

Optimistic Model-Edits: Geometrie-Mutation (Wand ziehen, Tür setzen) sofort im Zustand-Store + 3D anzeigen; schwere Booleans/HLR im Web Worker (Comlink, bereits geplant) nachziehen. Wand erscheint sofort, die exakte verschnittene Öffnung/Schnittlinie „schärft nach". UI bleibt flüssig.
Progressive Plan-Generierung: SVG-Grundriss zuerst grob (Achsen/Linien), Schraffuren/Symbole nachladen — Skeleton/„low-detail first" statt Spinner.
HLR-Schnitte (Risiko #4): Worker + Caching (ROADMAP §6). UI: Skeleton der Schnitt-Ansicht + „berechne verdeckte Kanten…" mit Progress, restliche App bleibt nutzbar (gescopter Ladezustand).
Delay-then-show für alle Worker-Tasks (150 ms-Schwelle), sonst Flicker beim schnellen Editieren.
Three.js-Disziplin: stabile 60 fps beim Orbit/Pan ist selbst „perceived performance" — instanziertes Rendering, Frustum-Culling, LoD für ferne Geometrie (deckt sich mit ROADMAP-Phase-7-Performance-Härtung). Lieber 60 fps bei grober Geometrie als ruckelnde Präzision.
Auto-Save-Status klar, unaufdringlich kommunizieren („Gespeichert"/„Speichern…"), optimistic — nie blockierend (Figma-Muster).

7. Onboarding & Discoverability

7.1 Belegte Muster

Progressive Disclosure: zuerst nur Essenzielles zeigen, Komplexität schrittweise enthüllen — reduziert kognitive Last; drei Typen: step-by-step, conditional, contextual (IxDF: Progressive Disclosure, UXPin).
„Learn by doing" an Sample-Dokument: Grammarly startet Nutzer mit einem Beispiel-Dokument mit Fehlern; Hotspots/Tooltips führen durch Features (Userpilot: onboarding examples).
Stufenweises Aufdecken fortgeschrittener Features (Asana: erst Projekt anlegen, später Dependencies/Kanban/Gantt) (Userpilot: progressive disclosure).
Command-Palette als Discovery-Layer: durchsuchbare Befehlsliste hilft, Features zu entdecken — „incredible effect on exploration and feature discoverability", besonders für neue/seltene Nutzer (Mobbin: command palette, Untitled UI: command menus).
Arcol wirbt explizit mit „low barrier to entry, gentle learning curve … clean, intuitive, requires minimal training" (AEC: Arcol BIM 2.0).

7.2 Übernahme für uns

Mitgeliefertes Sample-Projekt (wir haben bereits sampleProject.ts!) als Onboarding-Bühne: ein kleines EFH, fertig modelliert. Nutzer manipuliert echtes Modell statt leerem Canvas (Grammarly-Muster). Erste Geste: „zieh diese Wand" → sieht 3D + Plan live mitlaufen (unser Kern-Wow).
Progressive Disclosure im Inspector & Tool-Palette: Default zeigt Wohnbau-Essenz (Wand/Tür/Fenster/Decke/Raum). Fortgeschrittenes (Prioritäts- Verschneidung, Overrides, Detailgrade, Section-Styles) zugeklappt / hinter „Erweitert". Das passt zu unserem radikalen Wohnbau-Fokus.
Contextual coachmarks statt langem Tutorial: beim ersten Selektieren einer Wand ein kleiner Tooltip „Endpunkt ziehen zum Verlängern, Doppelklick für Wandtyp".
Command-Palette (Ctrl/Cmd-K) — siehe §8 — doppelt als Onboarding: alle Werkzeuge/Befehle durchsuchbar = lebende Feature-Liste.
Tastatur-Kürzel sichtbar machen (in Tooltips, in der Palette) — schult beiläufig pro Workflows.

8. Command-Palette & Tastatur

8.1 Belegte Muster

Ctrl/Cmd-K ist die De-facto-Konvention (Linear, Figma [Cmd-P], Notion, Vercel, Raycast, Slack, Superhuman); VS Code nutzt Cmd-Shift-P (Mobbin, Superhuman: command palette).
Zwei Haupt-Use-Cases: Navigation/Suche und Shortcuts/Quick Actions (Outdraw Academy: command palette).
Trigger kann sichtbar (Button/Suchleiste) oder nur per Shortcut sein — für Discovery besser auch sichtbar (Mobbin).

8.2 Übernahme für uns

Cmd/Ctrl-K-Palette für: Werkzeug aktivieren („Wand", „Tür"), Ansicht springen („Grundriss EG", „Schnitt A-A"), Ressource öffnen („Hatch Manager"), globale Aktionen („Norden rotieren", „PDF exportieren", „SIA-Bilanz").
Sichtbarer Trigger (Such-/Befehlsfeld in der Top-Bar) für Entdeckung + Shortcut für Speed.
Konsistente, dokumentierte Shortcuts (Figma-Disziplin): W=Wand, T=Tür, L=Linie, Space=Pan, Scroll=Zoom, Shift=Snap aus, Esc=Abbrechen, G=Grundriss-Toggle. In Tooltips + Palette anzeigen.

9. Leitplanken für unsere UI (priorisierte Empfehlungen)

Sortiert nach Hebel × Aufwand. „P#" = grobe Phasen-Zuordnung zur ROADMAP.

A. Sofort / Fundament (Phase 0–1) — billig, prägt alles

Feste 3-Zonen-Shell. Links Navigator (Tabs: Geschosse/Ansichten · Ebenen · BIM-Tree, je mit Visibility-Toggle wie VW Navigation Palette). Mitte Canvas mit schwebender Tool-Palette + View-Switcher. Rechts Inspector (kontextuell). Keine frei schwebenden Palettenfenster (Anti-VW-Wildwuchs).
View-Switcher als segmented control 3D | Grundriss | Schnitt | Ansicht direkt am Canvas; weiche Kamera-Übergänge; eine Datenquelle (kein Daten- Moduswechsel). Nutzt unsere bestehende „abgeleitete Sichten"-Architektur.
Visibility/Lock pro Zeile als Erstklass-Interaktion (1 Klick, kein Dialog) — EyeIcon.tsx ausbauen.
Kontextueller Inspector: Controls nur für den selektierten Element-Typ (Figma/Arcol); berechnete Felder read-only markiert; Sektionen kollabierbar.
Tastatur-Grundlagen + Konventionen festnageln: Space=Pan, Scroll=Zoom, Esc=Abbrechen, Shift=Snap aus. Früh festlegen → Muskelgedächtnis.

B. Kern-„Pro-Feel" (Phase 1–2) — der eigentliche Wert

Snapping/Inferencing nach Onshape-Vorbild: Snap-Glyphen am Cursor, gestrichelte Achsen-Hilfslinien, Hover-Highlight, Shift = unterdrücken, Wake-up-Inferences. Targets: Wand-Enden/Achsen/Mitten, Raster, Rechtwinklig/ Parallel, Öffnungs-Achsen. Höchste Priorität für „Werkzeug-Gefühl".
Live-Maßeingabe beim Zeichnen (Länge/Winkel tippbar, Tab zwischen Feldern).
Kontextuelle Action-Bar bei Auswahl (Arcol): Wand selektiert → „Tür/Fenster einsetzen / Wandtyp / verschneiden". Buttons erscheinen nur, wenn anwendbar.
Schlanke domänen-gruppierte Tool-Palette (BIM-Bauteile + 2D-Zeichnen), modus-bewusst je Ansicht.
Optimistic Edits + Worker-Nachzug: Mutation sofort sichtbar, schwere Booleans/HLR im Worker (Comlink); Delay-then-show (150 ms) statt Spinner-Flicker.

C. Differenzierung (Phase 3) — hier gewinnen wir

Grip-Editing (Wand-Endpunkte, Öffnungs-Position/-Breite, Schnittlinie im Plan) mit Snapping + Live-Maß, in 2D und 3D. (DOSSIER-Backlog, Aufwand L — aber Kern-Differenzierer.)
Saved Views / Ausschnitte in der linken Sidebar = Kamera + Schnitt + Maßstab
- Layer-Kombination per Klick (VW „Saved Views" / DOSSIER). Skaliert auf 50+ Ansichten.
Wiederverwendbares Resource-Browser-Pattern für Line/Hatch/Component-Manager: Zwei-Pane (File-Browser → Viewer mit Thumbnails) als Manager und als inline Picker im Inspector (VW-Modell). Zentrale Änderung propagiert (id-Referenzen).
Perceived-performance-Politik festschreiben: Skeletons für Plan-/Schnitt- Generierung, gescopte Ladezustände (restliche App bleibt nutzbar), reduced-motion/aria-busy respektieren.
Split-View 3D|Plan (Snaptrude-Muster) — billig dank reaktiver Sichten, starker Wow-Effekt; auch fürs Onboarding.

D. Adoption & Politur (Phase 1 fortlaufend → 7)

Onboarding via Sample-Projekt (sampleProject.ts als fertiges EFH); „learn by doing", erste Geste zeigt 3D⇄Plan-Live-Sync. Progressive Disclosure: Wohnbau-Essenz default, Fortgeschrittenes (Prioritäts-Verschneidung, Overrides, Detailgrade) zugeklappt.
Command-Palette (Cmd/Ctrl-K) + sichtbarer Trigger: Werkzeuge/Ansichten/ Ressourcen/Aktionen durchsuchbar; doppelt als Discovery-Layer.
Live-Metriken-Block im Inspector (Arcol): BGF, SIA-416-Bilanz, Räume, Volumen — bei leerer Auswahl als Projekt-Übersicht.
CH-Spezifika UI-seitig vorsehen: Norden-Rotation-Gizmo (ViewCube/Kompass), SIA-Raumkategorien im Raum-Inspector, später Swisstopo-Import-Flow mit Auto-Zoom
- Nullpunkt-Verschiebung.

Übergreifende Designprinzipien (gelten immer)

Kontextualität vor Vollständigkeit — zeige nur, was jetzt anwendbar ist (Arcol/Onshape/Figma). Direkt verzahnt mit unserem „LoD-bewusste Stil-UI"-Backlog.
Direkte Manipulation vor Dialogen — Grips/Drag/Inline-Edit schlägt Properties-Dialog (Figma/Snaptrude/DOSSIER).
Eine Wahrheit, viele Sichten — niemals Sicht-spezifische Daten; alles aus dem semantischen Modell ableiten (deckt sich exakt mit unserem Architektur-Prinzip).
Konventionen respektieren — Pan/Zoom/Snap/Esc/Cmd-K wie die etablierten Tools; Nutzer bringen Muskelgedächtnis aus Figma/CAD mit.
Gefühlte > tatsächliche Geschwindigkeit — optimistic + Skeletons + 60 fps; im schweren Browser-3D-Geometrie-Kontext ein echter Wettbewerbsvorteil.

Quellen

Arcol

Snaptrude

TestFit

Onshape

Vectorworks

Figma

Perceived Performance

Command Palette

Onboarding / Progressive Disclosure

34 KiB Raw Blame History Unescape Escape