Modernes, aktualisiertes Design für modellgesteuerte Apps

Modellgesteuerte Apps weisen ein modernes, aktualisiertes Aussehen auf, wenn die Einstellung " Neue Look-App " aktiviert ist. Das neue Design bietet aktualisierte Stilelemente, darunter z. B. Schriftarten, Farben, Rahmen, Schatten usw., die sich am neuesten Microsoft Fluent Design-System orientieren. Das aktualisierte Design erleichtert die Verwendung modellgesteuerter Apps, sodass Benutzer ihre Ziele schnell und effizient erreichen können. Das Fluent-Designsystem bietet Konsistenz, Qualität und Microsoft-weite Plattformkohärenz. Es bietet auch eine solide Grundlage für die Erweiterbarkeit und ermöglicht die Unterstützung des dunklen Modus in der Zukunft.

Was ist in dem modernen, aktualisierten Design enthalten

Folgendes können Sie in der modernen, aufgefrischten Erfahrung erwarten:

• Aktualisierter Stil bei Formular-, Ansichts- und Dashboard-Seiten, einschließlich der Verwendung von Schlagschatten und helleren Hintergrundfarben, um ein erhöhtes oder schwebendes Erscheinungsbild zu erzeugen. Das schwebende Erscheinungsbild hilft dabei, Abschnitte optisch zu trennen und die Aufmerksamkeit auf den Hauptinhalt zu lenken.
• Neue Fluent-basierte Steuerelemente in Formularen, Geschäftsprozessabläufen und Dialogen. Die Höhe von Dialogfeldern wird jetzt automatisch basierend auf dem Inhalt angepasst.
• Ein neues Power Apps-Raster anstelle des schreibgeschützten Rasters in Ansichts- und Standard-Dashboard-Seiten.
• Ein neuer Mechanismus zum Anpassen der App-Kopfzeilen-Farben an Ihr persönliches oder organisatorisches Branding. Weitere Informationen finden Sie unter Verwenden moderner Designs.

Befehlsleiste

Die schwebende Befehlsleiste ist auf die Microsoft 365-Erfahrung ausgerichtet, mit konsistenten Abständen, abgerundeten Ecken und Höhen. Beachten Sie, dass sich die Befehlsleiste im folgenden Beispiel in einem separaten Abschnitt oben auf der Seite befindet.

Ansichtsseiten

Ansichtsseiten verwenden die neue Befehlsleiste und aktualisierte Rasterbereiche, die die Höhenänderungen nutzen, um die Aufmerksamkeit des Benutzers auf sich zu ziehen.

Die wichtigste Änderung auf den Ansichtsseiten ist die Umstellung vom schreibgeschützten Raster auf das Power Apps-Rastersteuerelement, durch das dank Endlos-Scrolling eine moderne Datenbrowserumgebung entsteht. Dieses Raster erscheint auch in Unterrastern und zugehörigen Rastern in Hauptformularen und Dashboards. Das Power Apps-Rastersteuerelement unterstützt auch die Inline-Bearbeitung mithilfe der Eigenschaft Filterung aktivieren. Erstellende können ihre bearbeitbaren Raster manuell konfigurieren, um die Power Apps-Rastersteuerung zu verwenden.

Das folgende Beispiel zeigt eine Ansichtsseite im modernen, aufgefrischten Design.

Formularseiten

Formularseiten verwenden die neue Befehlsleiste mit aktualisierten Kopfzeilen, Registerkarten, Abschnitten und Geschäftsprozessflüssen. Schnellansichten, Kartenformulare, Kopfzeilen, Sitemaps und Zeitleisten-Steuerelemente verfügen ebenfalls über ein aktualisiertes Design.

Das folgende Beispiel zeigt eine Formularseite im modernen, aufgefrischten Design.

Feld-Steuerelemente

Feldsteuerelemente wie Texteingabe, Aktionseingabe, Suche und Kontrollkästchensteuerelemente werden mithilfe von Fluent-Komponenten erstellt und entworfen. Es ist geplant, in zukünftigen Updates weitere Feldsteuerelemente mithilfe des Fluent-Designs zu modernisieren.

