Die Material Design-Spezifikation von Google war ursprünglich auf die Android-Plattform ausgerichtet, um eine einheitliche Gestaltung der Plattform zu ermöglichen.
01 von 06So erstellen Sie eine Material Design Card in Adobe Experience Design CC
Nachdem die Designer angefangen hatten, sich damit auseinanderzusetzen und das Denken dahinter zu verstehen, wurde Material Design zu einer der einflussreichsten visuellen Philosophien im Web- und Mobile-Design. Alles was Sie tun müssen, um zu sehen, was wir bekommen, ist eine Materialdesign-Suche auf Pinterest. Sie werden Hunderte von Beispielen und Experimenten auf Geräten, Tablets und sogar Websites sehen.
Der faszinierende Aspekt von Material Design besteht darin, dass Google darüber nachdenkt, wie Apps auf mobilen Geräten erscheinen und funktionieren sollen. Die Konzepte werden jedoch auf beliebige Bildschirme jeder Größe auf jeder Plattform angewendet. Wie Google im einleitenden Absatz der Spezifikation feststellt: „Wir haben uns aufgefordert, eine visuelle Sprache für unsere Benutzer zu erstellen, die die klassischen Prinzipien des guten Designs mit der Innovation und der Möglichkeit von Technologie und Wissenschaft verbindet. Dies ist Materialdesign. Diese Spezifikation ist ein lebendiges Dokument, das aktualisiert wird, wenn wir die Grundsätze und Besonderheiten des Materialdesigns weiterentwickeln. “
Das Material, über das ganz allgemein gesprochen wird, ist Papier und ein Markenzeichen von Material Design ist die Karte. Denken Sie an eine Karteikarte auf einer Oberfläche und Sie sind auf dem richtigen Weg. Eine Karte ist ein Element, das Fotos, Videos, Textlinks usw. enthält. Wenn sie sich jedoch von den meisten interaktiven Designs unterscheiden, sollten sie sich auf ein einzelnes Motiv konzentrieren. Karten haben abgerundete Ecken, schwache Schatten zeigen an, dass sie sich über einer Oberfläche befinden. Wenn sich alle auf derselben Ebene befinden, werden sie als „Sammlung“ bezeichnet.
In diesem "How To" erstellen wir eine Karte, die auf der Spezifikation basiert. Anstatt die Karte mit einer Vielzahl von Bildbearbeitungs- und Zeichenwerkzeugen zu erstellen, werden wir sie aus einer anderen Richtung angehen. Wir werden die Tools in Adobe Experience Design verwenden, das sich derzeit in einer öffentlichen Vorschau von Macintosh befindet und kostenlos ist. Sie können es hier herunterladen.
Lass uns anfangen.
02 von 06Erstellen der Prototyp-Zeichenfläche in Adobe Experience Design CC
Es gibt keine offensichtliche Möglichkeit, einen Android-Bildschirm über den Startbildschirm in Experience Design CC (XD) zu erstellen. Wenn wir XD öffnen, wählen wir die Option iPhone 6 aus. Wenn sich die Benutzeroberfläche öffnet, wählen Sie das Artboard-Werkzeug unten in der Symbolleiste aus und wählen Android Mobile aus den Auswahlmöglichkeiten im Eigenschaftenfenster auf der rechten Seite. Dann wechseln wir zum Auswahlwerkzeug, klicken einmal auf den Namen der iPhone-Zeichenfläche und löschen die Zeichenfläche. Nicht mehr.
In der aktuellen Version von XD befindet sich neben dem iPhone 6 ein kleiner Pfeil, der beim Anklicken ein Dropdown-Menü öffnet. Von dort wählen Sie die Android Mobile-Version aus und die ausgewählte Android Mobile-Zeichenfläche wird in der Benutzeroberfläche geöffnet.
Um sicherzustellen, dass der Bildschirm genügend Platz für die Karte hat, gehen wir normalerweise zu Sketch 3 über und kopieren und fügen eine Statusleiste, eine Navigationsleiste und eine Anwendungsleiste aus der Materialdesign-Vorlage in die Zeichenfläche ein. Skizze 3.2 enthält eine Material Design-Vorlage (Datei> Neu aus Vorlage> Materialdesign) und eine weitere wirklich gute kostenlose ist von Kyle Ledbetter, die Sie hier erhalten können. Wenn Sie keine Skizze haben, können Sie sie von den XD-Aufklebern in kopieren und einfügen Datei> Open UI Kit> Google Material. Sie können sie auch für die Verwendung in Photoshop, Illustrator, After Effects und Sketch von Google herunterladen.
03 von 06Hinzufügen einer Material Design Card zu einem Adobe XD CC Artboard
Eine der nützlichsten Funktionen von XD ist die Aufnahme von UI-Kits für Apple iOS, Google Material und Microsoft Windows. In vielerlei Hinsicht wird der Begriff "Rapid Prototyping" durch das Wort "Rapid" ergänzt. Außerdem erleichtern sie dem Designer die Arbeit, da häufig verwendete Elemente der Benutzeroberfläche in einer Designanwendung wie Photoshop, Illustrator oder nicht ständig neu erstellt werden müssen Skizzieren.
Das Element der Benutzeroberfläche, das wir brauchten, war eine Karte. Um dorthin zu gelangen, haben wir ausgewählt Datei> Open UI Kit> Google Material und das Kit wurde als neues Dokument geöffnet. Das Element, das wir brauchten, wurde in der Kategorie Karten gefunden.
Was wir an diesen lieben, ist, dass sie sich an die Spezifikationen für Materialdesign halten, wie sie in den Spezifikationen für Inhaltsblöcke beschrieben sind, sowie die Spezifikationen für Textformatierung und Abstände, die in den Typografiespezifikationen festgelegt sind.
Der Kartenstil, den wir wollten, war der unten links. Wir marquieren es einfach mit unserer Maus und kopieren es in die Zwischenablage. Leider enthält XD keine Oberfläche für geöffnete Dokumente. Wir verschieben das geöffnete Dokumentfenster ein wenig nach unten, um das Dokument anzuzeigen, an dem wir gerade arbeiten. Wählen Sie es aus und fügen Sie es ein. Eine weitere Möglichkeit, schnell zwischen geöffneten XD-Dokumenten zu wechseln, ist die drücken Sie die Befehlstaste '.
04 von 06So bearbeiten Sie ein Materialdesign-Element in Adobe Experience Design CC
Wenn die Karte in XD aus der Zwischenablage kommt, können Sie nicht fröhlich damit arbeiten. Das erste, was Sie tun müssen ist, die Karte aufzuheben weil Sie Zugriff auf die Bits und Teile benötigen, aus denen die Karte besteht. Wählen Sie dazu die Karte und Wählen Sie Objekt> Gruppierung aufheben oder Drücken Sie Umschalt-Befehl-G.
Ihre Karte besteht jetzt aus drei Teilen:
- Hellgraue Box für das Bild.
- Mittelgraues Feld für den Text
- Der hintere Kasten dient als Hintergrund.
Der erste Schritt ist das Löschen der hellgrauen Box. Ihr einziger Zweck besteht darin, als Platzhalter für das Bild zu fungieren, was es optional macht.
Die Box mit dem Text ist eigentlich dunkelgrau mit 50% Deckkraft. Dieses Feld kann als Texthintergrund verwendet werden und Sie können die Farbe und die Deckkraft des Felds ändern.
Obwohl dies nicht sofort ersichtlich ist, folgt die hellgraue Box der Material Design-Spezifikation, indem ihre oberen Ecken um 2 Pixel abgerundet werden. Denken Sie daran, wenn Sie ein Bild hinzufügen. Es werden auch die abgerundeten Ecken benötigt, die zu einer Imaging-Anwendung oder in XD hinzugefügt werden können.
Da dies der Ruhezustand der Karte ist, ist auch ein Schatten erforderlich. Die Spezifikation macht deutlich, dass sich die Karte um 2 Pixel im Ruhezustand befindet. Um dies hinzuzufügen, Wählen Sie die schwarze Hintergrundform aus und setzen Sie die Y- und B-Werte (Unschärfe) im Eigenschaftenfenster auf 2.
05 von 06So fügen Sie der Material Design Card in Adobe XD CC ein Bild hinzu
Wenn Sie wissen, dass die Karte 344 Pixel breit ist und der Bildbereich 150 Pixel hoch ist ( halbe Höhe der hellgrauen Box ) Wir haben das Bild in Photoshop geöffnet, auf die Größe zugeschnitten und es mit der @ 2x-Option in Photoshop gespeichert Exportieren als Dialogbox. Das Bild wurde in Adobe XD importiert.
Wir haben dann das hellgraue Kästchen über das Bild auf der Arbeitsfläche gezogen und ausgewählt Objekt> Maske mit Form. Das Ergebnis war, dass das Bild die abgerundeten Ecken der Form aufnahm. Dann haben wir das Bild an seine endgültige Position verschoben.
Mit dem Bild an Ort und Stelle haben wir dann die Hintergrundfarbe des Feldes Mittelgrau geändert, den Text und die Farbe des Linktextes geändert.
06 von 06Verwenden der Adobe XD CC Grid-Funktion
Wenn die Karte vollständig ist, muss sie jetzt ordnungsgemäß gemäß den Material Design-Spezifikationen platziert werden. Dies bedeutet, dass sich auf jeder Seite der Karte 8 Pixel befinden und die Karte 8 Pixel unter der App-Leiste sein muss. Klicken Sie dazu einmal auf den Namen der Zeichenfläche, und wählen Sie im Eigenschaftenbereich die Option Raster aus. Das Raster erscheint über der Zeichenfläche.
Die Standardrastergröße beträgt 8 Pixel, was zufällig der gleichen Rastergröße für Material Design entspricht. Wenn Sie eine andere Größe benötigen, ändern Sie den Wert im Rasterbereich. Wenn Sie die Farbe des Rasters ändern möchten, klicken Sie auf den Farbchip und wählen Sie eine Farbe aus der resultierenden Farbauswahl aus.
Klicken Sie mit sichtbarem Raster auf die Karte und bewegen Sie sie in ihre endgültige Position.
Zum Abschluss haben wir die Karte ausgewählt, auf die Schaltfläche "Wiederholungsraster" geklickt und den Abstand zwischen den Karten ebenfalls auf 8 Pixel geändert.
