Adobe Experience Design Tricks, tips en techniken

01 of 07

Adobe Experience Design Tricks, tips en techniken

As Adobe yntrodusearje as Eksperiminteel Design yn in Public Preview , hat it bedriuw op 't selde tiid twa frijwat prachtige faken makke. Earst stie se in romte yn 'e opkommende prototyping softwaremerk. Twadder meitsje se in kâns foar brûkers om te spyljen mei in "work-in-progress" en lit de brûkers ynfloed op dy foarútgong. No dat de applikaasje in pear moanne beskikber is, tocht ik, dat it in goeie tiid wêze soe om guon fan 'e treinûntwerpstikken, tips en techniken te dielen.

Mar earst kinne jo freegje wat it is bedoeld troch Prototyping Software. Under de grutte spilers yn dizze romte binne Proto.io, prinsipe, UXPin, Atomic.io , Experience Design en InVision. Oars as tapassingen lykas Sketch 3, Photoshop en Illustrator wêr't statyske ûntwerpen produkt binne, sjogge dizze grafyske redaksjes ynteraktiviteit, moasje en oare funksjes yn it hjoeddeistige mobile en web designromte.

Mei de oplieding fan mobyl en de ûnbedoelde, laser-like fokus op 'e brûker, is it net mear genôch foar in ûntwerper om in pear sketsen te skodzjen, in pear kompen te ferpleatsen en it projekt loslitten of op in webserver te uploaden. De workflow UI / UX hat grûnwize dingen feroare. Alle stappen fan it proses, fan it identifisearjen fan de brûker, sketsen, draadframes, mockups en prototyping binne no ûnderwerp fan wiidweidige brûkersprotest.

It is it lêste poadium - prototyping - wêr't de pinepunten ûntdutsen en fêst binne foardat it projekt nei lêste produksje giet. Dit is wêr't ynteraktiviteit, moasje, skerm oergongs en pleatsing fan alles op it skerm sa krityske binne. Problemen en problemen kinne net gewoan as statyske ôfbylding werjûn wurde of miskien ferklearre wurde. No binne dizze produkten foar echte minsken. Ynstee fan allegear fan dat te kopiearjen, wurdt it prototypingproses hieltyd mear troch bedriuwen makke fan grafyske software dy't krekt foar dat doel ûntwikkele binne. It is makliker om in flater te fêstlizzen, in ôfbylding te ferfarskjen, in tekst te skriuwen, in knop te ferpleatsen en sa op it brûken fan in fisuele editor as stasjon werjaan en debuggen fan koade.

In feite is dizze software in wichtige komponint wurden yn 'e hjoeddeiske "Rapid Prototyping "ûntwerp ûntwerp en ûntwikkeling.

Mei dat sei, litte wy wat leukje mei Experience Design.

02 of 07

In Destination Pin mei in ienfâldige rigel yn Adobe Experience Design oanmeitsje

Ien krekte aspekt fan XD is har gebrûk fan fektor tekenwerkingen. Kin gjin byldkaike fine? Gjin probleem. Roll jo eigen. Hjir is hoe:

1. Selektearje it Ellipse-ark en sil mei de opsje-Alt-Shift-kaaien in sirkel tekenje.
2. Mei de sirkel selekteare, set de Fill kleur nei FF0000 en de Border om "none" yn 'e eigenskippen.
3. Dûbelklik op 'e sirkel om de ankerpunten te sjen. Sleep de ûnderste anker nei ûnderen.
4. Dûbelklik op 'e selektearre Anchorspunt en de kurres wurde ferfongen troch rigels.
5. Draw in oare lytse sirkels mei in wyt folje en gjin stok. Ferpleat it yn posysje en selektearje de pin en de sirkel. Yn it paniel Alignje boppe-oan de eigenskippen klik de knop horizontaal sintrum en de Pin is makke.

03 of 07

Meitsje in eftergrûnblau yn Adobe Experience Design

It is in mienskiplik om tekst of oare ynhâld te hawwen oer in eftergrûnôfbylding. It probleem hjir is it byld, faak as net, oerfalt de ynhâld dêrboppe. Ien manier om dit probleem te lêzen is om it eftergrûnôfbylding te ferwiderjen. Jo kinne it ôfbylding yn Photoshop of oare ôfbylding fan software ôfbrekke, mar dit is wat net effisjint, benammen om't XD dizze opdracht no handich is foar jo. Hjir is hoe:

