Adobe Experience Design Tricks, Tipps an Techniken

01 vum 07

Adobe Experience Design Tricks, Tipps an Techniken

Wann Adobe d' Experience Design als Public Preview entwéckelt huet , huet d'Firma zwee zimlech erstaunlech Fues fir gläichzäiteg. Als éischt hunn se e Raum an de neie Prototyping Software Maart gestach. Zwee, si hunn eng Chance fir de Benotzer mat engem "Work-in-progress" ze spillen a léisst de Benotzer dës Fortschrëtter beaflossen. Elo datt d'Applikatioun e puer Méint virgesi war, hunn ech geduecht datt et eng gutt Zäit war fir e puer Experience Design Tricks, Tipps an Techniken ze partizipéieren.

Eischtens, Dir kënnt Iech wëlle wat mat der Prototyping Software gemeet gëtt. Zu de groussen Akteuren an dësem Raum sinn Proto.io, Prinzip, UXPin, Atomic.io , Experience Design an InVision. Am Géigesaz zu Applikatiounen wéi Sketch 3, Photoshop an Illustrator, wou statesch Designer produzéiert ginn, fügen dës grafesch Editateuren Interaktivitéit, Bewegung an aner Funktiounen, déi heiten am mobilen a Webdesign ubelaangt.

Mat den Opstieg vu Mobiltelefon a dem onverhalebare Laser-like Fokus op de Benotzer ass et net méi genuch fir e Konstruzteur fir e puer Skizzen ze zéien, zesummegesat e puer Kompatibilitéit ze maachen an da gëtt de Projet ofgeschaaft oder op en Webserver uploadet. Den UI / UX-Workflow huet grondsätzlech Saachen geännert. All Schrëtt vum Prozess, vum Benotzer ze identifizéieren, Skizzen, Drahderen, Mockupen a Prototypen ginn elo e grousst Benotzerprüfung.

Et ass déi lescht Stuf - Prototyping - wou d'Schinnestonnen entdeckt an fixéiert ginn, ier de Projet an d'final Produktion geet. Dëst ass wou Interaktivitéit, Bewegung, Éischt Transitioune an Placement vun alles op der Schéinheet esou kritesch sinn. Probleemer an Probleemer kënnen net einfach als statesch Bild uginn oder verbal erklärt ginn. Nodeems d'Produkter fir all Mënsch wierklech sinn. Anstatt all dat ze Code ze verschwannen, gëtt de Prototypprozess méi wéi eng Grafike-Software entwéckelt, déi just fir dësen Zweck entwéckelt gëtt. Et ass méi einfach, e Feeler ze fixéieren, e Bild ze ersetzen, e puer Text ze schreiwen, eng Schaltfläch ze verschounen a sou weider mat engem visuellen Editor wéi ëmmer a schrëftlech a verschreiwe Code.

Tatsächlech gouf dës Software zu engem Haaptkomponent am heutegen "Rapid Prototyping" Design a Entwécklung Ëmfeld.

Mat deem gesot, loosst eis e puer Spaass mam Experience Design.

02 vum 07

Maacht e Destinatiouns Pin mat engem einfachen Circle am Adobe Experience Design

Eng net ordentlecht Aspekt vum XD ass d'Benotzung vun Vektoraarbechten. Kuckt net eng Ikon? Kee Problem. Roll Är eegen. Hei ass wéi:

1. Wielt d'Ellipse-Tool an, a mat den Dréckers / Alt-Shift gedréckt, zitt een e Krees.
2. Mat dem gewieltene Circle léisst d' Fillfärder op FF0000 an de Border op "none" an den Eegeschafte setzen.
3. Double-Klick op de Krees fir d'Verankerungspunkte ze weisen. Fuert déi ënnescht Anchor no ënnen.
4. Duebelklickt op den ausgewielten Anchor Point an d'Kürcher ginn duerch Linnen ersat.
5. Huelt een anere klenge Krees mat engem wäisse Fill an kee Stoke. Géi se an d'Positioun an wielt de Pin an de Krees. An der Aschreiwungspanel am Top vun de Properties klickt d'Horizontalcourse-Taste an ass de Pin erstallt.

03 vum 07

Erstelle e Background Background in Adobe Experience Design

Et ass een gemeinsame Text oder aner Inhalter wéi en Hannergrond. De Problem ass dat Bild, méi oft wéi net, iwwerdréit de Inhalt méi héich. Eng Manéier fir dëst Thema ze léisen ass d'Background Bild. Dir kënnt d'Bild op Photoshop oder an aner Bildbearbeitungssoftware verwéckelen, awer dëst ass eppes ineffizient, besonnesch well XD elo dës Aufgab behandelen kann. Hei ass wéi:

