Adobe Experience Design trikovi, savjeti i tehnike

01 od 07

Adobe Experience Design trikovi, savjeti i tehnike

Kada je Adobe uveo Experience Design kao javni pregled , tvrtka je istodobno postigla dva prilično nevjerojatna pothvata. Prvo, otkrili su prostor na novom tržištu prototipova. Drugo, stvorili su priliku za korisnike da se igraju s "radom u tijeku" i dopuštaju korisnicima da utječu na taj napredak. Sada kada je aplikacija dostupna nekoliko mjeseci, pomislio sam da bi bilo dobro da podijelimo neke trikove, savjete i tehnike Experience Design.

Ali prvo se možete pitati što se podrazumijeva pomoću softvera za izradu prototipova. Među glavnim igračima ovog prostora su Proto.io, Princip, UXPin, Atomic.io , Experience Design i InVision. Za razliku od aplikacija kao što su Sketch 3, Photoshop i Illustrator, gdje se proizvode statičke dizajne, ovi grafički urednici uvode interaktivnost, pokret i druge značajke zajedničke u današnjem mobilnom i web dizajn prostoru.

S porastom mobilnosti i neizbježnim, laserskim fokusom na korisnika, više nije dostatno da bi dizajner mogao izvući nekoliko skica, povući nekoliko komada, a zatim otpustiti projekt ili ga prenijeti na web poslužitelj. UI / UX radni tok temeljno je promijenio stvari. Svaki korak postupka, od prepoznavanja korisnika, skica, žičanih okvira, modela i prototipa, sada podliježe opsežnom ispitivanju korisnika.

To je posljednja faza - prototipizacija - gdje su točke boli otkrivene i učvršćene prije nego što se projekt prebaci u konačnu proizvodnju. Ovo je mjesto gdje su interaktivnost, kretanje, prelazenje zaslona i postavljanje svega na zaslonu toliko važni. Pitanja i problemi ne mogu se jednostavno prikazati kao statična slika ili verbalno objasniti. Uostalom, ti proizvodi su za prave ljude. Umjesto da sve to premjeste u kod, prototip proces sve se poduzimaju grafički softver dizajniran samo za tu svrhu. Lakše je popraviti pogrešku, zamijeniti sliku, prepisati tekst, premjestiti gumb i tako dalje pomoću vizualnog urednika nego stalno prepisivanje i kod za ispravljanje pogrešaka.

Zapravo, ovaj softver je postao ključna komponenta u današnjem "Rapid Prototyping" dizajnu i razvoju.

Uz to, neka se zabavimo s dizajnom iskustva.

02 od 07

Stvorite odredišni pin s jednostavnim krugom u dizajnu Adobe Experience

Jedan uredan aspekt XD je njegova upotreba alata za crtanje vektora. Ne možete pronaći ikonu? Nema problema. Roll svoje. Evo kako:

1. Odaberite Ellipse Tool i, pritiskom tipki Option / Alt-Shift, nacrtajte krug.
2. S odabranim krugom, postavite Boja ispune na FF0000 i granicu na "none" u svojstvima.
3. Dvaput kliknite krug da biste prikazali sidrenje. Povucite donji sidro prema dolje.
4. Dvokliknite odabranu točku sidrenja i krivulje zamijenite linijama.
5. Nacrtajte još jedan mali krug s bijelim ispunom i bez stoke. Premjestite ga u položaj i odaberite pin i krug. Na ploči Align (Poravnanje) pri vrhu Svojstva kliknite gumb Horizontalni centar i stvorite Pin.

03 od 07

Stvorite pozadinsku zamućenost u dizajnu Adobe Experience Design

Uobičajeno je imati tekst ili drugi sadržaj preko pozadinske slike. Problem ovdje je slika, češće nego ne, nadjačava sadržaj iznad nje. Jedan od načina rješavanja ovog problema je zamagljivanje pozadinske slike. Možete zamagliti sliku u Photoshopu ili nekom drugom softveru za uređivanje slika, ali to je pomalo neučinkovito, pogotovo jer XD sada može obraditi taj zadatak. Evo kako:

