Eine Desktop-Umgebung ist von Anfang an adaptiv und unterstützt verschiedene Größen auf verbundenen Displays oder in Fenstern. Unterstützen Sie alle Android-Geräte, indem Sie eine adaptive Benutzeroberfläche erstellen. Adaptive Layouts sind für Desktop-Anwendungen unerlässlich, da Nutzer so die Fenster ihrer Apps nahtlos anpassen können.
Um Ihre App für die Verwendung auf einem Desktop vorzubereiten, passen Sie zuerst die Benutzeroberfläche an und fahren Sie dann mit dem Design für Dichte und Eingabeinteraktion fort. Weitere Informationen finden Sie unter Adaptive Layouts. Wenn Sie ein Design-Lab ausprobieren möchten, sehen Sie sich das Adaptive Design-Lab an.
In Bereichen denken
Verwenden Sie für das Layout einen bereichsbasierten Ansatz, indem Sie Elemente gruppieren und einschließen. Inhalte können mithilfe von visuellen Containern oder durch implizite Gruppierung mit Weißraum organisiert werden. Diese Bereiche sind flexibel, da sie maximiert, minimiert, ausgeblendet, verschoben oder als Pop‑ups angezeigt werden können. Die Gestaltung mit Bereichen vereinfacht die Entwicklung einheitlicher Benutzeroberflächen für verschiedene Mobilgeräte und kann in bestehende Rastern integriert werden, um komplexe Layoutanpassungen zu optimieren.
Das sollten Sie tun
Reichweite
Auf großen Bildschirmen ist zwar mehr Platz für Inhalte, aber der zusätzliche Platz und ergonomische Faktoren wie der Betrachtungsabstand müssen berücksichtigt werden. Die Typografie sollte für Nutzer, die weiter entfernt sitzen oder auf einer Tastatur tippen, leicht vergrößert werden.
UI-Elemente und Text werden auf erweiterten und verbundenen Displays skaliert und können aufgrund der Bildschirmauflösungen unterschiedliche Skalierungen aufweisen.
Verwenden Sie ein oder zwei Schritte höher in Ihren vorhandenen Typografie-Skalierungen oder implementieren Sie eine spezielle Typografie-Skalierung, die für Desktop- und erweiterte Displays entwickelt wurde. Sie können in Ihren Designs auch subjektive Anpassungen vornehmen, um die redaktionelle Qualität zu verbessern.
Das Bild wird außerdem vergrößert und erstreckt sich über den gesamten Bildschirm. So kann der Nutzer die Pflanze genauer sehen, aber der Platz wird nicht effizient genutzt. Berücksichtigen Sie dies beim Strukturieren der UI-Elemente.
Inhalts- und UI-Elemente
Da Inhalte jetzt gruppiert und skaliert werden, kann sich auch die Benutzeroberfläche für Inhalte verschieben oder aktualisiert werden, um besser zu den Breakpoints zu passen.
Legen Sie für jeden Inhaltsbereich fest, ob und wie er angepasst werden soll. Sehen Sie sich die Inhalte selbst an. Wenn sich eine Listenzeile in eine Karte ändert, leidet dann die Interaktionseffizienz und Lesbarkeit des Inhalts? Komponenten können sich an verschiedenen Haltepunkten unterschiedlich verhalten. Sie können ihre Breite oder Sichtbarkeit anpassen oder sogar Komponenten tauschen.
Legen Sie die maximale Breite für jedes UI-Element und jeden Textbereich in einem Bereich fest. UI-Elemente dürfen nicht über die gesamte Breite gestreckt oder verzerrt werden. Legen Sie maximale Abstände und Ränder in Bereichen fest. Der Text sollte durch Begrenzung der Zeilenlängen angenehm zu lesen sein. Kurztexte sollten etwa 60 Zeichen lang sein, während Langtexte länger sein können.
Das sollten Sie tun
Verwenden Sie eine ordnungsgemäße progressive Offenlegung. Kann mehr Inhalt angezeigt werden, wenn der Nutzer die Fenstergröße erhöht? Überlegen Sie, ob die zusätzlichen Inhalte die Produktivität mit weniger Klicks steigern oder für Verwirrung sorgen.
Das Layout der Inhalte in jedem Bereich kann sich je nach Inhalt ändern, indem sie in verschiedene Spalten und Rasterstrukturen umgebrochen werden. Ein vertikales Raster mit einem Karussell kann beispielsweise in ein Mauerwerk-Raster mit einem Feature-Karussell umgewandelt werden. Berücksichtigen Sie vertikale Änderungen für Elemente und kombinieren Sie sie mit Einschränkungen und Änderungen an der Darstellung. Je nach Art der Inhalte, die Sie sich ansehen, möchten Sie Komponenten möglicherweise nicht auf diese Weise verschieben.
Erwägen Sie, dem Nutzer die Möglichkeit zu geben, das Layout an seine Vorlieben anzupassen, um die Lesbarkeit und Produktivität zu maximieren.
Navigation
Nachdem Sie Inhalte und UI-Elemente angepasst haben, legen Sie fest, wie Inhaltsbereiche miteinander und mit der Navigationshierarchie interagieren. Anstatt auf die Detailinhalte zu tippen, können Sie den zusätzlichen Bildschirmplatz nutzen, um Details und unterstützende Inhalte nebeneinander anzuzeigen.
- Wenn eine Navigationsleiste verwendet wird, sollte die untere Leiste aus ergonomischen Gründen zu einer Navigationsspalte an der Seite des Bildschirms aktualisiert werden. Die untere Navigationsleiste sollte nicht in die Länge gezogen werden.
- Bei der sekundären Navigation, z. B. Tabs, sollten Sie eine maximale Breite festlegen, damit die Navigation präziser möglich ist.
- App-Leisten können auch an den entsprechenden Inhaltsbereich angehängt werden. Achten Sie jedoch darauf, dass die Navigationshierarchie nicht durcheinandergebracht wird.
Dichte
Die Interaktions- und visuelle Dichte einer Desktop-Umgebung kann sich aufgrund der Eingabepräzision und der Bildschirmgröße ändern.
- Sie können die Dichte visueller Elemente wie Tabellendaten erhöhen, ohne den Nutzer zu überfordern, was bei einem kompakten Smartphone-Layout der Fall wäre. Betrachten Sie die Inhaltsdichte als optional und ermöglichen Sie immer die Textskalierung im Layout. Legen Sie die Schriftgrößen nicht fest.
- Komponenten sollten ein genaueres Klickziel haben. Integrierte Klickziele um Komponenten herum können zu Fehlklicks führen.
Eingänge
Zusätzliche Eingaben bedeuten zusätzliche Interaktionsmuster für Ihre Nutzer.
Wenn ein Nutzer eine Maus und eine Tastatur hat, muss Ihre App den Hover-Status und den Fokus berücksichtigen.
- Fügen Sie Hover-Zustände für Zeigereingaben wie Maus und Stift hinzu.
- Erfassen Sie Fokusstatus für Elemente, wenn Nutzer zur Barrierefreiheit mit der Tabulatortaste navigieren.
- Berücksichtigen Sie den Cursorstatus, da der Cursor dem Nutzer auch Informationen zur Interaktion und zum App-Status liefern kann.
Zusätzliche Status können die Effizienz steigern.
- Die Funktion „Mit der rechten Maustaste klicken“ kann Kontextmenüs für den schnellen Zugriff auf Funktionen umfassen.
- Mithilfe von Hover-Kurzinfos können Sie Nutzer einarbeiten.
- Mit Tastenkombinationen können Poweruser ihre Produktivität steigern.
