User Interface / Components / Overlays

Ein Overlay stellt kontextbezogene Informationen und Optionen in Form einer zusätzlichen Ebene über dem aktuellen Zustand des Interfaces zur Verfügung. Sie sind entweder bewusst unterbrechend wie Modals oder ergänzend wie Popovers und Tooltips. Die Farbe der Overlays kann aus den Audi Markenfarben und Grautönen frei gewählt werden.

Modal

Modals werden eingesetzt, um Informationen und Interaktionen in den Fokus des Nutzers zu setzen, um ihn aus dem aktuellen Prozess zu leiten. Sie werden als Layer dargestellt, der sich über den Hintergrund legt. Wenn der Hintergrund zum Teil sichtbar bleibt, wird er mit 90% Schwarz abgedunkelt. Mit dem Hintergrund kann nicht interagiert werden, bis das Modal durch Abschließen oder Abbrechen des dargestellten Tasks geschlossen wird.

Modals, die über einen Button ausgelöst werden, können durch eine Animation entstehen, bei der sich die Form des Buttons in die Form des Modals verwandelt.

Dialogue boxes

Modals mit kurzen Inhalten wie Alerts oder Bestätigungs-Dialogen werden in einer vertikal und horizontal zentrierten Kachel dargestellt.

HTML

<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal" data-target="modal-sample-layer">Open modal as layer</button>
<div class="aui-modal aui-js-modal" id="modal-sample-layer" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="aui-modal-dialog aui-modal-dialog--layer aui-color-text-light">
    <div class="aui-modal-dialog__body">
      <div class="aui-modal-dialog__content">
        <h6 class="aui-headline-3" style="margin-bottom:20px;">Modal Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div style="margin-top:40px;text-align:right;">
          <div class="aui-button-group">
            <button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button" data-dismiss="modal">Close</button>
            <button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">Confirm</button>
          </div>
        </div>
        <div class="aui-modal-dialog__close" data-dismiss="modal"></div>
      </div>
    </div>
  </div>
</div>

HTML

<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal"
	data-target="modal-sample-morphing-layer">
	<span class="aui-button__text">Morph modal</span>
</button>
<style media="screen">
	@media (min-width: 600px) {
		#modal-sample-morphing-layer .aui-modal-dialog__body {
			/* Define a width for this specific dialog: */
			width: 93.75%;
			max-width: 460px;
		}
	}
</style>

<div class="aui-modal aui-js-modal aui-modal--morph" id="modal-sample-morphing-layer" tabindex="-1" role="dialog"
	aria-hidden="true">
	<div class="aui-modal-dialog aui-modal-dialog--layer aui-modal-dialog--morph">
		<div class="aui-modal-dialog__body">
			<div class="aui-modal-dialog__content">
				<!-- Start inserting content here: -->
				<div class="aui-color-text-light">
					<h6 class="aui-headline-3" style="margin-bottom:20px;padding-right:27px;">Modal Title</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua.</p>
					<div style="margin-top:40px;text-align:right;">
						<div class="aui-button-group">
							<button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button"
								data-dismiss="modal">
								<span class="aui-button__text">Close</span>
							</button>
							<button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">
								<span class="aui-button__text">Confirm</span>
							</button>
						</div>
					</div>
				</div>
				<!-- End inserting content. -->
				<!-- NOTE Because of alignment, the close button of Modal Layer components has to be inside `aui-modal-dialog__content` element. -->
				<div class="aui-modal-dialog__close" data-dismiss="modal"></div>
			</div>
		</div>
	</div>
</div>

Scrollable modals

Modals mit langen Inhalten füllen die gesamte Höhe des Viewports. Links und rechts des Modals bleibt der abgedunkelte Hintergrund der Seite zu sehen. Innerhalb des Modals kann gescrollt werden, nicht jedoch auf der Seite dahinter.

HTML

<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal"
	data-target="modal-sample-window">
	<span class="aui-button__text">Open modal as window</span>
