User Interfaces bei Audi sind so vielfältig wie ihre Einsatzzwecke – von der inspirierenden Website bis hin zur Applikation für einen Service. Sie beruhen auf den übergreifenden Prinzipien des Audi Erscheinungsbildes: Vielseitigkeit, Ehrlichkeit und Balance. Das Ziel sind vielfältige Lösungen und ein systemübergreifendes, ausbalanciertes Nutzererlebnis – von der App bis zum Fahrzeug. Die Basis dafür ist ein gemeinsamer Baukasten aus Komponenten, Modulen und Animationen.

Layoutaufbau

Die Komponenten und das Layout bieten in der Anwendung vielseitige Möglichkeiten für die inspirierende Darstellung von Inhalten und Funktionen. Der Nutzer ist unser Maßstab. Seine Aufgaben und Bedürfnisse stehen im Zentrum. Seine Interaktionsmöglichkeiten werden einfach und klar gestaltet.

Zuerst für kleine Viewports gestalten

Wenn eine Anwendung auf unterschiedlichen Devices ausgeliefert werden soll, wird sie zuerst für kleine Viewports konzipiert und gestaltet.

 

Einteilung in Flächen

Das Layout wird großzügig vertikal und horizontal in Flächen eingeteilt, um Inhalte und Inhaltsabschnitte klar zu strukturieren.

 

Einsatz von Kacheln

Inhalte können innerhalb rechteckiger Kacheln dargestellt werden. Kacheln werden bündig und mit schmalem Abstand zueinander platziert. Erhalten Kacheln zusätzlich eine Funktion oder enthalten sie mehrere Funktionen, werden sie zu Cards.

Bildergalerie aus Kacheln.
Kachel mit Textinhalt.
Anwendung mit Cards, die eine Aktion oder eine Seite aufrufen.
Kacheln werden innerhalb des Grids mit Abstand zum Rand platziert.
Feine Linien werden zwischen den zu trennenden Elementen platziert, aber nicht darüber und darunter.

Trennung von Elementen

Ein deutlicher Abstand trennt Elemente ganz natürlich voneinander.

Müssen Elemente z. B. aus Platzgründen kompakt gruppiert werden, wird eine feine Linie als Trennelement eingesetzt.

Feine Linien werden zwischen den zu trennenden Elementen platziert, aber nicht darüber und darunter.

Hierarchisierung und Hervorhebung

Für den Nutzer wichtige Elemente und Inhalte werden über ihre Größe und Platzierung hervorgehoben.

Dazu werden Relevanz und Status von Elementen über den Kontrast zum Hintergrund deutlich gemacht. Aktive und wichtige Elemente kontrastieren stark zum Hintergrund. Inaktive und weniger wichtige Elemente erhalten einen schwächeren Kontrast.

Wichtige Elemente und Inhalte werden z. B. mit großem Text und prominenter Platzierung in den Fokus des Nutzers gerückt.
Ein aktiver Navigationspunkt in einer List Navigation erhält einen maximalen Kontrast zum Hintergrund. Die inaktiven und deaktivierten Punkte werden mit schwächerem Kontrast dargestellt.

Überlagerungen

Überlagerungen aus rein gestalterischen Gründen sollten grundsätzlich vermieden werden. Aus funktionalen Gründen sind Überlagerungen oft notwendig, wie z. B. bei einem Sticky Header. Dabei erhält die eine Ebene über dem Layout liegende Fläche einen subtilen Schlagschatten.

Soll die überlagernde Fläche besonders in den Fokus gerückt werden, wird der Hintergrund mit 90 % Schwarz abgedunkelt. Ein Beispiel dafür sind Modals.

Sticky Header
Tooltip
Modal
Farbe einer überlagernden Fläche und des Layouthintergrunds können sich voneinander unterscheiden. Für ein klares Gesamtbild wird jedoch eine einheitliche Farbigkeit empfohlen.


Don't

Überlagerungen, Überschneidungen nehmen dem Layout die Klarheit und werden vermieden.
  • Der eingesetzte Schlagschatten ist so subtil wie möglich. Er ist lediglich ein Hilfsmittel zur Trennung gleichfarbiger, übereinander liegender Flächen.
  • Er setzt sich immer aus zwei Schatten zusammen: einem kurzen und einem langen. Der lange, weiche Schatten schafft Großzügigkeit und Tiefe. Der kurze Schatten verstärkt die deutliche Trennung von Flächen.
  • Der Schatten wird nicht versetzt. Er ist somit bei einer nicht randabfallend platzierten Fläche an allen vier Seiten gleich.
  • Der Schatten kann abhängig von Hintergrund, Kontext und Viewport in Größe und Deckkraft noch individuell justiert werden. Er bleibt dabei jedoch so subtil wie möglich.
  • Die Schattendarstellung sollte im Browser und in der Anwendung geprüft werden, da die gleiche Schattendefinition in unterschiedlichen Layoutprogrammen teilweise zu unterschiedlichen Ergebnissen führt.

    Basis-Definition in CSS
  • (box-shadow: horizontaler Versatz, vertikaler Versatz, Weichzeichnung/Größe, Überfüllung/Spread, Farbe und Opazität):
  • box-shadow: 0 0 [2px–4px] 0 rgba(0, 0, 0, [0.03–0.1]), 0 0 [20px–80px] 0 rgba(0, 0, 0, [0.03–0.15]);

    Beispiele für Anpassungen der Basis-Definition:
  • box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 40px 0 rgba(0, 0, 0, 0.05);
  • box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.03), 0 0 60px 0 rgba(0, 0, 0, 0.09);
  • box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 0 rgba(0, 0, 0, 0.05);
 

Horizontale und vertikale Platzierung

