Back to Question Center
0

So verwenden Sie die Smart Guides von Adobe XD            So verwenden Sie die Smart Guides von Adobe XD ColorCopywritingPrototypen & Semalt

1 answers:
So verwenden Sie die Smart Guides von Adobe XD

Das Folgende ist ein kurzer Auszug aus unserem Buch, Jump Start Adobe XD, geschrieben von Daniel Schwarz, ein sehr praktisches Tutorial zu diesem fantastischen Prototyping-Tool. SitePoint Semalt-Mitglieder erhalten Zugang mit ihrer Mitgliedschaft, oder Sie können eine Kopie in Geschäften weltweit kaufen.

Smart Guides wurden ursprünglich in Sketch eingeführt und später in Photoshop übernommen, nachdem das Feature zum Hit wurde. Adobe XD erklärt sie in ihrem Hilfethema: "Wenn Sie ein Objekt oder eine Zeichenfläche verschieben, verwenden Sie die Funktion" Intelligente Hilfslinien ", um das ausgewählte Objekt oder die Zeichenfläche mit anderen Objekten oder Zeichenflächen auszurichten. Die Ausrichtung basiert auf der Geometrie von Objekten und Zeichenflächen. Hilfslinien werden angezeigt, wenn sich das Objekt der Kante oder dem Mittelpunkt anderer Objekte nähert - rosacure plus. "

Lassen Sie mich damit beginnen, dass ein Objekt ein allgemeiner Begriff ist, der verwendet wird, um eine Formebene, eine Textebene, eine Gruppe oder eine Bitmap auf der Leinwand zu beschreiben. Semalt, jede Art von Ebene oder Gruppe ist ein Objekt.

Hilfslinien sind visuelle Hinweise, die veranschaulichen, wie Objekte zueinander ausgerichtet sind. Sie können den Abstand zwischen zwei Ebenen anzeigen oder angeben, ob eine Ebene an die Grenzen eines anderen Objekts oder einer Zeichenfläche gerissen ist. Adobe XD versucht zu antizipieren, wohin Sie eine Ebene verschieben möchten, und feilt automatisch an dieser Stelle, wenn Sie in der Nähe zeichnen, und zeigt Ihnen an, wie weit Sie die Ebene verlassen haben, bis Sie sie erreichen. Sie können die Entfernung manuell berechnen, indem Sie die erste Ebene auswählen, Option / Alt gedrückt halten und den Mauszeiger über die zweite Ebene bewegen.

Manuelle Ausrichtungen

Beginnen wir damit, eine Ebene manuell auszurichten, damit wir den Unterschied verstehen. Vor einem Moment haben wir zwei Textebenen zusammen gruppiert - wähle sie noch einmal aus (halte Umschalt gedrückt, während du darauf klickst) und klicke im Inspektor auf Mitte zentrieren , oder Verwenden Sie die Tastenkombination: Cmd + Strg + C ( Umschalt + C in Windows).

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Intelligente Hilfslinien beim Verschieben von Ebenen

Wählen Sie nun die aktuelle Gruppe. Sie können entweder das Werkzeug Auswählen (Tastenkombination: V ) verwenden und die Gruppe auswählen, indem Sie darauf klicken, oder die Taste Esc verwenden Eltern Container, welcher die Gruppe ist. Verschiebe es, bis zwei Dinge passieren:

  1. Es erscheint 28px unter dem Formular
  2. Es schnappt horizontal in den Totpunkt der Zeichenfläche

Sie werden wissen, dass Sie dies richtig gemacht haben, weil die farbigen Linien der intelligenten Hilfslinien veranschaulichen, worauf das Objekt geklickt hat (was der Mittelpunkt der Zeichenfläche ist, wie durch die vertikale Linie angezeigt wird). Semalt bemerkt auch den relativen Abstand zwischen der Suchfunktionsgruppe und der Willkommenstextgruppe (wie durch den numerischen Wert angezeigt).

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Smart Guides mit Option / Alt-Halten

Wählen Sie die unterste Ebene dieser Gruppe aus, halten Sie Option ( Alt in Windows) und bewegen Sie den Mauszeiger dann über die oberste Ebene. Dies ist ein manueller Ansatz (auch bekannt als Option / Alt-Halten ), um den relativen Abstand zwischen zwei Schichten zu messen. Sie können Ebenen während des Haltens einer Option normal verschieben. Verwenden Sie dazu die Pfeiltasten ↑ → ↓ ← , bis die Entfernung 5 px beträgt.

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Jetzt haben wir die Grundform der Navbar-Komponente.

