Ein Designsystem ist eine Sammlung wiederverwendbarer Designentscheidungen, die in Form von Anleitungen, Komponenten und Mustern ausgedrückt werden. Das System kann in kleinste Designprimitive unterteilt werden, z. B. Farbe, Schriftart oder Form, aus denen größere, komplexe Komponenten bestehen. Ein Symbol und ein Textlabel bilden beispielsweise eine Schaltflächenkomponente, während mehrere Schaltflächen und eine Oberfläche eine Karte bilden. Designsysteme enthalten auch eine Reihe von Richtlinien, die sich aus den bestehenden Designentscheidungen zu den Komponenten und Mustern zusammensetzen.
Material Design ist ein von Google entwickeltes Open-Source-Designsystem, mit dem Sie ansprechende, nutzerorientierte Produkte entwickeln können. Material 3 ist die neueste Version von Material Design.
Material Design-Komponenten
Material Design bietet eine Reihe von codebasierten Komponenten, die interaktive Bausteine zum Erstellen einer Benutzeroberfläche sind. Diese Komponenten lassen sich nach ihrem Zweck in fünf Kategorien einteilen: Aktion, Containment, Navigation, Auswahl und Texteingabe.
Aktionskomponenten
Aktionskomponenten helfen Nutzern, ein Ziel zu erreichen.
Material bietet verschiedene Arten von Schaltflächen, mit denen die Priorität von Aktionen und Interaktionen in unterschiedlichen Kontexten festgelegt werden kann. Von Schaltflächen oder erweiterten Schaltflächen für primäre Aktionen bis hin zu Symbolschaltflächen zur Auswahl von Optionen mit segmentierten Schaltflächen.
Kommunikationskomponenten
Kommunikationskomponenten liefern hilfreiche Informationen, indem sie Nutzer mit Badges benachrichtigen, den Status über Fortschrittsanzeigen angeben und kurze Prozessmeldungen mit Snackbars bereitstellen.
Komponenten zur Eindämmung
Containment-Komponenten enthalten Informationen und Aktionen, einschließlich anderer Komponenten wie Schaltflächen, Menüs oder Chips. Die meisten Material-Komponenten verwenden explizite Container, in denen zusammengehörige Inhalte und Aktionen mit visuellen Objekten gruppiert werden: Karten, Dialogfelder, Bottom Sheets, Side Sheets, Karussells und Kurzinfos. Listen können implizit oder explizit durch sichtbare Trennzeichen dargestellt werden. Diese Komponenten bieten gängige Muster zum Anzeigen von Inhaltsgruppen.
Navigationskomponenten
Navigationskomponenten helfen Nutzern, sich in der Benutzeroberfläche zurechtzufinden. Auf Mobilgeräten enthält die Navigationsleiste oder das Navigationsmenü Ihre primären Navigationsziele. Tabs, die App-Leiste am unteren Rand und die App-Leiste am oberen Rand bieten verschiedene Möglichkeiten, auf unterstützende Informationen und Aktionen zuzugreifen. Weitere Informationen zur Navigation in Layouts
Auswahlkomponenten
Mit Auswahlkomponenten können Nutzer Optionen festlegen. Ob Sie ein Formular mit Kästchen und Optionsfeldern erstellen, mit Chips filtern oder Einstellungen mit Schaltern und Schiebereglern ein- und ausschalten – mit Auswahlkomponenten können Nutzer ihre Entscheidungen steuern und eingeben.
Komponenten für die Texteingabe
Mit Textkomponenten können Nutzer Text eingeben und bearbeiten. Über Textfelder können Nutzer Text auf einer Benutzeroberfläche eingeben.
Designsysteme für Compose
Unter Designsysteme in Compose finden Sie Informationen dazu, wie Sie mit Compose ein Designsystem einfacher implementieren und Ihrer App durch Theming, Komponenten und andere Aspekte des Designsystems ein einheitliches Erscheinungsbild geben können.