\n Lass uns anfangen!\n<\/p>\n
\n Kernprinzipien des Materialdesigns\n<\/p>\n
\n Materielle Metapher:
\n<\/h5>\n
\n Beim Materialdesign wird gro\u00dfer Wert darauf gelegt, Elemente, Animationen und \u00dcberg\u00e4nge so real zu gestalten, wie sie im wirklichen Leben erscheinen. Nach intensivem Studium von Papier und Tinte beschloss das Google-Team, eine Materialmetapher als einheitliches Prinzip eines rationalisierten Raums und eines Bewegungssystems zu verwenden. Zusammenfassend k\u00f6nnen wir sagen, dass Materialdesign nichts anderes ist als eine Kombination verschiedener klassischer Designkonzepte und grundlegender physikalischer Eigenschaften.\n<\/p>\n
\n Greifbare Oberfl\u00e4chen:
\n<\/h5>\n
\n Beim Materialdesign bilden Oberfl\u00e4chen und Kanten des Materials eine physische Struktur, um Benutzern visuelle Hinweise zu geben, die ihnen helfen, schnell zu verstehen, was sie ber\u00fchren und bewegen k\u00f6nnen. Unter Verwendung von Prinzipien des Druckdesigns beh\u00e4lt das Materialdesign die wichtigen Inhalte vor dem Auge des Benutzers, w\u00e4hrend andere weniger n\u00fctzliche Inhalte ignoriert werden. Die Verwendung vertrauter, intuitiver und nat\u00fcrlicher Attribute erm\u00f6glicht es dem Gehirn des Benutzers, weniger zu arbeiten und Angebote schnell zu verstehen.\n<\/p>\n
\n Dimensionsleistungen:
\n<\/h5>\n
\n Wenn auf Ihrem Schreibtisch ein Stapel Papiere liegt, gewinnen sie an Dimension und sch\u00fctzen gleichzeitig ihre Schatten. Wenn Sie diese Eigenschaft im Materialdesign auf die Benutzeroberfl\u00e4che anwenden, haben Sie ebenfalls Hierarchien und Schatten, um die Aufmerksamkeit eines Benutzers auf das wichtigste Objekt zu lenken, mit dem er interagieren sollte. Anhand der Grundlagen von Licht, Oberfl\u00e4che und Bewegung vermittelt Materialdesign, wie ein Objekt mit dem Benutzer interagiert. Dar\u00fcber hinaus erm\u00f6glicht die realistische Beleuchtung den Benutzern, die realistischste Ansicht der von Ihnen entworfenen Benutzeroberfl\u00e4che zu erhalten.\n<\/p>\n
\n Ein adaptives Design:
\n<\/h5>\n
\n Materialdesign verwendet ein einziges zugrunde liegendes Designsystem, um Raum und Interaktionen zu organisieren. Das Konzept eines adaptiven Designs bringt Koh\u00e4renz \u00fcber verschiedene Ger\u00e4te hinweg, was bedeutet, dass ein einheitliches Design spezialisierte Ansichten f\u00fcr verschiedene Ger\u00e4tetypen erstellt. Jede Ansicht ist auf einzigartige Weise auf die Interaktion und Gr\u00f6\u00dfe zugeschnitten, die f\u00fcr ein bestimmtes Ger\u00e4t geeignet ist. Andererseits werden keine \u00c4nderungen an Hierarchie, Ikonographie, Farben und r\u00e4umlichen Beziehungen vorgenommen.\n<\/p>\n
\n Fettgedruckter und absichtlicher Inhalt:
\n<\/h5>\n
\n Eine weitere Sache, die Ihnen an dieser neuen visuellen Sprache auffallen wird, ist das mutige Design mit einem hellen Farbschema. In Anlehnung an Fahrbahnmarkierungsband, zeitgen\u00f6ssische Architektur, Stra\u00dfenschilder und Sportpl\u00e4tze hat Google fantastische und lebendige Farben eingef\u00fchrt, die Sie nie erwartet h\u00e4tten. Au\u00dferdem haben sie die Roboto-Schriftart<\/a> umfassend verfeinert und sie etwas breiter und runder gemacht, um das Lesen zu einem besseren Erlebnis zu machen. Dar\u00fcber hinaus schaffen absichtliche Wei\u00dfr\u00e4ume und Bilder von Kante zu Kante Klarheit und Immersion.\n<\/p>\n \n Materialdesign legt gro\u00dfen Wert darauf, die Interaktion zwischen Benutzern und Oberfl\u00e4chen digitaler, magischer und reaktionsschneller zu gestalten. Bei diesem Designstil ver\u00e4ndert sich das gesamte Design auf \u00fcberraschende Weise, wenn jemand mit der Benutzeroberfl\u00e4che interagiert. Der grafische Ausdruck mit Farbe, Oberfl\u00e4che und Ikonografie vermittelt dem Benutzer eine klare Vorstellung davon, was ein Objekt tun kann, w\u00e4hrend die reaktionsschnelle Interaktion den Benutzer dazu ermutigt, die Benutzeroberfl\u00e4che gr\u00fcndlich zu erkunden: Was passiert, wenn ich es ber\u00fchre? Und was passiert als n\u00e4chstes?\n<\/p>\n \n Wenn eine Person die Wasseroberfl\u00e4che ber\u00fchrt und Wellen erzeugt, gibt ihr die Energie, die aus ihren Aktionen zur Ver\u00e4nderung der Schnittstelle stammt, eine reale und greifbare Erfahrung. Auf die gleiche Weise erm\u00f6glicht Materialdesign den Benutzern, die Benutzeroberfl\u00e4che so zu ber\u00fchren, wie sie es in ihrem wirklichen Leben tun. Daf\u00fcr schl\u00e4gt Google Designern vor, eine zus\u00e4tzliche Dimension der Interaktion zu ber\u00fccksichtigen, n\u00e4mlich \u201eBewegungsr\u00fcckmeldung“. So k\u00f6nnten Benutzer das Gef\u00fchl haben, von der Oberfl\u00e4che beim Scrollen, Ziehen, Gleiten und Tippen geh\u00f6rt zu werden.\n<\/p>\n \n In der realen Welt hat jede Aktion eine Bewegung, einen Anfang und ein Ende. Wenn Sie zum Beispiel im wirklichen Leben einen Karton \u00f6ffnen, klopfen Sie irgendwo darauf und zeigen, was drin ist. Ebenso finden alle Benutzeraktionen im Materialdesign in einer einheitlichen Umgebung statt. Jedes Objekt wird dem Benutzer mit einer schnellen, reibungslosen und kontinuierlichen Animation pr\u00e4sentiert, die auf einer gemeinsamen B\u00fchne choreografiert wird. Da sich alle Assets im Materialdesign in einen Rhythmus bewegen, erscheint der Bildschirm spannender und interaktiver als je zuvor.\n<\/p>\n \n Wie wir alle wissen, ist f\u00fcr Google die Benutzererfahrung wichtiger als alles andere. Die gleiche Regel gilt f\u00fcr das letzte Prinzip der Materialgestaltung. Dieses Prinzip besagt, dass Bewegung angemessen, sinnvoll und sorgf\u00e4ltig choreografiert sein sollte und nicht nur dazu dienen darf, Benutzer zu beeindrucken. Bewegung im Materialdesign sollte nicht nur sch\u00f6n sein, sondern auch der Funktionalit\u00e4t und den r\u00e4umlichen Beziehungen Bedeutung verleihen und gleichzeitig die Sch\u00f6nheit und Einfachheit einer nahtlosen Benutzererfahrung bewahren.\n<\/p>\n \n Sie kennen Polymer<\/a> noch nicht? Also! Polymer ist ein gro\u00dfartiges UI-Toolkit, mit dem Sie Materialdesign ins Web bringen k\u00f6nnen. Mit der Papierelemente-Kollektion<\/a> von Polymer haben Sie Zugriff auf alle M\u00f6glichkeiten des Materialdesigns und sind in der Lage, Greifbarkeit, kr\u00e4ftige Grafiken und glatte \u00dcberg\u00e4nge und Animationen in Ihre Anwendungen im Web zu bringen. Mit Topeka<\/a>, einer unterhaltsamen Quiz-App, k\u00f6nnen Sie Polymer- und Materialdesignmuster in Aktion sehen .\n<\/p>\n \n Jetzt werde ich die Papierelemente von Polymer untersuchen und Ihnen zeigen, wie Sie dieses neue Designparadigma in Ihren Webprojekten nutzen k\u00f6nnen.\n<\/p>\n \n Der Leitfaden \u201eErste Schritte“<\/a> von Polymer enth\u00e4lt ein kurzes Tutorial und ein Starterprojekt, damit Sie sich mit den Schl\u00fcsselkonzepten von Polymer vertraut machen k\u00f6nnen. Zun\u00e4chst m\u00fcssen Sie das Starterprojekt herunterladen<\/a>, das alle Abh\u00e4ngigkeiten und Bibliotheken enth\u00e4lt, die f\u00fcr die Arbeit mit Polymer erforderlich sind. Nachdem Sie das Starterprojekt heruntergeladen haben, entpacken Sie es irgendwo auf Ihrem lokalen Laufwerk.\n<\/p>\n \n Bevor Sie beginnen, ben\u00f6tigen Sie einen schnellen HTTP-Server, der ausgef\u00fchrt wird. Wenn Sie Python bereits installiert haben, f\u00fchren Sie einen der folgenden Befehle auf der obersten Ebene des Beispielprojekts aus.\n<\/p>\n \n Python 2.x:\n<\/p>\n \n Python 3.x:\n<\/p>\n \n Laden Sie nun die fertige Version des Projekts, um den Webserver zu testen. Wenn der lokale Server beispielsweise auf Port 8000 lauscht:\n<\/p>\n \n http:\/\/localhost:8000\/finished\/<\/a>\n<\/p>\n \n Danach m\u00fcssen Sie Papierelemente auf eine der folgenden drei Arten installieren:\n<\/p>\n \n Zip<\/strong>: Laden Sie die Zip-<\/a> Datei herunter und entpacken Sie sie in Ihr Projektstammverzeichnis.\n <\/p>\n<\/li>\n \n Bower<\/strong>: F\u00fchren Sie diesen Befehl oben vom Projektstammverzeichnis aus:\n <\/p>\n \n Weitere Informationen finden Sie unter Installation mit Bower<\/a>.\n <\/p>\n<\/li>\n \n Github<\/strong>: F\u00fchren Sie diesen Befehl oben aus dem Projektstamm aus:\n <\/p>\n \n Sobald Sie die Papierelemente in Ihrem Projektstamm haben, importieren Sie die Komponente, indem Sie den folgenden Code in Ihre HTML-Datei einf\u00fcgen:\n<\/p>\n\n \n \n \n Aufgrund ihres deklarativen Charakters sind Papierelemente genauso einfach zu verwenden wie Komponenten anderer Front-End-Frameworks. Im Folgenden habe ich die Implementierung einiger am h\u00e4ufigsten verwendeter UI-Elemente des Materialdesigns gezeigt.\n<\/p>\n \n Um eine einfache Men\u00fcschaltfl\u00e4che zu erstellen, die beim Klicken ein Dropdown-Men\u00fc \u00f6ffnet, m\u00fcssen Sie den folgenden Code verwenden:\n<\/p>\n \n \n \n Au\u00dferdem kann die schwebende Aktionsschaltfl\u00e4che durch Anwenden der Klasse Mini verkleinert werden.\n<\/p>\n \n Sie k\u00f6nnen Registerkarten mit dem folgenden Code erstellen:\n<\/p>\n \n Das ist ein ein-\/mehrzeiliges Textfeld, in das Benutzer erforderliche Werte eingeben k\u00f6nnen. Dieses Papierelement kann optional mit einem Etikett versehen werden.\n<\/p>\n\n Aktionen hervorheben:
\n<\/h5>\n\n Benutzerinitiierte \u00c4nderung:
\n<\/h5>\n\n Animation Choreographie:
\n<\/h5>\n\n Sinnvolle Bewegung:
\n<\/h5>\n\n Implementieren von Material Design f\u00fcr das Web mit Polymer
\n<\/h3>\n\n Einstieg:
\n<\/h5>\npython -m SimpleHTTPServer<\/code><\/pre>\npython -m http.server<\/code><\/pre>\n\n Papierelemente installieren:
\n<\/h5>\n\n
bower install Polymer\/paper-elements<\/code><\/pre>\ngit clone https:\/\/github.com\/Polymer\/paper-elements.git components\/paper-elements<\/code><\/pre>\n<\/li>\n<\/ul>\n\n
Verwenden von Material-UI-Komponenten:<\/code>
\n<\/h5>\nWie <a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a> und <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a> ist die Papierelementsammlung von Polymer vollgepackt mit Dialogen, Registerkarten und Formularsteuerelementen. Nachfolgend finden Sie eine Liste der Standardkomponenten der Benutzeroberfl\u00e4che, die in Papierelementen enthalten sind:<\/code>\n<\/p>\n\n
Papierknopf<\/code>\n <\/li>\nPapier-Checkbox<\/code>\n <\/li>\nPapier-Dialog-\u00dcbergang<\/code>\n <\/li>\nPapierdialog<\/code>\n <\/li>\nPapier-Dropdown-Men\u00fc<\/code>\n <\/li>\nPapierfabrik<\/code>\n <\/li>\npapierfokussierbar<\/code>\n <\/li>\nPapier-Symbol-Schaltfl\u00e4che<\/code>\n <\/li>\nPapiereingabe<\/code>\n <\/li>\nPapierartikel<\/code>\n <\/li>\nPapier-Men\u00fc-Taste<\/code>\n <\/li>\nPapier-Fortschritt<\/code>\n <\/li>\nPapier-Radio-Button<\/code>\n <\/li>\nPapier-Radio-Gruppe<\/code>\n <\/li>\nPapier-Welligkeit<\/code>\n <\/li>\nPapierschatten<\/code>\n <\/li>\nPapierschieber<\/code>\n <\/li>\nPapierspinner<\/code>\n <\/li>\nPapierlasche<\/code>\n <\/li>\nPapierlaschen<\/code>\n <\/li>\nPapier-Toast<\/code>\n <\/li>\nPapier-Toggle-Button<\/code>\n <\/li>\n<\/ul>\nIcons sind ein weiterer wichtiger Bestandteil des Materialdesigns. Das Polymer- Element bietet eine Reihe von Symbolen, die Sie verwenden k\u00f6nnen. Sie k\u00f6nnen <a href=\"https:\/\/www.polymer-project.org\/components\/core-icons\/demo.html\">Kernsymbole<\/a> auf die gleiche Weise wie Papierelemente installieren.<\/code>\n<\/p>\n\n Papier-Men\u00fc-Button:
\n<\/h5>\n\n<\/code><\/pre>\nWeb Design<\/code>\n<\/div>\n\n<\/pre>\n
WordPress<\/code>\n<\/div>\n\n<\/pre>\n
JavaScript<\/code>\n<\/div>\n\n<\/pre>\n
HTML5<\/code>\n<\/div>\n\n<\/pre>\n
Responsive<\/code>\n<\/div>\n\n<\/pre>\n
Die Vorschau der Men\u00fcschaltfl\u00e4che sieht in etwa so aus:<\/code>\n<\/p>\n<a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" data-rel=\"lightbox\"><img class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" alt=\"\" \/><\/a><\/code><\/p>\n\n
Papierfabrik:<\/code>
\n<\/h5>\nDas ist eine schwebende Aktionsschaltfl\u00e4che, die f\u00fcr gef\u00f6rderte Aktionen verwendet wird. Um eine schwebende Aktionsschaltfl\u00e4che zu erstellen, m\u00fcssen Sie den unten angegebenen Code verwenden:<\/code>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-63844012501f5.webp\")
<\/a><\/p>\n\n Papierlaschen:
\n<\/h5>\n\n ITEM ONE\n ITEM TWO\n ITEM THREE\n<\/code><\/pre>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440158a793.webp\")
<\/a><\/p>\n\n Papiereinzug:
\n<\/h5>\n\n<\/code><\/pre>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440184876c.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384401bedf34.webp\")
<\/a><\/p>\n