036 / Tablet

Tablet-Version.

Drei Szenarien auf iPad-Format (1024 × 720). Sidebar + Detail-Pane statt einer Spalte. Spec für Ermira & Erik rechts.
Natalya (29. Apr): „… und die Tablet-Version der App soll die KI abbilden. Ist das möglich?" — Vorschlag: Sidebar links (200 px, Bank- und Funktions-Navigation), Detail rechts (alles andere). Klassisches iPad-Pattern, identisch in iOS Mail / Settings.
01 Home · Wartescreen

Sidebar + Wartescreen mit Statistik-Panel

Sidebar zeigt alle gepflegten Banken/Kundennummern. Hauptbereich: Pulse-Hero links, kleine Statistik (Geräte, Push-Status, Aktivität) rechts. Im Hochformat fehlt die Statistik — Tablet hat Platz dafür.
Stellantis / Übersicht

Warte auf Auftrag.

9:42 · 29. Apr
Status · Idle

Bereit für
Freigabe.

Dein Gerät ist mit zwei Kundennummern verbunden. Auftrags-Push wird automatisch eingeblendet.

Geräte aktiv
02 · iPhone 15, iPad Pro
Push-Status
Aktiv
Letzte Aktivität
Überweisung 1.284 €14:42
OK
Login Webportal12:08
OK
Überweisung 89 €09:30
Abgelehnt

Spec · 01 Home

Display
1024 × 720 (iPad Pro 11" landscape)
Sidebar
220 px · weiß · 1 px hairline
Main
flexibel · 26 px padding
Grid
1.4fr / 1fr · 14 px gap
Pulse
2 400 ms · ease-in-out

Sidebar ist persistent auf Tablet (auf Phone wird sie zur Modal-Drawer). Aktive Bank ist immer markiert. Statistik-Spalte ist tablet-exklusiv — Phone zeigt nur den Hero.

02 Freigabe · Vollbild

Transaktionsfreigabe — Hauptmoment ohne Ablenkung

Sidebar weicht — der Freigabe-Moment bekommt das ganze Display. Betrag groß, Empfänger lesbar, Aktionen rechts auf Daumen-Höhe.
Überweisung · 14:42
1.284,07 €
Helene Krüger-AchterbergDE40 1234 5678 9012 3456 99 · COBADEFFXXX
VerwendungszweckMiete April 2026
AusführungNächstmöglich
BelastetDE89 …7890 · Stellantis
AuftraggeberPatrick Reinbold
Verbleibend
00:47
BankStellantis
GerätiPad Pro 11"
Anfrage vonWebportal

Spec · 02 Freigabe

Layout
Vollbild (keine Sidebar)
Grid
1.4fr / 1fr · 24 px gap
Padding
30 / 56 / 30 px
Betrag
64 px · −0.025em
CTA
18 px padding · 50/50 split

Kritischer Moment — Sidebar wird unterdrückt. Auf Phone sind die Buttons unten breit, auf Tablet rechts auf Daumen-Höhe. Modal-Charakter, aber kein echtes Modal: User landet hier per Push-Tap.

03 Verwaltung · Master-Detail

Kundennummern verwalten — Liste links, Detail rechts

Klassisches iPad-Settings-Pattern. Liste der Kundennummern ist immer sichtbar, Detail wechselt rechts. Auf Phone wird das zu zwei Push-Screens.
Verwaltung

Kunden-nummern.

ST
4 892 1037Stellantis · Hauptkonto
ST
8 105 5512Stellantis · Geschäftskonto
SP
3 224 9911Sparkasse VS
+
HinzufügenNeue Kundennummer einrichten
Stellantis · Hauptkonto

4 892 1037

● Aktiv
Stamm­daten

Stellantis Direktbank

BankStellantis
StatusAktiv
Eingerichtet12. Jan 2026
Letzte Nutzung14:42 heute
Geräte2 (iPhone 15, iPad)
PushAktiv
PIN gesetzt
Letzte Freigabe1.284 € · OK

Spec · 03 Verwaltung

Display
1024 × 720
3-Pane
220 / 360 / rest
Master
Liste mit Active-State
Active
3 px Navy-Inset-Bar links
Detail
2-Spalten KV-Grid

iOS-Settings-Pattern mit drei Spalten. Auf Phone fällt das Master-Detail in zwei navigierte Screens zurück (NavigationStack). Active-Marker bleibt — auf Tablet als Inset-Bar, auf Phone als Highlight.

Adaptions-Regel: Sidebar ab ≥ 768 px persistent, darunter als Drawer. Master-Detail (Szenario 03) braucht ≥ 900 px — sonst pop-Master, push-Detail. Freigabe (Szenario 02) ist immer Vollbild, unabhängig vom Gerät — sie ist der wichtigste Moment der App.