Atomic Design

Was ist Atomic Design?

Es ist ein Konzept zur Gestaltung von Interfacedesigns, bei dem ein komplexes Ganzes in kleinere, wiederverwendbare Komponenten zerlegt wird. Es gliedert sich in fünf Ebenen:

• Atome
• Moleküle
• Organismen
• Templates
• Seiten

Atomic Design hilft bei der technischen Implementierung

Es bietet ein strukturiertes System, um Bildschirminhalte in kleinere, konsistente und vor allem wiederverwendbare und austauschbare Komponenten zu zerlegen. Die Umsetzung nach Atomic-Design-Prinzipien erleichtert die Wartung und ermöglicht eine effizientere Veränderung und Weiterentwicklung der Oberfläche.

Die fünf Ebenen im Detail

Elementare UI-Bestandteile

• Form der Liniensignets
• Prognosedarstellung
• Perlschnur-Elemente

Komponenten aus zusammenhängenden UI-Bestandteilen

• Bereich des Fahrtziels
• Fahrzeugsymbol
• Perlschnurzeile

Komplexe UI-Abschnitte, zusammengesetzt aus den Komponenten

• gesamter Perlschnurbereich
• Ankündigung einer Fahrzeugteilung
• zusammengesetzte Ankunftsinformationen

Layoutdefinition mit der Anordnung statischer und dynamischer Komponenten

• Screenaufbau im Halt
• Screenaufbau während der Fahrt

Anzeigen/Layouts befüllt mit Daten

• Echte/Live-Daten und Inhalte füllen das Layout aus