Screens

iPhone

Der Aufbau des Alltagsgeräts Region für Region – Heute, Woche als Liste, Wochenüberblick, Kinderbereich – mit Maßen in Punkten, Leiste, Zielflächen, Gesten und dem, was es am iPhone nicht gibt.

Das iPhone ist das Alltagsgerät. Es wird im Flur benutzt, im Laden, im Auto, mit einer Hand und oft in Eile. Ein Screen am iPhone hat darum eine Frage: Was ist jetzt dran? Alles Weitere liegt eine Ebene tiefer.

Gerät und Maße

Alle Referenz-Screens und Website-Screens sind für 390 × 844 pt gezeichnet (iPhone 14, 15 und 16 in der kleinen Größe, @2x als 780 × 1688 px abgelegt). Andere Größen ändern nur die Breite des Inhalts. Rand, Leiste, Kreise und Zielflächen bleiben gleich.

Maß	Wert	Token
Rand der Fläche	20 pt	`--flaeche-rand-phone`
Statusleiste, sichere Zone oben	47 pt	vom System
Leiste	64 pt hoch, 16 pt vom Rand	`--leiste-phone-hoehe`, `--radius-leiste`
Plus	56 pt, tritt heraus	`--ziel-kind`
sichere Zone unten	34 pt	vom System
Anrede	30 pt	`--grad-anrede-phone`
Kartentitel, Text, Zweitzeile	14,5 · 14 · 12 pt	`--grad-karten-titel`, `--grad-text`, `--grad-zweit`
Zielfläche	44 pt, Kinder und Plus 56 pt	`--ziel-finger`, `--ziel-kind`

Heute

Heute ist die erste Fläche für Erwachsene. Sortiert nach Dringlichkeit, nicht nach Bereichen: was läuft, was als Nächstes kommt, was mitmuss, was offen ist. Vier bis sechs Blöcke. Kein Personenfilter, denn wer Heute öffnet, steht selbst im Flur.

Echter Screen: Main — **iPhone · Heute** · 390 × 844 pt · belegt
1
**Statusleiste, sichere Zone** · 47 pt, vom System
Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach.
2
**Anrede und Nebenzeile** · Anrede 30 pt, Nebenzeile 12 pt, Rand 20 pt
„Guten Abend, Anna.“ in Bricolage 800, darunter Wochentag, Datum und Uhrzeit: „Freitag, 5. September · 18:12“. Punkt am Ende, nie ein Ausrufezeichen.
`--grad-anrede-phone--grad-zweit--flaeche-rand-phoneAnredezeile`
3
**Tageskreise** · sieben Kreise je 44 pt
Mo bis So als Kreise. Heute ist schwarz, der Sonntag gedämpftes Rosa-Grau. Ein rosa Kreis heißt: an diesem Tag ist etwas offen. Antippen wechselt den Tag.
`--ziel-finger--schwarz--rosa-hell--sonntagTagesreiter`
4
**Abschnittsmarke** · 10 pt Kapitälchen
„Heute noch“. Gliedert nach Dringlichkeit, nicht nach Modulen.
`--grad-kapitaelchen--laufweite-kapitaelchen--text-zweit`
5
**Karten nach Dringlichkeit** · volle Breite 350 pt, Polster 12 pt
Was läuft, was als Nächstes kommt, was mitmuss, was offen ist. Vier bis sechs Blöcke, nicht mehr. Fahrten blau, Familie gelb, Termine beige. Ein Vorschlag von Albert steht als gelbe VorschlagKarte dort, wo er dringlich ist. Kein Personenfilter: wer Heute öffnet, steht selbst im Flur.
`--karte-innen--karte-abstand--radius-karte--bedeutung-fahrt--bedeutung-familieKarteVorschlagKarteBuendelKarte`
6
**Toast mit Rückgängig** · über der Leiste, Knopf 44 pt
Erscheint nach jeder Änderung: „Oma Grete hat die Fahrt übernommen.“ und daneben „Rückgängig“. Er verdeckt nie die Leiste.
`--schwarz--akzent--ziel-fingerToast`
7
**Leiste, fixiert** · 64 pt hoch, 16 pt Rand
Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen.
`--leiste-phone-hoehe--radius-leiste--flaeche-leiste--ziel-fingerLeistePhone`
8
**Plus, tritt heraus** · 56 pt Kreis
Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz.
`--ziel-kind--akzentLeistePhoneSchnellMenue`
9
**Home-Indikator, sichere Zone** · 34 pt sichere Zone, die Leiste ragt hinein
Gehört dem System. Keine Bedienelemente unterhalb der Leiste.
Quelle: apps/site/bilder/Main.png · assets/referenz/iphone-a2-tag.png · ui_kits/iphone/PhoneRahmen.jsx · components/leiste/LeistePhone.jsx · tokens/quelle/raum.json

