Erste Schritte mit UXPin
Während wir uns dem mobilen Design, dem App-Design und dem responsiven Design zuwenden, wurde der Fokus zunehmend auf UX (User Experience) und Wireframing, interaktives Prototyping und Mockups gelegt. Es gibt eine Menge Werkzeuge, die auf diese Nische abzielen, und sie umfassen die gesamte Bandbreite von komplexen, mit Merkmalen beladenen Giganten bis hin zu spärlichen und kaum brauchbaren. Eines der Tools, das mir aufgefallen ist, ist UXPin, einfach weil es von Designern für Designer entwickelt wurde.
Bevor wir uns vorwärts bewegen … ein Vorbehalt. Wenn Sie eine Organisation sind, die die Software bevorzugt, dann ist UXPin nichts für Sie. Alle in dieser App ausgeführten Arbeiten werden im Browser ausgeführt, und die von Ihnen gespeicherten Projekte werden in Ihrem Konto gespeichert.
Um mit UXPin zu beginnen, starten Sie einen Browser und gehen zu UXPin. Von hier aus können Sie sich für eine kostenlose Testversion anmelden oder einen auf Ihre voraussichtlichen Bedürfnisse zugeschnittenen Monatsplan vereinbaren. Der Anmeldevorgang ist recht einfach und sobald Sie Ihren Benutzernamen und Ihr Kennwort festgelegt haben, können Sie loslegen.
So starten Sie ein Projekt in UXPin
Wenn Sie sich anmelden, gelangen Sie zum Dashboard und können von hier aus ein neues Drahtgitter, ein neues mobiles Projekt oder ein Responsive Web Design-Projekt erstellen. Es gibt auch Plug-Ins für UXPin, mit denen Sie Photoshop- oder Sketch-Projekte einspielen können. Für dieses How To werde ich ein Banner mit Text erstellen und dem Banner eine E-Mail-Schaltfläche hinzufügen. Um dies zu erreichen, habe ich "Neues Drahtgitter erstellen" ausgewählt.
So verwenden Sie die UXPin-Schnittstelle
Die Designoberfläche ist in vier Bereiche unterteilt. Im schwarzen Bereich links finden Sie eine Reihe von Tools, mit denen Sie zum Dashboard zurückkehren, die zu verwendenden Elemente öffnen, das Smart Elements-Bedienfeld öffnen, nach Elementen suchen, der Seite Notizen hinzufügen und Teammitglieder hinzufügen. Am unteren Rand befindet sich eine Schaltfläche, die ein kurzes Tutorial öffnet, eine andere, mit der Sie auf Ihr Konto zugreifen können, und eine andere, die auf die häufig gestellten Fragen (FAQs) zugreifen, Fragen stellen und sogar Feedback geben kann.
Im blauen Bereich oben befinden sich eine Reihe von Werkzeugen und Eigenschaften. Mit den dunkleren Schaltflächen auf der rechten Seite können Sie Ihr Design iterieren, die Projekteinstellungen anpassen, die Seite freigeben und die Seite im Browser simulieren.
Im Bedienfeld „Elemente“ greifen Sie die Teile für die Designoberfläche auf, benennen Sie Ihr Projekt und fügen Sie Seiten hinzu.
Die Elements-Bibliothek ist eine angenehme Überraschung für UX-Designer. In diesem Pop-Down-Menü können Sie aus 30 Bibliotheken auswählen, die von iOS bis Android Lolipop reichen. Außerdem haben Sie Zugriff auf Bootstrap- und Foundation-Elemente sowie die Font Awesome-Symbole, Gesten-Icons für Handys und eine Sammlung von Social Widgets.
04 von 09Hinzufügen eines Elements zu einer UXPin-Seite
Als Erstes zog ich das Box-Element auf die Entwurfsoberfläche und beim Loslassen der Maus die Eigenschaftenbereich öffnet. Mit der Schaltfläche Eigenschaften können Sie das Element benennen und die Breite, Höhe und Position der Elemente festlegen. Sie können dem Element auch eine Auffüllung hinzufügen, die Ecken abrunden und die Deckkraft anpassen. Durch Klicken auf die Schaltfläche Hintergrundfarbe wird eine RGBA-Farbauswahl geöffnet.
Sie können dem ausgewählten Element auch eine Schriftart, einen Rand und ein Muster zuweisen. Mit dem Blitz können Sie einem ausgewählten Element Interaktivität hinzufügen.
05 von 09Hinzufügen und Formatieren von Text in UXPin
Ziehen Sie zum Hinzufügen von Text das Textelement auf die Entwurfsoberfläche und geben Sie Ihren Text ein. Klicken Sie auf die Texteigenschaft Schaltfläche, um die Eigenschaften der Schriftart zu öffnen und den Text zu formatieren. Wenn Sie einen Dummy-Textblock benötigen, fügen Sie ein Textelement hinzu und klicken Sie auf die Schaltfläche LOREM IPSUM GENERIEREN Schaltfläche in den Font-Eigenschaften.
06 von 09So fügen Sie ein Bild zu einer UXPin-Seite hinzu
Es gibt mehrere Möglichkeiten, diese Aufgabe zu erledigen. Du kannst den … benutzen Bildwerkzeug Fügen Sie in der Symbolleiste ein Bildelement aus der Bibliothek hinzu oder ziehen Sie ein Bild einfach von Ihrem Desktop auf das Element in der Entwurfsoberfläche (siehe oben).
07 von 09So fügen Sie einer UXPin-Seite eine Schaltfläche hinzu
Obwohl es ein Button-Element gibt, geben Sie " Taste ”In die Suche In diesem Bereich werden, wie oben gezeigt, alle Schaltflächen aller Bibliotheken geöffnet. Ziehen Sie die für Sie passende auf die Entwurfsoberfläche und ändern Sie mit den Eigenschaften die Farbe, die Schriftart und sogar den Randradius. Um den Text innerhalb der Schaltfläche zu ändern, klicken Sie einmal auf den Text und geben Sie den neuen Text ein.
08 von 09So fügen Sie einer UXPin-Seite Interaktivität hinzu
Dies ist nicht so kompliziert, wie es zuerst erscheint. Für die E-Mail-Eingabe habe ich ein Eingabeelement hinzugefügt, die Größe geändert, den Text eingegeben und den Text formatiert. Wenn das Eingabeelement ausgewählt ist Klicken Sie auf die Schaltfläche Eigenschaften und wann Elementeigenschaften Klicken Sie auf Sichtweite Knopf - der Augapfel - in der oberen rechten Ecke der Platte.
Wählen Sie die Schaltfläche und klicken Sie auf Schaltfläche "Interaktionen" - den Blitzschlag in den Eigenschaften. Wenn das Fenster Interaktionen geöffnet wird, wählen Sie Neue Interaktion. Wählen Sie im Popup-Fenster "Auslöser" die Option "Klicken". Wählen Sie im Aktionsbereich die Option Element anzeigen. Sie werden nun gefragt, welches Element angezeigt werden soll. Klicken Sie einmal auf die Pistole und dann auf das Eingabeelement. Mit dem identifizierten Element können Sie jetzt bestimmen, ob das Element animiert werden soll oder nicht. In diesem Fall habe ich mich entschieden, das Eingabefeld einfach anzuzeigen und habe den Standardwert für die Dauer von 300 ms gewählt.
Ich möchte auch, dass die Schaltfläche um 65 Pixel nach rechts verschoben wird, wenn sie angeklickt wird. Ich habe die Schaltfläche ausgewählt, das Bedienfeld Interaktionen geöffnet und ausgewählt Neue Interaktion. Ich habe diese Einstellungen verwendet:
- Auslösen: Klicken
- Aktion: Bewegen Sie sich
- Richtung verschieben: 65 px auf der x-Achse
- Animation: Linear
- Dauer: 300 ms
Um eine Interaktion zu entfernen, wählen Sie das Element aus und öffnen Sie das Bedienfeld Interaktionen. Wählen Sie die Interaktion im Panel aus und klicken Sie auf den Papierkorb, um sie zu löschen.
09 von 09So testen Sie Ihre Seite in UXPin
Da Sie im Browser arbeiten, ist das Testen ganz einfach. Drücke den Design simulieren Taste. Die Seite wird im Browser geöffnet und Sie können den Weg testen. Auf der linken Seite der Seite wird außerdem ein Fenster hinzugefügt, in dem Kommentare, eine Site-Map bei mehreren Seiten, Usability Testing, Live Sharing, Bearbeitung und eine Rückkehr zum Dashboard möglich sind.
Am unteren Rand der Seite befindet sich ein weiteres kleines Fenster, in dem Sie die interaktiven Elemente anzeigen, Kommentare anzeigen oder ausblenden und den Projektlink mit anderen teilen können.
