18. Sep 2023
Lesedauer 13 Min.
Das App-Layout
Design moderner Apps, Teil 2
Eine moderne Anwendung braucht ein passendes Layout. Bei mit WinUI 3 gestalteten Windows-Apps betrifft dies vor allem die Seitenstruktur.
dotnetpro
Eine gute Struktur der Anwendung ist eine Voraussetzung dafür, sich schnell auf der Benutzeroberfläche orientieren zu können, die notwendigen Schritte zu unternehmen und die anstehenden Aufgaben zu erledigen. Klappt es problemlos, so spricht man von einer guten Usability und einer intuitiven Gestaltung der Anwendung. Die Herausforderung für Entwickler und Designer besteht daher in einer möglichst reibungslosen Gestaltung der „Reise der Nutzer durch die Anwendung“. Navigation und Layout spielen dabei entscheidende Rollen.Die Navigation führt die Nutzer durch die Anwendung, sodass diese stets schnell zur passenden Seite finden oder den richtigen Eingabedialog aufrufen können. Das Thema Navigationsstruktur haben wir im ersten Teil dieser Artikelserie [1] unter dem Stichwort Information Architecture (IA) vorgestellt. Hier nochmals zur Erinnerung: Es gab unterschiedliche Varianten, nämlich Hierarchie, Hub, TabbedView, Dashboard und FilteredView (Bild 1). Eine Eigenschaft ist in allen Navigationsstrukturen durch die App einheitlich: Es werden mehrere Seiten, Fenster, Dialoge et cetera miteinander verbunden.
IA-Patternsals Varianten der Navigation(Bild 1)
Autor
Jede dieser Seiten hat wiederum einen individuellen Aufbau, der sich nach deren Aufgabe richtet. Wie man die Elemente einer Seite (beispielsweise Buttons, Label, Texteditoren, Grafiken, Bilder oder Fortschrittsbalken) auf dem Bildschirm anordnet, das bezeichnet man als Layout. Moderne Apps, gleichgültig ob für Web oder Desktop, benötigen dafür ein Konzept. Genau das ist unser Thema in diesem Teil der Artikelserie. Wir sehen uns an, welche Anforderungen eine moderne Seitengestaltung erfüllen muss, wir entwickeln Ideen, und daraus folgt der erste Prototyp. Dieser wird in der gemeinsamen Diskussion zwischen den Beteiligten auf den Prüfstand gestellt, verbessert und erneut diskutiert. Das geht so lange, bis ein brauchbarer Entwurf steht. Manchmal funktioniert es im ersten Anlauf, meist sind zwei bis drei Varianten notwendig und gelegentlich ist man mit dem x-ten Entwurf immer noch unzufrieden. Erst wenn der Prototyp steht, geht es um das „technische“ Layout. Wie erreichen wir die geplante Anordnung der Controls? Ist ein Gitter-Layout (Tabelle) der passende Ansatz, oder arbeiten wir mit einer Kombination aus anderen Layout-Containern? Auch bei diesem Schritt arbeiten wir noch am Konzept. Der letzte Schritt ist dann die Realisierung. Bei Einsatz der Grafikschnittstelle WinUI 3 wird die Oberfläche in XAML codiert. All diese Schritte sehen wir uns nun zunächst in allgemeiner und dann in konkreter Hinsicht an einem Beispiel an.
Quellcode
Den Quellcode der WinUI-3-App inklusive der gestalteten News-Seite finden Sie auf der Webseite der Autoren unter [6].
Layout aus inhaltlicher Sicht
Das Layout einer Seite sorgt für eine Platzzuordnung der Controls. Die entscheidende Frage ist: Wie platziert man die Inhalte so, dass es genug Platz für alle Elemente gibt, dass die wichtigen Elemente hervorgehoben werden und der Nutzer den roten Faden erkennt? Es gibt einige Möglichkeiten, um diese Ziele zu erreichen. So sorgt etwa ein passender Abstand zwischen den Elementen für eine gute Struktur, reduziert die Ablenkung, erleichtert es, sich auf den Inhalt zu konzentrieren, und gibt den mentalen Prozessen der Anwender eine logische Bedeutung. Auch die Größenhierarchie spielt eine Rolle, indem die Wichtigkeit der Elemente mit deren Größe korreliert. Jedes Element verfügt über Dimensionen, Ausrichtung, Seitenränder und Abstandseigenschaften (Bild 2), die das Layoutverhalten beeinflussen (vergleiche [2]).
Größe, Rand und Abstandeines Elements, Modifikation nach [1](Bild 2)
Autor
- Größe: Diese ist festgelegt durch die Höhe und die Breite. Beide kann man fest vorgeben oder eine Anpassung (in Grenzen) während der Laufzeit der App ermöglichen. Die Werte müssen so gewählt werden, dass alle Inhalte klar und lesbar sind. Benutzer sollten nicht scrollen oder Elemente vergrößern müssen, um primäre Inhalte zu entschlüsseln. In XAML sind es die Eigenschaften Width und Height. Bei dynamischen Größenänderungen sind es die Eigenschaften ActualHeight und ActualWidth.
- Ausrichtung: Dies betrifft, wie die Elemente in horizontaler und vertikaler Richtung ausgerichtet werden. Die Optionen sind links, rechts, mittig oder gestreckt beziehungsweise oben, unten, mittig oder gestreckt. In XAML sind es die Eigenschaften HorizontalAlignment und VerticalAlignment.
- Ränder: Der Rand steuert den Leerraum um ein Element. Er gilt nicht als Teil des Elements für Treffertests. Der Rand wird in XAML über die Eigenschaft Margin eingestellt.
- Abstand: Dies betrifft den inneren Rahmen eines Elements und seiner untergeordneten Inhalte. Der Abstand des Inhalts eines Elements zum Rand des Elements wird über die Eigenschaft Padding definiert.
Formulare
Ein Formular ist eine Gruppe von Steuerelementen, die Daten sammeln, übermitteln et cetera. Sie werden beispielsweise für die Erfassung von Stammdaten, Bankverbindungen, Umfragen und Ähnliches verwendet. Typische Use-Cases sind die Anmeldung bei einem bestehenden Konto beziehungsweise die Neuregistrierung oder das Anpassen von Programmeinstellungen. Hier können wir unterscheiden:
Layout aus technischer Sicht
Apps für WinUI 3 sind zwar in der Regel klassische Desktop-Applikationen, sie können jedoch auf Geräten mit den unterschiedlichsten Bildschirmgrößen und -auflösungen ausgeführt werden. Wir haben es daher mit verschiedenen Größen und Auflösungen für die Gestaltung einer Seite, eines Formulars oder eines Dialogfelds zu tun. Aufgrund dieses Umstands verbietet sich eine absolute Position und oft auch eine statische Angabe der Größen der Steuerelemente. Diese müssen vielmehr an die vorhandene Größe und Auflösung des Bildschirms angepasst werden. Wir unterscheiden zwei Ansätze: das responsive und das adaptive Design (siehe Textkasten Responsives und adaptives Design).Responsives und adaptives Design
Beide Ansätze zielen darauf, das Screendesign für unterschiedliche Geräte zu optimieren. Die verwendeten Mechanismen unterscheiden sich jedoch.
Bei der Gestaltung des Designs (Layouts) einer Seite spielt auch der tatsächlich typischerweise nutzbare Bildschirmbereich eine Rolle. Wird die App im Vollbildmodus ausgeführt, dann entspricht die Größe des Fensters der Bildschirmgröße und -auflösung. In den meisten Fällen dürfte jedoch mindestens am unteren Rand die Windows-Taskleiste einen bestimmten Platz beanspruchen. Viele Apps werden gegebenenfalls auch oft in einem geteilten Bildschirmmodus verwendet. In diesen Fällen muss die App auch mit weniger Platz zurechtkommen.Bevor es um die technische Realisierung geht, brauchen wir Ideen zum Layout und einen visuellen Prototyp, der einen Eindruck vermittelt, wie die Seite am Ende aussehen soll.
Erste Vorstellungen mithilfe von Prototypen
Die Erstellung von Prototypen ist ein wichtiger Schritt in der modernen Softwareentwicklung. Mit ihrer Hilfe kann das Produkt mit den Kunden abgestimmt werden, Bedürfnisse und Wünsche der Kunden lassen sich rechtzeitig berücksichtigen und eventuelle Änderungen können eingearbeitet werden. Das Ergebnis ist nur dann gut, wenn es den Ansprüchen vollständig genügt.Prototyping ist somit wichtig, um mit der Entwicklung voranzuschreiten. Doch bevor man mit der Erstellung der Prototypen loslegen kann, muss geklärt werden, wie die künftige Anwendung aussehen soll und welche Funktionen ausgeführt werden sollen. Manchmal haben die Stakeholder hierzu bereits zu Beginn des Entwicklungsprozesses sehr genaue Vorstellungen, oft ist es jedoch nicht der Fall.Im Rahmen des Ideenfindungsprozesses wird versucht, Ideen für das künftige Produkt zu entwerfen. Ein guter Ansatz ist dabei, möglichst offen für kreative Vorschläge zu bleiben. Design Thinking steht für Ideenfindung und innovative Problemlösungen und eignet sich, um einen anderen Blick auf gewöhnliche Dinge zu werfen. Der Fokus liegt darauf, neue Potenziale und unbekannte Wege zu entdecken. Es wird unterstellt, dass erfolgreiche und außergewöhnliche Lösungen nur dann entwickelt werden können, wenn man bekannte Annahmen infrage stellt und sich von diesen löst. So kann es gelingen, Lösungen zu finden, die sowohl aus Nutzersicht attraktiv als auch markttauglich und konkurrenzfähig sind. Eine wichtige Voraussetzung ist Teamarbeit, denn Innovation entsteht während des Austauschs. Das Team sollte dabei möglichst heterogen zusammengestellt sein. Auch ein kreatives Umfeld trägt zur Produktivität bei.„How might we“ beziehungsweise „Wie können wir“ ist eine interessante Technik, vor allem für die Suche nach neuen Ideen, die sehr effektiv verwendet werden kann. Dabei werden die Probleme und Herausforderungen in inspirierende Fragestellungen umformuliert. Die einleitenden Worte „Wie können wir …“ bilden eine ideale Grundlage, um eine Frage lösungsorientiert zu verfassen. Bei der Formulierung der Fragen sollte man jedoch darauf achten, dass man diese offen und nicht zu eng stellt und sich dabei an der Zielgruppe orientiert. Das Personas-Konzept ist geeignet, um die Zielgruppe zu identifizieren. Bei der Formulierung gilt es darauf zu achten, das Problem kurz und bündig zu beschreiben.„Crazy Eight“ beziehungsweise „Verrückte Acht“ ist eine Brainstorming-Methode, die es ermöglicht, in kurzer Zeit zahlreiche Ideen zu generieren. Ein DIN-A4-Blatt wird in acht Kästchen aufgeteilt und die Teilnehmer werden aufgefordert, in acht Minuten acht Lösungsideen zu Papier zu bringen. Wichtig für die Umsetzung dieser Methode ist ein gut definiertes Problem-Statement, die Teilnehmer erhalten dadurch ein genaues Verständnis, worum es bei der Fragestellung geht, und die Aufforderung, „out of the Box“ zu denken (Bild 3).
Methode Crazy Eightzur Ideenfindung(Bild 3)
Autor
Im Anschluss an den Ideenfindungsprozess ist es wichtig, die entwickelten Ideen zu evaluieren. Denkbar für die Evaluation sind folgende Fragestellungen:
- Ist es möglich, die vorgestellte Idee technisch umzusetzen?
- Trägt die vorgestellte Idee zur Lösung der Nutzerprobleme bei?
- Welche Auswirkungen entfaltet die Idee auf den Aufwand und die Entwicklung?
Layout-Container in WinUI 3
Was bietet WinUI 3 für das Layout? Gemeint sind die Layout-Container, die wir in ähnlicher Form schon aus der WPF beziehungsweise in fast identischer Weise aus der UWP kennen. In WinUI 3 stehen den Entwicklern folgende Layout-Container – auch als Layout-Panels bezeichnet – zur Verfügung:- Canvas: Die Elemente des User Interface werden mit absoluten Positionsangaben platziert. Für jedes untergeordnete Element werden die Eigenschaften Canvas.Top und Canvas.Left definiert. Die Überlappung von Elementen ist dabei nicht ausgeschlossen.
- Grid: Über die Eigenschaften Grid.Row und Grid.Column können Elemente in Zeilen und Spalten angeordnet werden. Mittels der Eigenschaften Grid.RowSpan und Grid.ColumnSpan können sich die Elemente über mehrere Spalten und Zeilen erstrecken. Für die Größe der Spalten und Zeilen können wir entweder absolute Angaben machen oder wir teilen das Grid mit relativen Angaben zueinander ein.
- RelativePanel: Die untergeordneten Elemente werden in Bezug auf den Rand oder die Mitte des Panels und im Verhältnis zueinander angeordnet. Elemente werden unter Verwendung verschiedener angefügter Eigenschaften positioniert, welche die Ausrichtung des Panels sowie von gleichgeordneten Elementen und die Position gleichgeordneter Elemente steuern.
- StackPanel: Die Elemente werden vertikal oder horizontal in einer Reihe gestapelt.
- VariableSizedWrapGrid: Die Elemente werden in Zeilen oder Spalten angeordnet, die automatisch auf eine neue Zeile oder Spalte umbrochen werden, wenn der Wert von MaximumRowsOrColumns erreicht ist. Ob die Elemente in Zeilen oder Spalten angeordnet werden, hängt von der Orientation-Eigenschaft ab. Mithilfe der Eigenschaften VariableSizedWrapGrid.RowSpan und VariableSizedWrapGrid.ColumnSpan können sich die Elemente über mehrere Spalten und Zeilen erstrecken.
Layout-Containervon WinUI 3(Bild 4)
Autor
Schrittweises Vorgehen in der Praxis
Und nun machen wir es praktisch: Wir wollen das Layout für die News-Seite gestalten. Sinnvoll ist, sich vorab das Ziel der Gestaltung klarzumachen. Ob man die Ziele beziehungsweise Anforderungen aufschreiben muss oder hier mit anderen Hilfsmitteln arbeitet, ist sekundär. Die Informationen über den geplanten Inhalt, die Anforderungen, die Restriktionen und die Zielgruppe stammen aus dem Prozess der Anforderungsanalyse (siehe oben). Kurz und knapp lassen sich die Vorgaben für unsere Beispielseite so zusammenfassen:- Ausführung im Vollbildmodus.
- Anzeige auf einem Bildschirm in der Größe eines Tablets.
- Ablesbarkeit von einiger Entfernung.
- Bildschirm hat Touch-Funktion.
- Daten zu den News stammen beispielsweise von einem Online-Dienst.
- News können nach verschiedenen Kategorien sortiert und angezeigt werden.
- Eine Newsmeldung besteht aus den Items Überschrift, Bilder und Beschreibung.
Prototypder News-Seite(Bild 5)
Autor
Dieser visuelle Prototyp ist nun der Ausgangspunkt für die technische Realisierung. Wir betrachten die Umsetzung anhand der Detail-Seite (Bild 6). Als Erstes geht es darum, auf oberster Ebene die Layoutstruktur zu definieren. Wir verwenden ein Grid und teilen dieses in drei Zeilen und zwei Spalten. Die Zählung der Zeilen und Spalten beginnt bei null. Der Zeile null wird die Überschrift, in diesem Fall für den Bereich der News-Meldung, zugeordnet. Diese Zeile wird in Bezug auf die Höhe mit einer statischen Angabe definiert. Die Zeilen eins und zwei sind dem Inhalt (Content) zugeordnet. Dabei wird das Image beziehungsweise die mögliche Auswahl mehrerer Bilder in die linke Spalte (Spalte null, Zeile eins) eingegliedert. Über die Angabe eines Abstands (Eigenschaft Margin) wird der Abstand zum rechten Rand festgelegt. Die rechte Spalte (Spalte eins, Zeile eins) enthält ein untergeordnetes StackPanel. Dieses StackPanel enthält wiederum zwei TextBlock-Controls für die Überschrift der News-Meldung und den eigentlichen Textinhalt der Meldung. Kommen wir zur letzten Zeile des Grid-Elements (Zeile zwei). Dieses soll eine Liste von weiteren Meldungen enthalten, die als Nächste ausgewählt oder automatisch angezeigt werden. Wir werden dazu ein ListView-Steuerelement verwenden. Dieses Steuerelement wird über beide Spalten angeordnet und entsprechend formatiert. Die Items des ListView-Elements stellen dann die Vorschau auf die nächsten Meldungen dar. Dabei kann für die Items ein eigenes Layout definiert werden. Das erfolgt über die ItemTemplate-Eigenschaft. Hier wird ein weiteres StackPanel verwendet, das ein TextBlock- und ein Image-Element aufnimmt.
Übersichtüber das Layout(Bild 6)
Autor
Den Quelltext zu diesem Entwurf des Layouts der Seite finden Sie in Listing 1. Wir arbeiten hier zunächst nur mit statischen Daten und Platzhaltergrafiken. Später werden diese statischen Daten gegen die Bindung an Datenquellen ausgetauscht.
Listing 1: XAML-Code der News-Seite
&lt;Page <br/> ...&gt; <br/> &lt;Grid x:Name="ContentArea"&gt; <br/> &lt;Grid.ColumnDefinitions&gt; <br/> &lt;ColumnDefinition /&gt; <br/> &lt;ColumnDefinition /&gt; <br/> &lt;/Grid.ColumnDefinitions&gt; <br/> &lt;Grid.RowDefinitions&gt; <br/> &lt;RowDefinition Height="40" /&gt; <br/> &lt;RowDefinition Height="2*" /&gt; <br/> &lt;RowDefinition /&gt; <br/> &lt;/Grid.RowDefinitions&gt; <br/> &lt;StackPanel <br/> Grid.Row="1" <br/> Grid.Column="1" <br/> VerticalAlignment="Center"&gt; <br/> &lt;TextBlock Style="{StaticResource <br/> SubtitleTextBlockStyle}" Text="Überschrift" /&gt; <br/> &lt;TextBlock <br/> Margin="0,30" <br/> Text="..." <br/> TextWrapping="WrapWholeWords" /&gt; <br/> &lt;/StackPanel&gt; <br/> &lt;Image <br/> Grid.Row="1" <br/> Margin="20" <br/> VerticalAlignment="Center" <br/> Source="/Assets/dummy.png" /&gt; <br/> &lt;TextBlock <br/> VerticalAlignment="Center" <br/> Style="{StaticResource TitleTextBlockStyle}" <br/> Text="Sport" /&gt; <br/> &lt;ListView <br/> Grid.Row="2" <br/> Grid.ColumnSpan="2" <br/> VerticalAlignment="Center" <br/> ScrollViewer.HorizontalScrollBarVisibility=<br/> "Auto" <br/> ScrollViewer.HorizontalScrollMode="Enabled" <br/> ScrollViewer.VerticalScrollMode="Disabled"&gt; <br/> &lt;ListView.ItemsPanel&gt; <br/> &lt;ItemsPanelTemplate&gt; <br/> &lt;StackPanel <br/> Margin="0,0,0,20" <br/> HorizontalAlignment="Center" <br/> Orientation="Horizontal" /&gt; <br/> &lt;/ItemsPanelTemplate&gt; <br/> &lt;/ListView.ItemsPanel&gt; <br/> &lt;ListView.Items&gt; <br/> ... <br/> &lt;/ListView.Items&gt; <br/> &lt;ListView.ItemTemplate&gt; <br/> &lt;DataTemplate&gt; <br/> &lt;StackPanel&gt; <br/> &lt;TextBlock Margin="0,0,0,10" <br/> Text="Überschrift" /&gt; <br/> &lt;Image Width="200" Source="/Assets/<br/> dummy.png" /&gt; <br/> &lt;/StackPanel&gt; <br/> &lt;/DataTemplate&gt; <br/> &lt;/ListView.ItemTemplate&gt; <br/> &lt;/ListView&gt; <br/> &lt;/Grid&gt; <br/>&lt;/Page&gt;...
Beachten Sie, dass wir beispielsweise bei den Größenangaben für die TextBlock-Elemente nach Möglichkeit die Angabe von absoluten Werten vermeiden, stattdessen verweisen wir auf übergreifend definierte Ressourcen.Die erstellte XAML-Seite haben wir in den Rumpf einer WinUI-3-App eingegliedert, die wir mithilfe des Template Studio WinUI 3 erstellt haben. Mithilfe dieses Template Studio können wir auf sehr einfache Weise eine App mit einem Hamburger-Menü und mehreren Seiten und einer auf dem MVVM-Konzept basierenden App-Struktur erstellen. Die gestartete App, das heißt die Ansicht der erstellten News-Detail-Seite, sehen Sie in Bild 7.
Erster Entwurf der Appin WinUI 3 für die News-Seite(Bild 7)
Autor
Fazit und Ausblick
Stehen die Navigationsstruktur und die Layouts der Seiten, dann geht es darum, die passenden Steuerelemente für die Dateneingabe und die Anzeige auszuwählen. Es gibt meist mehrere Optionen, welches User-Interface-Control in der aktuellen Situation passend ist. Dazu nur vorausschauend ein Beispiel: Die Standardbibliothek von WinUI 3 enthält bereits eine große Anzahl von Button-Elementen: (einfacher) Button, DropDownButton, RepeatButton, SplitButton und ToggleSplitButton. Hinzu kommen Buttons aus den Bibliotheken von Drittanbietern. Oft gibt es „technisch“ mehrere Optionen, das Ziel zu erreichen. Hier gilt jedoch: Ein Blick in die Designrichtlinien gibt Orientierung, welches Steuerelement die beste Wahl ist. Ein Überblick über die UI-Controls von WinUI 3 und deren Verwendung in der Praxis ist das Thema unseres dritten Teils der Serie.Fussnoten
- Elena Bochkor, Veikko Krypczyk, Einstieg: Das App-Konzept, Design moderner Apps, Teil 1, dotnetpro 9/2023, Seite 38 ff., http://www.dotnetpro.de/A2309WinUI3
- Microsoft Learn, Entwurf: Ausrichtung, Rand, Abstand, http://www.dotnetpro.de/SL2310WinUI3_1
- Design- und Prototyping-Tool Figma, http://www.figma.com
- AdobeXD, http://www.adobe.com
- Microsoft Learn, Formulargestaltung für moderne Windows-Apps, http://www.dotnetpro.de/SL2310WinUI3_2
- Quellcode der WinUI-3-Beispiel-App, https://wp.larinet.com