Woche als Liste

Am iPhone ist ein Raster über sieben Tage zu dicht. Die Woche läuft darum als Liste: ein Tag je Zeile, aufklappbar, mit dem Vorschlag von Albert oben, wenn etwas fehlt.

1Statusleiste, sichere Zone

2Titel und Spanne

4Spannen-Regler

5Personenfilter

6Alberts Vorschlag

7Listenzeilen je Tag

8Leiste, fixiert

iPhone · Woche als Liste · 390 × 844 pt · belegt

1
Statusleiste, sichere Zone · 47 pt, vom System
Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach.
2
Titel und Spanne
„Woche 36“, darunter „1. – 7. September“. Die Anrede benennt hier nur, sie grüßt nicht.
--grad-anrede-phone--grad-zweitAnredezeile
3
Eigener Kreis
Der eigene Klebezettel mit Initiale. Führt zu „Ich“.
--person-1Avatar
4
Spannen-Regler
Heute · 3 Tage · Mo – Fr · Mo – So · Monat, immer in dieser Reihenfolge. Dieselben Daten, andere Weite.
--radius-pille--knopf-zweit--schwarzSpannenRegler
5
Personenfilter · Kreise 44 pt
Erster Kreis schwarz mit zwei Köpfen: alle. Dann je Mensch ein Kreis mit Initiale. Gewählte Kreise tragen einen dunklen Ring.
--ziel-finger--person-1--person-2--person-3--person-4--person-5PersonenFilter
6
Alberts Vorschlag
Gelb, mit Formen, immer zwei Knöpfe. „Samstag fehlt ein Fahrer.“ und „Tobias fragen“. Darunter klein: „Vorschlag von Albert“.
--bedeutung-familie--text-auf-gelb--gelb-dunkelVorschlagKarte
7
Listenzeilen je Tag
Ein Tag je Zeile. Vergangene Tage klappen zusammen. Der Text sagt, wer den Tag trägt: „heute · Anna und Felix“, rechts die Stunden „3,0 h“. Aufgeklappt stehen kompakte Karten darin.
--hell--linie-haar--schwarzListenzeileKarte
8
Leiste, fixiert · 64 pt hoch, 16 pt Rand
Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen.
--leiste-phone-hoehe--radius-leiste--flaeche-leiste--ziel-fingerLeistePhone
9
Plus, tritt heraus · 56 pt Kreis
Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz.
--ziel-kind--akzentLeistePhoneSchnellMenue
10
Home-Indikator, sichere Zone · 34 pt sichere Zone, die Leiste ragt hinein
Gehört dem System. Keine Bedienelemente unterhalb der Leiste.

Quelle: assets/referenz/iphone-a2-liste.png · ui_kits/iphone/WocheListe.jsx · components/kopf/SpannenRegler.jsx · components/zeit/Listenzeile.jsx

Wochenüberblick

Der Blick im Vorbeigehen. Er beantwortet eine Frage: Wer trägt welchen Tag, und wo fehlt jemand?

1Statusleiste, sichere Zone

2Titel

3Zahl-Kacheln

4Punktfeld der Woche

5Karten mit Handlung

6Leiste, fixiert

iPhone · Wochenüberblick · 390 × 844 pt · belegt

1
Statusleiste, sichere Zone · 47 pt, vom System
Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach.
2
Titel
„Woche 36“, darunter „1. – 7. September · heute Mittwoch“.
--grad-anrede-phoneAnredezeile
3
Zahl-Kacheln · drei Kacheln, Zahl 34 pt
„8,7 h heute verplant“, „2 Fahrten heute“, „1 offen diese Woche“. Große Zahl in Bricolage 800 auf farbiger Fläche.
--grad-zahl-gross--gelb--rosa--blauZahlKachel
4
Punktfeld der Woche
Sieben Spalten, ein Punkt je Sache, die Initiale sagt wer. Offenes ist ein gestrichelter Punkt. Beantwortet: Wer trägt welchen Tag, und wo fehlt jemand?
--hell--rand-offenWochenueberblickTagesreiter
5
Karten mit Handlung
Was eine Antwort braucht: die Rückfahrt ohne Fahrer mit „Ich fahre“, darunter die Sonntagsrunde.
--bedeutung-fahrt--bedeutung-familieKarteZustandsPilleKnopf
6
Leiste, fixiert · 64 pt hoch, 16 pt Rand
Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen.
--leiste-phone-hoehe--radius-leiste--flaeche-leiste--ziel-fingerLeistePhone
7
Plus, tritt heraus · 56 pt Kreis
Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz.
--ziel-kind--akzentLeistePhoneSchnellMenue
8
Home-Indikator, sichere Zone · 34 pt sichere Zone, die Leiste ragt hinein
Gehört dem System. Keine Bedienelemente unterhalb der Leiste.

