Liquid Glass: Glas-Buttons aus iOS 26 per Prompt an den Agenten

Was Liquid Glass ist, einfach erklärt

Nimm ein Stück Milchglas und leg es über dein Lieblingsfoto. Das Foto siehst du dahinter - aber verschwommen, weich, wie durch ein beschlagenes Fenster. An der Kante läuft ein dünner Lichtschein. Tippst du mit dem Finger drauf - das Glas wird ein bisschen lebendig. Genau das ist Liquid Glass, „flüssiges Glas“ - der Signature-Stil für Buttons und Panels aus iOS 26.

Der Button hört auf, ein flaches Rechteck mit Füllung zu sein. Er wird zu einer halbtransparenten Glasscheibe, durch die der Hintergrund atmet. Klingt nach Kleinkram. In Wahrheit ist genau das der Grund, warum das Interface so „teuer“ und „Apple-mäßig“ wirkt.

Warum ein Vibecoder Glas verstehen sollte

Du bist Vibecoder - Styles schreibst du nicht von Hand. Warum solltest du also überhaupt wissen, woraus Glas besteht? Hier kommt der Grund. Wenn du die Innereien kennst, dann:

• erklärst du dem Agenten mit Worten - und er liefert beim ersten Mal, statt irgendwas Matschiges hinzuklatschen;
• verstehst du, warum Glas manchmal nicht sichtbar ist (Spoiler: es liegt am Hintergrund) und wie du das schnell reparierst;
• machst du aus der Seite keine „Glas-Hölle“, in der alles durch alles durchscheint und der Text nur jedes zweite Mal lesbar ist;
• sprichst du mit Designern dieselbe Sprache - liquid glass, frosted, blur sind keine Magie, sondern konkrete Begriffe.

„Mach schöne Buttons“ und „Mach Buttons im Liquid-Glass-Stil: Hintergrund-Unschärfe, leichte Transparenz, Lichtkante, Rundung 16“ - das ist der Unterschied zwischen Lotterie und Bestellung von der Karte.

Woraus Glas besteht: vier Zutaten

Apple nennt das „dynamisches Material“. Klingt furchteinflößend. In Wahrheit sind es vier einfache Schichten übereinander. Merk sie dir - dann kannst du Glas bestellen wie morgens den Kaffee.

1. Hintergrund-Unschärfe - das Herz des Effekts

Glas beginnt mit der Hintergrund-Unschärfe Hintergrund-Unschärfe (blur) - ein Effekt, bei dem alles, was HINTER dem Button liegt, unscharf und verwischt gezeigt wird. Genau deshalb sieht der Button aus wie Milchglas und nicht wie ein einfaches durchsichtiges Quadrat. . Der Button ist nicht mit einer Vollfarbe gefüllt - durch ihn hindurch siehst du, was darunter liegt, nur unscharf. Nimm die Unschärfe weg - du kriegst ein durchsichtiges Quadrat. Füg sie hinzu - und sofort „Milchglas-Fenster“. Das ist die wichtigste Schicht, ohne sie ist der Rest sinnlos.

2. Transparenz und leichter Farbton

Glas ist ein klein wenig transparent - sonst atmet der Hintergrund nicht durch. Und man kann ihm einen schwachen Farbton Farbton (tint) - eine leichte Einfärbung des Glases in eine bestimmte Farbe. Keine Vollfüllung, sondern wie ein leicht getöntes Glas. Wird gebraucht, um einen wichtigen Button hervorzuheben. geben: zum Beispiel den Haupt-Button in der Markenfarbe einfärben, damit er sich von den normalen abhebt. In iOS gibt es für so einen Button sogar einen eigenen „verstärkten“ Stil.

3. Lichtkante - das, was es zum Leben erweckt

Bei echtem Glas läuft an der Kante immer ein heller Streifen, ein Reflex. Ohne ihn ist Glas flach und tot. Mit ihm - plastisch und lebendig. Klingt nach nichts. Der Unterschied ist riesig.

4. Reaktion auf Druck

