Schöne Implementierungen des Materialdesigns in mobilen Apps

Viele Menschen suchen heutzutage nach schönen Implementierungen von Material Design in mobilen Apps, um sich inspirieren zu lassen.

Ja, Material Design kam und veränderte die Designgeschichte und in den letzten zwei Jahren war es im Design mobiler Apps sehr beliebt und es gibt eine große Anzahl schöner Implementierungen von Material Design in mobilen Apps.

Aber lassen Sie uns vorher verstehen, was Material Design ist und warum es zur beliebtesten und erfolgreichsten Designsprache geworden ist.

Was ist Materialdesign?

Material Design ist eine 2014 von Google entwickelte Designsprache. Material Design erweitert die „Karten“-Motive, die in Google Now debütierten, und nutzt rasterbasierte Layouts, reaktionsschnelle Animationen und Übergänge, Polsterung und Tiefeneffekte wie Beleuchtung und Schatten großzügiger.

Ab 2015 hatten die meisten mobilen Anwendungen von Google für Android die neue Designsprache angewendet, darunter Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox.

Alle Anwendungen der Marke Google Play und in geringerem Umfang der Chrome-Browser und Google Keep. Die Desktop-Webschnittstellen von Google Drive, Docs, Sheets, Slides und Inbox haben es ebenfalls integriert.

Die kanonische Implementierung von Material Design für Benutzeroberflächen von Webanwendungen heißt Polymer.

Es besteht aus der Polymer-Bibliothek, einem Shim, das eine Webkomponenten-API für Browser bereitstellt, die den Standard nicht nativ implementieren, und einem Elementkatalog, einschließlich der „Paper Elements Collection“, die visuelle Elemente des Materialdesigns enthält.

Das System, das sich auf rasterbasierte Layouts, Übergangseffekte und Tiefe konzentriert, hielt bald Einzug in Android-Apps und brachte das System auf den Designstandard von iOS.

Die Prinzipien des Materialdesigns

Visuelle Hinweise inspiriert

Google verwendet den Begriff „taktile Realität“, um seine Designphilosophie zu beschreiben, da die Oberflächen und Kanten im Materialdesign von realen Papier- und Tintenstudien inspiriert sind.

Dies hilft Benutzern, die digitale Oberfläche auf ihrem Bildschirm problemlos visuell zu verstehen. Realistisches Design macht Objekte auf dem Bildschirm erkennbar und lässt sich leicht mit ihnen interagieren.

Gewagte Ästhetik

Die Farbauswahl im Materialdesign ist mutig und bewusst. Auffällige Farbschemata arbeiten mit grundlegenden druckbasierten Designtechniken zusammen, um den Benutzer in das Erlebnis einzutauchen.

Absichtlicher Weißraum, randlose Bilder und große Typografie werden verwendet, um die Benutzeraktionen hervorzuheben. Auf diese Weise versteht der Benutzer schnell den Zweck und die Funktionalität der Schnittstelle auf seinem Bildschirm.

Verwandter Beitrag: Die häufigsten Fehler beim Design mobiler Apps

Bedeutung durch Bewegung

Anstelle künstlicher und mechanischer Animationen erscheint Bewegung im Materialdesign flüssig und natürlich. Google empfiehlt, dies auf verschiedene Arten zu tun:

• Natürliche Beschleunigung und Verzögerung: Um unnatürliche Bewegungen zu vermeiden, sollten Elemente auf einer Seite gleichmäßig beschleunigt und verzögert werden. Abrupte Starts, Stopps und Richtungsänderungen sind für den Benutzer irritierend und ablenkend.
• Visuelle Kontinuität: Ein Übergang zwischen zwei visuellen Zuständen sollte glatt und mühelos sein, damit der Benutzer nicht abgelenkt wird. Zu viel Schnickschnack, wenn eine Website oder App von einer Seite zur nächsten wechselt, ist unnötig.
• Hierarchisches Timing: Elemente, die den wichtigsten Inhalt enthalten, sollten hervorgehoben werden, indem sie auf dem einfachsten Weg platziert werden, dem das Auge folgen kann. Mit anderen Worten, es ist wichtig, die Aufmerksamkeit auf wichtige Elemente zu lenken.
• Einheitliche Choreografie: Animierte Elemente sollten nicht zufällig übergehen, da dies ablenken kann. Stattdessen sollten sie auf geordneten Wegen reisen, die Sinn machen.

