Responsive Authoring

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 4 Minuten Lesedauer

    • Verwenden Sie reaktionsfähiges Authoring, um UI Builder -Seiten zu erstellen, die sich reibungslos an verschiedene Formfaktoren (Größen) wie Desktop, Tablet und Mobilgerät anpassen lassen.

    Responsive Authoring in UI Builder

    Responsive Authoring ermöglicht Ihnen das Erstellen von Seiten, die bei jedem Formfaktor gut aussehen und ordnungsgemäß funktionieren, sodass Anwender leichter mit dem Inhalt interagieren können. Beispielsweise kann eine Seite, die bei der Anzeige auf einem Laptop drei Spalten enthält, für kleinere Bildschirme zu einer einzelnen Spalte angepasst werden.

    UI Builder bietet derzeit drei Standardformfaktoren an:

    • Desktop (1281 Pixel bis unendlich)
    • Tablet (1280 Pixel und kleiner)
    • Mobil (500 Pixel bis null)

    Zusätzlich zu diesen Formfaktoren können Sie bis zu drei zusätzliche anwenderdefinierte Haltepunkte (Breiten) erstellen. Weitere Informationen finden Sie unter Erstellen Sie einen Haltepunkt für die reaktionsfähige Dokumenterstellung.

    Es gibt verschiedene Techniken zum Bearbeiten von Seiten, sodass sie bei verschiedenen Formfaktoren verwendet werden können. Verwenden Sie eine der folgenden Optionen:

    Responsive Authoring und Reflow

    Ab Xanadu Store-Release 1 ist Responsive Authoring nur verfügbar, wenn UI Builder -Seiten von Grund auf neu erstellt werden. Responsive Authoring ist für vorhandene Seiten oder Seiten, die mit einer Vorlage erstellt wurden, nicht verfügbar. Diese Seitentypen verwenden weiterhin das vorhandene, standardmäßige Reflow-Modell, um die Seiten für verschiedene Bildschirmbreiten anzupassen.

    Reflow wandelt Seitenlayouts automatisch ohne Verlust von Inhalt oder Funktionalität in eine vertikale, gestapelte Ansicht um, wenn Anwender den Browserzoom auf 400 % erhöhen. Diese Anpassung hilft Anwendern mit eingeschränktem Sehen oder Anwendern, die aufgrund von Monitorgröße, Gerätetyp, schlechter Beleuchtung oder anderen Situationen Probleme beim Anzeigen von Webinhalten in einem Browser haben.

    Alle vorhandenen Seiten, die mit Vorlagen oder von Grund auf neu erstellt wurden, verwenden den automatischen Umbruch. Wenn Sie jetzt in UI BuilderSeiten von Grund auf neu erstellen, zeigt Ihnen ein zusätzlicher Schritt, dass Responsive Authoring standardmäßig ausgewählt ist. Sie können stattdessen Reflow verwenden, indem Sie Ohne Reaktion erstellenauswählen. Mit der Option für die reaktionsfähige Erstellung haben Sie jedoch mehr Kontrolle über die Funktionsweise von Seiten und das Aussehen verschiedener Formfaktoren. Weitere Informationen zum Erstellen von Seiten in UI Builderfinden Sie unter Seite in UI Builder erstellen.

    Neuer Schritt, in dem Optionen für reaktionsfähige Erstellung und Umbruch angezeigt werden, wenn eine Seite von Grund auf neu erstellt wird.

    Weitere Informationen zum Umbruch finden Sie unter Reflow for Configurable Workspace.

    Eine Liste der UI Builder -Komponenten, die den Umbruch unterstützen, finden Sie im Abschnitt Unterstützung für Umbruch in den Versionshinweisen zu Next Experience-Komponenten.

    Anwendung und Kaskadierung von Changes

    Alle an einem Formfaktor vorgenommenen Änderungen werden automatisch auf alle kleineren Formfaktoren angewendet. Beispiel: Alle am Tablet vorgenommenen Änderungen gelten sowohl für das Tablet als auch für das Mobilgerät. Wenn Sie dann jedoch Änderungen am mobilen Formfaktor vornehmen, überschreibt dies die kaskadierenden Einstellungen des Tablet-Formfaktors. Mit dieser kaskadierenden Funktionalität können Sie für jeden kleineren Formfaktor bestimmte Änderungen vornehmen, damit die Seite gut aussieht und funktioniert.

    Hinweis:
    Änderungen kaskadieren nicht bis zu größeren Größen. Beispielsweise werden an einem Tablet vorgenommene Änderungen nicht auf den Desktop angewendet.

    Responsive Authoring und Controller

    Wenn Sie einer Seite einen Controller hinzufügen, sind die Controller-Eigenschaften global und können nicht pro Formfaktor festgelegt werden. Weitere Informationen zu Controllern finden Sie unter Daten mithilfe von Controllern an Seiten UI Builder binden (erweiterte Funktion).

    Responsive Authoring beim Erstellen von Seiten verwenden

    Erstellen Sie beim Erstellen von Seiten maßgeschneiderte Designs, um das Erscheinungsbild für verschiedene Formfaktoren zu steuern.

    Standardmäßig erstellen Sie in der Phase Seiten für den Desktop (1281 Pixel bis unendlich). Sie können jederzeit ein anderes Symbol auswählen, um die Seite in der Phase mit einem anderen Formfaktor anzuzeigen, z. B. als Tablet oder Mobilgerät. Bearbeiten Sie die Seite bei Bedarf so, dass sie dem neuen Formfaktor entsprechend angezeigt wird.

    Schwarzer Pfeil, der auf die Formfaktor-Symbole für Desktop-Computer, Tablets und Mobilgeräte oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.

    So sieht eine Beispielseite im Desktop-Formfaktor aus.

    Beispielseite, die mit einer Breite von 1304 Pixel angezeigt wird, um einen Desktop- oder Laptop-Bildschirm darzustellen.

    Hier ist dieselbe Seite, die für den Tablet-Formfaktor angepasst wurde.

    Beispielseite, die mit einer Breite von 900 Pixel angezeigt wird, um ein Tablet darzustellen.

    Beim Tablet wurden die Überschriften- und Bildkomponenten verkleinert. Die Konfiguration der einfachen Listenkomponente wurde so bearbeitet, dass vier Spalten anstelle von sechs angezeigt werden, und die maximale Anzahl von Zeilen wurde auf 5 festgelegt. Beim Bearbeiten einer Komponente für einen Formfaktor werden die Felder, die sich geändert haben, mit einem kaskadierenden Symbol für diesen Formfaktor markiert ( in diesem Fall Tablet). Über das Symbol können Sie die Unterschiede zwischen den Formfaktoren für eine bestimmte Seite einfach bestimmen.

    Einfacher Konfigurationsbereich für Listenkomponenten mit schwarzen Pfeilen, die auf das kaskadierende reaktionsfähige Authoring-Symbol des Tablets neben zwei Feldern zeigen.

    Hier ist dieselbe Seite, die für den mobilen Formfaktor angepasst wurde.

    Beispielseite, die mit einer Breite von 320 Pixel angezeigt wird, um ein Mobilgerät darzustellen.

    Die Anzahl der Wörter in der Überschrift wurde reduziert, und die Bildkomponente wurde ausgeblendet. Die Konfiguration der einfachen Listenkomponente wurde so bearbeitet, dass zwei statt vier Spalten angezeigt werden, und die Option zum Ausblenden der Fußzeilenoption „Alle anzeigen“ wurde ausgewählt. Neben den beiden speziell für Mobilgeräte angepassten Feldern ist ein kaskadierendes Symbol für Mobilgeräte zu sehen. Das Feld Maximale Zeilen behält weiterhin das kaskadierende Tablet-Symbol bei, da dieses Feld die Tablet-Einstellung erbt und nicht für Mobilgeräte angepasst wurde.

    Einfacher Konfigurationsbereich für Listenkomponenten mit schwarzen Pfeilen, die auf die zwei kaskadierenden Symbole für Mobilgeräte und ein Tablet neben Feldern zeigen.

    Zusätzlich zu den Standardformfaktoren in der Editoransicht können Sie jederzeit manuell eine Zahl in das Pixelfeld eingeben. Die Phase wird je nach Bereich an den nächstgelegenen Formfaktor angepasst. Wenn Sie beispielsweise 850 Pixel eingeben, wird die Phase an den Formfaktor des Tablets angepasst, da der Bereich zwischen 1280 und 501 Pixel definiert ist.

    Schwarze Pfeile, die auf das Symbol für den Tablet-Formfaktor und das Pixelfeld zeigen.

    Hinweis:
    Formfaktoren und die Möglichkeit zur Eingabe einer Pixelbreite sind auch bei der Vorschau einer Seite verfügbar. Weitere Informationen finden Sie unter Erfahren Sie, wie Sie Ihre UI Builder -Experience anzeigen und testen können.