Wie im ersten Artikel unserer Serie rund um Material Design im Webdesign angesprochen, definiert Material Design grundlegende Prinzipien, um gute Gestaltung mit allgemein bekannten physikalischen Eigenschaften zu verbinden. Auf diese Weise kann das Design dazu beitragen, ein System intuitiv verständlich und bedienbar zu machen, da alle Elemente auf bereits bekannten Konzepten und Materialien beruhen.
Damit sich Animationen und Übergänge physikalisch korrekt - und dennoch elegant - anfühlen, definiert Material Design einige grundlegende Regeln. Die wichtigsten stellen wir im Folgenden vor und zeigen mit Code-Beispielen, wie diese Best Practices auch im Webdesign beachtet werden können.
Beschleunigung unter Beachtung von Masse & Gewicht
Wird ein Objekt durch eine Kraft in Bewegung versetzt, so startet diese Bewegung nicht sofort. Vielmehr beschleunigt ein Objekt auf eine bestimmte Geschwindigkeit, hält diese für eine gewisse Zeit und kommt schließlich wieder zum Stillstand.
Wenn ein Objekt dabei seine Bewegung schnell beginnt und erst spät abbremst, verbringt es einen Großteil der Animationszeit nahe seines Bestimmungsortes. Auf diese Weise wirken Animationen sehr flüssig und schnell.
Im Gegensatz zu den im Webdesign verbreiteten linearen und normalen "easing"-Animationen erfordert eine solche Bewegung etwas mehr Arbeit, da sie nicht auf einer vorgefertigten Eigenschaft beruht. Stattdessen muss über die "cubic-bezier"-Eigenschaft eine eigene Easing-Funktion definiert werden (s. grüner Kreis in der folgenden Animation).
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
// don't: ease-out
.example-easing--ease-out {
animation-timing-function: ease-out;
}
// don't: linear
.example-easing--linear {
animation-timing-function: linear;
}
// don't: ease-in
.example-easing--ease-in {
animation-timing-function: ease-in;
}
// do: custom easing function
.example-easing--swift {
animation-timing-function: cubic-bezier(.55, 0, .1, 1);
}Physikalisch korrekte Interaktionen laden zum Erkunden ein
Insbesondere durch die mittlerweile stark verbreitete Touch-Steuerung hat sich unser Anspruch an die Reaktion eines Systems auf unsere Eingabe verändert. Drücken wir beispielsweise auf einem Smartphone einen Button, so erwarten wir, dass der Button nachgibt und unsere Interaktion mit haptischem Feedback bestätigt.
Material Design legt dabei insbesondere Wert auf den Urprung einer Interaktion. Ein Button soll nicht nur ganzheitlich auf eine Interaktion reagieren, sondern soll vom ursprünglichen Punkt der Interaktion eine kreisförmige visuelle Reaktion als Feedback wiedergeben.
Damit bestätigt ein System nicht nur eine Interaktion, sondern stellt dem Nutzer eine reale Oberfläche bereit, die durch ihre intuitive Verständlichkeit zu weiteren Interaktionen einlädt.
Im Webdesign ist dieser Effekt bisher nur mit der Hilfe von JavaScript zu erreichen und - wie nahezu alle Material Design Effekte - nur in modernen Browsern möglich:
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
window.addEventListener('load', function() {
var $btn = $('.example-btn--circular');
var $trigger = $('<span class="trigger"></span>');
var size;
// add markup for the circle animation
$trigger.css({
height: (size = Math.max($btn.outerWidth(), $btn.outerHeight())),
width: size
}).prependTo($btn);
$btn.on('mousedown', function (e) {
$trigger.removeClass('is-active');
// get the position of the click relative to the button
var offset = $btn.offset();
var x = e.pageX - offset.left - ($trigger.width() / 2);
var y = e.pageY - offset.top - ($trigger.height() / 2);
// position the element at the click's origin
// and trigger the animation (which is done via a CSS animation)
$trigger.css({
top: y + 'px',
left: x + 'px'
}).addClass('is-active');
});
});Neben dem Ursprung einer Interaktion ist auch der Entstehungsort einer Animation von Bedeutung. Lässt ein Button beispielsweise ein modales Fenster ("Pop-Up") erscheinen, so sollte dieses Fenster nicht einfach auf dem Bildschirm auftauchen, sondern vom Entstehungsort - dem Button - aus aufgebaut werden.
Diese Regel ist im Webdesign recht einfach zu beachten, indem die - häufig vergessene - CSS-Eigenschaft transform-origin genutzt wird, um das Zentrum einer Animation festzulegen.
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
.example-toggle-modal--origin {
transform-origin: 0% 100%;
}Die oben beschriebene kreisförmige Reaktion kann durch zusätzliches visuelles Feedback weiter verstärkt werden. Material Design sieht dafür das sogenannte "Lift on touch" vor: Wenn ein Element aktiviert wird, soll es sich anheben und dem Nutzer entgegen kommen, um diesen aktiven Zustand zu zeigen.
Um die im Grunde dreidimensionale Bewegung des Hervorhebens auch in zweidimensional gerenderten Webseiten nachzuahmen, bietet sich der Einsatz von Schatten zur Erzeugung von Tiefe an.
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
.example-btn--lift {
transition: box-shadow .3s cubic-bezier(.55, 0, .1, 1);
}
.example-btn--lift:hover {
box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.26);
}
.example-btn--lift:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.29);
}Sinnvolle Übergänge zur Sicherstellung der visuellen Kontinuität und Hierarchie
Ein Übergang zwischen zwei Animationszuständen soll stets offensichtlich und sanft sein. Nur dann kann ein Nutzer tatsächlich nachvollziehen, was gerade auf dem Bildschirm passiert - und so bewusst auf bestimmte Interaktionen hingewiesen werden.
Material Design definiert die folgenden drei Grundgedanken für sinnvolle Übergänge:
- Erscheinende und verschwindende Elemente sollen die Aufmerksamkeit des Nutzers steuern.
- Insbesondere Farbe und feststehende Elemente eignen sich zur Verbindung verschiedener Zustände und helfen, Übergänge nachvollziehbar zu präsentieren.
- Bewegende Elemente schaffen Klarheit und machen Spaß - dennoch sollte jede Bewegung bewusst eingesetzt werden.
Hierarchie erzeugt nachvollziehbare Animationen - auch bei vielen Elementen
Bei der Animation mehrerer Elemente ist die Reihenfolge und das Timing der einzelnen Bewegungen von großer Bedeutung. Durch eine hierarchische Animation - schrittweise vom wichtigsten Element zum nächsten - wird dem Nutzer eine rote Linie präsentiert, die ihn durch die Animation führt.
Im Webdesign ist diese hierarchische Bewegung insbesondere bei der Animation von gleichwertigen Interface-Elementen wichtig. Durch eine schrittweise Animation können diese Elemente dem Nutzer nach und nach vorgestellt werden - und erschlagen ihn nicht durch ein plötzliches Auftauchen.
Im Webdesign erlauben insbesondere das Zusammenspiel des "nth-child"-Selektors und der "transition-delay"-Eigenschaft eine saubere, hierarchische Animation mehrerer Elemente. Um dabei nicht für jedes Element ein eigenes Delay ausrechnen und zuweisen zu müssen, erweisen sich SASS-Mixins als sehr hilfreich:
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
@mixin hierarchic-transition($elements: 10, $property: 'animation-delay', $delay: 0.1s) {
@for $i from 2 through $elements {
&:nth-child(#{$i}) {
#{$property}: $delay * ($i - 1);
}
}
}
.example-hierarchic--hierarchic li {
@include hierarchic-transition;
}
// outputs:
.example-hierarchic--hierarchic li:nth-child(2) { animation-delay: .1s; }
.example-hierarchic--hierarchic li:nth-child(3) { animation-delay: .2s; }
.example-hierarchic--hierarchic li:nth-child(4) { animation-delay: .3s; }
// ...Der (Spaß-)Teufel steckt im Detail: Sahnehäubchen im Webdesign
Bisher haben wir ausschließlich den Einsatz von Bewegung und Animation zur Sicherstellung eines verständlichen und ansprechenden Systems beschrieben. Durch den Einsatz von Animationen, die über das Offensichtliche hinausgehen, kann ein System einem Nutzer sogar noch mehr bieten: Spaß an der Arbeit!
Transformiert sich ein Menü-Icon beispielsweise in den "Zurück"-Button oder wird ein "Play"-Button beim Start eines Lieds automatisch zu einem "Pause"-Button, erfüllt ein Element nicht nur zwei Funktionen auf einmal, sondern verleiht einer Webseite etwas Künstlerisches.
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
// upper menu icon bar to close icon
.example-detail--menu:hover:before {
transform: rotate(45deg) translate3d(6px, 7px, 0);
}
// lower menu icon bar to close icon
.example-detail--menu:hover:after {
transform: rotate(-45deg) translate3d(6px, -7px, 0)
}
// hide middle menu icon bar
.example-detail--menu:hover span {
opacity: 0;
}Vorläufer des Material Designs: Effekte in unserer Webseite
Obwohl es sich bei Material Design um einen sehr neuen Gestaltungstrend handelt, existieren viele der beschriebenen Effekte bereits seit längerer Zeit.
Auch wir nutzen in unserer eigenen Webseite bereits seit einem Jahr verschiedene Effekte, die Material Design nun in einem einheitlichen Gestaltungsprinzip vereint.
- Unser "nach-oben"-Button nutzt beispielsweise eine individuelle Easing-Funktion, um das Scrollen der Webseite physikalisch korrekt abzubilden.
- Das Navigationsmenü am oberen Rand der Seite (für Desktop-Computer) entsteht aus einem runden Button und hat dessen Mittelpunkt entsprechend als Entstehungsort für die eigene Animation.
- Unser Navigations-Button beinhaltet außerdem eines der angesprochenen “Sahnehäubchen”: Bei Aktivierung des Menüs wird aus den drei Balken des Menü-Icons automatisch das “Schließen”-Kreuz für das Menü.
- Beim Aufruf einer unserer Seiten werden die einzelnen Navigationspunkte hierarchisch nacheinander eingeblendet. Einen ähnlichen Effekt nutzen wir für unsere Navigation auf Smartphones, indem wir die einzelnen Menüpunkte nacheinander im Menü erscheinen lassen.
So geht es weiter: Farbe und Typographie im Material Design
Im nächsten Artikel werden wir den konkreten Stil von Material Design näher untersuchen. Dabei zeigen wir insbesondere, wie Farbe, Typographie und Icons zur Gestaltung eines übersichtlichen und ansprechenden Webdesign genutzt werden können.
Dieser Artikel ist Teil der Serie "Material Design im Webdesign".
Weitere Artikel zum Thema:
- Flat Design 2.0: Das ist Material Design
- Authentische Bewegungen: Masse & Gewicht im Webdesign
- Der "Material Design"-Style: Farben, Typographie und Bilder
- Magisches Papier: Layout und Tiefe im Webdesign
- Buttons, Tabs und Cards: Komponenten im “Material Webdesign”
- Call-to-Actions & Touch-Gesten: Nutzerführung im Webdesign
- Material Design für ein barrierefreies Webdesign
- Ressourcen und Tools: So gelingt der Einstieg in Material Design
- Update: Material Design goes Webdesign