Richtlinien für reaktionsfähiges Design

Reaktionsfähige Canvas-Apps passen ihr Layout und die Navigation an den verfügbaren Viewport an, anstatt eine feste Canvas zu skalieren. Entwerfen Sie reaktionsfähiges Verhalten absichtlich, damit die App in jeder unterstützten Fenstergröße, Geräteausrichtung, Zoomfaktor und Eingabemodus verwendet werden kann.

Jede der folgenden Richtlinien zielt darauf ab, sicherzustellen, dass Ihre Canvas-App eine optimale Benutzererfahrung bietet, unabhängig von der Bildschirmgröße oder Ausrichtung des Geräts. Diese Richtlinien befassen sich mit einem der wichtigsten Aspekte der modernen App-Entwicklung. Diese Richtlinien sind von entscheidender Bedeutung für Entwickler, die die Barrierefreiheit und die Benutzerbindung ihrer Power Apps verbessern möchten.

Anpassen an Bildschirmgrößen

Canvas-Apps sollten so konzipiert werden, dass das Layout und die Benutzeroberfläche basierend auf der Bildschirmgröße des Geräts automatisch angepasst werden. Durch diese Reaktionsfähigkeit wird sichergestellt, dass die App auf verschiedenen Geräten, von Smartphones bis hin zu Desktopcomputern, funktionsfähig und visuell ansprechend bleibt.

Verwenden von automatischen Layoutcontainern

Verwenden Sie horizontale und vertikale Autolayoutcontainer als primäre Struktur für einen reaktionsfähigen Bildschirm. Diese Container organisieren und ausrichten App-Komponenten dynamisch, um sicherzustellen, dass sie effektiv auf Änderungen in Bildschirmabmessungen reagieren.

Anpassen an die Größe deaktivieren und Seitenverhältnis und Ausrichtung verwalten

Deaktivieren Sie die Einstellung An Bildschirmgröße anpassen, um die echte Reaktionsfähigkeit der App zu ermöglichen. Diese Einstellung verhindert die Skalierung und fördert die anpassung des natürlichen Layouts an verschiedene Bildschirmgrößen. Passen Sie außerdem das Seitenverhältnis und die Einstellungen für " Ausrichtung sperren " an. Diese Anpassungen stellen sicher, dass das Layout der App effektiv auf verschiedene Bildschirmgrößen und Ausrichtungen reagiert. Die App behält sowohl im Hoch- als auch im Querformat eine konsistente und funktionsfähige Benutzeroberfläche bei.

Dynamische Layouts verwenden

Verwenden Sie Layoutdesigns wie Splitscreen und Randleiste, die verschiedene Benutzeroberflächen auf verschiedenen Geräten bieten. Diese Anpassung verbessert die Funktionalität der App, wodurch sie für Benutzer auf jedem Gerät intuitiver wird.

Verwenden von Formeln für dynamisches Layout

Verwenden Sie Formeln anstelle von festen Koordinaten zum Positionieren und Anpassen von Steuerelementen. Dieser Ansatz stellt sicher, dass sie sich an Änderungen an Bildschirmabmessungen für ein dynamisches, reaktionsfähiges Layout anpassen.

Planung für verschiedene Geräte

Effektives responsives Design bedeutet, vorauszusehen, wie die App auf verschiedenen Geräten aussieht und funktioniert. Diese Vorfreude umfasst Entscheidungen zum Ändern der Größe von Elementen oder zum Vollständigen Ausblenden von Elementen auf kleineren Bildschirmen, um Platz zu optimieren und die Benutzerfreundlichkeit zu gewährleisten.

Praktische Umsetzung

Das Umwandeln einer nicht reagierenden Canvas-App in eine reaktionsfähige App erfordert einen systematischen Ansatz. Dieser Ansatz umfasst das Anpassen von Einstellungen für die Reaktionsfähigkeit und die sorgfältige Konfiguration von Containereigenschaften, um sicherzustellen, dass Elemente innerhalb der App an verschiedene Bildschirmgrößen angepasst werden.

Ressourcen

Nächster Schritt

Codelesbarkeit

  • Last updated on