Feldabschnitte, die Container für die Felder in einem Formular sind, haben ein optimiertes Design. Symbole befinden sich jetzt auf der rechten Seite der Feldbeschriftungen. Einige redundante Symbole wurden entfernt, um ein übersichtlicheres Layout zu erzielen. Das Design von Eingabe- und Fehlermeldungen wird ebenfalls basierend auf dem Fluent-Design aktualisiert.

Das folgende Beispiel zeigt eine Reihe von Feldern im modernen, aufgefrischten Design.

Dashboardseite

Die Seite des Systemdashboards mit unabhängigen Unterrastern und Diagrammen wurde aktualisiert, um die neue Befehlsleiste zu verwenden, und hat ein ähnliches Design wie die Abschnitte auf Formular- und Ansichtsseiten. Wenn die moderne Benutzeroberfläche aktiviert ist oder wenn Sie den monatlichen Kanal verwenden, verwenden die Raster des Systemdashboards das neue Power Apps-Rastersteuerelement. Das neue Raster ist standardmäßig nicht aktiviert.

Diagramm-Steuerelemente

Die Diagrammsteuerelemente auf Ansichtsseiten und in Dashboards wurden auf eine neue Farbpalette aktualisiert, um ein modernes, aktualisiertes Erscheinungsbild zu erzielen.

Wenn die Diagrammfarben angepasst wurden, hat das neue Erscheinungsbild Vorrang vor den benutzerdefinierten Farben. Der Erstellende kann die benutzerdefinierten Farben beibehalten, indem er die Eigenschaft CustomColorOverride in der XML-Datei des Diagramms hinzufügt.

<Chart CustomColorOverride="true">

Kopfzeile und Navigationsaktualisierung

Der überarbeitete Header und die Navigation machen Apps durch einen modernen App-Header, eine optimierte Sitemap und komprimierte Seitenkopfzeilen mit kompakten Befehlen einfacher zu bedienen. Diese Erfahrung steigert die Produktivität, indem sie die Zeit für das Navigieren durch Seiten, das Suchen von Befehlen und das Erlernen von Layouts reduziert.

So sehen der neue App-Header und die optimierte Siteübersicht aus:

So sieht der neue Formular-Kopfbereich aus, wenn der Fokus stärker auf den Zeilendetails liegt:

Dieses Update gilt automatisch für alle Apps, die vom Plandesigner generiert werden. Für andere vorhandene Apps können Sie sich entscheiden, indem Sie die folgenden Schritte ausführen:

1. Wählen Sie in der Befehlsleiste des App-Designers Einstellungen aus.
2. Wählen Sie Features aus, und dann aktivieren Sie die Aktualisierung der Kopfzeile und Navigation.

Weitere Informationen finden Sie in den häufig gestellten Fragen zur Aktualisierung von Kopfzeilen und Navigation.

Bekannte Einschränkungen

Das moderne, aufgefrischte Design für modellgesteuerte Apps hat einige Einschränkungen:

Modernes, aktualisiertes Erscheinungsbild außerhalb des Browsers

Die mobile App und die Mail-App unterstützen das moderne, aktualisierte Design nicht und gehören nicht zur Vorschau oder allgemeinen Verfügbarkeit.

Das Design wechseln oder den dunklen Modus aktivieren

Der Wechsel des Designs oder die Aktivierung des dunklen Modus wird derzeit nicht unterstützt.

Berücksichtigung klassischer Designs

Mit dem modernen, aktualisierten Design berücksichtigt Power Apps keine Anpassungen des klassischen Designs mehr. Sie können jedoch die Farben für den App-Header außer Kraft setzen, um das Branding Ihrer Organisation an das moderne, aktualisierte Erscheinungsbild anzupassen. Weitere Informationen finden Sie unter Ändern der Farbe des App-Headers. Weitere Designanpassungsoptionen für das neue, aktualisierte Erscheinungsbild sind noch nicht verfügbar.

Benutzerdefinierte Symbole

Nur SVG-Symbole werden unterstützt. Wenn Sie andere Formate wie PNG verwenden, werden diese in der Navigation nicht angezeigt und stattdessen wird ein Standardsymbol angezeigt.

Häufig gestellte Fragen (Frequently Asked Questions, FAQs)

