Share
Vor nicht allzu langer Zeit führte Google mit Material Design neue Richtlinien für Designer und Entwickler ein. Material Design bietet eine neue Perspektive auf Benutzeroberflächen, Bewegungs- und Interaktionsstatus und ist eine großartige Grundlage, auf der Sie ein Produkt aufbauen können.
Im Wesentlichen können Sie das Materialdesign von Google nach zwei Komponenten zusammenfassen:
Material liefert Kontext im Design, die Oberfläche und der Rand eines "Materials" geben uns visuelle Hinweise. Vergleichen wir das mit dem wirklichen Leben. Wir verstehen die Dimensionen eines Raumes, weil wir Wände sehen. Gleichzeitig vermittelt uns der Innenraum den Kontext des Raumes. Ihre Küche sieht zum Beispiel ganz anders aus als Ihr Badezimmer.
Dasselbe gilt für Material Design. Die Kombination aus Stil und Inhalt bietet Kontext für den Benutzer in einem digitalen Raum, ähnlich wie physische Wände und Innenräume. Ein Benutzer kann die Benutzeroberfläche besser verstehen, da das entworfene Material den Kontext für die Schnittstelle bereitstellt.
Eine Karte bietet kontextabhängiges Design und ist ein häufig verwendetes Element in Material Design. Eine Karte bietet einen Kontext für sich selbst sowie eine Beziehung zu anderen Karten.Das Konzept von Bewegung in Material Design hat eine sehr ähnliche Geschichte. Motion bietet Kontext in einem Design durch die fließen einer Anwendung, vor allem wenn es um die geht Kontinuität Bei einem Produkt hat ein Benutzer das Gefühl, ununterbrochen zu sein. Es gibt keine Hindernisse wie Inkonsistenzen im Design oder eine verwirrende Navigation.
Wie funktioniert die Bewegung genau? Hier ist ein Beispiel. Es gibt einen Home-Feed, der aus einer Liste von Karten besteht. Wenn Sie auf eine einzelne Karte tippen, wird das Kartenmaterial so vergrößert, dass es die volle Breite und Höhe des Bildschirms und nicht die Abmessungen einer einzelnen Karte darstellt.
Beachten Sie, wie dieses Beispiel sowohl Material als auch Bewegung verwendet. Eine Karte ist das Material. Wenn ein Benutzer mit ihm interagiert, wird er durch Bewegung erweitert, um mehr Inhalt anzuzeigen. Dies bietet dem Benutzer Kontinuität, da es zeigt, wie sich die Eingabe auf die Benutzeroberfläche auswirkt.
Lass uns etwas mehr Material erforschen. Im Wesentlichen ist Material die Kombination Ihrer statischen Gestaltungselemente. Denken Sie an Formen, Farben, Typografie und die verschiedenen Werkzeuge, die Sie zum Erstellen von Designs verwenden. All dies bildet zusammen ein Material.
Farbe ist sowohl für Designer als auch für Anwender eine große Sache. Es hat einen enormen Einfluss auf das Aussehen und Verhalten eines Designs sowie die psychologischen Auswirkungen auf einen Benutzer. Farbe kann ein Design vertrauenswürdig, aufregend, nützlich und vieles mehr machen. In Material Design haben wir Zugriff auf eine große Farbpalette, die wir als Grundlage für die Gestaltung eines Produkts verwenden können.
Es wird dringend empfohlen, die folgenden Farbreferenzen als Lesezeichen zu speichern. Dies ist eine praktische Referenz, um eine Farbpalette für eine Benutzeroberfläche zu entwerfen.
Roboto, die Standardschriftart für Android, wurde poliert, um sie für die plattformübergreifende Verwendung zu verbessern. Für Designer, die sich mit Typografie nicht so gut auskennen, enthält Material Design Richtlinien, die sich mit der Erstellung von Typografie beschäftigen.
Der einfachste Weg, um mit diesem Raster zu beginnen, besteht darin, das folgende Aufkleberblatt herunterzuladen. Die Richtlinien geben Ihnen eine Struktur für Ihre Typografie, wenn Sie ein neues Design beginnen.
Beim Entwurf eines Layouts in Material Design werden einige der Kernprinzipien des Druckdesigns verwendet, die Google als Inspirationsquelle für Material Design angibt. Das Erstellen von Benutzeroberflächen, die zwischen verschiedenen Gerätetypen gut skalierbar sind, ist sehr wichtig. Wie Sie wissen, ist die Skalierbarkeit für das Design von Produkten, die auf mehreren Geräten erfolgreich sind, von entscheidender Bedeutung.
Diese Abbildung visualisiert das Konzept der Tiefe in Benutzeroberflächen.Eines der Kernkonzepte ist Stapeln. Wenn Sie eine Benutzeroberfläche mit Material Design entwerfen, verwenden Sie Schlagschatten, Kontrast in Farbe und Z-Positionierung, um dem Benutzer ein Gefühl für Tiefe in der Benutzeroberfläche zu vermitteln. Tiefe schafft Kontext für Benutzer. Floating-Elemente auf Stapeln, wie z. B. eine Schaltfläche, heben den Handlungsaufruf in einer Benutzeroberfläche hervor.
Beispiel für drei Tiefenebenen: ein Menü, die obere Navigationsleiste und der Inhaltsbereich.Für fortgeschrittenere Designer umfassen die Richtlinien Grundlinienraster. Die Seite mit den Kennzahlen und Keylinien in den Richtlinien für das Materialdesign enthält sehr detaillierte Informationen und bietet Ihnen Ressourcen zum Experimentieren.
Wenn Sie lieber mit einem vorgefertigten Layout arbeiten, können Sie die Vorlage für weiße Rahmen von Google herunterladen.
Beispiel für ein entworfenes Layout. Motion geht Hand in Hand mit Material, wie zuvor im Kartenbeispiel beschrieben. Bewegung macht das gestaltete Material lebendig.
Wenn Sie anfangen, die Grundlagen des Bewegungsdesigns zu erlernen, ist die Erleichterung eines der ersten Prinzipien, über die Sie lernen.
Wenn Sie eine Animation erleichtern, versuchen Sie, eine Bewegung natürlicher zu gestalten. Anstatt die Bewegung eines Objekts mit einer konstanten Geschwindigkeit zu animieren, erhöhen Sie die Geschwindigkeit ganz am Anfang der Animation und verringern die Geschwindigkeit am Ende der Animation.
Denken Sie an ein fahrendes Auto im Verkehr und wie ein Auto beschleunigt und bremst, es ist eine sehr natürliche Bewegung. Die Beschleunigung versucht zu replizieren, so dass ein Benutzer die Bewegung eines Objekts als natürlich erachtet.
Der einfachste Weg, sich mit der Lockerung vertraut zu machen, ist einige Designbeispiele. Die folgenden Ressourcen sind ein großartiges Lesezeichen:
In dieser Abbildung wird die Beschleunigung dargestellt, wie in "Animationsprinzipien im Design der Benutzeroberfläche: Erleichterung verstehen" beschrieben..Wenn ein Benutzer mit einem Gestaltungselement interagiert, sollte das Element in den meisten Fällen eine Rückmeldung geben. In Material Design besteht das Ziel darin, den Benutzer mit Bewegungsrückmeldungen zu begeistern und den Kontext für das Material bereitzustellen, mit dem der Benutzer interagiert. Das Schöne an responsive motion ist, dass Sie die Aktion des Benutzers erkennen, was die Benutzerfreundlichkeit Ihres Produkts verbessert.
Das schönste Beispiel, das ich je gesehen habe, ist die Touch-Ripple, ein visuelles Highlight, wenn der Benutzer mit einem bestimmten Element interagiert.
Ein anderes Beispiel ist das Öffnen oder Erweitern von Elementen. Wenn Sie auf ein bestimmtes Element tippen, um es zu erweitern, wird das neue Material an dem Punkt erweitert, den der Benutzer berührt hat. Das Wachstum eines Elements fühlt sich natürlich an, wenn es direkt aus der Mitte der Berührung des Benutzers wächst. Weitere Beispiele für responsive Interaktion finden Sie auf der Google Material Design-Website.
Zu guter Letzt die Übergänge zwischen Schnittstellen ist wichtig für responsive Interaktion. Es ist die wichtigste Bewegungsform, um Kontinuität für den Benutzer zu gestalten. Für eingehende und ausgehende Bildschirme bietet der Ursprungspunkt einen Kontext. Eine Benutzeroberfläche kann dynamisch vergrößert und erweitert werden, sodass Designer mit schönen Übergängen viel Spielraum haben. Und das Beste: Sie können sie sinnvoll machen.
Nachfolgend einige großartige Beispiele für Materialdesign, die von hervorragenden Designern erstellt wurden.
Google - Materialforschung von Aurélien Salomon
Alarmmaterial-Benutzeroberfläche von Ehsan Rahimi
Aviasales L (Material Design) von Mark MDies ist eine kurze Einführung in Material Design. Wenn einer der oben genannten Punkte Ihr Interesse geweckt hat, empfehle ich dringend, mehr im offizielle Richtlinien von Google.
Bitte wenden Sie sich kreativ an Material Design. Vieles, was präsentiert wird, erinnert daran, was großartiges Design großartig macht. Gleichzeitig sind sie nur Richtlinien, was bedeutet, dass Sie, um als Designer zu wachsen, mehr als willkommen sind, Ihrem eigenen Twist zu geben.
Ich möchte Sie alle dazu ermutigen, ein Design mit diesen Richtlinien zu erstellen. Es könnte bedeuten, dass Sie einen anderen Ansatz als üblich wählen. Dies ist großartig, wenn Sie Ihre Fähigkeiten am Rand halten und als Designer wachsen möchten.
Was denkst du über Material Design? Welche Erfahrungen haben Sie bisher gemacht? Bitte teile es unten in den Kommentaren. Ich bin sehr neugierig und ich bin sicher, dass es auch vielen anderen so geht.
Accentsconagua