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 07Stvorite 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:
- Odaberi Ellipse Tool i pritiskom tipki Option / Alt-Shift povucite krug.
- Ako odaberete krug, postavite Ispunite boju FF0000 i Granica na "none" u svojstvima.
- Dvaput kliknite krug da biste prikazali sidrenje. Povucite donji sidro prema dolje.
- Dvokliknite odabranu točku sidrenja i krivulje zamijenite linijama.
- 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.
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:
- Izradite novu ploču i dodajte svoju pozadinsku sliku.
- Odaberite pravokutni alat and nacrtati pravokutnik preko slike. Kada je odabran pravokutnik, podesite Fill to White i Stroke na None.
- Uz odabrani pravokutnik, odaberite Blok s pozadine na ploči svojstava. Tri klizača su Blur količina, svjetlina i neprozirnost. Evo što oni rade:
- Iznos zamućenja: 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 07Stvorite 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:
- Izradite ploču s instrumentima u XD-u, dodajte sliku i kopirajte i zalijepite element sučelja iz odgovarajućeg UI Kit - File> Open UI Kit … u ploču. Na gornjoj slici fotografija čini statusnu traku i traku aplikacije teško vidjeti.
- Odaberite pravokutni alat i izvući 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 - do 60% i Bijela Vrijednost do 0%.
- Uz odabrani pravokutnik, odaberite Objekti> Rasporedi> Pošalji natrag, Elementi sučelja sada su vidljivi preko slike.
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:
- 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.
- 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.
- 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.
- Ako želite premjestiti fotografiju u masku, dvaput kliknite 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.
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:
- 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.
- 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.
- 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.
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.
- Počinjete odabirom alata Artboard i odabirom Android Mobile u Google odjeljku ploče Svojstva.
- Odaberite Datoteka> Otvori skup UI-a> Google materijal, Ovo otvara materijal za dizajn materijala za dizajn materijala. Odaberite Povećalo i štitnik ton vodič zaslona ploča s instrumentima, 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.
- 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.
- Dvokliknite traku statusa na vrhu i na ploči Svojstvai ispuni boju 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.
- Što je s ikonom? Evo kako promijeniti boju. Dvaput kliknite srce za odabir. 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.