1. Meitsje in nij artboard oan en add your background image.
2. Selektearje it rjochthoek- ark en nt in rjochthoeke oer it byld. Mei it rjochtsfjild selekteare, set de Fill nei Wite en de stok nei Gjin.
3. Mei it rjochthoek selektearje, selektearje Background Blur yn it eigenskippenpaniel. De trije sliders binne Blur Amount, Helle en Deastens. Hjir is wat se dogge:

• Blurbedrach : Feroare blurens fan it byld ûnder de foarm. De maksimale wearde is +50.
• Helderheid: Stelt de heuligens en de skaden yn 'e byld. De minimumwearde is -50 en de maksimum wearde is +50.
• Oppasiteit : beynfloedet de transparânsje fan 'e foarm en de sichtberens fan it byld ûnder de foarm. De wearden rinne fan 0% oant 100%.

As jo ​​"dingen omheech" wolle, feroarje de kleur fan 'e foarm en spielje mei de Opaciteit wearde om it "look" fan it byld te feroarjen.

04 of 07

Meitsje in Scrim yn Adobe Experience Design

In mienskiplik ûntwerpprobleem is ynteressante eleminten eleminten in mienskiplike kleur wêze, mar binne ferlern as se oer in eftergrûnôfbylding of fêste kleur pleatst wurde. De oplossing is in skrim. In skrim is in gewoan opakele gradens tusken it interface-elemint en de eftergrûn pleatst. Dit is maklik te meitsjen yn XD. Hjir is hoe:

1. Meitsje jo artboard yn XD, add it in ôfbylding en kopiearje en paste in interface-eleminten út 'e passende UI Kit - File> Iepenje UI Kit ... - yn it artboard. Yn it boppesteande plaatsje makket it foto de Stêfbar en de App Bar maklik te sjen.
2. Selektearje it rjochthawweryn en selektearje in rjochthoeke. Yn it Eigenskippenpaniel selektearje Fill en selektearje út it pop-up yn 'e Kleurmerk. Set de gradientkleuren oan Black and White. Set de wearde A - Opacity- oant 60% en de Wite A wearde oant 0%.
3. Mei it rjochthoek selektearje, selektearje Object> Arrangearje> Ferstjoere nei ferstjoeren . De ynterfaceeleminten binne no sichtber oer it byld.

05 of 07

Meitsje in profylebestân yn Adobe Experience Design

In mienskiplik ûntwerppatroan is fûn yn Chat apps dêr't minsken mei elkoar prate en de ôfbylding fan it sprekker ferskynt op it skerm. Dizze avatars binne meastentiids ôfbyldings dy't maskearre binne. It is dead ienfâldich dat yn XD. Hjir is hoe:

1. Jo begjinne mei in byld en in sirkel of oare foarm op it artboard. Jo kinne de sirkel mei elke kleur folje. Wat jo net nedich binne, is ta in stroke kleur te foegjen. It sil ferdwine as jo it effekt kreëarje, dus wêrom stjerre. As jo ​​de sirkel nedich hawwe, kopiearje it nei it klamboerd.
2. Ferpleats de sirkel nei it byld en selektearje it byld as de sirkel. Mei botopsjes selekteare, selektearje Object> Maske mei foarm . As jo ​​de mûs frijlitte, wurdt de Avatar kreëarre. Fan dêr kinne jo it feroarje.
3. As jo ​​in slach oanmeitsje moatte jo de rûnte sitte op jo klamboerd op 'e artboard. Mei de selektearre kopie klikke jo de Eigenskippen ynfolje en in kleur fariearje en breed taheakje. Om se op te rigeljen, selektearje beide objekten en klik de knop Sintrum knop yn 'e Align-opsjes oan' e boppekant fan it eigenskippenpaniel.
4. As jo ​​it foto omheech ferpleatse wolle yn it masker, dûbelklik op 'e masker. Dit sil it byld en de maskerfoarm sjen litte. Klik op it ôfbylding en ferpleatse it yn posysje. As jo ​​de mûs frijlitte, sil it byld yn har nije posysje binnen it masker wêze.

06 of 07

Spylje mei Adobe Experience ûntwerpen artboards

