Material Theming: Materielle Material herstellen!

Die sich ständig weiterentwickelnde Landschaft des Web erfordert sowohl kreatives Flair als auch effizientes, skalierbares Design. Top -Produkte sind jetzt auf robuste Designsysteme angewiesen, um die Markenkohärenz aufrechtzuerhalten und gleichzeitig die Zugänglichkeit und die Benutzererfahrung zu priorisieren. Materialdesign, ein Google -Design -System, überbrückt die Lücke zwischen kreativem Ausdruck und systematischer Entwicklung.

Zunächst fehlte das Materialdesign die Flexibilität, individuelle Markenidentitäten vollständig auszudrücken. Feedback hob zwei wichtige Verbesserungsbereiche hervor: eingeschränkte stilistische Anpassungsfähigkeit und unzureichende Tools für die systematische Markenimplementierung.

Das bei Google I/O 2018 eingeführte Materiellierungsfunktionen des Materialdesigns befassen sich mit diesen Bedenken. Theming ermöglicht Designer und Entwicklern, die Stärken von Material zu nutzen und gleichzeitig sein Erscheinungsbild anzupassen. Dies beinhaltet die Anpassung von Farbe, Typografie und Form, um einzigartige Markenerlebnisse zu schaffen.

Dieser Beitrag konzentriert sich auf das Web -Theming mit CSS (insbesondere SCSS). Veranschaulichen wir eine grundlegende Anmeldevorlage, die mit Material -Webkomponenten erstellt wurde.

Theming erklärt

Das Material Design -Themen ermöglicht globale Anpassungen an Farbe, Typografie und Form, die alle Komponenten beeinflussen. Obwohl diese Anpassungen scheinbar begrenzt sind, verändern diese Anpassungen das allgemeine Gefühl des Designs erheblich.

Farbanpassung

Material.io bietet einen Farbwähler zur Unterstützung der Farbauswahl und der Kontrastprüfung. Mit SCSS können wir das Erscheinungsbild des Login -Bildschirms leicht ändern:

$ mdc-themenprimary: #26418f;
$ mdc-theme-sekundär: #d1c4e9;
$ mdc-themen-background: #fdf6f9;

Das Material setzt automatisch $mdc-theme-on-primary auf Weiß auf die Zugänglichkeit. Sie können Textfarben mit $mdc-theme-on-primary und $mdc-theme-on-secondary überschreiben.

Typografieanpassungen

Das Material bietet eine Basis -Typografie -Skala, die durch Themen angepasst werden kann. Die Typografie kann für jede Schlagzeilenpegel mit CSS -Klassen oder Mixins angepasst werden. Wir werden Google -Schriftarten zur Leichtigkeit verwenden:

@import url ('https://fonts.googleapis.com/css?family=josefin sans');
$ mdc-typography-familie: unquote ("josefin sans, sans-serif");

$ mdc-typography-button: (
 Schriftgröße: 14px,
 Schriftgewicht: 600,
 Buchstabenabstand: 0,05em,
);

Formänderung

Die Formanpassung verändert die Komponenten -Eckradien (Tasten, Karten, Blätter). Das Material ermöglicht unterschiedliche Formen an verschiedenen Ecken und Komponentengrößen. Zum Beispiel:

$ mdc-s-small-komponent-radius: 12px 4px;
$ mdc-film-large-komponent-radius: 8px;

Mit nur wenigen Codezeilen haben wir die Anwendung dramatisch verändert.

Entfesselt deine Kreativität

Es gibt zahlreiche Farb-, Typografie- und Formkombinationen, um charakteristische Markenidentitäten zu schaffen. Die folgenden Beispiele zeigen verschiedene Anwendungen dieser Elemente unter Verwendung von Materialkomponenten.

Beispiele für reale Welt

Google selbst verwendet maßgeschneiderte Materialkomponenten (Google -Material -Thema) über Produkte wie Google Mail, Google News und Google Play. Andere Unternehmen wie Lyft und Anker nutzen auch die Flexibilität von Materialdesign, um einzigartige Markenerlebnisse zu schaffen.

Erste Schritte

Erstellen Sie Ihr Materialthema mit dem Materialsstarter -Kit und dem Glitch -Projekt "Build a Materials Theme". Experimentieren Sie mit SCSS -Variablen, um Komponenten anzupassen. Fügen Sie diese Variablen einfach in Ihre my-theme.scss Datei ein und beginnen Sie mit dem Erstellen.

Kurz gesagt: Die Themenfunktionen des Materialdesigns bieten beispiellose Flexibilität. Beginnen Sie noch heute zu erkunden!

Das obige ist der detaillierte Inhalt vonMaterial Theming: Materielle Material herstellen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!