Input Fields
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.
Formulare bilden eine besonders wichtige Schnittstelle zwischen Nutzer und Audi Anwendungen. Oft stehen sie an kritischen Stellen einer User Journey. Deshalb sollten Formulare leicht verständlich gestaltet und die Anzahl der abgefragten Informationen so klein wie möglich sein. Optionale Abfragen werden in einem Formular gesondert gekennzeichnet, wenn sie nicht ganz vermieden werden können. Zum Aufbau von Formularen werden die vorhandenen Komponenten nach Bedarf kombiniert und gruppiert.
Die Größe der Formularelemente ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist ihre Größe flexibel. Die Formularelemente stehen in Schwarz und Weiß zur Verfügung.
Textfeld
Textfelder bestehen aus einem Label und einer Linie. Sie können in der Breite variiert werden. Aktiviert der Nutzer ein Textfeld, bewegt sich das Label nach oben, verkleinert sich und lässt Platz für die Eingabe.
Textfelder, die bestimmte Datenformate erwarten, wie z. B. Zahlen, E-Mail-Adressen oder Passwörter, werden passend deklariert. So wird dem Nutzer mit der passenden virtuellen Tastatur die Eingabe erleichtert.
Textfelder können mit einem Icon kombiniert werden.
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield" />
<label class="aui-textfield__label" for="sample-textfield">Label<span class="aui-textfield__label-optional">(optional)</span></label>
</div>
<span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>Suchfeld
Beim Suchfeld werden Suche-Icon und Label miteinander kombiniert. Im Unterschied zum Standard-Textfeld wird das Label bei Eingabe überschrieben und bewegt sich nicht nach oben. Nach der Eingabe einiger Zeichen kann ein Dropdown mit Autosuggest-Einträgen erscheinen.
<div class="aui-textfield aui-js-textfield aui-textfield--icon">
<div class="aui-textfield__field">
<svg class="audiicon">
<use xlink:href="#aui-icon-search-small"></use>
</svg>
<input class="aui-textfield__input" type="text" id="sample-textfield-icon" />
<label class="aui-textfield__label" for="sample-textfield-icon">Search</label>
</div>
<span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>
<div class="icon-sprite">
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="aui-icon-search-small" xmlns="http://www.w3.org/2000/svg"><title>search-small</title><path d="M22 22l-8.3-8.3L22 22zM15.5 9c.1 3.5-2.6 6.4-6.1 6.5H9c-3.6 0-6.5-2.9-6.5-6.5S5.4 2.5 9 2.5s6.5 2.9 6.5 6.5z" stroke="currentColor" fill="none"/></symbol></svg>
</div>
<style media="screen">
body {
background-color: #f2f2f2;
padding: 50px;
}
.icon-sprite {
width: 0;
height: 0;
visibility: hidden;
}
</style>Mehrzeiliges Textfeld
Mehrzeilige Textfelder können beliebig viel Text aufnehmen und wachsen dabei abhängig von der Eingabe des Nutzers in die Höhe. Die Textmenge kann bei Bedarf auf eine maximale Zeichenzahl begrenzt und über einen Countdown dargestellt werden. Im Unterschied zu den übrigen Textfeldern sind Label und Eingabetext in einem feinen Rahmen platziert.
<div class="aui-textfield aui-js-textfield aui-textfield--multiline" data-autosize="">
<div class="aui-textfield__field">
<textarea class="aui-textfield__input" id="sample-textfield-multiline" name="name" rows="3"></textarea>
<label class="aui-textfield__label" for="sample-textfield-multiline">Label</label>
</div>
<span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>Auswahlfeld
Auswahlfelder zeigen nach Aktivierung eine beliebige Anzahl an Auswahloptionen in einem Dropdown. Sie können mithilfe von Labels gruppiert werden.
Bei Bedarf wird eine Mehrfachauswahl per Checkbox ermöglicht. Mehrere Optionen werden nach Auswahl durch Kommas getrennt nebeneinander aufgelistet. Überschreitet die Liste die Breite des Auswahlfelds, wird sie gekürzt dargestellt. Ein Auslassungszeichen und eine numerische Darstellung der Anzahl der ausgewählten Optionen verweisen auf die nicht mehr gezeigten Optionen.
<div class="aui-select aui-js-select aui-select--floating-label">
<select class="aui-select__input" id="sample-select">
<option selected disabled class="aui-select__input-label">Label <span class="aui-select__input-label--optional">(optional)</span></option>
<option value="0">Audi Sport</option>
<option value="1">Audi City</option>
<option value="2">Audi e-tron</option>
<option value="3">Audi quattro</option>
<option value="4">Audi connect</option>
<option value="5">Audi mobility</option>
<option value="6">Audi driving experience</option>
</select>
<label class="aui-select__label" for="sample-select">Label</label>
<span class="aui-select__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>Gliederung und Gruppierung
Formularelemente können durch Zwischenüberschriften, Weißraum, Trennlinien und Flächen gegliedert und gruppiert werden. Längere Datenabfragen sollten in mehrere Schritte aufgeteilt werden, um mögliche Datenverluste zu vermeiden und weniger abschreckend zu wirken.
<fieldset class="aui-fieldset aui-fieldset--textfields">
<legend class="aui-fieldset__legend aui-fieldset__legend">Title</legend>
<div class="aui-fieldset__fields">
<div class="aui-fieldset__field">
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield-1">
<label class="aui-textfield__label" for="sample-textfield-1">Text</label></span>
</div>
</div>
</div>
<div class="aui-fieldset__field">
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield-2">
<label class="aui-textfield__label" for="sample-textfield-2">Text</label></span>
</div>
</div>
</div>
</div>
</fieldset><div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield" />
<label class="aui-textfield__label" for="sample-textfield">Label</label>
</div>
<span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. <small class="aui-small">(optional)</small></span>
</div><div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield" />
<label class="aui-textfield__label" for="sample-textfield">Label <small class="aui-small">(optional)</small></label>
</div>
<span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>Validierung
Fehlerhafte Eingaben werden durch eine rot eingefärbte Linie, ein rotes Label, eine rote Fehlerbeschreibung und bei einer Gruppe eine rote Gruppen-Überschrift kenntlich gemacht. Um ein barrierefreies Nutzererlebnis zu schaffen, sind die Signalrotwerte auf das verwendete Theme optimiert.
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label is-invalid">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield" />
<label class="aui-textfield__label" for="sample-textfield">Label</label>
</div>
<span class="aui-textfield__error">Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.</span>
</div>
<fieldset class="aui-fieldset aui-fieldset--textfields is-invalid">
<legend class="aui-fieldset__legend aui-fieldset__legend">Title</legend>
<div class="aui-fieldset__fields">
<div class="aui-fieldset__field">
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label is-invalid">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield-1">
<label class="aui-textfield__label" for="sample-textfield-1">Text</label><span class="aui-textfield__focus-line"></span>
</div>
</div>
</div>
<div class="aui-fieldset__field">
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label is-invalid">
<div class="aui-textfield__field">
<input class="aui-textfield__input" type="text" id="sample-textfield-2">
<label class="aui-textfield__label" for="sample-textfield-2">Text</label><span class="aui-textfield__focus-line"></span>
</div>
</div>
</div>
<span class="aui-textfield__error">Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.</span>
</div>
</fieldset>
Datumsauswahl
Bekannte Daten kann der Nutzer am leichtesten über numerische Eingabefelder eingeben. Ein Auswahlfeld für den Monat verhindert Missverständnisse, welche durch international unterschiedliche Datumsformate verursacht werden können.
Ein Kalender hilft insbesondere bei der Auswahl zuvor unbekannter Daten. Er wird einem Eingabefeld bspw. in Form eines Popovers als alternative Eingabemöglichkeit zur Seite gestellt. Können nur Daten aus einem eng begrenzten Zeitraum ausgewählt werden, wird auf das Eingabefeld verzichtet. Auf mobilen Endgeräten wird der native Datumsauswahldialog des Betriebssystems bevorzugt.
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.
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.
