Das neue macOS-Tahoe-Design hält Einzug in Ihre 4D-Anwendungen

Mit macOS Tahoe führt Apple Inc. eine neue visuelle Sprache namens „Liquid Glass“ ein. In dieser Version orientieren wir uns an diesem Interface-Stil, um mit der neuesten Designentwicklung von macOS Schritt zu halten.

Ab 4D 21 R3 übernehmen Ihre 4D-Desktop-Anwendungen automatisch diese neue Liquid Glass-Oberfläche. Es sind keine Formularaktualisierungen, Codeänderungen oder Neugestaltungen erforderlich.

Um diesen Übergang zu unterstützen, hat 4D sein Rendering angepasst, um den neuen, von macOS eingeführten Liquid-Glass-Vorgaben zu entsprechen. 4D übernimmt die Komplexität der UI-Weiterentwicklung, sodass Ihre Anwendungen mit minimalem Aufwand auf dem neuesten Stand bleiben. Dadurch profitieren Mac-Nutzer von einer Benutzeroberfläche, die dem aktuellen visuellen Stil des Systems entspricht, ohne dass Entwickler dafür großen Aufwand betreiben müssen.

Was ist Liquid Glass

Laut Apple ist Liquid Glass ein neuer Rendering-Stil für Benutzeroberflächen, der auf durchscheinenden Materialien, dynamischen Unschärfeeffekten und subtilen Lichteffekten basiert. Diese Elemente passen sich an den Hintergrundinhalt an und sorgen für mehr Tiefenwirkung, ohne die Lesbarkeit zu beeinträchtigen.

Native und automatische Integration

Das Liquid Glass-Rendering wird direkt von macOS übernommen. 4D nutzt die Grafik-Engine des Systems, um diese visuellen Aktualisierungen automatisch auf Anwendungsfenster und Standardsteuerelemente anzuwenden.

Es sind keine Konfiguration, kein zusätzlicher Code und keine Formularmigration erforderlich. Wenn eine 4D-Anwendung unter macOS Tahoe läuft, profitiert sie von der vom System bereitgestellten Darstellung.

Dieser Ansatz stellt sicher, dass Ihre Benutzeroberflächen den Betriebssystemstandards entsprechen und Ihre bestehenden Investitionen erhalten bleiben.

Tipps für die Umstellung bei der Einführung von Liquid Glass in 4D-Anwendungen

Obwohl Liquid Glass automatisch angewendet wird, kann die Überprüfung bestimmter UI-Elemente dazu beitragen, die visuelle Konsistenz und die Layout-Integrität zu wahren.

Schaltflächen

Achten Sie besonders auf die Schaltflächenvarianten. In Liquid Glass:

• Schaltflächen der regulären Variante haben ein quadratisches Erscheinungsbild.
• Schaltflächen der großen Variante wirken runder.

Der visuelle Wechsel erfolgt bereits bei einem Höhenunterschied von nur einem Pixel. Wenn Ihre Formulare Reihen von Schaltflächen mit leicht unterschiedlichen Höhen enthalten, kann es zu einer Mischung aus eckigen und abgerundeten Stilen kommen.

Nehmen Sie sich einen Moment Zeit, um die Schaltflächenhöhen zu überprüfen, damit eine einheitliche visuelle Ausrichtung gewährleistet ist.

Optionsfelder und Kontrollkästchen

Optionsfelder und Kontrollkästchen erscheinen unter Liquid Glass etwas größer.

Überprüfen Sie den Abstand und die Ausrichtung um diese Steuerelemente herum, um die Lesbarkeit und die visuelle Ausgewogenheit mit den aktualisierten Steuerelementgrößen sicherzustellen.

Kombinationsfelder

Mit Liquid Glass werden Kombinationsfelder nun durchscheinend dargestellt. Daher können Hintergrundelemente, die zuvor unsichtbar waren, durch das Kombinationsfeld hindurch sichtbar werden.

Wenn sich in Ihren Formularen Objekte überlappen, überprüfen Sie diese Bereiche sorgfältig. Möglicherweise müssen Sie die Sichtbarkeit von Hintergrundobjekten per Code anpassen, um die Übersichtlichkeit zu gewährleisten und zu vermeiden, dass unbeabsichtigte Objekte angezeigt werden.

Anpassung Ihrer Benutzeroberfläche mit CSS und FORM-Theme

Während Liquid Glass automatisch angewendet wird, bietet 4D auch Tools zur Feinabstimmung Ihrer Benutzeroberfläche, falls erforderlich.

Sie können CSS-Medienabfragen verwenden, um Ihr Styling an das aktuelle Formular-Theme anzupassen. Dies ist besonders nützlich, um Unterschiede zwischen macOS Classic, macOS Liquid Glass, Windows Classic und Windows Fluent UI zu handhaben.

@media (form-theme: liquid-glass) {
    .panel {
        borderRadius: 10px;
        fill: #F5F7FA;
        stroke: #CDD6E0;
    }
}

@media (form-theme: mac-classic) {
    .panel {
        borderRadius: 4px;
        fill: #F2F2F2;
        stroke: #D0D0D0;
    }
}

In diesem Beispiel wird das Erscheinungsbild der Klasse „.panel“ automatisch an das aktive Formular-Theme angepasst, sodass Ihre Benutzeroberfläche ohne zusätzliche Logik den visuellen Merkmalen von Liquid Glass oder dem klassischen macOS-Stil entspricht.

Darüber hinaus ermöglicht der FORM theme Befehl ermöglicht es Ihnen, den aktuellen Rendering-Modus programmgesteuert zu ermitteln. Er gibt nun Werte wie „LiquidGlass“ oder „Classic“ zurück, wodurch sich das Verhalten bei Bedarf leicht anpassen lässt.

Dieser Ansatz bietet Ihnen Flexibilität: Meistens sind keine Änderungen erforderlich, aber Sie haben dennoch die volle Kontrolle, wenn Feinabstimmungen notwendig sind.

Zur Deaktivierung von Liquid Glass

Es gibt einen wichtigen Unterschied, den Sie beachten sollten.

Bei 4D- und 4D Server-Anwendungen, die mit 4D 21 R3 unter macOS 26 Tahoe laufen, kann Liquid Glass nicht deaktiviert werden. Das Rendering wird nativ vom Betriebssystem übernommen und automatisch angewendet.

Bei Engine-basierten Anwendungen ist es jedoch möglich, Liquid Glass während einer Übergangsphase zu deaktivieren. Fügen Sie dazu den Schlüssel „UIDesignRequiresCompatibility“ in die Datei „Info.plist“ der Anwendung ein. Dadurch kann die Engine-Anwendung den bisherigen visuellen Stil beibehalten, während Sie Ihre Benutzeroberfläche anpassen.

Diese Flexibilität kann zu reibungslosen Migrationen beitragen. Langfristig gewährleistet die Übernahme des nativen Renderings des Systems eine bessere visuelle Konsistenz und Integration.

Fazit

Dank der Liquid-Glass-Unterstützung unter macOS Tahoe übernehmen 4D-Anwendungen automatisch den aktuellen visuellen Stil des Systems, ohne dass Änderungen am Code oder an Formularen erforderlich sind.

Diese native Integration unterstreicht einen der Hauptvorteile von 4D: Anwendungen entwickeln sich mit minimalem Aufwand entsprechend den UI-Standards des Betriebssystems weiter, während andere Technologien möglicherweise eine manuelle Neugestaltung oder Anpassung erfordern.

Dadurch können sich Entwickler auf die Funktionalität konzentrieren und dennoch Benutzeroberflächen bereitstellen, die visuell auf dem neuesten Stand bleiben.