Erfolgsseite — der Übergang

Fassung M, wie sie jetzt im Code steht — mit den Zeiten der App, nicht mehr mit denen der Vorschau. Zwei Dinge sind anders als in M weiter unten: der Kasten ist 40 mit Radius 10, die Form der beiden Karten darunter (nicht 44 / 6 wie ContentListItem auf anderen Seiten — eine Kastenform je Seite); und die Seite kommt in Stufen, wie die App sie schon immer einblendet: erst die Bühne mit der Zahl, 300 ms später die Kacheln, 500 ms später Karten und Verweis.

Die Zahl zählt mit easeInOut („sanft"), 1,5 s, ab 1350 ms. Der Schalter Zählen oben wirkt auch hier — so gebaut ist „sanft".

Ring und Haken zeichnen sich groß in der Mitte — 160 px statt der heutigen 96, umschaltbar unten. Dann fliegt der Haken an die Zeile, die das Training nennt — „Ganzkörper · Tag 2 · Woche 1" — und wird dort zum Symbol-Kasten vor dem Namen. Der Kasten ist der der beiden Karten darunter: 40, Radius 10, Zeichen 20 (nicht der 44 / 6 von ContentListItem — eine Kastenform je Seite). Getönt mit 12 % Akzent, wie die App den Kasten vor Programmen und Ordnern tönt; neutral (bgElevated) zeigt sie ihn vor einzelnen Trainings — beides unten umschaltbar.

Der Gedanke: Ein Haken hakt etwas ab. Das Einzige auf der Seite, das man abhaken kann, ist das Training — und die Zeile, die es nennt, steht direkt unter der Stange. Dort steht der Haken nicht als Beleg herum, sondern als Zeichen der Zeile, so wie das Hantel-Zeichen das Zeichen der Rekord-Karte ist. Der Held bleibt mittig, die Zahl zählt sanft hoch (kein Ruck am Anfang), sobald der Haken liegt.

Was dagegen spricht: Der Flug geht schräg — 155 px nach links, 90 nach oben — nicht senkrecht wie früher. Und die Zeile bekommt einen Kasten, den sie heute nicht hat; Planname und Kontext rücken 56 px nach rechts.

Kein Ring. Der Haken zeichnet sich allein, groß — 120 px breit, unten umschaltbar — in zwei Zügen. Dann fliegt er in die Trainingszeile, und der Kasten bildet sich um ihn, während er landet: in den letzten 150 ms, von 80 auf 100 %. Was fliegt, ist genau das, was liegen bleibt. Kein Ring, der erst noch Quadrat werden muss.

Der Gedanke: In J ist der Ring die Hülle, die zum Kasten wird — ein Kreis, der ein Quadrat wird, ohne dass das etwas heißt. Ohne Ring ist der Morph nur noch Größe und Ort. Der Kasten ist dann nicht das, was der Ring geworden ist, sondern der Platz, der sich bildet, wenn der Haken ankommt — so wie die Kästen der Karten der Platz ihrer Zeichen sind.

Was dagegen spricht: Ein Haken allein auf schwarzem Grund kann schweben — ohne Ring hat er keinen Körper. Bei 120 px mit 6-px-Strich ist er eine Geste; bei 80 ein Zeichen, das im Nichts steht. Und der Kasten erscheint aus nichts, nicht aus dem Ring. Ob das stört, entscheidet sich am Gerät, nicht hier.

Wie bis zum 4. Sep: der Haken fliegt senkrecht nach oben und landet hinter „HEUTE BEWEGT" — 18 px, Ring und Haken mit 2 px Strich. Kopfzeile, Kicker und Zahl blenden ein, während er fliegt; er kommt in einer Zeile an, die schon da ist.

Der Gedanke: senkrechter Flug, kleinster Umbau, du kennst ihn.

Was dagegen spricht: Der Haken steht neben dem Etikett einer Zahl. „Heute bewegt ✓" — was ist da abgehakt? Das war der Einwand vom 4. Sep: ein Beleg, der stehen bleibt, ohne dass die Zeile ihn braucht. Ich habe ihn trotzdem gebaut, damit du J und K nebeneinander siehst.

Der Haken fliegt senkrecht nach oben in die Kopfzeile, zwischen Zurück und Teilen — dorthin, wo auf anderen Seiten der Titel steht. 24 px, 2 px Strich.

Der Gedanke: Die Erfolgsseite hat keinen Titel. Der Haken ist einer — „erledigt", als Zeichen statt als Wort. Er gehört dann zur Kopfzeile, nicht zur Bühne, und konkurriert nicht mit der Zahl.

Was dagegen spricht: Kein anderer Bildschirm der App hat ein Zeichen als Titel. Und er ist weit weg von allem, was er meint.

Die Stange fällt von oben und landet unter der Zahl — beim Aufsetzen kurz breiter und flacher, dann liegt sie. Die Zahl kommt danach, 12 px von unten nach oben, und zählt; die Seite folgt. Der Schlag (Haptik) ist die Landung.

Der Gedanke: Das Training ist vorbei, wenn die Stange liegt. Die Stange ist das Zeichen des App-Icons; hier legt man sie ab. Kein Haken nötig — das Ablegen sagt „fertig".

Was dagegen spricht: Das Aufsetzen kann nach Comic aussehen. Ohne Aufsetzen ist es nur ein Balken, der fällt. Die Stärke ist eine Stellschraube — hier 25 % breiter, 40 % flacher, 70 ms.

Die Stange liegt zuerst da (wächst aus der Mitte, 400 ms). Dann kommt die Zahl von unten durch die Stange nach oben — schnell am Anfang, langsam oben, 6 px Überschwingen am Ende. Kopfzeile und Kicker blenden ein, wenn sie oben ist; die Seite folgt.

Der Gedanke: „Heute bewegt: 12,85 t" — die Zahl ist das, was gehoben wurde. Also wird sie gehoben. Die Stange ist der Boden.

Ohne Zählen: die Zahl steht fertig da, während sie steigt. Steigen und Zählen zugleich wären eine Bewegung zu viel — der Schalter oben gilt hier nicht.

Was dagegen spricht: leise. Wer nicht hinschaut, sieht eine Zahl, die einblendet.

Du tippst „Beenden". Der Knopf wächst, bis er der ganze Bildschirm ist — Akzentfarbe, sonst nichts. Darauf erscheint die Zahl, dunkel auf Farbe. Ein Moment. Dann zieht sich die Farbe zusammen, von allen Seiten, bis sie die Stange unter der Zahl ist. Die Zahl bleibt, wo sie war, und wird weiß, sobald die Kante über sie hinweg ist. Die Seite lag die ganze Zeit darunter.

Der Gedanke: Ein Rechteck, drei Zustände — Knopf, Bildschirm, Stange. Nichts wird gezeichnet, nichts verblasst, nichts fliegt. Und der Übergang beginnt da, wo dein Finger war.

Ohne Zählen: die Zahl erscheint fertig auf der Farbe. Der Schalter oben gilt hier nicht.

Was dagegen spricht: laut — der ganze Bildschirm in Akzentfarbe, auf OLED-Schwarz ein Blitz, und die Farbe wählt der Nutzer aus 16 (schalt oben auf Gelb). Und im Code ist das ein Übergang zwischen zwei Bildschirmen — der Knopf steht im Training, die Stange auf der Erfolgsseite. Das ist der größte Bau der acht.

Vom Knopf aus läuft ein Ring nach außen, über den Bildschirm hinaus. Innerhalb des Rings liegt die fertige Seite — er gibt sie frei, während er wächst. Kein Zeichen in der Mitte, keine Farbe, die bleibt: nur die Welle, dann die Seite. Die Zahl zählt, sobald der Ring über sie hinweg ist.

Der Gedanke: die leiseste Fassung, die trotzdem vom Finger ausgeht. Kein Zeichen für „fertig" — die Seite selbst ist es.

Was dagegen spricht: Das ist der Standard-Übergang von Android („circular reveal"). Er sagt „neue Seite", nicht „geschafft".

Ring und Haken zeichnen sich in der Bildschirmmitte, „Fertig!" darunter. Nach 1,2 s verblasst alles, und die Seite blendet darunter ein. Der Haken landet nirgends mehr — das ist der Umbau vom 4. Sep.

Was daran fehlt: Die Bewegung endet im Nichts. Der Haken steht in der Mitte, die Zahl erscheint 100 px weiter oben, die Stange noch einmal woanders — drei Orte, keine Verbindung.

Der Haken ist heute 23 px breit in einem 90er-Ring. So steht es im Code (checkFaktor 0,25); ich habe ihn nicht größer gezeichnet, damit du siehst, was am Gerät läuft. Eine Abweichung: im Hellen zeigt diese Seite auch den Ist-Haken im 400er — die App zeichnet ihn heute im 700er (accentInk).

Ein 8 px dicker Strich — so dick wie die Stange — kommt von links, in der Höhe, in der nachher die Stange liegt. In der Mitte macht er einen Looping: der Looping ist der Ring, so groß wie die Zahl, die später an dieser Stelle steht. Der Haken zeichnet sich in den Ring, „Fertig!" erscheint unter dem Strich. Der Strich läuft rechts aus dem Bild.

Dann: Ring und Haken verblassen, der Strich zieht sich von beiden Enden zurück, bis nur die 88 px unter der Zahl übrig sind — das ist die Stange. Die Zahl zählt an der Stelle hoch, wo der Ring war.

Was ich an deiner Skizze geändert habe: (1) Der Strich läuft auf Stangenhöhe, nicht durch die Bildschirmmitte — sonst müsste er am Ende noch nach oben fahren. (2) Der Looping hat den Durchmesser der Zahl, damit die Zahl in seiner Spur landet. (3) Der Strich verblasst nicht, er zieht sich zurück — die Stange ist dann wirklich ein Stück von ihm.

Ring und Haken wie heute in der Mitte, nur mit 4 px Strich statt 3. Statt zu verblassen, fliegt der Ring nach oben und drückt sich dabei flach — bis er die Stange ist, 88 × 8, unter der Zahl. Der Haken geht vorher. Die Zahl erscheint, während der Ring landet.

Warum sie hier steht: Das ist die günstigste Fassung, die trotzdem irgendwo ankommt. Es ändert sich nur der Abgang; das Zeichnen bleibt, wie es ist. In Flutter ist das ein Transform plus ein abgerundetes Rechteck, dessen Maße mitlaufen.

Was dagegen spricht: Der Ring legt 117 px zurück und wird dabei elfmal flacher. Bei 1× wirkt das wie ein Schlucken. Bei ½× sieht man, was passiert — am Gerät hat niemand ½×.

Ein Strich wischt einmal von links nach rechts durch, auf Stangenhöhe. Wo er vorbeikommt, bleibt die Stange liegen, und die Seite erscheint dahinter. Kein Ring, kein Haken, kein „Fertig!" — 1,3 s statt 2,2.

Warum sie hier steht: Als Gegenprobe. Die große Zahl sagt schon, dass es geschafft ist; die Frage ist, ob der Haken noch etwas dazusagt. Ich finde: ja — der Haken ist der Moment „fertig", die Zahl ist der Moment „so viel". Zwei Aussagen, zwei Zeichen. Aber du sollst es sehen, nicht nur lesen.

Derselbe Stift wie in A, aber ohne Looping: der Strich kommt von links, und sein letzter Zug ist der Haken — kurz hinunter, lang hinauf, Ende. Ein Zug, eine Figur. Dann verblasst der Haken, und der Strich rückt sich zum 88er-Stück zurecht: das Ende zieht von links nach, der Kopf wächst nach rechts, bis die Stange liegt.

Warum ich sie nachgeschoben habe: In A verblasst der Ring ins Nichts — genau das, was ich am Ist bemängelt habe, nur mit einem Teil weniger. D hat nichts, was nur da ist, um wieder zu verschwinden: der Haken ist ein Stück des Strichs, und der Strich ist die Stange.

Ohne „Fertig!" — absichtlich. Damit ist D zugleich die Probe für Punkt 1 unten: trägt der Haken den Moment allein?