Quelle: assets/referenz/iphone-a2-blick.png · ui_kits/iphone/Wochenblick.jsx · components/zeit/Wochenueberblick.jsx

Den Tag im Stundenraster gibt es am iPhone auch, mit Tageskreisen, Personenfilter, Zeitachse und Jetzt-Linie (Referenz-Screen iphone-a2-tag.png). Er folgt denselben Regionen wie Heute, mit dem Personenfilter unter den Tageskreisen.

Kinderbereich

Kinder haben einen eigenen Einstieg, keine gekürzte Erwachsenenansicht. Zielflächen 56 pt, Register Vorleser, kurze Sätze, große Wörter. Das Kind sieht immer, wer mitschaut.

Echter Screen: Taler — **iPhone · Kinderbereich (Taler)** · 390 × 844 pt · belegt
1
**Statusleiste, sichere Zone** · 47 pt, vom System
Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach.
2
**Eigener Kreis und Mitschauen** · Kreis 44 pt
Links Lenas Kreis. Rechts, wenn ein Erwachsener zuschaut: „Mama schaut mit“. Das Kind weiß immer, wer mitsieht.
`--person-4--ziel-fingerAvatar`
3
**Anrede**
„Deine Taler“, darunter „Montag, 1. September · Werte setzen Mama und Papa“. Register Vorleser: kurz, große Wörter.
`--grad-anrede-phoneAnredezeile`
4
**Taler-Stand**
„14 Taler“ und „diese Woche +3“ mit dem, was geschafft ist. Nie ein Abzug, nie ein Vergleich mit Felix.
`--gelb--grad-zahl-grossTalerStand`
5
**Wünsche und Sparziele**
„Zoo mit Oma Grete“ gemeinsam mit Felix, „Skateboard“ für Lena allein. Der Stand zeigt das Ziel, nie, wie viel jemand aufholen muss.
`--hell--linie-haarKarte`
6
**Regal der Eltern**
Was es zu tauschen gibt: Kino 20, Eis 4, Taschengeld 10 Taler = 5,00 €. Die Werte legen die Eltern fest.
`--radius-pille`
7
**Offene Pflicht**
„Müll rausbringen · Donnerstag 18:00 · noch frei“ mit „Übernehmen“. Das Kind nimmt sich selbst etwas.
`--ziel-kindKnopf`
8
**Zwei Knöpfe in Kindgröße** · 56 pt hoch
„Einlösen“ und „Wunsch vorschlagen“. Zwei echte Knöpfe, die an Menschen gehen: Einlösen bestätigen Mama oder Papa.
`--ziel-kind--knopf-primaer-flaeche--knopf-zweit-flaecheKnopfreiheKnopf`
9
**Leiste, fixiert** · 64 pt hoch, 16 pt Rand
Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen.
`--leiste-phone-hoehe--radius-leiste--flaeche-leiste--ziel-fingerLeistePhone`
10
**Plus, tritt heraus** · 56 pt Kreis
Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz.
`--ziel-kind--akzentLeistePhoneSchnellMenue`
11
**Home-Indikator, sichere Zone** · 34 pt sichere Zone, die Leiste ragt hinein
Gehört dem System. Keine Bedienelemente unterhalb der Leiste.
Quelle: apps/site/bilder/Taler.png · apps/site/bilder/MomentTurnbeutel.png · ui_kits/iphone/KindTaler.jsx · components/kinder/TalerStand.jsx

Die Leiste

LeistePhone

components/leiste/LeistePhone.jsx

Die Leiste am unteren Rand des iPhones – fünf Plätze, nur das Plus tritt heraus.

<LeistePhone aktiverOrt="Woche" onWahl={setOrt} onPlus={schnellAnlegen} />

Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen rosa Zaehler. Zielfläche 44 px, das Plus 56 px – es wird auch von Kindern gedrückt.

Typen (.d.ts)

/**
 * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.
 */
