Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Komponenten    3.2.Buttons

3.2.Buttons

Für Bildschirmaktionen wie Hinzufügen, Speichern, Löschen oder Anmelden werden Buttons verwendet. Text-Links und Buttons dienen unterschiedlichen Zwecken: so leiten Text-Links den Benutzer meistens zu einer anderen Seite, wohingegen Buttons mit Elementen und Daten auf der aktuellen Seite interagieren. Das Festlegen von Filtern, das Absenden von Formularen, das Vergrößern von Bildern oder das Starten einer Suche sind typische Beispiele für Bildschirmaktionen von Buttons.

Alle Buttons im Daimler Design System bieten beim Anklicken, Auswählen oder Antippen deutliches visuelles Feedback.

3.0.Komponenten      3.2.Buttons      3.2.1.Hierarchie

3.2.1.Hierarchie

Buttons sollten mit einer visuellen Hierarchie verwendet werden, um die Interaktion des Nutzers bis zum Hauptzweck zu lenken. Die wichtigste Aktion wird durch einen primären Button visualisiert. Im Idealfall ist immer nur eine primäre Aktion sichtbar. Andere Aktionen wie 'Abbrechen' oder 'Zurück' können als sekundäre oder tertiäre Button-Stile gezeigt werden.

  • Primär - vorbehalten für den Hauptzweck der Aktion auf der Seite.
  • Sekundär - sekundäre Aktionen auf der Seite.
  • Teritär - Buttons werden für weniger wichtige Aktionen verwendet oder zusammen mit primären und sekundären Buttons.
  • Icon-Buttons - in seltenen Fällen kann auch ein Icon ohne Textlabel als Button verwendet werden. Diese Stiloption sollte nur dann verwendet werden, wenn die Aktion eindeutig unwichtig ist und nicht vom anderen Inhalt ablenken sollte. Beispiele hierfür sind die Vergrößerung eines Bildes oder das Anzeigen rechtlicher Hinweise im Header der Webseite.

 

Some Image
    3.0.Komponenten      3.2.Buttons      3.2.2.Status

    3.2.2.Status

    Ein Button kann fünf verschiedene visuelle Status anzeigen: aktiviert, deaktiviert, hover, fokussiert und gedrückt.

    • Aktiviert: Grundzustand eines Button
    • Deaktiviert: in diesem Status kann der Nutzer den Button nicht anklicken. Dies geschieht beispielsweise, wenn ein Formular vor dem Absenden nicht vollständig ausgefüllt wurde.
    • Hover: der Hover-Status signalisiert Interaktivität, wenn der Mauszeiger über einem interaktiven Element liegt.
    • Fokussiert: der Fokus-Status hebt ein Element hervor, wenn die Tastatursteuerung verwendet wird. Diese Art der Steuerung ist besonders für die Zugänglichkeit und für Bildschirmleser wichtig.
    • Gedrückt: der gedrückte Status erscheint beim Antippen oder Anklicken.

    Some Image
      3.0.Komponenten      3.2.Buttons      3.2.3.Textlabel

      3.2.3.Textlabel

      Das Textlabel ist das wichtigste Element auf einem Button, da es den Zweck des Buttons mitteilt. Auf diesen Text kann auch ein Icon folgen, oder ein Icon kann ihn ersetzen, sofern die Botschaft klar ist.

      Als Standardeinstellung sind Labels im Daimler Universum zentriert ausgerichtet, der erste Buchstabe ist großgeschrieben, und die Labels haben einen hohen Farbkontrast (weiß über dunklen Buttons und schwarz über weißen oder grauen Buttons). Am Ende des Labels befindet sich der Linkspfeil (siehe Abbildungen).

      3.0.Komponenten      3.2.Buttons      3.2.4.Download-Ressourcen

      3.2.4.Download-Ressourcen

      Die Designs der Button-Komponente gibt es für Sketch und sind im Daimler Design Kit enthalten. Sie können diese entweder kopieren und in Ihre Designs einfügen, oder die Sketch-Datei als verlinkte Sammlung nutzen und die Symbole importieren.

      Siehe Sketch Design Kit