De artboards fan 'e ûnderfining binne ûntwerpen net krekt foar jo om ynhâld te pleatsen. Se kinne ek manipulearre wurde. Hjir binne in pear dingen dy't jo dwaan kinne:

1. As jo ​​Landscape- en Portrait-ferzjes fan in artboard nedich hawwe, drukke jo it artboard en, mei de dûbele selektearre klikke op 'e ljepperknop yn' e Eigenskippenpaniel. De artboard sil wizigje nei Lânskipsorientaasje. As it artboard dêrfan ynhâldt, klik dan op de namme fan 'e artboard en de artboard-eigenskippen sille ferskine yn' e Properties Panel.
2. Om in oanpast kleur oan it Artboard te foegjen, en it projekt foar dy saak, selektearje it artboard en klik op 'e kleurplicht yn' e Beskriuwing fan it Properties Panel. Fier de hexadezimalwearde foar de kleur yn en klik de + teken. De kleur sil tafoege wurde as Custom Color. Om dy kleur earne oars oan te freegjen, selektearje in objekt en klik de Custom Color-chip om de kleur oan te passen.
3. Artboards kinne makke wurde vertikal scrollbar. Om dit te dwaan, selektearje it artboard en feroarje de hichte op 'e eigenskippenpanielen of troch de ûnderkant fan it artboard nei ûnderen te ferpleatsen. Yn it skermblêdgebiet fan it eigenskippenpaniel, selektearje vertikaasje fan it pop-upmenu en kinne jo de werjeftehichte ynstelle foar it skerm. Dy blauwe rigel liedt jo de ûnderkant fan 'e werjefte. Om it te testen, klik de Play-knop en scroll fuort. Om it blêdzjen út te skeakeljen, selektearje Nim yn it skermjen fan pop-up.

07 of 07

Meitsje in mobyl UI Kit yn Adobe Experience Design

Experience Design befettet in UI-komponint foar it ûntwikkeljen fan iOS, Android en Windows UI's. As jo ​​se earst iepenje, kinne jo tinke dat se goed sitte op pleats. Net allinich - elk fan 'e bitsjes en stikken yn dizze kits is folslein bewurke. Lit ús útfine troch it bouwen fan in Android draadframe.

1. Jo begjinne troch te selektearjen fan it Artboard-ark en selektearje Android Mobile yn it Google-paragraaf fan it Properties Panel .
2. Selektearje Triem> Iepenje UI-Kit> Google Material . Dit iepene it Material Design UI Kit. Selektearje it fergruttend Glas en markearje t hy Screen Guides artboard . Ik wol graach begjinne mei dizze iene, om't it my de riden jout foar in goede on-screen-pleatsing fan de interface-eleminten. As jo ​​op ien fan 'e blauwe bars klikke sille jo sjogge it is beskoattele. Klik op 'e slúte by elk fan har oan om it te iepenjen . Markearje it artboard en kopiearje de seleksje nei it klamboerd. Gean werom nei jo dokumint en paste it skerm yn jo artboard.
3. Klik ienris op 'e Appbalke dat it top fan' e artboard is. Notysje hoe't jo it selektearje kinne. Selektearje objekt> Arrange> Foargean. Jo seleksje is no boppe de Screen Guides. Dit moat jo fertelle dat elk fan 'e eleminten op it skerm kin wurde feroare wurde.
4. Dûbelklik de statusbalke oan 'e boppekant en yn' e Eigenskippenpaniel s en de Fill kleur oant 455A64 . Dûbelklikke op 'e App Bar en sette har fol oan 607D8B. Dit moat jo fertelle dat elke elemint yn in UI-kodearje kin wurde bewurke om de kleuren spesifikaasjes fan 'e projekten te treffen.
5. Wat oer de byldkaikes? Hjir is hoe't jo har kleur feroarje. Dûbelklik op it hert om dizze te selektearjen. As jo ​​besjen op it Eigenskippenpaniel, dan kinne jo miskien dat jo de seleksje net bewurkje kinne. Net krekt. Dûbelklik noch ien kear op it hert . De eigenskippen iepenje en jo de fillfolle feroarje nei FF0000. Folje dizze dûbel-dûbel-klikke trúk foar de oerbleaune byldkaikes en de tekst.