export interface LeistePhoneProps {
  aktiverOrt?: string;
  plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
  onWahl?: (ort: string) => void;
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function LeistePhone(props: LeistePhoneProps): JSX.Element;
export const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;

Die Leiste bleibt beim Scrollen stehen und wird nie durchsichtig. Ein Toast steht über ihr, nie auf ihr. Der Zähler am Eingang zählt nur, was eine Entscheidung braucht.

Gesten und Bedienung

Tippen auf eine Karte öffnet sie. Vorschlag, nicht belegt: als Blatt von unten, mit Griff oben, nach unten zu schließen.
Tippen auf einen Tageskreis wechselt den Tag. Wischen zwischen Tagen ist Vorschlag, nicht belegt.
Abhaken ist ein Tipp auf den Kreis links, 44 pt, bei Kindern 56 pt. Abgehaktes wird durchgestrichen und bleibt stehen, bis der Tag vorbei ist.
Jede Änderung ist sofort sichtbar und meldet sich mit einem Toast und „Rückgängig“.
Plus öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz.
Spracheingabe für Hausaufgaben und Termine läuft auf dem Gerät.

Kein Wischen zum Löschen ohne Rückweg. Was nicht rücknehmbar ist, wird vorher gefragt.

Rollen am iPhone

Rolle	Erste Seite	Was fehlt
Anna, Tobias	Heute nach Dringlichkeit	–
Felix (mittel)	Schulmappe, Nimm-mit, Fahrt fragen	Safe, Tresor, Finanzen, fremde Vorsätze
Lena (klein)	was ist jetzt, zwei Dinge	Uhrzeiten nur, wo sie lesen kann; alles Verschlossene
Oma Grete (Gast)	drei Karten: eingeladene Termine, Album, „Ich kann fahren“	Leiste, Menü, Einstellungen; Schrift eine Stufe größer, Zielflächen 56 pt
Sofia (Au-pair)	ihre Liste: Schichten heute, ihre Fahrten, Einkauf	Termine der Eltern, Finanzen, Dokumente, fremde Aufgaben

Alle Flächen am iPhone

Heute: Guten Abend, Anna. Turnier Handball, Rückfahrt mit Oma Grete, Nudeln mit Soße, darüber ein Toast mit Rückgängig — Heute mit Toast nach einer Übernahme · PNG 780 × 1688

Woche: Videoanruf mit Sofia in São Paulo mit zwei Uhrzeiten, Tanken in Zürich in CHF und Euro — Woche mit zwei Zeitzonen und zwei Währungen · PNG 780 × 1688

Eingang: zwei gescannte Seiten, Elternbrief Klassenfahrt als Vorschlag mit Absender, Betrag, Frist und Ablage — Eingang mit Scan und Vorschlag · PNG 780 × 1688

Essen: Plan Montag bis Sonntag, Samstag noch ohne Koch, Albert schlägt Tobias vor — Essen mit offenem Samstag · PNG 780 × 1688

Einkauf nach Regalen sortiert, neun Dinge fehlen noch — Einkauf im Laden · PNG 780 × 1688

Felix’ Mappe mit drei Hausaufgaben und einem Lernfenster als Vorschlag — Schulmappe von Felix · PNG 780 × 1688

Fristen: Kfz-Versicherung mit Kündigungsentwurf, Kinderausweis Lena, Zahnzusatz Felix — Fristen aus Wichtiges · PNG 780 × 1688

Vorsätze von Tobias, Lena und Oma Grete mit Haken je Tag — Vorsätze · PNG 780 × 1688

Family Feed mit Foto vom See und Kommentar von Oma Grete — Family Feed · PNG 780 × 1688

Lena hat ihre Nimm-mit-Liste für Schwimmen abgehakt, unten Angekommen und Fahrt fragen — Lenas Nimm-mit · PNG 780 × 1688

Lenas Taler: 14 Taler, Wünsche, Regal der Eltern, offene Pflicht — Lenas Taler · PNG 780 × 1688

Was es am iPhone nicht gibt

Das Wochenboard über sieben Tage als Raster. Am iPhone ist die Woche Liste oder Überblick.
Safe, Tresor und Finanzen zum Bearbeiten. Lesen ja, Fristen ja, bearbeiten am Mac.
Mail-Regeln, Rollen und Rechte, Stundenplan pflegen.
Eine Seitenleiste oder ein Hamburger-Menü.
Eine nachgezeichnete Statusleiste in Entwürfen. Der Rahmen in ui_kits/iphone/PhoneRahmen.jsx lässt sie absichtlich weg.