Buttons
Navigieren Sie durch das Design-System-Portal, um alles zu entdecken, was die Gestaltung und Entwicklung der digitalen Kanäle, Dienste und Lösungen der Volvo Group leitet. Orientieren Sie sich an unseren Design- und Entwicklungsprinzipien, um eine sofortige Markenwiedererkennung, ein nahtloses Nutzererlebnis und effiziente Arbeitsweisen in Ihren Projekten sicherzustellen.
Erste Schritte mit dem Volvo Group Design System
Ziel: Nahtlose Erlebnisse gestalten
Von grundlegenden Richtlinien und wiederverwendbaren Komponenten bis hin zu Icon-Design und Barrierefreiheitsstandards – jeder Aspekt des Volvo Group Design Systems wurde entwickelt, um die Zusammenarbeit zu fördern und den Erstellungsprozess zu optimieren. Nutzen Sie unsere Leitprinzipien und Möglichkeiten zur Mitwirkung innerhalb der Community, um Ihre digitalen Projekte auf das nächste Level zu heben.
Unser Icons-System
System Icons
System-Icons sind eng mit unseren Produkten und Anwendungen verknüpft. Sie kommen in allen DAKO SaaS-Produkten zum Einsatz.
System-Icons sind einfach und intuitiv gestaltet. Jedes Icon wird auf seine essenzielle Form reduziert, um die Kernfunktion direkt erkennbar zu machen.
Illustrations-Icons
Diese Icons dienen dazu, wichtige Informationen hervorzuheben. Sie erleichtern die Interaktion innerhalb unserer Software.
Illustrations-Icons sind meist umfangreicher und detailierter als System-Icons.
App-Icons
App-Icons dienen als Start-Icon für unsere mobilen Anwendungen. Sie sind das visuelle Aushängeschild in den App-Stores, über die Nutzer unsere Anwendungen beziehen.
Buttons
Buttons sind interaktive Elemente, die Aktionen auslösen. Sie fordern zum Handeln auf und ermöglichen es Nutzern, mit der Seite zu interagieren. Die Beschriftung gibt dabei präzise vor, was beim Klick passiert.
How to Use
Setze Buttons ein, um Handlungsoptionen aufzuzeigen und Interaktion zu ermöglichen. Dabei gilt:
- Fokus: Jede Seite sollte nur einen primären Button enthalten.
- Hierarchie: Alle weiteren Handlungsaufforderungen sollten als sekundäre Buttons mit geringerer Gewichtung dargestellt werden.
How not Use
Nutze Buttons nicht zur Navigation. Wenn das Ziel darin besteht, den Nutzer auf eine neue Seite zu führen, verwende stattdessen Links.
Varianten
Jede Button-Variante erfüllt einen spezifischen Zweck. Ihr visuelles Design signalisiert diese Funktion direkt an den Nutzer. Deshalb ist eine einheitliche Umsetzung über alle Produkte hinweg essenziell: Nur so stellen wir sicher, dass Nutzer die vorgesehenen Aktionen intuitiv verstehen und korrekt einordnen können.
Variante
Verwendung
Primary
Für die wichtigste Handlungsaufforderung auf einer Seite. Primäre Buttons dürfen pro Ansicht nur einmal vorkommen.
Secondary
Für zweitrangige Aktionen. Diese Buttons dürfen nur in Kombination mit einem primären Button verwendet werden. Sie dienen primär negativen Aktionen wie „Abbrechen“ oder „Zurück“.
Tertiary
Für weniger prominente oder eigenständige Aktionen. Tertiäre Buttons können allein stehen oder bei mehreren Handlungsoptionen mit einem primären Button kombiniert werden. Sie eignen sich zudem für Teilaufgaben auf Seiten, auf denen bereits ein primärer Button für die Hauptaktion existiert.
Ghost
Für Aktionen mit der geringsten visuellen Gewichtung; oft in Ergänzung zu einem primären Button. In Fortschrittsabläufen kann ein Ghost-Button gemeinsam mit primären und sekundären Buttons eingesetzt werden (z. B. Primär für „Weiter“, Sekundär für „Zurück“ und Ghost für „Abbrechen“
Danger
Für Aktionen mit potenziell destruktiven Auswirkungen auf Nutzerdaten (z. B. „Löschen“ oder „Entfernen“).