Responsive UI

Eine an jedes Device anpassbare Darstellung schafft ein positives und systemübergreifend konsistentes Nutzererlebnis. Sie macht Audi Anwendungen und Webseiten für möglichst viele Nutzer zugänglich. Die hier formulierten Grundsätze dienen dazu als Leitfaden.

Layoutsystem

Das Audi Layoutsystem führt Designer zu einheitlichen Designlösungen und Interfaces. Mit der responsiven Abstandsmatrix und klaren Layoutvorgaben unterstützt das Audi Layoutsystem breakpoint- und geräteübergreifende Designs und sorgt für eine konsistente Kommunikation des Markenauftritts. Die ausführliche Dokumentation mit Beispielen ist in der Audi React Library und im Audi Sketch Kit integriert, sodass Designer direkt damit arbeiten können. Die folgende Terminologie beschreibt das Layoutsystem:

Inhaltsbereich

Der Inhaltsbereich wird durch die Größe der Page Margin definiert, der ihn vom linken und rechten Seitenrand trennt.

Layoutbereich

Die meisten Komponenten werden innerhalb des Layoutbereichs platziert, der sich üblicherweise über die gesamte Breite des Inhaltsbereichs erstreckt.

Spacing-System

Elemente können innerhalb des Layoutbereichs platziert werden, indem das Spacing-System verwendet wird, um Abstände zwischen ihnen zu definieren.

Um die Layouts konsistent zu halten, werden vordefinierte Page Margins für die verschiedenen Breakpoints empfohlen. Die maximale Inhaltsbreite beträgt 1920 px.

Breakpoints	Page Margin
XS 320 - 374	16 px
S 375 - 767	28 px
M 768 - 1023	40 px
L 1024 - 1339	60 px
XL 1440 -1919	96 px
XXL 1920	96 px

Der Abstand hilft den Seitenkomponenten zu atmen und verleiht dem Inhalt Klarheit und einen visuellen Rhythmus. Das Abstandssystem verwendet ein System von responsiven Spacern, die über verschiedene Breakpoints hinweg dynamisch sind. Dadurch können sich die Informationen auf der Seite an jede Bildschirmgröße anpassen.

Performance

Audi Webseiten werden überall auf der Welt mit unterschiedlichen Devices aufgerufen. Um die Seiten schnell und für jeden zugänglich zu gestalten, müssen auch schwache Endgeräte und deren Zugang zum Internet berücksichtigt werden.

Es sollte immer hinterfragt werden, ob die Website auch auf einem älteren Smartphone mit schlechter Internetverbindung und hohen Datenkosten überzeugt.

Große Titelbilder können performant über CSS Media Queries formatiert werden.

Einpassung von Bildern in den Viewport per JavaScript geht zu Lasten der Performance.

Inhalte und Funktionen

Inhalte und Funktionen werden auf allen Devices in gleichem Umfang angeboten und für die Darstellung und Nutzung auf verschiedenen Auflösungen optimiert.

Es werden keine Funktionen auf mobilen Endgeräten ausgelassen, da nicht nur aufgrund der Auflösung entschieden werden kann, was der Nutzer möchte.

Wenn eine Information oder Funktion auf einem kleinen Screen überflüssig scheint, ist zu hinterfragen ob sie überhaupt benötigt wird.

Ausnahmen bilden dabei nur Devices mit sehr eingeschränkten Möglichkeiten, wie zum Beispiel Smartwatches und natürlich native Mobile Applikationen.

Inhalte und Funktionen werden auf großen und kleinen Screens unterschiedlich dargestellt, sind für den Nutzer aber immer erreichbar.

Inhalte oder Funktionen sollten nicht abhängig von der Screengröße hinzugefügt oder entfernt werden.

Device-Unabhängigkeit

Bei der Entwicklung neuer Komponenten oder Websites werden Interaktionselemente für jedes mögliche Device gestaltet. Das bedeutet: Alle Anwendungen können ohne Probleme per Maus-, Tastatur- oder Touch-Eingabe bedient werden. Nur dies ist zukunftssicher und wirklich responsive und muss bei der Entwicklung neuer Komponenten berücksichtigt werden. Bei der Verwendung von Spacern sind die richtigen Abstände bereits hinterlegt, um eine optimale Gesamterscheinung zu gewährleisten. Spacer sind in der Audi React Library enthalten.

Immer mehr Endgeräte unterstützen die Eingabe per Touch. Deshalb müssen alle UI-Elemente für Touch optimiert sein, egal um welche Auflösung es sich handelt.

Kleine Elemente und geringe Abstände verhindern die problemlose Bedienung auf Touch Devices.

Element queries

Jedes Element, Modul oder Layout erhält die Anpassungen, die notwendig sind, um es auf allen Auflösungen optimal darzustellen. Es werden keine globalen Breakpoints, basierend auf den Screengrößen bestimmter Devices, eingesetzt.

Das macht unabhängig von aktuellen Auflösungen, vereinfacht die Pflege der Komponenten und lässt das Design über die optimale Darstellung entscheiden.

Änderungen an Darstellung und Funktionsweise werden für jede Komponente einzeln festgelegt.

Die Anwendung von globalen Breakpoints auf der ganzen Seite verhindert die optimale Darstellung von Elementen auf bestimmten Screengrößen.

Parameter

Responsive Design bietet mehr Möglichkeiten als nur die Anpassung auf horizontale Breakpoints. Alle Informationen und Parameter über einen Screen sollten in die Gestaltung einfließen: die Breite, die Höhe, das Seitenverhältnis und die Device-Orientierung.

Wenn ein Bühnenbild proportional skaliert wird, ist es sinnvoll das Seitenverhältnis der Bühne abhängig vom Seitenverhältnis des Viewports zu skalieren.

Wenn die Höhe oder das Seitenverhältnis des Viewports nicht berücksichtigt wird, können Informationen schwerer auffindbar sein.

Flexibilität

Videos oder Bilder werden für das Layout je nach Viewport-Größe angepasst. Um Inhalte responsive darzustellen, müssen sie so vorbereitet sein, dass die Größe ohne Probleme verändert werden kann und genug Platz zum Zuschneiden des Bildmaterials zur Verfügung steht.

So müssen Bilder auf großen Viewports anders zugeschnitten werden als Bilder auf kleinen Viewports, genauso passen sich Hintergrundbilder dynamisch an das Viewportverhältnis an und sehen auf großen Viewports anders aus als auf kleinen.