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

Quelle: https://brand.heyalbert.family/iphone/ · Hey Albert Marke und Designsystem

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` |

> **Offen**
>
> Für größere Geräte (430 pt breit) und für das kleinste (375 pt) gibt es keine eigenen Referenz-Screens. Vorschlag: Rand und Maße bleiben, Karten werden breiter, der Wochenüberblick zeigt bei 375 pt nur Initialen ohne Zeichen.

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

**iPhone · Heute** · 390 × 844 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Anrede und Nebenzeile | 20, 56, 350, 58 | Anrede 30 pt, Nebenzeile 12 pt, Rand 20 pt | --grad-anrede-phone, --grad-zweit, --flaeche-rand-phone | Anredezeile | „Guten Abend, Anna.“ in Bricolage 800, darunter Wochentag, Datum und Uhrzeit: „Freitag, 5. September · 18:12“. Punkt am Ende, nie ein Ausrufezeichen. |
| 3 | Tageskreise | 20, 126, 350, 46 | sieben Kreise je 44 pt | --ziel-finger, --schwarz, --rosa-hell, --sonntag | Tagesreiter | 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. |
| 4 | Abschnittsmarke | 20, 184, 350, 18 | 10 pt Kapitälchen | --grad-kapitaelchen, --laufweite-kapitaelchen, --text-zweit |  | „Heute noch“. Gliedert nach Dringlichkeit, nicht nach Modulen. |
| 5 | Karten nach Dringlichkeit | 20, 212, 350, 366 | volle Breite 350 pt, Polster 12 pt | --karte-innen, --karte-abstand, --radius-karte, --bedeutung-fahrt, --bedeutung-familie | Karte, VorschlagKarte, BuendelKarte | 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. |
| 6 | Toast mit Rückgängig | 16, 671, 358, 59 | über der Leiste, Knopf 44 pt | --schwarz, --akzent, --ziel-finger | Toast | Erscheint nach jeder Änderung: „Oma Grete hat die Fahrt übernommen.“ und daneben „Rückgängig“. Er verdeckt nie die Leiste. |
| 7 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | 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. |
| 8 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | 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. |
| 9 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

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

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

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Titel und Spanne | 20, 60, 300, 58 |  | --grad-anrede-phone, --grad-zweit | Anredezeile | „Woche 36“, darunter „1. – 7. September“. Die Anrede benennt hier nur, sie grüßt nicht. |
| 3 | Eigener Kreis | 334, 62, 36, 36 |  | --person-1 | Avatar | Der eigene Klebezettel mit Initiale. Führt zu „Ich“. |
| 4 | Spannen-Regler | 20, 133, 300, 30 |  | --radius-pille, --knopf-zweit, --schwarz | SpannenRegler | Heute · 3 Tage · Mo – Fr · Mo – So · Monat, immer in dieser Reihenfolge. Dieselben Daten, andere Weite. |
| 5 | Personenfilter | 20, 175, 280, 44 | Kreise 44 pt | --ziel-finger, --person-1, --person-2, --person-3, --person-4, --person-5 | PersonenFilter | Erster Kreis schwarz mit zwei Köpfen: alle. Dann je Mensch ein Kreis mit Initiale. Gewählte Kreise tragen einen dunklen Ring. |
| 6 | Alberts Vorschlag | 20, 231, 350, 140 |  | --bedeutung-familie, --text-auf-gelb, --gelb-dunkel | VorschlagKarte | Gelb, mit Formen, immer zwei Knöpfe. „Samstag fehlt ein Fahrer.“ und „Tobias fragen“. Darunter klein: „Vorschlag von Albert“. |
| 7 | Listenzeilen je Tag | 20, 384, 350, 168 |  | --hell, --linie-haar, --schwarz | Listenzeile, Karte | 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. |
| 8 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | 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. |
| 9 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | 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. |
| 10 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

## Wochenüberblick

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

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

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Titel | 20, 60, 300, 58 |  | --grad-anrede-phone | Anredezeile | „Woche 36“, darunter „1. – 7. September · heute Mittwoch“. |
| 3 | Zahl-Kacheln | 20, 134, 350, 96 | drei Kacheln, Zahl 34 pt | --grad-zahl-gross, --gelb, --rosa, --blau | ZahlKachel | „8,7 h heute verplant“, „2 Fahrten heute“, „1 offen diese Woche“. Große Zahl in Bricolage 800 auf farbiger Fläche. |
| 4 | Punktfeld der Woche | 20, 242, 350, 182 |  | --hell, --rand-offen | Wochenueberblick, Tagesreiter | 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? |
| 5 | Karten mit Handlung | 20, 435, 350, 235 |  | --bedeutung-fahrt, --bedeutung-familie | Karte, ZustandsPille, Knopf | Was eine Antwort braucht: die Rückfahrt ohne Fahrer mit „Ich fahre“, darunter die Sonntagsrunde. |
| 6 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | 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. |
| 7 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | 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. |
| 8 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

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.

**iPhone · Kinderbereich (Taler)** · 390 × 844 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 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 | 20, 60, 350, 44 | Kreis 44 pt | --person-4, --ziel-finger | Avatar | Links Lenas Kreis. Rechts, wenn ein Erwachsener zuschaut: „Mama schaut mit“. Das Kind weiß immer, wer mitsieht. |
| 3 | Anrede | 20, 118, 350, 52 |  | --grad-anrede-phone | Anredezeile | „Deine Taler“, darunter „Montag, 1. September · Werte setzen Mama und Papa“. Register Vorleser: kurz, große Wörter. |
| 4 | Taler-Stand | 20, 186, 350, 56 |  | --gelb, --grad-zahl-gross | TalerStand | „14 Taler“ und „diese Woche +3“ mit dem, was geschafft ist. Nie ein Abzug, nie ein Vergleich mit Felix. |
| 5 | Wünsche und Sparziele | 20, 255, 350, 203 |  | --hell, --linie-haar | Karte | „Zoo mit Oma Grete“ gemeinsam mit Felix, „Skateboard“ für Lena allein. Der Stand zeigt das Ziel, nie, wie viel jemand aufholen muss. |
| 6 | Regal der Eltern | 20, 472, 350, 75 |  | --radius-pille |  | Was es zu tauschen gibt: Kino 20, Eis 4, Taschengeld 10 Taler = 5,00 €. Die Werte legen die Eltern fest. |
| 7 | Offene Pflicht | 20, 561, 350, 73 |  | --ziel-kind | Knopf | „Müll rausbringen · Donnerstag 18:00 · noch frei“ mit „Übernehmen“. Das Kind nimmt sich selbst etwas. |
| 8 | Zwei Knöpfe in Kindgröße | 20, 649, 350, 56 | 56 pt hoch | --ziel-kind, --knopf-primaer-flaeche, --knopf-zweit-flaeche | Knopfreihe, Knopf | „Einlösen“ und „Wunsch vorschlagen“. Zwei echte Knöpfe, die an Menschen gehen: Einlösen bestätigen Mama oder Papa. |
| 9 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | 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. |
| 10 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | 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. |
| 11 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

> **Offen**
>
> Matrix III in `docs/11-produkt.md` gibt kleinen Kindern (6–9) am iPhone nur „was ist jetzt, zwei Dinge“. Der Screen „Taler“ zeigt Lena (9) mit Wünschen, Regal und offener Pflicht – deutlich mehr. Entweder gehört der Taler-Screen in die mittlere Stufe, oder die Matrix bekommt für Taler eine Ausnahme. Im Screen „Taler“ verdeckt außerdem das Plus den Hinweis unten, und „Wunsch vorschlagen“ läuft über den Knopf hinaus. Beides ist vor dem App Store zu beheben.

## Die Leiste

### LeistePhone

Quelle: `packages/design-system/components/leiste/LeistePhone.jsx`

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

```jsx
<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.