Material Design schafft nicht nur Ordnung, es schafft Ordnung mit Sinn und Zweck. Es ist ein sinnlicher Ausdruck der Marke Google.

Wenn es gekauft wird, könnte es die erste ernsthafte Bedrohung für Apples scheinbares Monopol auf hervorragende Benutzererfahrung sein. Als iPhone-Anhänger muss ich gestehen, dass ich zum ersten Mal damit begonnen habe, Seitenblicke in Richtung Android zu werfen.

Die verblüffende Besonderheit von Material Design ist eine Reaktion auf zwei Tatsachen:

• Wenn es einem Entwickler möglich ist, eine Benutzeroberfläche zu ruinieren, werden sie es tun.
• Die Alternative zu gutem Design ist nicht kein Design, sondern schlechtes Design.

Hier sind einige der schönsten Implementierungen von Material Design in mobilen Apps.

Wer kann Material Design besser umsetzen als die, die es geschaffen haben. Google Calendar ist eine der schönsten Implementierungen von Material Design in mobilen Apps. Mit mehr als 1.000.000 Downloads rockt es sicherlich die Party.

Google Kalender

Für den Anfang hat Googles App endlich das herkömmliche skeuomorphe Design abgeschafft, das die meisten Kalender-Apps verwenden, das das Layout eines physischen Planers nachahmt.

Es gibt keine Einschränkung mehr durch die Notwendigkeit, unseren Zeitplan auf Papier zu schreiben. Der Kalender von Google bietet Ihnen ein vertikales Layout und platziert den aktuellen Tag oben auf der Seite.

Auf diese Weise sehen Sie nur die kommenden Tage und Ereignisse. Tage, an denen nichts passiert, werden verdichtet, was das Erlebnis weiter rationalisiert, um Ihnen nur das zu zeigen, was wirklich nützlich ist.

Diese einzige Änderung an der Benutzeroberfläche ermöglicht es dem Benutzer gleichzeitig, im Zentrum der Erfahrung zu bleiben, sodass sich die Benutzeroberfläche um ihn herum bewegt. Fügen Sie etwas Parallax-Scrolling hinzu und Sie haben eine wirklich großartig aussehende App, die kombiniert.

Evernote

Evernote wird oft für seine Herangehensweise an Materialdesign gelobt und ist ein auffälliges Beispiel für die schöne Implementierung von Materialdesign in mobilen Apps

Die App hat durchgehend ein starkes und konsistentes Farbschema und ist ebenso gut gestaltet wie funktional. Symbole zeigen klar und effizient an, ob es sich um eine Textnotiz, eine handschriftliche Notiz oder ein Foto handelt, das Sie aufnehmen werden.

Das Elephant-Symbol ist einfach und elegant, während die Website, iOS- und Windows 10-Apps ebenso durchdacht gestaltet und gestaltet sind.

Microsoft-Gesundheit

Microsoft Health ist tatsächlich eines der besten Beispiele im Play Store.

Die App wurde entwickelt, um mit dem Band-Fitness-Tracker zusammenzuarbeiten und zeigt alle Ihre Statistiken in einem einfachen vertikalen Layout zusammen mit flachen weißen Symbolen. Wenn Sie auf eine dieser Überschriften klicken, öffnet sich das Panel, um Ihre Statistiken anzuzeigen.

Die Benutzeroberfläche ist großartig, damit Sie sich auf einen Blick einen Überblick verschaffen und bei Bedarf tiefer gehen können, was ein Markenzeichen für gutes App-Design ist.

Fabelhaft: Motiviere mich

Viele Leute denken, dass Fabulous: Motivate Me die präziseste und durchdachteste Materialdesign-Implementierung in mobilen Apps ist.

Die App erkundet mit ihren gestochen scharfen, flachen Bildern und kräftigen Farben neue Materialdesignprinzipien auf die übliche Weise, verfügt aber auch über einige der attraktivsten Animationen im Play Store.

Die Liste wäre ohne die mobile Anwendung von Facebook Live nicht vollständig.

Die App ist ein sehr minimalistisches, aber effektives Beispiel für Material Design. Es verwendet Schatten auf eine Weise, die normalerweise nicht zu sehen ist. indem Sie helle Schatten anstelle von dunklen verwenden, um Tiefe zu erzeugen.

Es macht interessanten Gebrauch von Ikonografie, Animation und Interaktionsdesign – Schlüsselaspekte von Material.