Informationen zu Core Components

Für ein einheitliches Erscheinungsbild im Web haben wir das Audi CI um neue React-Komponenten ergänzt. Alle bisherigen React-Komponenten sind in der Audi React Bibliothek zu finden. Diese werden stetig weiterentwickelt.

Loader informieren den Nutzer über gerade stattfindende Lade- oder Rechenprozesse des Systems. Dabei kann der Fortschritt konkret angezeigt oder über die Darstellung einer sich wiederholenden Animation als undefiniert kommuniziert werden.

Die Größe der Loader-Komponenten ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist die Größe der Komponenten flexibel. Sie stehen in dunkler und heller Version zur Verfügung. Um den Ladevorgang in den Fokus des Nutzers zu rücken, kann der Hintergrund mit 90 % Schwarz abgedunkelt werden.

Spinner

Der Spinner wird eingesetzt, wenn der Ladefortschritt des Systems bestimmbar ist.

HTML
<div class="aui-spinner aui-js-spinner aui-spinner--progress"></div>

Continuous Spinner

Continuous Spinner werden eingesetzt, wenn der Ladefortschritt unbestimmt ist. Sie signalisieren dem Nutzer durch eine kontinuierliche Bewegung, dass das System die Eingabe verarbeitet.

HTML
<div class="aui-spinner aui-js-spinner aui-spinner--continuous"></div>

Progress Bar

Die Progress Bar wird in Einzelfällen eingesetzt, wenn Content und der bestimmbare Ladefortschritt des Systems gleichzeitig in einer View dargestellt werden sollen.

HTML
<div class="aui-progress aui-js-progress"></div>

Continuous Progress Bar

Die Continuous Progress Bar wird in Einzelfällen eingesetzt, wenn Content und der unbestimmbare Ladefortschritt des Systems gleichzeitig in einer View dargestellt werden sollen.

HTML
<div class="aui-progress aui-js-progress aui-progress--continuous"></div>

Audi UI Kit – Integration in die Sketch library

(Supported bis 30.06.2023)

Um sicherzustellen, dass Designer die aktuellsten Komponenten und Icons in ihren Produkten verwenden, wurde das Audi UI Kit als Sketch library erstellt. Integrieren Sie diese UI-Kits, um die neuesten Audi Sketch libraries zu erhalten. Die UI Kits werden regelmäßig aktualisiert und die User informiert, sobald eine neue Versionen der Bibliotheken verfügbar ist.

 

Das aktuelle Audi Sketch UI-Kit wird nur noch bis zum 30.06.2023 unterstützt. Um die Entwicklung digitaler Produkte in der Zukunft zu ermöglichen, stellen wir UI-Bibliotheken für Figma bereit und aktualisieren diese.

Audi UI Kit für Figma

Um möglichst vielen Designern die Arbeit mit den Audi User Interface Komponenten zu ermöglichen, wird das UI Kit und die Icons auch für Figma angeboten. Updates werden regelmäßig durchgeführt und alle Änderungen werden im Changelog dokumentiert.

Wir empfehlen dem Audi Figma Workspace beizutreten, um regelmäßig über Updates informiert zu werden und mit anderen zu kollaborieren.
Die Audi Design Kits sind bereits in den Figma Teams, innerhalb des Audi Workspace, integriert. Um Zugang zu einem Team oder Projekt zu erhalten, können Sie uns hier direkt kontaktieren.

Falls Sie nicht direkt im Audi Figma Workspace arbeiten, finden Sie die neueste Version unten als Download.

Audi Figma UI-Kit und Icons
Figma-Dateien für UI-Komponenten, Icon Library und eine Readme-Datei für den Einstieg und das Vorgehen bei der Aktualisierung der Dateien.
ZIP
34.4 MB

Anwendungsbeispiele

Don’ts

Continuous Progress Bar nicht zur Visualisierung des Ladevorganges eines Videos verwenden. Hierfür eignet sich der Spinner.
Ein Loader sollte nicht willkürlich eingesetzt werden. Beispielsweise eignet sich der Spinner nicht zur Visualisierung von Seitenloads.
Loader nicht auf Rot platzieren.