Für ein ruhiges, ausbalanciertes Gesamtbild werden Elemente vertikal und horizontal bündig zueinander gesetzt. Klare Achsen geben Orientierung.

Bei der horizontalen Platzierung hilft ein flexibel und optional anwendbares, 12-spaltiges Grid.

Vertikale Abstände zwischen Text und anderen Elementen werden in einem einheitlichen Rhythmus gestaltet.

 

Nützlich ist die Festlegung einer globalen Basiseinheit von einem Viertel der Basisschriftgröße (0,25 rem). Sie orientiert sich an der Textformatierung. Von diesem Wert ausgehend können übergreifend Zeilenabstände und Grundlinienraster, Margin und Padding von Cards, der Spaltenabstand im Grid und weitere Größen definiert werden.

Bei einer Basisschriftgröße von 16px beträgt dann z.B. der Spalten-Zwischenabstand und der Abstand von Cards zueinander 4px. Als Basis für den vertikalen Rhythmus von Text ist der Zeilenabstand bei kurzem Lesetext dann ein Vielfaches von 4px=20px.

Platzierung auf Farben

Ist der Hintergrund Weiß oder eine Grauabstufung heller als 30 % Schwarz (#b3b3b3), werden darauf schwarze und dunkle Komponenten platziert. Ist der Hintergrund Schwarz, Rot, Aluminiumsilber, Warmes Silber oder eine Grauabstufung dunkler als Aluminumsilber, werden darauf weiße und helle Komponenten platziert.


Freigestellte Bilder können auf einen subtilen Verlauf gesetzt werden, um eine subtile Abgrenzung zu weiteren Bildern innerhalb einer Liste zu erzielen. Zusätzlich gibt er einem freigestellten Bild visuellen Halt.

Der Verlauf für freigestellte Bilder wird in einem Winkel von 90° von oben nach unten eingesetzt. Mögliche Farben sind Weiß, Schwarz und Töne aus der Graupalette. Die hellere Farbe ist dabei stets 5 %–10 % heller als die dunklere. Bei einem Verlauf heller ist als Aluminumsilber steht der dunklere Ton unten. Bei einem dunkleren Verlauf steht umgekehrt der hellere Ton unten.

 
Beispiel für einen hellen Verlauf von Weiß zu einem hellen Grau: Oben Weiß (#ffffff), unten 5 % Schwarz (#f2f2f2)
Beispiel für einen dunklen Verlauf von Schwarz zu einem dunklen Grau: Oben Schwarz (#000000), unten 90 % Schwarz (#1a1a1a)

Don’t

Komponenten werden auf Rot nur eingeschränkt eingesetzt, um unerwünschte Rosafarbtöne zu vermeiden.

Platzierung auf Bildern und Videos

Elemente werden so platziert, dass eine gute Les- und Sichtbarkeit gegeben ist. Ist der Hintergrund unruhig oder in seiner Größe und Position dynamisch, kann eine schwarze Fläche mit einer Deckkraft von bis zu 30 % über dem gesamten Bild oder Video eingesetzt werden.

Bei unruhigen Bildhintergründen wird eine Abdunkelung empfohlen.
Die Sicht- und Lesbarkeit von Elementen sollte über alle Viewports hinweg sichergestellt werden.
Ruhige, helle Bildhintergründe eignen sich zur Platzierung von dunklen Elementen.

Platzierung der Ringe

Die Ringe werden prominent im Splash Screen einer App, im Header oder in Navigationsmenüs platziert. Auf darauf folgenden Screens und auf Unterseiten müssen die Ringe nicht permanent sichtbar sein.

Typografische Elemente und Icons werden in einen vertikalen oder horizontalen Bezug zu den Ringen gesetzt.

Positionierung der Ringe zu einer Botschaft im Splash Screen einer App
Positionierung der Ringe zu einem Menü-Icon auf einer Startseite.
Positionierung der Ringe zu Menüpunkten in einem Off Canvas Menü.
Auf Unterseiten oder Folgescreens kann der Einsatz der Ringe entfallen.

Größe von Text und Komponenten

Schriftgrößen und einige Komponenten sind in ihrer Größe an die Viewportbreite und ihren Verwendungszweck anpassbar gestaltet. So kann das Layout bei kleinen Viewports kompakt gehalten und bei großen Viewports ein großzügiges Gesamtbild geschaffen werden. Die Größe der Komponenten ist an die jeweils definierte Basisschriftgröße gekoppelt.

Kleine Basisschriftgröße von 16px und Komponenten in kleiner Größe, empfohlen z. B. bei einer mobilen Anwendung.
Mittelgroße Basisschriftgröße von 18px und mittelgroße Komponenten, z. B. bei einer Tablet-Anwendung.
Große Basisschriftgröße von 20px und große Komponenten, z. B. bei einer großzügig gestalteten Webseite, die auf einem großen Bildschirm dargestellt wird.

Buttons und Interaktionen

Eine klare Hierarchie hilft dem Nutzer bei der Orientierung. Ein Primary Button zieht die Aufmerksamkeit auf die wichtigste Aktion einer Seite, Secondary Buttons, Text Buttons und weitere Interaktionen folgen.

 

Animationen

Alle Animationen erhalten den im Erscheinungsbild definierten typischen, dynamischen Charakter und geben einer Anwendung Lebendigkeit. Mit ihnen werden funktionale Aufgaben im Interface erfüllt und das Nutzererlebnis verbessert: Sie führen den Nutzer durch eine Anwendung, helfen bei der visuellen Orientierung zwischen zwei Views, geben Feedback bei Interaktionen, unterstützen visuelle Hinweise oder geben Auskunft über einen Status. Insgesamt sorgen sie für ein Gefühl von Hochwertigkeit.

 

Download

Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB