Adobe Experience Design-Tricks, Tipps und Techniken

01 von 07

Adobe Experience Design-Tricks, Tipps und Techniken

Als Adobe Experience Design als Public Preview einführte, hat das Unternehmen gleichzeitig zwei erstaunliche Leistungen vollbracht. Erstens haben sie sich einen Platz auf dem aufstrebenden Markt für Prototyping-Software geschaffen. Zweitens eröffneten sie den Nutzern die Möglichkeit, mit "work in progress" zu spielen, und lassen die Benutzer diesen Fortschritt beeinflussen. Nachdem die Anwendung nun einige Monate verfügbar war, dachte ich, es wäre ein guter Zeitpunkt, um einige Erfahrungsdesign-Tricks, Tipps und Techniken zu teilen.

Zunächst fragen Sie sich vielleicht, was mit Prototyping-Software gemeint ist. Zu den Hauptakteuren in diesem Bereich gehören Proto.io, Principle, UXPin, Atomic.io, Experience Design und InVision. Im Gegensatz zu Anwendungen wie Sketch 3, Photoshop und Illustrator, in denen statische Designs erstellt werden, bieten diese grafischen Editoren Interaktivität, Bewegung und andere Funktionen, die im heutigen mobilen und Webdesign-Bereich üblich sind.

Mit dem Aufkommen von Mobile und dem unvermeidlichen, laserähnlichen Fokus auf den Benutzer reicht es nicht mehr aus, dass ein Designer ein paar Skizzen erstellt, einige Comps zusammenfügt und dann das Projekt freigibt oder auf einen Webserver lädt. Der UI / UX-Workflow hat die Dinge grundlegend geändert. Jeder Schritt des Prozesses, von der Identifizierung des Benutzers, Skizzen, Wireframes, Mockups und Prototyping, werden nun umfangreichen Benutzertests unterzogen.

In dieser letzten Phase - dem Prototyping - werden die Schmerzpunkte entdeckt und behoben, bevor das Projekt in die endgültige Produktion übergeht. Hier sind Interaktivität, Bewegung, Bildschirmübergänge und die Platzierung von allem auf dem Bildschirm so wichtig. Probleme und Probleme können nicht einfach als statisches Bild angezeigt oder verbal erklärt werden. Schließlich sind diese Produkte für echte Menschen. Anstatt all das auf Code zu übertragen, wird der Prototyping-Prozess zunehmend von Grafiksoftware übernommen, die nur für diesen Zweck entwickelt wurde. Es ist einfacher, einen Fehler zu beheben, ein Bild zu ersetzen, etwas Text umzuschreiben, eine Schaltfläche zu verschieben usw. mithilfe eines visuellen Editors, als ständig Code neu zu schreiben und zu debuggen.

Tatsächlich ist diese Software zu einer Schlüsselkomponente in der heutigen Design- und Entwicklungsumgebung "Rapid Prototyping" geworden.

Nachdem dies gesagt ist, lasst uns Spaß mit Experience Design haben.

02 von 07

Erstellen Sie eine Ziel-PIN mit einem einfachen Kreis in Adobe Experience Design

Ein netter Aspekt von XD ist die Verwendung von Vektor-Zeichenwerkzeugen. Kann kein Symbol finden Kein Problem. Roll deinen eigenen. Hier ist wie:

1. Wählen Das Ellipse-Werkzeug und zeichnen Sie mit gedrückter Wahltaste / Alt-Umschalttaste einen Kreis.
2. Stellen Sie bei ausgewähltem Kreis das ein Füllfarbe bis FF0000 und die Grenze auf "none" in den Eigenschaften.
3. Doppelklicken Sie auf den Kreis, um die Ankerpunkte anzuzeigen. Ziehen Sie den unteren Anker nach unten.
4. Doppelklicken Sie auf den ausgewählten Ankerpunkt, und die Kurven werden durch Linien ersetzt.
5. Zeichnen Sie einen weiteren kleinen Kreis mit einer weißen Füllung und ohne Stoke. Bewegen Sie es in Position und wählen Sie den Stift und den Kreis aus. Klicken Sie im Ausrichtungsfenster oben in den Eigenschaften auf die Schaltfläche Horizontaler Mittelpunkt, und die Pin wird erstellt.

03 von 07

Erstellen Sie eine Hintergrundunschärfe in Adobe Experience Design

Es ist üblich, Text oder anderen Inhalt über einem Hintergrundbild zu haben. Das Problem hierbei ist, dass das Bild den darüber liegenden Inhalt meistens überwältigt. Eine Möglichkeit, dieses Problem zu lösen, besteht darin, das Hintergrundbild zu verwischen. Sie können das Bild in Photoshop oder einer anderen Bildbearbeitungssoftware verwischen, dies ist jedoch etwas ineffizient, zumal XD diese Aufgabe nun für Sie erledigen kann. Hier ist wie:

1. Erstellen Sie eine neue Zeichenfläche und fügen Sie Ihr Hintergrundbild hinzu.
2. Wählen Sie das Rechteckwerkzeug aus. AZeichnen Sie ein Rechteck über das Bild. Setzen Sie bei ausgewähltem Rechteck die Füllung auf Weiß und den Strich auf Keine.
3. Wenn das Rechteck ausgewählt ist, Wählen Sie Hintergrundunschärfe im Eigenschaftenfenster. Die drei Schieberegler sind „Unschärfe“, „Helligkeit“ und „Deckkraft“. Folgendes tun sie:

• Unschärfemenge: Stellt die Unschärfe des Bildes unter der Form ein. Der Maximalwert beträgt +50.
• Helligkeit: Passt die Lichter und Schatten im Bild an. Der Minimalwert ist -50 und der Maximalwert ist +50.
• Opazität: Beeinflusst die Transparenz der Form und die Sichtbarkeit des Bildes unter der Form. Die Werte liegen zwischen 0% und 100%.

Wenn Sie wirklich "Dinge wechseln" möchten, ändern Sie die Farbe der Form und spielen Sie mit dem Wert für die Deckkraft, um das "Aussehen" des Bildes zu ändern.

04 von 07

Erstellen Sie einen Scrim in Adobe Experience Design

Ein häufiges Designproblem ist, dass Elemente der Benutzeroberfläche eine gemeinsame Farbe haben müssen. Sie gehen jedoch verloren, wenn sie über einem Hintergrundbild oder einer Volltonfarbe platziert werden. Die Lösung ist ein Scrim. Ein Scrim ist ein etwas undurchsichtiger Farbverlauf, der zwischen dem Schnittstellenelement und dem Hintergrund platziert wird. Dies ist in XD leicht zu bewerkstelligen. Hier ist wie:

1. Erstellen Sie Ihre Zeichenfläche in XD, fügen Sie ein Bild hinzu und kopieren und fügen Sie ein Oberflächenelement aus den entsprechenden Elementen ein UI Kit - Datei> Open UI Kit … - in die Zeichenfläche. In der Abbildung oben sind die Statusleiste und die App-Leiste nur schwer zu sehen.
2. Wählen Sie das Rechteckwerkzeug aus und zeichnen Sie ein Rechteck. Wählen Sie im Eigenschaftenfenster "Füllung" und wählen Sie "Farbverlauf" im Popup-Menü "Farbauswahl". Legen Sie die Farbverläufe auf Schwarz und Weiß fest. Setzen Sie den A-Wert - Deckkraft - auf 60%. und das Weiß Ein Wert bis 0%.
3. Wenn das Rechteck ausgewählt ist, Wählen Sie Objekt> Anordnen> Nach hinten senden. Die Oberflächenelemente sind jetzt über dem Bild sichtbar.

05 von 07

Erstellen Sie einen Image-Avatar in Adobe Experience Design

Ein allgemeines Designmuster ist in Chat-Apps zu finden, bei denen Personen miteinander sprechen und das Bild des Sprechers auf dem Bildschirm angezeigt wird. Bei diesen Avataren handelt es sich normalerweise um maskierte Bilder. Es ist sehr einfach, dies in XD zu erreichen. Hier ist wie:

1. Sie beginnen mit einem Bild und einem Kreis oder einer anderen Form auf der Zeichenfläche. Sie können den Kreis mit einer beliebigen Farbe füllen. Sie müssen nicht eine Strichfarbe hinzufügen. Es verschwindet, wenn Sie den Effekt erzeugen. Warum also? Wenn Sie den Kreis anordnen möchten, kopieren Sie ihn in die Zwischenablage.
2. Bewegen Sie den Kreis auf das Bild und wählen Sie sowohl das Bild als auch den Kreis aus. Mit ausgewählten Bot-Objekten Wählen Sie Objekt> Maske mit Form aus. Wenn Sie die Maus loslassen, wird der Avatar erstellt. Von dort können Sie die Größe ändern.
3. Wenn Sie einen Strich hinzufügen müssen, fügen Sie den in der Zwischenablage befindlichen Kreis in die Zeichenfläche ein. Wenn die Kopie ausgewählt ist, deaktivieren Sie die Füllung in den Eigenschaften und fügen Sie eine Strichfarbe und -breite hinzu. Wählen Sie beide Objekte aus und klicken Sie auf die Schaltflächen Zentriert ausrichten in den Ausrichtungsoptionen oben im Eigenschaftenfenster.
4. Wenn Sie das Foto in der Maske verschieben möchten, Doppelklicken Sie auf die Maske. Dies zeigt das Bild und die Maskenform. Klicken Sie auf das Bild und ziehen Sie es in die gewünschte Position. Wenn Sie die Maustaste loslassen, befindet sich das Bild an der neuen Position in der Maske.

06 von 07

Spielen Sie mit Adobe Experience Design Artboards

Mit den Experience Design-Zeichenflächen können Sie keine Inhalte platzieren. Sie können auch manipuliert werden. Hier sind ein paar Dinge, die Sie tun können:

1. Wenn Sie eine Version der Zeichenfläche im Querformat und im Hochformat benötigen, duplizieren Sie die Zeichenfläche, und klicken Sie bei ausgewähltem Duplikat auf die Schaltfläche Querformat im Eigenschaftenfenster. Die Zeichenfläche ändert sich in Querformat. Wenn das Artboard Inhalt enthält, klicken Sie auf den Namen des Artboards. Die Eigenschaften des Artboards werden im Eigenschaftenbereich angezeigt.
2. Wenn Sie der Zeichenfläche und dem entsprechenden Projekt eine benutzerdefinierte Farbe hinzufügen möchten, wählen Sie die Zeichenfläche aus und klicken Sie im Bereich "Darstellung" des Eigenschaftenbereichs auf den Füllfarbe-Chip. Geben Sie den Hexadezimalwert für die Farbe ein und klicken Sie auf das Pluszeichen. Die Farbe wird als benutzerdefinierte Farbe hinzugefügt. Um diese Farbe an anderer Stelle anzuwenden, wählen Sie ein Objekt aus und klicken Sie auf den Chip Benutzerdefinierte Farbe, um die Farbe anzuwenden.
3. Zeichenflächen können vertikal scrollbar gemacht werden. Wählen Sie dazu die Zeichenfläche aus und ändern Sie ihre Höhe entweder in den Eigenschaftenfenstern oder durch Ziehen des unteren Bereichs der Zeichenfläche nach unten. Wählen Sie im Bildlaufbereich des Eigenschaftenbereichs vertikal aus dem Popup-Menü und geben Sie die Höhe des Ansichtsfensters für den Bildschirm ein. Diese gestrichelte blaue Linie zeigt den unteren Teil des Ansichtsfensters. Um es zu testen, klicken Sie auf die Wiedergabeschaltfläche und blättern Sie weg. Um den Bildlauf auszuschalten, wählen Sie im Bildlauf-Popup-Fenster Keine aus.

07 von 07

Bearbeiten Sie ein Mobile UI Kit in Adobe Experience Design

Experience Design enthält ein UI-Kit für die Entwicklung von iOS-, Android- und Windows-Benutzeroberflächen. Wenn Sie sie zum ersten Mal öffnen, denken Sie vielleicht, dass sie ziemlich gut aufgestellt sind. Nicht ganz - jedes der Bits und Teile in diesen Kits ist vollständig editierbar. Finden wir es heraus, indem wir ein Android-Drahtgitter erstellen.

1. Sie beginnen mit der Auswahl des Zeichenwerkzeugs und der Auswahl Android Mobile im Google-Bereich des Eigenschaftenbereichs.
2. Wählen Sie Datei> Open UI Kit> Google Material. Dies öffnet das Material Design UI Kit. Wählen Sie das Vergrößerungsglas und die Laufschrift t ausDie Screen Guides-Zeichenfläche. Ich fange gerne mit diesem an, weil es mir die Anleitungen für die richtige Platzierung der Oberflächenelemente auf dem Bildschirm gibt. Wenn Sie auf eine der blauen Balken klicken, sehen Sie, dass sie gesperrt ist. Klicken Sie auf das Schloss, um das Schloss zu entsperren. Fassen Sie die Zeichenfläche ein und kopieren Sie die Auswahl in die Zwischenablage. Kehren Sie zu Ihrem Dokument zurück und fügen Sie den Bildschirm in Ihre Zeichenfläche ein.
3. Klicken Sie einmal in der App-Leiste oben auf der Zeichenfläche. Beachten Sie, wie Sie es auswählen können. DasWählen Sie Objekt> Anordnen> Nach vorne bringen. Ihre Auswahl befindet sich jetzt über den Bildschirmanleitungen. Dies sollte Ihnen sagen, dass jedes der Elemente auf dem Bildschirm bearbeitet werden kann.
4. Doppelklicken Sie auf die Statusleiste oben und im Eigenschaftenbereich set die Füllfarbe auf 455A64. Doppelklicken Sie auf die App-Leiste und setzen Sie die Füllung auf 607D8B. Dies sollte Ihnen sagen, dass jedes Element in einem UI-Kit entsprechend den Farbspezifikationen des Projekts bearbeitet werden kann.
5. Was ist mit den Icons? So ändern Sie ihre Farbe Doppelklicken Sie auf das Herz um es auszuwählen. Wenn Sie sich das Eigenschaftenfenster ansehen, können Sie davon ausgehen, dass Sie die Auswahl nicht bearbeiten können. Nicht ganz. Doppelklicken Sie noch einmal auf das Herz. Die Eigenschaften werden geöffnet und Sie ändern die Füllfarbe in FF0000. Wiederholen Sie diesen Doppelklick für die verbleibenden Symbole und den Text.