Adobe Experience Design triki, nasveti in tehnike

01 od 07

Adobe Experience Design triki, nasveti in tehnike

Ko je Adobe predstavil Experience Design kot javni predogled , je družba dosegla dve precej neverjetni podvigi hkrati. Prvič, so iztisnili prostor na nastajajočem trgu izdelave prototipov. Drugič, ustvarili so priložnost za uporabnike, da igrajo z »tekočim delovnim časom« in dovoljujejo uporabnikom, da vplivajo na ta napredek. Zdaj, ko je bila aplikacija na voljo nekaj mesecev, sem mislil, da bi bilo lepo deliti nekaj trikov, nasvetov in tehnik iz izkušenj.

Ampak najprej se morda sprašujete, kaj pomeni Prototyping Software. Med glavnimi igralci v tem prostoru so Proto.io, Principle, UXPin, Atomic.io , Experience Design in InVision. Za razliko od aplikacij, kot so Sketch 3, Photoshop in Illustrator, kjer nastajajo statični modeli, ti grafični uredniki uvajajo interaktivnost, gibanje in druge značilnosti, ki so pogosti v današnjem prostoru za mobilne naprave in spletno oblikovanje.

Z vzponom mobilnega in neizogibnega laserskega osredotočenja na uporabnika ni več dovolj, da oblikovalec stisne nekaj skic, zbere nekaj komponent in nato sprosti projekt ali prenese na spletni strežnik. UI / UX potek dela je bistveno spremenil stvari. Na vsakem koraku procesa, od identifikacije uporabnika, skic, žičnih okvirjev, mockupov in prototipov so sedaj predmet obsežnega testiranja uporabnikov.

To je zadnja faza - prototipiranje - kjer so točke odkrivanja in odpravljanja bolečine preden se projekt premakne v končno proizvodnjo. Tukaj sta tako kritična interaktivnost, gibanje, preklopi zaslona in postavitev vsega na zaslon. Težave in težave se ne morejo preprosto prikazati kot statična slika ali verbalno razložiti. Konec koncev, ti izdelki so za resnične ljudi. Namesto tega, da vse to prenesemo v kodo, proces izdelave prototipov vse bolj izvaja grafična programska oprema, zasnovana zgolj za ta namen. Lažje je popraviti napako, zamenjati sliko, prepisati nekaj besedila, premakniti gumb in tako naprej z uporabo vizualnega urejevalnika kot nenehno prepisovanje in odpravljanje napak.

Pravzaprav je ta program postal ključna sestavina današnjega "Rapid Prototyping" zasnove in razvoja okolja.

S tem smo povedali, da se zabavamo z Experience Design.

02 od 07

Ustvarite ciljni pin s preprostim krogom v programu Adobe Experience Design

Eden čeden vidik XD je njegova uporaba vektorskih orodij za risanje. Ni mogoče najti ikone? Ni problema. Zložite svoje. Evo kako:

1. Izberite orodje Ellipse in s pritiskom tipk Option / Alt-Shift narišite krog.
2. S izbranim krogom nastavite barvo polnila na FF0000 in Border na lastnosti »nič«.
3. Dvokliknite krog, da prikažete točke sidranja. Povlecite spodnjo sidro navzdol.
4. Dvokliknite izbrano točko sidranja in krivulje se zamenjajo s črtami.
5. Narišite še en majhen krog z belim polnjenjem in brez dima. Premaknite ga v položaj in izberite pin in krog. Na plošči Align na vrhu Lastnosti kliknite gumb Vodoravni center in Pin je ustvarjen.

03 od 07

Ustvarite zamegljenost v ozadju v programu Adobe Experience Design

Običajno je imeti besedilo ali drugo vsebino prek ozadja. Problem tukaj je slika, bolj pogosto kot ne, overpowers vsebino nad njo. Eden od načinov reševanja tega problema je zameglitev ozadja. Sliko lahko zameglite v programski opremi Photoshop ali drugi programski opremi za urejanje slik, vendar je to nekoliko neučinkovito, še posebej, ker lahko XD to nalogo ravna z vami. Evo kako:

1. Ustvarite novo tablo in dodajte sliko v ozadju.
2. Izberite orodje Rectangle in nd pripravite pravokotnik nad sliko. Če je pravokotnik izbran, nastavite napolni na belo in potezo na nič.
3. Če je pravokotnik izbran, v plošči z lastnostmi izberite Zameglitev ozadja . Tri drsnika so Blur Količina, Brightness in Opacity. Evo, kar počnejo:

• Zameglitev: prilagodi zamegljenost slike pod obliko. Najvišja vrednost je +50.
• Svetlost: prilagodi osvetlitev in sence na sliki. Najnižja vrednost je -50 in najvišja vrednost je +50.
• Motnost: vpliva na prosojnost oblike in vidnost slike pod obliko. Vrednosti se gibljejo od 0% do 100%.

Če res želite "preklopiti stvari", spremenite barvo oblike in igrajte z vrednostjo Opacity, da spremenite »videz« slike.

04 od 07

Ustvarite Skrimin v Adobe Experience Design

Skupni problem oblikovanja elementov vmesnika morajo biti elementi skupne barve, vendar so izgubljeni, če jih postavite na ozadje ali na trdno barvo. Rešitev je vihra. Skok je nekoliko neprozoren gradient, ki je nameščen med elementom vmesnika in ozadjem. To je enostavno doseči v XD. Evo kako:

1. Ustvarite svojo artboard v XD, dodajte sliko in kopirajte in prilepite elemente vmesnika iz ustreznega UI Kit - File> Open UI Kit ... - v artboard. Na zgornji sliki je slika težko videti v vrstici stanja in v vrstici z aplikacijami.
2. Izberite orodje Pravokotnik in izvlecite pravokotnik. V plošči Properties (Lastnosti) izberite Fill (Fill) in iz padajočega izbirnika (Color Picker) izberite Gradient. Barve gradienta nastavite na črno-belo. Nastavite vrednost A - Opacity - na 60% in vrednost White A na 0%.
3. Če je pravokotnik izbran, izberite Object> Arrange> Send Backward . Elementi vmesnika so zdaj vidni nad sliko.

05 od 07

Ustvarite podobo Avatar v programu Adobe Experience Design

Skupni načrt vzorca najdete v aplikacijah za klepet, kjer se ljudje med seboj pogovarjajo in se na zaslonu prikaže slika zvočnika. Ti avatarji so ponavadi slike, ki so bile zakrite. Mrtvo preprosto je to doseči v XD. Evo kako:

1. Na grafoskopu začnete s podobo in krogom ali drugo obliko. Krog lahko napolnio s katero koli barvo. Kaj vam ni treba storiti, je dodati barvo kapi. Ko ustvarite učinek, bo izginil, zakaj se moti. Če morate kroži krog, ga kopirajte v odložišče.
2. Premaknite krog na sliko in izberite sliko in krog. Z izbranimi botskimi objekti izberite Object> Mask with Shape . Ko spustite miško, je avatar ustvarjen. Od tam lahko spremenite velikost.
3. Če želite dodati kap, prilepite krog, ki sedi na odložišču na artboard. Z izbrano kopijo izklopite polnjenje lastnosti in dodajte barvo in širino kapi. Če jih želite poravnati, izberite predmete in kliknite gumba »Center Align« v možnostih poravnave na vrhu plošče z lastnostmi.
4. Če želite premakniti fotografijo okoli maske, dvokliknite masko. To bo prikazalo sliko in obliko maske. Kliknite na sliko in jo povlecite v položaj. Ko spustite miško, bo slika v novem položaju v maski.

06 od 07

Igrajte z Adobe Experience Design Artboards

Grafične table izkušenj niso le tam, kjer si lahko postavite vsebino. Tudi oni se lahko manipulirajo. Tukaj je nekaj stvari, ki jih lahko naredite:

1. Če potrebujete razgledne in pokončne različice umetne table, podvojite grafično ploščo in z izbrano dvojico kliknite na pokrajinski gumb na plošči Properties (Lastnosti). Artboard se bo spremenil v orientacijo Landscape. Če ima Artboard vsebino na njej, kliknite ime Artboarda in lastnosti Artboard bodo prikazane v panelu Lastnosti.
2. Če želite dodati barvo po meri Artboardu in projekt v zvezi s tem, izberite Artboard in kliknite Chill barvni čip v razdelku Videz na plošči Properties. Vnesite šestnajstiško vrednost za barvo in kliknite znak +. Barva bo dodana kot barva po meri. Če želite barvo uporabiti drugje, izberite predmet in kliknite barvo Custom Color, da uporabite barvo.
3. Artboards se lahko navpično pomikate. Če želite to narediti, izberite artboard in spremenite njegovo višino bodisi na ploščah Properties (Lastnosti) ali tako, da povlečete spodnji del umetnine navzdol. V področju Scrollable na plošči z lastnostmi izberite navzdol v spustnem meniju in vnesite višino pogleda na zaslon. Ta črtkana modra črta vam kaže na dnu pogleda. Če ga želite preizkusiti, kliknite gumb Predvajaj in se pomaknite stran. Če želite izklopiti drsenje, v spustnem seznamu navzdol izberite Nič.

07 od 07

Uredite komplet za mobilne naprave v programu Adobe Experience Design

Izkušnje Design vsebuje UI Kit za razvijanje iOS, Android in Windows UI's. Ko jih prvič odprete, morda mislite, da so dobro nameščeni. Ni čisto - vsak od komponent v teh kompletih je v celoti mogoče urejati. Ugotovimo, da gradimo žično ogrodje za Android.

1. Začnete z izbiro orodja Artboard in izbiro Android Mobile v Googlovem delu v plošči Properties (Lastnosti) .
2. Izberite Datoteka> Odpri UI Kit> Google Material . S tem se odpre komplet za oblikovanje gradiva. Izberite Povečevalno steklo in grafični podstavek . Rad bi začel s tem, ker mi daje vodnike za pravilno namestitev elementov vmesnika na zaslonu. Če kliknete eno od modrih vrstic, boste videli, da je zaklenjen. Kliknite zaklepanje, pritrjeno na vsako od njih, da ga odklenete . Označite tablo in kopirajte izbor v odložišče. Vrnite se na dokument in prilepite zaslon v svojo tablo.
3. V vrstici z aplikacijami kliknite enkrat na vrhu table. Obvestilo, kako ga lahko izberete. Izberite Object> Arrange> Bring to Front. Vaš izbor je zdaj nad vodniki zaslona. To bi vam moralo povedati, da lahko vsak od elementov na zaslonu uredite.
4. Dvakrat kliknite vrstico stanja na vrhu in v panelu Properties Panel in Colour Fill do 455A64 . Dvokliknite aplikacijsko vrstico in nastavite njegovo polnjenje na 607D8B. To bi vam moralo povedati, da lahko vsak element v UI kompletu uredite tako, da ustrezajo specifikacijam barve projekta.
5. Kaj pa ikone? Kako spremeniti njihovo barvo. Dvakrat kliknite srce, da ga izberete. Če pogledate panel za lastnosti, lahko predpostavljate, da izbire ne morete urediti. Ne čisto. Dvakrat kliknite srce še enkrat . Lastnosti so odprte in spremenite barvo polnila na FF0000. Za preostale ikone in besedilo ponovite ta dvojni klik dvakrat kliknite.