1. Erstellt en neien Artboart a fëllt Är Background Bild.
2. Wielt de Rectangle Tool e nt e Rechteck iwwer dem Bild ze zéien. Mat dem Rectangle ausgewielt, setzen de Fill op de Wäiss an de Strock op Keen.
3. Mat dem Rectangle ausgewielt hutt de Background Blur an de Propertiespanel. Déi dräi Placke si Blur Betrag, Helleng an Opazitéit. Hei ass wat se maachen:

• Blur Betrag: Ajustéiert Blosegkeet vum Bild ënnert der Form. Den Maximalwäert ass +50.
• Helleng: Maacht d'Highlights an d'Schatten an d'Bild. De Mindestloun ass -50 an den Maximalwert ass +50.
• Opazitéit: Affektéiert d'Transparenz vun der Form an der Visibilitéit vum Bild ënner der Form. D'Wäerter reichen tëschent 0% an 100%.

Wann Dir wierklech "Dinge änneren" ännert, ännert d'Faarf vun der Form a spillt mat dem Opazitéitswert, fir de "Look" vum Bild ze änneren.

04 vun 07

Erstelle e Scrim am Adobe Experience Design

Ee gemeinsame Entworfsproblem ass Elementer vun Elementer an Interface-Elementer mat enger gemeinsamer Faarf awer si verluer, wann iwwer e Hintergrundfoto oder zolidd Faarf platzéiert gëtt. D'Léisung ass e Scrim. E Scrim ass e bësse opeet gradienten tëscht dem Interface Element an dem Hannergrond. Dëst ass einfach z'erreechen am XD. Hei ass wéi:

1. Erstellt Äre Besetzungsplang an XD, addéiere eng Bild an kopéieren an ewechpassen en Interfaceelementer vun der ugemiichter UI Kit - Datei> Open UI Kit ... - an d'Art Board. An dësem Bild gëtt de Status Bar an der App Bar schwiereg ze gesinn.
2. Wielt de Rectangle Tool an zitt e Rechteck. Fëllt d ​​'Auswielen vu Fill aus, a wielt Gradient aus dem Pop-up am Faarwen. Setzt d'Gradientenfarbwerter schwaarz a wäiss. Setzt den A - Opazitéit- bis 60% an de wäiss en A-Wert op 0%.
3. Mat dem Rectangle ausgewielt, wielt Objet> Arrangéierten> Sous . D'Interface Elementer sinn elo iwwer d'Bild.

05 vum 07

Erstellt en Image Avatar am Adobe Experience Design

E gemeinsame Design-Pattern gëtt an Chat Apps benotzt, wou d'Leit mateneen schwätzen an d'Foto vun der Redaktioun op der Kaart ersat. Dës Avataren sinn normalerweis Biller déi maskéiert ginn sinn. Et ass doud a schlëmm einfach am XD. Hei ass wéi:

1. Dir fänkt mat engem Bild a engem Krees oder aner Form op der Artbord. Dir kënnt de Krees mat enger Faarf fëllen. Wat Dir braucht net ze maachen ass eng Schlagfärder ze addéieren. Et wäert verschwannen wann Dir den Effet schaaft, firwat bass du eppes? Wann Dir de Krees braucht, kopéiert se an de Clipboard.
2. Gudden de Krees op d'Bild an wählt och d'Bild an de Krees. Mat Botobjekte ausgewielt, wielt Objet> Mask mat Form . Wann Dir d'Maus verëffentlecht, de Avatar erstallt. Vun do kënnt Dir d'Gréisst änneren.
3. Wann Dir e Schlag addéiere musst, klickt de Krees an de Klemmbrett op d'Atelier. Mat der Kopie ausgewielt huet d'Füllung an d'Eegeschafte ausgeschalt a fänkt d'Schlag an d'Breet un. Fir ze lineéieren, wielt déi Objeten an a klickt op d'Schaltplaz vun der Aligneginn an den Align-Optiounen am Top vun de Propertiespanel.
4. Wann Dir de Foto un der Maschinn verschwënnt, klickt op d'Maske. Dëst wäert d'Bild an d'Maskeform weisen. Klickt op d'Bild an zitt an d'Positioun. Wann Dir d'Maus freet, wäert d'Bild an hir nei Positioun an der Maske ginn.

