Wie ein Screen von Hey Albert aufgebaut ist – auf iPhone, iPad, Mac, Watch und im Browser. Geräte, Orte, Rollen, Dichte, Raster, Kopf und Karten, mit allen Screens von Familie Sonntag.
Hey Albert hat ein Datenmodell und viele Ansichten. Ein Termin ist auf dem Mac eine Karte im Stundenraster, am iPhone eine Zeile in der Liste und auf der Uhr eine Frage mit zwei Antworten. Es ist immer dieselbe Zeile in der Datenbank. Dieses Kapitel beschreibt, was für alle Geräte gilt. Die Kapitel iPhone, iPad, Mac und Watch zeigen den Aufbau Region für Region, in Punkten.
Leitsatz 2 ist die Grundlage jedes Screens. Woche, Heute und Kalender rendern dieselben Sachen. Eine Ansicht darf filtern, gruppieren und verdichten. Eigene Daten darf sie nie halten.
Woche planen, Safe, Finanzen, Sonntagsrunde, Haushalt verwalten
iPhone
das Alltagsgerät
unterwegs, im Laden, im Auto, im Flur – mit einer Hand
iPad
Familien- und Kindergerät
in der Küche, am Tisch, im Kinderzimmer
Apple Watch
das Fünf-Sekunden-Gerät
losfahren, angekommen, abgehakt, abgestimmt
Browser
die Web-App
Planung und Papierkram für jeden Rechner, derselbe Aufbau wie am Mac
Die Regel dahinter steht in docs/11-produkt.md §10: Was geplant wird, gehört auf den Mac. Was gemeinsam passiert, gehört aufs iPad. Was unterwegs passiert, gehört aufs iPhone. Was eine Sekunde dauert, gehört an die Uhr.
Hey Albert ist keine App mit Rechten, die ausgraut, was jemand nicht darf. Jede Rolle bekommt aus demselben Datenmodell einen eigenen Einstieg. Was jemand sehen darf, entscheidet die Datenbank, nie ein ausgeblendeter Knopf.
Rolle
Wer
Erste Seite
owner, adult
Anna, Tobias
Mac: die ganze Woche · iPhone: Heute nach Dringlichkeit · iPad: Portal
child · small (6–9)
Lena
iPad: ihr Raum, drei Bildkacheln, Zielflächen 56 pt · iPhone: nur „was ist jetzt“
child · mid (10–12)
Felix
iPad: Tagespfad, zwei Knöpfe · iPhone: Schulmappe, Nimm-mit, Fahrt fragen
child · teen (13+)
–
fast die Ansicht der Erwachsenen, ohne Safe, Tresor und Finanzen
guest
Oma Grete, Opa Werner, Oma Hilde
iPhone: drei Dinge – eingeladene Termine, Album, „Ich fahre“
service
Sofia
iPhone: ihre Liste – Schichten, ihre Fahrten, Einkauf; jede Freigabe mit Ablaufdatum
Safe, Tresor und Finanzen öffnen sich nur über albert.may_enter(). Kinder sehen sie nie, auch nicht ausgegraut.
Auf der ersten Seite steht so viel, wie diese Rolle auf diesem Gerät in fünf Sekunden erfasst. Für Oma Grete sind das drei Dinge. Für Lena vier. Für Anna am Mac darf es die ganze Woche sein, sie hat sich hingesetzt. Wer mehr braucht, geht eine Ebene tiefer.
Vor jedem Screen stehen drei Fragen:
Für wen ist diese Seite? „Für alle“ heißt: für niemanden.
Wie viele Dinge stehen darauf, und wie viele Sekunden hat diese Rolle?
Blende ich aus, oder baue ich einen eigenen Einstieg? Ausgrauen ist immer die schlechtere Antwort.
Alles liegt auf dem 8-pt-Raster mit 4 pt als halbem Schritt. Der Rand der Fläche ist am Mac --flaeche-rand-mac, am iPhone --flaeche-rand-phone. Karten haben innen --karte-innen und untereinander --karte-abstand.
--raum-halb4px
--raum-18px
--raum-216px
--raum-324px
--raum-432px
--raum-540px
--raum-648px
--raum-864px
--karte-innen12px
--karte-abstand8px
--flaeche-rand-mac32px
--flaeche-rand-phone20px
Alles liegt auf dem 8-px-Raster, mit 4 px als halbem Schritt.
Die sicheren Zonen gehören dem System: Statusleiste, Dynamic Island, Home-Indikator. Wir zeichnen dort nichts und imitieren keine Statusleiste. Bedienelemente liegen nie unter der Leiste am iPhone.
Zielflächen sind Untergrenzen, keine Richtwerte: Zeiger 28, Finger 44, Kind 56.
Jede Fläche beginnt gleich. Erst der Kopf, dann die Anrede, dann die Zeile mit Datum und Filter, dann der Inhalt.
Kopf (Mac, iPad): Suchpille mit rosa Lupe, gestrichelte Bereichs-Chips, rechts drei Kreise in fester Reihenfolge – Klingel, Nachrichten, rosa Plus. Am iPhone gibt es keinen Kopf, das Plus sitzt in der Leiste.
Anrede: „Guten Morgen, Anna.“ in Bricolage 800. Auf Heute grüßt sie, auf allen anderen Flächen benennt sie: „Woche 36“, „Aufgaben“, „Einkauf“. Darunter eine Nebenzeile mit Datum und dem, was zählt: „zwei Sachen offen, ein Vorschlag“.
Die Reihenfolge der Kreise steht fest: Klingel, Nachrichten, Plus – Plus ist rosa und immer der letzte. Chips sind gestrichelt, weil sie Bereiche einschränken und nichts anlegen.
Typen (.d.ts)
/**
* Der Kopf jeder Flaeche: Suchfeld mit rosa Lupe, Bereichs-Chips, drei Kreise rechts.
*/
export interface KopfzeileProps {
platzhalter?: string;
/** Bereichs-Chips, gestrichelt: "Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }. */
bereiche?: Array<string | { name: string; zaehler?: number }>;
gewaehlterBereich?: string;
onBereich?: (name: string) => void;
onSuche?: (e: React.ChangeEvent<HTMLInputElement>) => void;
/** Rosa Punkt an der Klingel, wenn etwas Neues da ist. */
klingelPunkt?: boolean;
onKlingel?: () => void;
onNachrichten?: () => void;
/** Oeffnet das Schnellmenue "Schnell anlegen". */
onPlus?: () => void;
style?: React.CSSProperties;
}
export function Kopfzeile(props: KopfzeileProps): JSX.Element;
Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
knoepfe={<Knopf>Ich fahre</Knopf>} />
<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
unterzeile="Vorschlag von Albert"
knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.
Typen (.d.ts)
/**
* Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
*/
export interface KarteProps {
/** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
/** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
titel: string;
/** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
ort?: React.ReactNode;
/** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
zeit?: string;
/** Wer dabei ist; der Zustaendige zuerst. */
leute?: string[];
/** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
symbol?: string;
/** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
hoehe?: "kurz" | "hoch";
/** Zustands- und Fahrt-Pillen. */
pillen?: React.ReactNode;
/** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
knoepfe?: React.ReactNode;
/** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
unterzeile?: React.ReactNode;
/** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
kompakt?: boolean;
klickbar?: boolean;
/** Leicht gekippt, wie ein liegender Klebezettel. */
gekippt?: boolean;
children?: React.ReactNode;
style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
Kein Screen ist fertig ohne seine Zustände: leer, lädt, Fehler, offline, rückgängig. Alle stehen im Kapitel Zustände. Fertig ist eine Ansicht erst mit allem hier:
„Voll“ heißt: hier gehört es hin. „Reduziert“: vorhanden, bewusst knapper. „Lesen“: ansehen, nicht bearbeiten. Aus docs/11-produkt.md §10, gekürzt auf die Orte der App.
