Administrations-Anwendungsrahmen
Gruppierte Seitennavigation, Desktop-Kopfzeile und mobile Drei-Zonen-Kopfzeile.
Anwendungspatterns
Vollständige Bootstrap-Kompositionen für Anwendungsrahmen, Übersicht, Verwaltung, Detail, Sicherheit, Kommunikation, System sowie Hilfe/RO.
Anwendungsrahmen & Navigation
Admin-/Kunden-Shell, gruppierte Navigation, Kopfzeile-Suche, Kontomenü, Benachrichtigungen, Administrationshinweis und eingebettetes Werkzeug.
Funktionen der Kopfzeile
Administrationsmodus: Du arbeitest im Kontext eines anderen Benutzers.
Eingebettete Werkzeugseite
Übergangspattern: äußerer Shell-Kontext bleibt sichtbar; direkte Integration ist langfristig vorzuziehen.
Eingebettetes Tool / Iframe-Bereich
Übersicht
Kennzahlen, priorisierte Ressourcen, Aktivitäten und Hinweise.
Projekte
18
Offen
7
Freigaben
4
Warnungen
2
Priorisierte Ressourcen
Aktivität
08:35 Backup verifiziert
08:12 Projekt aktualisiert
Verwaltungslisten & Projekt/Detail
Suche, Filter, Tabellen/Mobile-Cards, Zeilenaktionen, Identität, Status, Aufgaben, Dateien und Metadaten.
RT Kundenportal
Projekt-ID RTP-2042 · Kunde Muster GmbH
Fortschritt72 %
Nächste Aufgaben
- Staging prüfen
- Freigabe vorbereiten
Dateien
- Prüfbericht.pdf
- Handover.json
Formularpatterns
Standard, zweispaltig, Assistent/automatische Speicherung, Upload, Signatur und Berechtigungsmatrix.
Mehrstufiges FormularAutomatisch gespeichert
Schritt 2 von 450 %
Fachliche Signatur-/Canvas-Fläche
Berechtigungsmatrix
| Bereich | Lesen | Ändern |
|---|---|---|
| Projekt | ||
| Dateien |
Sicherheit & Rechte
Anmeldung, E-Mail-/TOTP-Abfrage, TOTP-Einrichtung, Wiederherstellung, Passwortänderung und Sicherheitsbestätigung verwenden dieselben Bootstrap-Bausteine.
2FA-Codeeingabe
TOTP-Einrichtung
QR-Code
Authenticator-App scannen und anschließend einen Code bestätigen.
RTUI:EXAMPLE:TOTPWiederherstellungscode
Dieser Code wird nur einmal im Klartext angezeigt.
Sicherheitsbestätigung / Passwortänderung
Kommunikation
Nachrichtenverlauf, Nachrichtenblase, Anhänge, Antwortbereich und Benachrichtigungsliste.
Nachrichtenverlauf
Kunde
Bitte prüfe die neue Startseite.
screenshot.pngTeam
Die Prüfung ist eingeplant. Rückmeldung folgt im Bericht.
Benachrichtigungen
System & Betrieb
Zustand, Backup/Wiederherstellung, Update/Zurücksetzen, Import/Export, PDF/Vorlagen und Benutzerdefiniertes CSS.
Systemdiagnose
DatenbankOK
UpdatekanalPrüfen
Speicher62 %
Backup & Wiederherstellung
Letztes Vollbackup verifiziert: heute 07:30.
Update / Zurücksetzen
Version 5.3.1 verfügbar.
Import / Export / PDF
Benutzerdefiniertes CSSNur Admin · max. 20 KB
Kein Designeditor. `@import`, externe `url(...)`, JavaScript-/HTML-Injektionen und weitere riskante Konstrukte werden serverseitig blockiert.
Hilfe, FAQ & RO / Guide
FAQ bleibt von geführten Guides getrennt. RO unterstützt, ersetzt aber nie eindeutige Texte, Meldungen oder Bestätigungen.
Über den manuellen Guide-Einstieg. „Nicht mehr automatisch anzeigen“ deaktiviert nur den automatischen Start.
Nein. Kritische Warnungen und Bestätigungen bleiben formale UI.
RO Guide
Geführte Seitentour
Offizielles RO-Asset
RO Welcome
RO-Begrüßung
Einmaliger Einstieg nach erfolgreicher Anmeldung.
RO Erfolg
Erfolg
Bestätigt einen bereits semantisch ausgewiesenen Erfolg.
RO Present
Funktionseinführung
Kurzer Nutzen plus klare Folgeaktion.
RO Thinking
Klärung
Offene Frage und normale Entscheidungen im Vordergrund.
RO Warnung
Warnung
Verstärkt nur den Kontext; ersetzt keine Sicherheits-UI.
RO-Guide-Familie – 11 semantische Rollen
Die freigegebenen Originalgrafiken werden nicht nachgezeichnet. Die Bootstrap-Karten zeigen die verbindlichen Einsatzrollen und den Asset-Slot.
ro-neutral
Neutral
Allgemeine Orientierung ohne Wertung.
ro-success
Erfolg
Bestätigung nach semantischer Erfolgsmeldung.
ro-point-right
Richtung rechts
Kontextziel wird zusätzlich im Text eindeutig benannt.
ro-point-up-right
Richtung rechts oben
Nur bei stabiler Zielposition; mobil ohne Bedeutungsverlust.
ro-present
Präsentation
Einführung einer neuen Funktion.
ro-thinking
Klärung
Frage oder Entscheidungssituation.
ro-tablet
Technik
Einrichtung, Diagnose oder Verbindung.
ro-welcome
Willkommen
Einmaliger Einstieg nach erfolgreicher Anmeldung.
ro-tip
Tipp
Optional und nicht blockierend.
ro-warning
Warnung
Verstärkt Warnkontext, ersetzt keine formale UI.
ro-brand
Guide-Einstieg
Einstieg in Guide-Bereich oder Assistent.
Kontextbezogener RO-Hinweis
Ein kurzer Hinweis zu genau einem Ziel; das Ziel bleibt normal bedienbar.
RO-Leerzustand
Ruhige Hilfe bei leerem Bereich.
Mobiler Guide
Auf kleinen Viewports liegt der Guide im normalen Dokumentfluss und verdeckt keine Header- oder Primäraktionen.
Guide-Seen-State
Der Demo-Zustand wird pro Guide-ID/-Version lokal gespeichert; produktiv ist Benutzerpersistenz vorzuziehen.
Conditional Split
Sekundärbereiche erzeugen nur dann eine zusätzliche Spalte, wenn sie tatsächlich sichtbar sind.
Primärbereich
Im inaktiven Zustand nutzt dieser Bereich 100 %.
Inspektor / Guide / Vorschau
Nur sichtbar, wenn fachlich aktiviert.