1. Izradite novu ploču i dodajte svoju pozadinsku sliku.
2. Izaberite pravokutnik i nacrtajte pravokutnik preko slike. Kada je odabran pravokutnik, podesite Fill to White i Stroke na None.
3. Kada je odabran pravokutnik, odaberite Pozadina zamućenja na ploči svojstava. Tri klizača su Blur količina, svjetlina i neprozirnost. Evo što oni rade:

• Blur Amount: Podešava mutnoću slike ispod oblika. Maksimalna vrijednost je +50.
• Svjetlina: podešava naglašava i sjene na slici. Minimalna vrijednost je -50, a Maksimalna vrijednost je +50.
• Neprozirnost: utječe na transparentnost oblika i vidljivost slike ispod oblika. Vrijednosti se kreću od 0% do 100%.

Ako zaista želite "prebacivati ​​stvari", promijenite boju oblika i igrajte s vrijednostom neprozirnosti da biste promijenili "izgled" slike.

04 od 07

Stvorite Scrim u dizajnu Adobe Experience

Uobičajeni problem dizajna elemenata sučelja elemenata moraju biti uobičajena boja, ali se gube kada se stave preko pozadinske slike ili čvrste boje. Rješenje je pukotina. Šarka je pomalo neprozirni gradijent postavljen između elementa sučelja i pozadine. To je jednostavno postići u XD. Evo kako:

1. Izradite ploču za izradu pločice u XD-u, dodajte sliku i kopirajte i zalijepite element sučelja iz odgovarajućeg UI Kit - File> Open UI Kit ... - u ploču s instrumentima. Na gornjoj slici fotografija čini statusnu traku i traku aplikacije teško vidjeti.
2. Odaberite pravokutnik i izvucite pravokutnik. Na ploči Svojstva odaberite Ispuni i odaberite Gradijent s padajućeg izbornika u izborniku Odabir boja. Postavite boje gradijenta na Crno i bijelo. Postavite vrijednost A - Opacity - na 60% i bijelu vrijednost do 0%.
3. Kada je odabran pravokutnik, odaberite Objekt> Rasporedi> Pošalji natrag . Elementi sučelja sada su vidljivi preko slike.

05 od 07

Stvorite avatar slike u dizajnu Adobe Experience Design

Zajednički dizajn uzorka nalazi se u Chat aplikacijama gdje se ljudi međusobno razgovaraju i slika zvučnika pojavljuje se na zaslonu. Ovi avatari su obično slike koje su maskirane. To je mrtvo jednostavno postići ovo u XD. Evo kako:

1. Počinjete s likom i krugom ili drugim oblikom na ploči s instrumentima. Krug možete ispuniti bilo kojom bojom. Ono što ne trebate učiniti je dodati boju udarca. Ona će nestati kad stvorite efekt, pa zašto gnjaviti. Ako trebate pričvrstiti krug, kopirajte ga u međuspremnik.
2. Pomaknite krug na sliku i odaberite sliku i krug. S odabranim objektima odaberite Objekt> Maska s oblikom . Kada pustite miš, stvara se Avatar. Od tamo možete promijeniti veličinu.
3. Ako trebate dodati udarac, zalijepite krug koji sjedi na međuspremnik na ploču s instrumentima. Uz odabranu kopiju isključite ispunite svojstva i dodajte boju i širinu udarca. Da biste ih poravnali, odaberite oba objekta i kliknite gumbe središnje poravnanje u opcijama Align u vrhu ploče svojstava.
4. Ako želite premjestiti fotografiju u masku, dvokliknite masku. To će pokazati sliku i oblik maske. Kliknite sliku i povucite je na mjesto. Kada otpustite miša, slika će biti u novom položaju unutar maske.

06 od 07