1. Kann ich das moderne, aktualisierte Design im Power Apps component framework oder in benutzerdefinierten Codekomponenten verwenden?

Das verwendete moderne Design wird an Komponenten des Power Apps component framework übergeben, sodass Sie Ihre Komponenten mit modernen Designs gestalten können.

2. Kann ich en modernen, aktualisierten Look in benutzerdefinierten Seiten verwenden?

Moderne Steuerelemente können mit benutzerdefinierten Seiten und dem modernen, aktualisierten Erscheinungsbild verwendet werden. Derzeit verwenden benutzerdefinierte Seiten nicht das moderne Design.

3. Kann ich die Farbe des App-Headers ändern?

Sie können die Farbe des App-Headers ändern, um sie an Ihre Organisation anzupassen, und gleichzeitig das moderne, aktualisierte Erscheinungsbild verwenden. Weitere Informationen finden Sie unter Verwenden moderner Designs. Weitere Designanpassungsoptionen für das neue, aktualisierte Erscheinungsbild sind noch nicht verfügbar.

4. Häufig gestellten Fragen zur Aktualisierung von Kopfzeilen und Navigation

Kann ich die Aktualisierung von Kopfzeile und Navigation aktivieren, ohne das neue Design zu aktivieren?

Nein, Sie müssen Neues Design zusätzlich zur Kopfzeilen- und Navigationsaktualisierung aktivieren, um die aktualisierte Kopfzeile und Navigation in der App anzuzeigen.

Wie aktiviere ich die Aktualisierung des Headers und der Navigation für bestehende Apps?

Die Funktion ist als Anmelde-Funktion für bestehende Apps verfügbar. Sie können sie über die App-Einstellungen aktivieren.

Warum sehe ich das Hilfe-Symbol in der globalen Befehlsleiste in der App-Kopfzeile nicht?

Der Hilfelink zur Dokumentation ist im Bereich Einstellungen verfügbar.

Wo befindet sich die Seitenbereichsleiste neben dem Copilot-Chat-Bereich?

Der Seitenbereich-Umschalter wird erst verfügbar, wenn in der App zwei oder mehr Seitenbereiche vorhanden sind. Wenn der Copilot-Chat der einzige Seitenbereich ist, wird der Umschalter ausgeblendet.

Warum unterscheidet sich die Sitemap einer App, die vom Plan-Designer generiert wurde, von der Sitemap vorhandener Apps?

Apps, die vom Plan-Designer generiert werden, verfügen über eine optimierte Sitemap. Home, Zuletzt verwendet, Angeheftet und Siteübersichtsgruppen sind standardmäßig deaktiviert, um eine vereinfachte, flache Liste von Navigationsoptionen in der Siteübersicht zu bieten.

Wiederherstellen des klassischen Aussehens

Seit der Veröffentlichung von 2025 Wave 1 konnten Endbenutzer sich nicht mehr selbst auf den klassischen Look umstellen. Administratoren können jedoch das neue Aussehen für alle Benutzer weiterhin deaktivieren, indem sie die Einstellung "Neues Aussehen für modellgesteuerte Apps" aktualisieren.

1. https://make.powerapps.com/ öffnen
2. Öffnen Sie unter Lösungen eine vorhandene Lösung, die eine oder mehrere modellgesteuerte App enthält.
3. Wählen Sie Vorhandenes hinzufügen>Mehr>Einstellung.
4. Suchen Sie nach Neues Design.
5. Wählen Sie Neues Design für modellgesteuerte Apps aus.
6. Wählen Sie Hinzufügen aus, um dies zur Lösung hinzuzufügen.
7. Wählen Sie Neues Design für modellgesteuerte Apps im Lösungs-Explorer aus.
8. Aktualisieren Sie Wert der Umgebung festlegen auf Nein.
9. Fügen Sie die Apps der Lösung hinzu, für die Sie das neue Design deaktivieren möchten.
10. Aktualisieren Sie den Wert der Apps auf Nein.
11. Wählen Sie Speichern.
12. Veröffentlichen Sie alle Anpassungen.

Weitere Informationen zu diesen und anderen App-Einstellungen finden Sie unter "Verwalten modellgesteuerter App-Einstellungen" im App-Designer .