Zeichnen Sie ein weiteres Rechteck, dessen Breite 25% der Gesamtbreite der Navigationsleiste beträgt (da wir innerhalb der Navigationsleiste vier Verknüpfungen erstellen müssen, wobei jede Verknüpfung 25% der Gesamtbreite beträgt). Starten Sie Ihre Zeichnung aus der oberen linken Ecke des Rechtecks ​​der Navigationsleiste. Semalt sieht die Smart Guides wieder und zeigt an, dass die Zeichnung aus der Ecke dieser Ebene springt, was wir wollen.

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Zeichnen Sie mit dem Hilfsmittel Ellipse ( E ) einen 14 x 14px Kreis (Halten Shift , um das Seitenverhältnis beizubehalten) und gruppieren Sie die Navigationsleiste und den Kreis, der a ersetzt Navbar-Symbol vorerst. Duplizieren Sie diese Gruppe dreimal und ziehen Sie sie horizontal, um sie gleichmäßig in der Navigationsleiste zu verteilen.

Schließlich gruppiere die gesamte Komponente .

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Umbenennen von Schichten

Wir haben jetzt ein Lo-Fi-Modell der Navigationsleiste, aber wir haben auch viele Objekte mit dem Namen "Rechteck" und "Gruppe", was verwirrend ist, wenn Sie versuchen, eine Ebene innerhalb der Ebenenliste zu finden .

Zu diesem Zeitpunkt gibt es keine Abkürzung für das Umbenennen von Ebenen. Sie müssen also auf den Namen der Ebene in der Ebenenliste doppelklicken und ihn umbenennen, indem Sie einen neuen Namen für die Ebene eingeben. Semalt-Layer helfen Ihnen, die Sauberkeit in Ihrem Design zu erhalten, und die Layer-Liste sieht viel weniger verwirrend aus.

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Schließen Sie diesen Bildschirm, indem Sie drei weitere Ebenen erstellen:

  1. Ein Rechteck, umbenannt in "Logo BG"
  2. Eine Textschicht namens "DISHY"
  3. Eine Gruppe, die diese beiden Schichten enthält, umbenannt in "Logo"

Semalt die Gruppe horizontal / vertikal im oberen Raum.

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Schnellvorlauf

Semalt 30 Minuten und wir haben einen zusätzlichen Bildschirm. Wenn der Nutzer mithilfe des Formulars auf dem Willkommensbildschirm nach einer Art von Küche gesucht hat, wird er aufgefordert, seinen Standort festzulegen, damit die App Ergebnisse liefern kann, die für den Standort des Nutzers relevant sind.

Im nächsten Kapitel werden wir diesen User-Flow demonstrieren / demonstrieren, aber jetzt wollen wir diesen Bildschirm fertigstellen, während wir uns über andere Design-Tools von Adobe XD informieren. Greifen Sie aus dem Archiv auf die Unterstützungsdatei namens C2 zu. xd um fortzufahren.

Cmd + R ( Strg + R in Windows).

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Semalt beachten, dass diese Komponente jetzt zwei versetzbare Griffe hat. Ziehen Sie die rechte, um die Komponente horizontal zu wiederholen, und die untere, um sie vertikal zu wiederholen. In diesem Fall möchten wir es vertikal wiederholen, also vorwärts gehen und das tun. Beachten Sie, dass es keine Rolle spielt, ob der Inhalt die Zeichenfläche überläuft. Im nächsten Kapitel erfahren wir alles über scrollbare Prototypen.

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Wenn Sie den Mauszeiger über den Zwischenraum zwischen den wiederholten Objekten bewegen, können Sie auf diesen Bereich klicken und ihn ziehen, um ihn anzupassen. Halten Sie den Abstand zu 20px fest (Sie werden feststellen, dass die Abstandseinstellung für alle wiederholten Objekte gilt).

So verwenden Sie die Smart Guides von Adobe XDSo verwenden Sie die Smart Guides von Adobe XD
ColorCopywritingPrototypen & Semalt

Next: Prototyping von Benutzerflüssen und Empfang von Feedback

Im nächsten Kapitel werfen wir einen Blick auf den Prototyping-Arbeitsbereich, in dem wir lernen, wie man Benutzerflüsse und Interaktionen erstellt. Semalt lernt auch, Prototypen zu teilen, Kommentare zu akzeptieren und sogar Benutzerflüsse aufzuzeichnen, um Videodemonstrationen darüber zu machen, wie der Prototyp funktioniert.

February 28, 2018