</button>
<div class="aui-modal aui-js-modal" id="modal-sample-window" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="aui-modal-dialog aui-modal-dialog--window">
		<div class="aui-modal-dialog__body">
			<div class="aui-modal-dialog__content">
				<!-- Start inserting content here: -->
				<div class="aui-color-text-light">
					<h6 class="aui-headline-2" style="margin-bottom:20px;">Modal Title</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<div style="margin-top:80px; text-align:right;">
						<div class="aui-button-group">
							<button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button"
								data-dismiss="modal">
								<span class="aui-button__text">Close</span>
							</button>
							<button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">
								<span class="aui-button__text">Confirm</span>
							</button>
						</div>
					</div>
				</div>
				<!-- End inserting content. -->
			</div>
			<div class="aui-modal-dialog__close" data-dismiss="modal"></div>
		</div>
	</div>
</div>

Full-screen modals

Modals können dazu den gesamten Viewport abdecken, z. B. bei einem schmalen Viewport.

HTML

<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal"
	data-target="modal-sample">
	<span class="aui-button__text">Open Full-Screen modal</span>
</button>
<div class="aui-modal aui-js-modal" id="modal-sample" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="aui-modal-dialog aui-modal-dialog--fullpage">
		<div class="aui-modal-dialog__body">
			<div class="aui-modal-dialog__content">
				<!-- Start inserting content here: -->
				<div class="aui-color-text-light">
					<h6 class="aui-headline-2" style="margin-bottom:20px;">Modal Title</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<div style="margin-top:80px; text-align:right;">
						<div class="aui-button-group">
							<button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button"
								data-dismiss="modal">
								<span class="aui-button__text">Close</span>
							</button>
							<button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">
								<span class="aui-button__text">Confirm</span>
							</button>
						</div>
					</div>
				</div>
				<!-- End inserting content. -->
			</div>
			<div class="aui-modal-dialog__close" data-dismiss="modal"></div>
		</div>
	</div>
</div>

<style media="screen">
		.aui-button {
			width: 175px;
		}
</style>

Popover

Popover werden verwendet, um Zusatzinformationen oder Interaktionsmöglichkeiten zu einem Element anzubieten. Sie werden bei Klick bzw. Tap oder initial eingeblendet. Popover können geschlossen werden, indem der Nutzer einen Bereich außerhalb des Popovers oder auf das auslösende Element klickt oder tippt.

Popover können im Unterschied zu Tooltips nach Bedarf Text, Bilder, Videos, Aktionen und weitere Elemente enthalten. Sie können wahlweise von jeder Seite eingeblendet werden. Der dreieckige Pfeil weist dabei auf das auslösende Element.

HTML

<button id="sample-popover-bottom" class="aui-js-response aui-button aui-button--primary" type="button">Popover on bottom</button>
<div class="aui-popover aui-js-popover" role="tooltip" for="sample-popover-bottom" data-placement="bottom">
 <div class="aui-popover__content">
   <div class="aui-popover__text">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
 </div>
</div>

Tooltip

Tooltips werden verwendet, um textliche Zusatzinformationen zu einem Element anzubieten. Sie werden bei Mouseover bzw. Tap eingeblendet und sind initial nicht sichtbar. Tooltips können geschlossen werden, indem der Nutzer auf einen Bereich außerhalb des Tooltips klickt oder tippt.

Tooltips enthalten im Unterschied zu Popovern lediglich Text. Sie können wahlweise von jeder Seite eingeblendet werden. Der dreieckige Pfeil weist dabei auf das auslösende Element.

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a id="sample-tooltip" class="aui-textlink">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat.
</p>
<span class="aui-tooltip aui-js-tooltip" for="sample-tooltip"><span class="aui-tooltip__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></span>

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.

Sketch library integrieren

Sketch Icon library integrieren

Sketch UI Styles library integrieren

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.

Schreibe uns für den Figma Workspace Zugang

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.