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

Ü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.

4 892 1037Stellantis · Hauptkonto

›

8 105 5512Stellantis · Geschäftskonto

›

3 224 9911Sparkasse VS

›

HinzufügenNeue Kundennummer einrichten

›

Stellantis · Hauptkonto

4 892 1037

● Aktiv

Stammdaten

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.