Ein guter Glas-Button antwortet auf den Finger Interaktivität (interactive) - der Button reagiert auf Berührung und Maus-Hover: er leuchtet leicht auf, spielt mit Licht. Macht das Interface lebendig. In iOS wird das separat aktiviert - nicht jedes Glas muss reagieren. : er leuchtet leicht auf, spielt mit Licht unter der Berührung. Aber Achtung. Diese Reaktion gibt man nicht jedem, sondern nur dem, worauf man wirklich drückt - Buttons und Schaltern. Eine dekorative Glaskarte fasst niemand an, die braucht keine Reaktion.

Mehrere Glas-Buttons nebeneinander: ein Container

Genau hier stolpern Anfänger. Ein einzelner Glas-Button - kinderleicht. Aber wenn mehrere in einer Reihe stehen, zum Beispiel in der unteren Leiste, taucht eine Regel auf: leg sie in einen gemeinsamen Container.

Wozu? Es gibt zwei Gründe. Erstens - so verschmelzen die Glasscheiben an den Kanten schön, wenn sie nah beieinander stehen, wie Wassertropfen, die sich zu einem verbinden. Zweitens - so ist es schneller: ein gemeinsames Glas für fünf Buttons zu zeichnen ist leichter als fünf einzelne. Fünf getrennte Gläser - das bedeutet Ruckeln und Chaos auf dem Bildschirm.

Warum das Glas nicht geklappt hat: ein Beispiel

Du bittest den Agenten: „Mach mir trendige Glas-Buttons auf der Seite.“ Er klatscht munter halbtransparente Blöcke hin. Du schaust auf das Ergebnis - und verstehst nicht, wo der Haken ist. Irgendwelche blassen Rechtecke, kein „Wow“, der Text stellenweise gar nicht lesbar.

Was schiefgelaufen ist:

1. Die Buttons stehen auf weißem Hintergrund - nichts zum Verschwimmen, Glas nicht sichtbar.
2. Keine Lichtkante - das Glas ist flach und tot.
3. Dunkler Text über einem dunklen, verschwommenen Foto - verschmilzt zu Matsch.

Und jetzt schau, wie man Glas mit Verstand bestellt:

Mach auf der Landingpage Glas-Buttons im iOS-Liquid-Glass-Stil. Wichtig:

Die Buttons sollen über einem lebendigen Hintergrund stehen - großes Foto oder
knalliger Verlauf, damit es durch das Glas etwas zu verschwimmen gibt.
Glas-Effekt: Hintergrund-Unschärfe hinter dem Button, leichte Transparenz,
helle Lichtkante, Eckenrundung 16.
Den Haupt-Button „Bestellen“ leicht in das Marken-Teal einfärben,
damit er sich von den normalen abhebt.
Die Buttons in der unteren Leiste in einen gemeinsamen Container legen,
damit sie an den Kanten schön verschmelzen und nicht ruckeln.
Prüf die Lesbarkeit des Textes auf dem Glas, sowohl im hellen als auch im dunklen Theme.
Wenn der Text mit dem Hintergrund verschmilzt - füg Kontrast hinzu.

Häufige Fehler mit Glas-Buttons

• Glas auf weißem oder einfarbigem Hintergrund. Nichts zum Verschwimmen - kein Effekt. Gib einen lebendigen Hintergrund, fertig.
• Aus allem Glas machen. Glas ist für Buttons, Panels und Karten, nicht für jeden Block und jeden Buchstaben.
• Die Lichtkante vergessen. Ohne Kanten-Reflex sieht Glas flach und billig aus. Eine Kleinigkeit, die entscheidet.
• Mehrere Gläser ohne Container. Ruckeln und Chaos. Benachbarte Glasscheiben - in einen Container.
• Lesbarkeit ignorieren. Schönes Glas, auf dem man den Text nicht sieht, ist ein kaputter Button. Prüf den Kontrast in beiden Themes.
• Undurchsichtiger Hintergrund unter dem Glas. Hinter dem Glas eine dichte Füllung - und die ganze Durchscheine-Idee stirbt still.