```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 |

> **Offen**
>
> Für Gäste und Au-pair gibt es noch keinen Screen. Ob sie die Leiste sehen, ist nicht entschieden. Vorschlag aus Matrix III: Gäste ohne Leiste, Sofia mit Leiste, aber nur Heute und Ich.

## 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](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Woche: Videoanruf mit Sofia in São Paulo mit zwei Uhrzeiten, Tanken in Zürich in CHF und Euro](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Eingang: zwei gescannte Seiten, Elternbrief Klassenfahrt als Vorschlag mit Absender, Betrag, Frist und Ablage](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Essen: Plan Montag bis Sonntag, Samstag noch ohne Koch, Albert schlägt Tobias vor](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![Einkauf nach Regalen sortiert, neun Dinge fehlen noch](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Felix’ Mappe mit drei Hausaufgaben und einem Lernfenster als Vorschlag](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Fristen: Kfz-Versicherung mit Kündigungsentwurf, Kinderausweis Lena, Zahnzusatz Felix](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Vorsätze von Tobias, Lena und Oma Grete mit Haken je Tag](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Family Feed mit Foto vom See und Kommentar von Oma Grete](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![Lena hat ihre Nimm-mit-Liste für Schwimmen abgehakt, unten Angekommen und Fahrt fragen](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![Lenas Taler: 14 Taler, Wünsche, Regal der Eltern, offene Pflicht](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

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