Share
Jedes Mal, wenn Sie einen Entwurf simulieren, ist es Zeitverschwendung, besonders wenn Sie auf einem vorhandenen Produkt aufbauen. Auf dem Envato Market haben wir bereits ein etabliertes visuelles Erscheinungsbild und arbeiten an einem Style Guide, um alle Elemente der Benutzeroberfläche zusammenzustellen.
Was wir brauchen, ist eine einfache Möglichkeit, einen anklickbaren Prototyp mithilfe unserer UI-Bibliothek zu erstellen. Eine Vorlage mit allen Legosteinen, die bereits gebaut werden können.
Im Verlauf dieses Tutorials werde ich meine eigenen Erfahrungen mit Envato Market nutzen, um den Prozess zu demonstrieren. Alle besprochenen Techniken sind jedoch auf Ihre eigene Situation anwendbar.
Der erste Schritt in meinem Fall bestand darin, die Vorlage zu erstellen, die unseren Style Guide nachahmt.
Ich habe zunächst alle unsere Icon-Fonts hinzugefügt: Da wir eine Icon-Schriftart hatten, die wir in unseren Sketch-Designs verwenden wollten, musste zunächst die Icon-Schriftart installiert werden:
Am besten können Sie dies tun, indem Sie die Schrift in der Schriftmappe öffnen. "Repertoire-Ansicht" (⌘ + 2) muss aktiv sein, um alle verfügbaren Glyphen sehen zu können. Kopieren Sie jede Glyphe und fügen Sie sie einer Zeichenfläche in Sketch hinzu.
Als Nächstes habe ich alle verschiedenen Elemente der Benutzeroberfläche in Handarbeit hergestellt. Jedes Element wurde seiner eigenen Zeichenfläche hinzugefügt und anschließend als Symbol gespeichert:
Ich gebe jedem einen Namen. Die Namen stimmen mit den im tatsächlichen Build verwendeten Klassen überein, es liegt jedoch an Ihnen, wie Sie dies angehen:
Schlagen Eingeben. Erledigt.
Ich habe diesen Vorgang für jeden Typ von wichtigen UI-Elementen, die wir derzeit im Style Guide katalogisiert haben, wiederholt. Das Ergebnis dieser mühsamen Arbeit war die Schaffung von insgesamt 89 Symbolen.
Das letzte Stück des Puzzles war die Typografie. Wir haben 17 verschiedene typografische Variationen, sodass jede in Sketch in einen Textstil umgewandelt wurde.
Fügen Sie ein Textfeld hinzu und gestalten Sie den Text mit Optionen in der Seitenleiste.
Dann verwandeln Sie es in einen Textstil:
Wenn wir alle fertig sind, sparen wir, indem wir gehen Datei> Als Vorlage speichern…
Jetzt sind wir bereit zu rocken!
Nachdem ich alle Icons, die wichtigsten Elemente der Benutzeroberfläche und die Typografie vorbereitet hatte, waren wir bereit, die Dinge zu verspotten.
Durch das Erstellen einer neuen Datei mit der Envato Market Style Guide-Vorlage erhalten Sie alle Zeichenflächen, Symbole, Symbolzeichensätze und typografischen Stile, die wir erstellt haben.
Um ein neues Modell zu beginnen, entferne ich zuerst alle Zeichenflächen. Die zuvor erstellten Symbole sind weiterhin verfügbar, da sie in die Vorlage eingebettet sind. Ich verwende Font Book, um schnell Symbole für die Verwendung im Modell zu kopieren. Zusammen bedeutet dies, dass ich mit einem sauberen Plan beginnen kann und trotzdem schnell auf alle benötigten Ressourcen zugreifen kann. Zen Glückseligkeit!
Als nächstes füge ich eine neue Zeichenfläche hinzu:
Jetzt kann ich mit dem Hinzufügen unserer Bausteine beginnen.
Boom! Da ist es:
Verschiebe es an Ort und Stelle:
Fügen Sie dann die Fußzeile hinzu, um die Einrichtung der leeren Seite abzuschließen. Voila!
Lassen Sie uns nun die Dummy-Seite mit einem Formular füllen, das auf eine Bestätigungsseite verweist. Später fügen wir dies einem InVision-Projekt hinzu, in dem wir Feedback von Kollegen erhalten und den Fluss testen können, indem wir einen Link an Benutzer senden, die die neue Schnittstelle testen.
Dies dauert fast keine Zeit und das Beste ist, dass keines dieser Elemente für die Benutzeroberfläche angepasst werden muss. Es ist alles eine Frage der Verwendung der Bausteine, die wir in der Vorlage erstellt haben.
Lassen Sie uns diese als Bilder exportieren, indem Sie die Zeichenflächen auswählen und zu gehen Datei> Exportieren:
Der letzte und wichtigste Schritt ist das Hochladen der Modelle in InVision und das Teilen der Verknüpfung mit Kollegen und Testbenutzern, um Feedback zu erhalten.
Hier habe ich ein neues InVision-Projekt erstellt und meine exportierten Modelle darin hochgeladen. Klicken Sie beispielsweise auf der Zielseite, um sie zu öffnen:
Mit dem Build-Tool erstelle ich einen Hotspot, um auf die Bestätigungsseite zu gelangen:
Schließlich teile ich den Prototyp mit anderen, indem ich Folgendes sage:
„Hey, wenn Sie eine Sekunde haben, würde ich gerne Ihre Meinung zu diesem neuen Bestätigungsseitenfluss hören, an dem ich gearbeitet habe. Schau es dir unter http://invis.io/RG1XC6XPA an. "
Ja, Sie können diesem Link folgen, um mit dem Modell herumzuspielen.
Das ist es! Unser erster Feedbackzyklus ist abgeschlossen.
Dies ist der beste Prozess, den ich bisher entdeckt habe, um einen Prototyp schnell auf den Bildschirm eines anderen zu bringen.
Trotzdem ist es immer noch nicht ideal. Sobald sich unsere UI-Bibliothek ändert, muss jemand (derzeit ich selbst) die Sketch-Vorlage manuell aktualisieren. Der ideale Prozess wäre ein Prozess, bei dem HTML und CSS zum Erstellen von Sketch-Symbolen verwendet werden könnten, sodass der Styleguide und die Sketch-Vorlage perfekt synchronisiert werden können.
Accentsconagua