Igrajte s Adobe Experience Design Artboards

Radne ploče Experience Design nisu samo za vas da stavite sadržaj. I oni se mogu manipulirati. Evo nekoliko stvari koje možete učiniti:

1. Ako vam je potrebna verzija krajobraza i portreta ploče s instrumentima, dvostruki ploču s instrumentima i, uz odabrani duplikat, kliknite gumb krajolik na ploči Svojstva. Artboard će se promijeniti u orijentaciju Pejzaž. Ako Artboard ima sadržaj na njemu, kliknite naziv Uređu, a svojstva Uređene ploče pojavit će se na ploči Svojstva.
2. Da biste dodali prilagođenu boju Artboardu i projektu, odaberite Artboard i kliknite Zalijepi boju za ispunjavanje u odjeljku Izgled na ploči Svojstva. Unesite heksadecimalnu vrijednost za boju i kliknite znak +. Boja će se dodati kao prilagođena boja. Da biste tu boju primijenili na nekom drugom mjestu, odaberite objekt i kliknite žeton Custom Color kako biste primijenili boju.
3. Umjetničke ploče mogu biti vertikalno skloni. Da biste to učinili, odaberite ploču za ploču i promijenite njegovu visinu bilo na ploči Svojstva ili povlačenjem dna ploče s instrumentima prema dolje. U području Pomicanje ploče svojstava odaberite vertikalni izbornik s padajućim izbornikom i unesite visinu prikaza za zaslon. Ta crtkana plava linija pokazuje dno prozora. Da biste je testirali, kliknite gumb Reproduciraj i pomaknite se dalje. Da biste isključili pomicanje, odaberite Ništa u padajućem izborniku Pomicanje.

07 od 07

Uređivanje kompleta korisničkog sučelja za mobilne uređaje u Adobe Experience Design

Dizajn Iskustva sadrži UI Kit za razvoj iOS, Android i Windows UI. Kada ih prvi put otvorite, možda mislite da su prilično dobro postavljeni. Ne sasvim-svaki od bitova i komada u tim setovima je u potpunosti uređivati. Pronađimo izgradnju žice za Android.

1. Započnete odabirom alata Artboard i odabirom Android Mobile u Google odjeljku ploče Svojstva .
2. Odaberite Datoteka> Otvori skup UI-a> Google materijal . Ovo otvara materijal za dizajn materijala za dizajn materijala. Odaberite Povećalo i stavite ploču na zaslonu vodiča zaslona . Volim započeti s ovim jer mi daje vodiče za pravilno postavljanje sučelja na zaslonu. Ako kliknete na jednu od plavih traka, vidjet ćete da je zaključana. Kliknite zaključavanje pričvršćeno za svaku od njih da biste ga otključali . Označite ploču s pločom i kopirajte odabir u međuspremnik. Vratite se na dokument i zalijepite zaslon u ploču s instrumentima.
3. Kliknite jednom na traku App koja je na vrhu ploče s instrumentima. Primjetite kako je možete odabrati. Odaberite Object> Arrange> Bring to Front. Vaš je odabir sada iznad vodilica na zaslonu. To bi vam trebalo reći da je svaki od elemenata na zaslonu moguće uređivati.
4. Dvaput kliknite na traku stanja na vrhu i na ploči Svojstva i boju ispune na 455A64 . Dvokliknite traku s aplikacijama i postavite njegovo punjenje na 607D8B. To bi vam trebalo reći da svaki element u UI kompletu može biti uređen kako bi ispunio specifikacije boja projekta.
5. Što je s ikonom? Evo kako promijeniti boju. Dvaput kliknite srce da biste je odabrali. Ako pogledate ploču Svojstva, možete pretpostaviti da ne možete uređivati ​​odabir. Ne baš. Dvaput kliknite srce još jednom . Svojstva se otvaraju i boju za punjenje promijenite u FF0000. Ponovite ovaj trik dvostrukog klika za preostale ikone i tekst.