Notifications machen den Nutzer auf Warnungen oder wichtige Informationen wie Statusveränderungen aufmerksam. Sie können bestimmten Elementen zugeordnet sein oder globale Gültigkeit haben. Art und Dringlichkeit der Information werden über die farbliche Gestaltung und die Position deutlich gemacht.

Global Alerts

Global Alerts erstrecken sich flächig über die gesamte Viewport-Breite und können TextIcons, Bilder und interaktive Elemente wie Buttons oder System Icon Buttons enthalten. Buttons können bei Bedarf in der Höhe angepasst werden, um den Alert visuell schmal zu halten.

 

Global Alerts können unterschiedlich positioniert werden:

  • Statisch am oberen Ende der Seite (verschwindet beim Scrollen)
  • Fixiert am oberen oder unteren Viewport-Rand (bleibt beim Scrollen im Viewport)

 

Global Alerts sind geeignet für:

  • Rückmeldungen von kurzfristig hoher Bedeutung, wie z. B. Feedback über Erfolg oder Misserfolg einer vom Nutzer ausgelösten Aktion. Der Alert kann vom Nutzer verworfen werden und/oder automatisch nach einer gewissen Zeit ausgeblendet werden.
  • Warnungen und Hinweise, von denen der Nutzer unbedingt Kenntnis nehmen soll, wie z. B. Cookie-Hinweise oder die Warnung vor wichtigen Deadlines. Der Alert kann vom Nutzer verworfen werden.
  • Wichtige Warnungen, die sofortiges Handeln des Nutzers erfordern. Eine solche Warnung kann nicht verworfen werden und wird erst ausgeblendet, wenn das zugrunde liegende Problem gelöst wurde.
HTML
<div class="aui-alert aui-js-alert aui-alert--sticky is-closed aui-color-white" role="alert">
	<div class="aui-alert__content">
		<p>
			<strong>The Death Star</strong> plans are not in the main computer. Where are those transmissions you
			intercepted? What have you done with those plans? We intercepted no transmissions.
		</p>
		<div class="aui-button-group">
			<button class="aui-js-response aui-button aui-button--primary" type="button" data-close>Confirm and
				close</button>
			<button class="aui-js-response aui-button aui-button--secondary" type="button">Cancel</button>
		</div>
	</div>
</div>

<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px 30%;
	}
	.aui-alert {
		position: absolute;
		text-align: left;
	}
</style>

Container Alert

Container Alerts unterscheiden sich von Global Notifications nur dadurch, dass sie sich auf einen Teilbereich einer Seite beziehen und innerhalb dieses Teilbereichs – oder Containers – positioniert werden. Bei dem Container kann es sich z. B. um eine Card oder den Abschnitt einer Seite handeln. Sie eignen sich, um Alerts von lokaler Bedeutung auf Übersichts-Ansichten wiederzugeben. Der Nutzer muss sie nicht unbedingt an Ort und Stelle verwerfen können.

HTML
<div class="abp-pattern__notification-container-alert">
	<div class="aui-alert aui-js-alert aui-color-text-warning" role="alert">
		<div class="aui-alert__content aui-color-black">
			<strong>The Death Star</strong> plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans?
			And, now Your Highness, we will discuss the location of your hidden Rebel base.
		</div>
	</div>
</div>

Toast Notification

Toast Notifications erscheinen in der oberen oder unteren Ecke des rechten Viewport-Rands. Sie eignen sich besonders für zeitsensitive Live-Benachrichtigungen. Sie können die gleichen Elemente enthalten wie Global Alerts enthalten. Der Nutzer kann sie verwerfen oder sie werden automatisch nach einer gewissen Zeitspanne ausgeblendet.

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions.
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions.
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions.
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions.
HTML
<div class="aui-notification-container" id="notifications">
	<div class="aui-notification aui-js-notification aui-color-gray20 aui-color-text-light">
		<div class="aui-notification__content">
			The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
			done with those plans? We intercepted no transmissions.
		</div>
	</div>
	<div class="aui-notification aui-js-notification aui-color-white aui-color-text-dark">
		<div class="aui-notification__content">
			The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
			done with those plans? We intercepted no transmissions.
		</div>
	</div>
	<div class="aui-notification aui-js-notification aui-color-gray20 aui-color-text-light">
		<div class="aui-notification__content">
			The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
			done with those plans? We intercepted no transmissions.
		</div>
	</div>
	<div class="aui-notification aui-js-notification aui-color-white aui-color-text-dark">
		<div class="aui-notification__content">
			The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
			done with those plans? We intercepted no transmissions.
		</div>
	</div>
</div>

Badge

Badge Notifications erscheinen als eine farbige Kreisfläche direkt an einem einzelnen Element. Sie zeigen Veränderungen am Status des Elements oder der dahinter liegenden Inhalte. Sie können optional einen Zähler enthalten, der die Anzahl der neuen Meldungen angibt. Sie eignen sich z. B., um auf ungelesene Nachrichten in Posteingängen, unbeantwortete Kalendereinladungen oder ungesehene Inhalte in Feeds hinzuweisen.

99 99+ !
HTML
<span class="aui-badge aui-color-black aui-color-text-light">99</span>
<span class="aui-badge aui-badge--small-text aui-color-black aui-color-text-light">99+</span>
<span class="aui-badge aui-color-success aui-color-text-light">
  <svg class="audiicon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-select-small"></use></svg>
</span>
<span class="aui-badge aui-color-warning aui-color-text-light">!</span>
<span class="aui-badge aui-color-danger aui-color-text-light">
  <svg class="audiicon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-cancel-small"></use></svg>
</span>
<span class="aui-badge aui-color-black aui-color-text-light is-hidden">99</span>
Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Dos & Don’ts

Farbigkeit

Flächige Notifications können alle Markenfarben und Grauabstufungen als Hintergrundfarbe erhalten. Schrift, Icons und Element Notifications können darüber hinaus die Signalfarben Grün, Gelb und Audi Rot annehmen.

 
Die Farbigkeit der Badge Notification sollte nicht dem Hintergrund entsprechen.
Global Notifications sind immer fest am oberen oder unteren Viewport-Rand fixiert.
Flächige Notifications treten nur einzeln auf und erhalten nie Gelb oder Grün als Hintergrundfarbe.