06 vum 07

Spill mat Adobe Experience Design Artboards

D'Artxarden un Erfahrung Design si net nëmme fir Iech fir Inhalt ze setzen. Si kënnen och manipuléiert ginn. Hei sinn e puer Saachen déi Dir maache kënnt:

1. Wann Dir Landschaft a Portrait Versiounen vun engem Artbrett brauche musst, dach d'Artboot duplizéieren a mat der Duplikat gewielt Klick op d'Landschaft Knäppchen am Feld "Eigenschaften". D'ArtBood wäert d'Landschaft Orientéierung änneren. Wann de Artboard Inhalt huet, klickt op d'Artbonn vum Numm an d'Artboard-Properties erscheien am Properties Panel.
2. Fir eng Kënnegkeete fir d'Artboard ze addéieren an de Projet fir dës Matière, wielt d'ArtBoart a klickt op de Fill-Färeren-Chip am Ausschnëtt vun der Eegeschafte Panel. Gitt den Hexadezimaler Wäert op d'Faarf a klickt d'Zeechen. D'Faarf gëtt als Custom Color addéieren. Fir dës Faarf uwenden, wielt e Objet a klickt op de Benotzerdefinéiert Faarfpuffer fir d'Faarf ugewannt ze ginn.
3. Artboards kënne vertikal scrollbar gemaach ginn. Fir dat ze maachen, wielt d 'Artboards an ännert hir Héicht entweder op den Eegeschafte Panels oder duerch d'Zeechnung vum Bottom vun der ArtBord ënnen. Am Scrollbar Bereich vun der Eegeschafte Panel wielt Vertikal aus dem Pop-Down-Menü an hëllt d'Schauspillerhéichschicht fir den Ecran. Dëse bloën Zeil steet ze verdeelen datt Dir de Bockel vum Betrag ass. Fir et ze testen, klickt op de Play Button a rullt weg. Fir d'Ausrollen ze schloen, wielt None op der Säit vum Scrolling Pop.

07 vum 07

Edit e Mobiltelefon UI Kit an Adobe Experience Design

Experience Design enthält en UI Kit fir d'Entwécklung vu iOS, Android an Windows UI. Wann Dir d'éischt opmaache wëllt, da kënnt Dir mengen datt se ganz gutt op Plaz setzen. Net zimlech - jiddereen vun de Bits an Deeler an de Kits ass komplett editabel. Loosst eis erausfannen, andeems en Android Drahtframe gebaut gëtt.

1. Dir fänkt un mat dem Artboard-Tool aus a gewielt Android Mobile an der Google Sektioun vum Properties Panel .
2. Dréckt Datei> Open UI Kit> Google Material . Dëst mécht den Material Design UI Kit. Wielt d'Vergréisserung an d'Markewaasser t Écran Guide Guides artboard . Ech wëll gär mat dëser begéinen, well et mir d'Guiden fir e richteg on-screen Plazéierung vun den Interface Elementer gëtt. Wann Dir op ee vun de Blue Bars klickt, gesitt Dir et ass gespaart. Klickt op d'Schluss mat all eenzel vun hinnen, fir se ze blockéieren . Gitt d'Artbréck a kopéiert d'Auswiel an de Clipboard. Zréck op Ärem Dokument a pake d'Bildschierm an Ären Art Board.
3. Klickt eemol op der App Bar, datt d'Spëtzt vum Artbrett ass. Remark wéi Dir et kanns wielen. Wielt Objet> Arrangéierten> Bring to Front. Är Auswiel ass elo méi wéi d'Skirider Guides. Dëst soll dir soen datt all Elementer am Écran fäerdeg gitt verännert.
4. Duebelklickt d'Statusbar am Top an am Properties Panel s et de Fill-Faarf bis 455A64 . Duebelklick op d'App Bar a setze sech op 607D8B. Dëst sollt Iech soen, datt all Element an engem UI Kit fir d'Faarwen vum Projet erfaasst kënne ginn.
5. Wat iwwer d'Ikonen? Hei ass wéi se hir Faarf änneren. Du dréckt den Häerz un. Wann Dir op de Properties Panel kuckt, kënnt Dir ugeholl datt Dir d'Auswiel net ännere kënnt. Net zimlech. Du dréckt den Häerz eng méi Zäit . D'Eegeschafte maachen an Dir ännert d'Follehlung op FF0000. Wiederholen dësen zweegleedegen Zwee-klick Trick fir déi rescht Symbolen an den Text.