Wir optimieren unsere Arbeit bei der Entwicklung einer Anwendung in Google Material Design

  • Tutorial


Dieses Material kann sowohl für professionelle Schnittstellendesigner als auch für Entwickler nützlich sein, deren Kenntnisse in Grafikpaketen unter dem Niveau eines „fortgeschrittenen Benutzers“ liegen.

Wir stehen also vor der Aufgabe, auf vorgefertigte Lösungen im Open Access zu setzen, um den Aufwand für die Entwicklung der Anwendung im Stil von Google Material Design so weit wie möglich zu optimieren.

Übrigens, wenn Sie Figma verwenden , empfehle ich, auf unsere vorgefertigten Konstruktionssysteme zu achten . Sie helfen Freiberuflern dabei, mehr Aufträge pro Monat zu erledigen, Programmierer können selbst schöne Anwendungen erstellen, und das Team führt Sprints mit vorgefertigten Designsystemen für die Teamarbeit schneller aus.

Und wenn Sie ein ernstes Projekt haben, ist unser Team bereit, ein auf unseren Best Practices basierendes Konstruktionssystem innerhalb der Organisation bereitzustellen und es mit Figma auf bestimmte Aufgaben zuzuschneiden. Web / Desktop und jedes Handy. Wir sind auch mit React / React Native vertraut. Schreiben Sie an T: @kamushken


Stage Times: Prototyping


Es ist mindestens erforderlich, das Volumen der Anwendung und die Zusammensetzung der Bildschirme darzustellen. Es hilft sehr beim Durchdenken von Tap / Click-Pfaden (Übergängen zwischen Bildschirmen). Ich bevorzuge Axure weil Viele Tastenkombinationen werden wie in Adobe Photoshop 1 zu 1 erstellt (lesen Sie in anderen Artikeln über ähnliche Produkte nach (im Abschnitt „Design“, jeder dritte Beitrag zu diesem Thema).

Sie müssen drei Bibliotheken darin installieren:

Android_MaterialDesignV1.1 (I. disk)

Eine ziemlich ausgefeilte Bibliothek, mit der Sie einen Prototyp für alle GMD-Richtlinien erstellen können. Feature: Viele Elemente sind bereits "in Aktion". Zum Beispiel funktioniert Pull-to-Refresh sofort in kompiliertem HTML. Ich denke, es ist besser für diejenigen geeignet, die auf den Prototyp "klicken" möchten.


material-design-8 (Ya disk) Leichtere

und einfachere Bibliothek. Es gibt ein Minimum an vorgefertigten Komponenten, aber alles ist grundlegend: Schwarzweißthemen, Listen, Karten, Schaltflächen, Registerkarten, Dialogfelder, Schieberegler usw. Ich bevorzuge es, da je weniger Auswahl vorhanden ist, desto schneller das gewünschte Element gefunden und in den Prototyp gezogen wird.


google-material-design-icons (Ya.Disk)

~ 750 Vektor-Icons von Google. Natürlich können Sie die Standardeinstellung für Axure: Font verwenden. Echte Ikonen werden dem Prototyp jedoch Realität werden lassen.

upd: Genosse ShLShepherd teilt seine eigene Sammlung von Vektor-Icons (entnommen aus Kamentov)


Stufe zwei: Design


Wie oben erwähnt, bevorzuge ich Adobe-Grafikpakete. Sie müssen sich also an die Design-Community wenden. Es lohnt sich, nach den Enthusiasten zu suchen, die bereits das GMD-UI-Kit zusammengestellt haben, in dem die Elemente angeordnet sind und gemäß der Google-Spezifikation aussehen. Einrückung, Schriftarten, Größen usw. Von den freien mochte ich zwei:

sepia_ui_kit (Я.disk 142mb)


Es gibt alles, was Sie brauchen, aber nur wenige maßgeschneiderte Ideen. Es werden jedoch alle 1-in-1-Bildschirme nachverfolgt, die Google selbst in seiner offiziellen GMD-Dokumentation verwendet hat. Der einzige Nachteil ist, dass die Suche nach dem gewünschten Element in Unterordnern in einer eigenen separaten Quelle sehr lange dauert.

Kochen (I.disk 434mb)


Im Gegensatz dazu ist dieses UI-Kit übermäßig reich an benutzerdefinierten Ideen. Aber die Autoren haben die Messlatte leicht überschritten. Ein expliziter Pedant in dieser Quelle wird feststellen, dass zumindest die Schriftintensität an einigen Stellen nicht mit der Dokumentation übereinstimmt. Es gibt nur wenige Grafiken und leichtfertige Schaltflächen. Es wird Ihnen helfen, Ihr eigenes Element zu „kreieren“, aber dabei stilvoll zu bleiben.
Super Navigation: Von der ersten Seite an gibt es für jeden Bildschirm einen Link zu einer separaten Quelle. Einfach doppelklicken. Einfach toll!

Stufe drei: Entwicklung


Ihr verantwortungsloser Designer möchte nicht alle Icons streng nach den Vorgaben in separaten Dateien ablegen? Ich verstehe dich wirklich. Gehen Sie zu materialdesignicons.com und laden Sie in aller Ruhe entweder die SVG mit dem gewünschten Symbol oder ein vollständiges Zip-Archiv mit PNG für alle Smartphone-Auflösungen herunter. Sie können nicht nur Sätze von Google-eigenen Symbolen finden. Die Datenbank enthält viele benutzerdefinierte Piktogramme, die von Mitgliedern der Design-Community erstellt wurden. Wie das Sprichwort sagt: "Es ist kostenlos, und es wird immer kostenlos sein." Direkt für Entwickler war es möglich, einen Feiertag mit vorgefertigten Lösungen (Github) im Allgemeinen zu finden . Zum Beispiel:


Oder wie diese:


Es sollte reichen ...

Ich bin froh, wenn dieser Beitrag hilfreich war! Wenn Sie möchten, lesen Sie, wie ich GMD auf ein Desktop-Produkt projiziert habe und welche Schlussfolgerungen ich gezogen habe. Beginnen Sie dann mit dem ersten Teil (es gibt insgesamt vier) .


Jetzt auch beliebt: