• Englisch
  • Docs
  • Wissensdatenbank
  • F.A.Q
  • Forum
  • Medien
  • Kurse
  • Marktplatz
  • Login
  • Try for free
  • Englisch
  • Docs
  • Wissensdatenbank
  • F.A.Q
  • Forum
  • Medien
  • Kurse
  • Marktplatz
  • Login
  • Try for free
home/Wissensdatenbank/Layout & Design/So halten Sie die Benutzeroberfläche mit Letterboxing einfach und fokussiert

So halten Sie die Benutzeroberfläche mit Letterboxing einfach und fokussiert

Written by Andreas Dallner
Juli 24, 2024

Kennen Sie auch das Problem, dass Ihre UI-Elemente auf großen Bildschirmen verloren aussehen oder Ihre UI so gestreckt ist, dass sie kaum zu bedienen ist?

Es ist gesunder Menschenverstand, Webanwendungen zu entwickeln, um die Benutzeroberfläche an ihren Inhalt anzupassen.
Das bedeutet, dass Sie nur dann die volle Breite des Bildschirms nutzen sollten, wenn Sie genügend Inhalte haben, die angezeigt werden sollen.
Denken Sie immer daran, dem Benutzer zu helfen, sich auf Ihre Inhalte zu konzentrieren und einfach zu bedienende Oberflächen zu haben.
Letterboxing kann Ihnen dabei helfen.
Ich lege das Layout auf eine maximale Breite fest.
Wenn die Bildschirmgröße größer als die maximale Breite ist, wird links und rechts des Inhalts ein Leerzeichen hinzugefügt.
Auf kleineren Bildschirmgrößen verhält sich Ihre Inhaltsbreite reaktionsschnell und wird ebenfalls kleiner.

Wann sollte ich Letterboxing verwenden?

  • Sie möchten, dass Ihre Inhalte wie Formulare einfach und fokussiert erscheinen
  • Ihre Inhalte benötigen nicht die volle Bildschirmbreite wie in Anwendungen, die hauptsächlich Formulare bereitstellen

Wann sollte ich Letterboxing NICHT verwenden?

  • Sie müssen viele Informationen anzeigen, wie in Anwendungen mit Tabellen, die viele Spalten haben

SCHRITT 1: Fügen Sie Ihrer Anwendung die Bibliothek ‘SimplifierLetterbox’ hinzu

Bearbeiten Sie Ihre Anwendung und fügen Sie die Bibliothek ‘SimplifierLetterbox’ hinzu, indem Sie oben auf das Menü ‘Andere’ klicken und ‘Bibliotheken’ auswählen.
Weitere Informationen zum Hinzufügen einer Bibliothek zu Ihrer Anwendung finden Sie in unserer Dokumentation.

SCHRITT 2: Hintergrundbild hochladen

Wenn Sie ein Hintergrundbild verwenden möchten, das in den Leerzeichen links und rechts angezeigt werden soll, laden Sie ein Bild in Ihre Anwendung hoch.
Weitere Informationen zum Hochladen eines Bildes in Ihre Anwendung finden Sie in unserer Dokumentation.

Das Bild muss eine png-Datei mit dem Namen ‘background_page.png’ sein

SCHRITT 3: Bereitstellen der Anwendung

Bereitstellen und Letterboxing ist aktiv

Schlussfolgerung

Letterboxing ist eine großartige Möglichkeit, dem Benutzer zu helfen, sich auf Ihre App zu konzentrieren und eine einfach zu bedienende Benutzeroberfläche zu erstellen.
Fügen Sie einfach unsere SimplifierLetterbox-Bibliothek zu Ihrer App hinzu oder entfernen Sie sie, um das Letterboxing für Ihre Anwendung zu aktivieren und zu deaktivieren.
Die Bibliothek ‘SimplifierLetterbox’ ist seit dem Content Update 5 für Simplifier Release 8 im Standard Content verfügbar.

Holen Sie sich die neuesten Standardinhalte und probieren Sie sie aus
Tags:BENUTZEROBERFLÄCHESeiteTextAnBENUTZEROBERFLÄCHETextAnSeiteZeichen

Was this article helpful?

Yes  No
Related Articles
  • So erstellen Sie Ihre eigene App-Vorlage
  • So verwenden Sie den Simplifier CSS-Editor
  • Verwenden des SAP UI Theme Designers
Leave A Comment Antworten abbrechen

Du musst angemeldet sein, um einen Kommentar abzugeben.

Layout & Design
  • So halten Sie die Benutzeroberfläche mit Letterboxing einfach und fokussiert
  • Verwenden des SAP UI Theme Designers
  • So verwenden Sie den Simplifier CSS-Editor
  • So erstellen Sie Ihre eigene App-Vorlage
Knowledgebase Categories
  • Erste Schritte 4
  • Mobiler Client 2
  • Layout & Design 4
  • Widgets 8
  • Integration 10
  • Datenbank Handling 1
  • Anleitungen 26
  • Best Practices 3
  • Cloud Services 6
  • Plugins 6

  So verwenden Sie den Simplifier CSS-Editor

Verwenden des SAP UI Theme Designers  

GetApp Bewertung

Benutzerbewertungen

Capterra

Benutzerbewertungen

Für AWS-Kunden

Für SAP-Kunden

  • Contact | Imprint | Privacy | © 2025 Simplifier AG. All Rights Reserved.

  • Englisch
  • Deutsch

Link einfügen/ändern

Gib die Ziel-URL ein

Oder verlinke auf bestehende Inhalte

    Es wurde kein Suchbegriff angegeben. Es werden die aktuellen Inhalte angezeigt. Verwende zur Auswahl eines Elements die Suche oder die Hoch-/Runter-Pfeiltasten.