Adobe Experience Tricks, Tips i Techniques

01 od 07

Adobe Experience Tricks, Tips i Techniques

Kada je Adobe predstavio iskustvo dizajna kao javni pregled , kompanija je istovremeno ostvarila dva prilično neverovatna podviga. Prvo, stvorili su prostor na novom tržištu softvera za izradu prototipova. Drugo, stvorili su priliku za korisnike da se igraju "u toku rada" i omogućavaju korisnicima da utiču na taj napredak. Sada kada je aplikacija dostupna nekoliko meseci, mislila sam da bi bilo dobro da podijelimo neke trikove, savjete i tehnike.

Ali, prvo, možda se pitate šta se podrazumeva pod imenom Prototyping Software. Među glavnim igračima u ovom prostoru su Proto.io, Princip, UXPin, Atomic.io , Experience Design i InVision. Za razliku od aplikacija kao što su Sketch 3, Photoshop i Illustrator gde se proizvode statički dizajn, ovi grafički uređivači uvode interaktivnost, pokret i druge karakteristike uobičajene u današnjem mobilnom i web dizajnom prostoru.

Uz povećanje mobilnog i neizbežnog laserskog fokusa na Korisnika, više nije dovoljno da dizajner napravi nekoliko skica, skupi nekoliko kompleta, a zatim pusti projekat ili ga otpremi na web server. UI / UX tok posla je fundamentalno promijenio stvari. Svaki korak procesa, od identifikacije korisnika, skica, wireframes, mockup-ova i prototipovanja sada su predmet opsežnog korisničkog testiranja.

To je zadnja faza - prototipiranje - gde su točke bolova otkrivene i fiksirane pre nego što se projekat preseli u konačnu proizvodnju. Ovde su tako kritična interaktivnost, pokret, prelaz ekrana i postavljanje svega na ekranu. Problemi i problemi se jednostavno ne mogu prikazati kao statička slika ili verbalno objasniti. Na kraju krajeva, ovi proizvodi su za stvarne ljude. Umesto da sve to prevede na kod, proces izrade prototipa se sve više pokreće grafički softver dizajniran samo za tu svrhu. Lakše je popraviti grešku, zameniti sliku, prepisati neki tekst, pomeriti dugme i tako dalje koristeći vizuelni editor nego stalno prepisivanje i debagovanje koda.

Zapravo, ovaj softver je postao ključna komponenta u današnjem "Rapid Prototyping" okruženju dizajna i razvoja.

Sa tim je rečeno, da se zabavimo sa Experience Design.

02 od 07

Kreirajte odredišnu vezu s jednostavnim krugom u Adobe Experience Design-u

Jedan uredan aspekt XD-a je njegova upotreba vektora za crtanje. Ne možete naći ikonu? Nema problema. Rulirajte svoj. Evo kako:

1. Izaberite alat Ellipse i, pritiskanjem tastera Option / Alt-Shift, nacrtajte krug.
2. Sa izabranim krugom, podesite boju popunjavanja na FF0000 i granicu na "nijedan" u svojstvima.
3. Dvaput kliknite na krug da biste prikazali točke sidra. Povucite donju sidru nadole.
4. Dvaput kliknite na izabranu tačku sidra i krivine se zamenjuju linijama.
5. Nacrtajte još jedan mali krug sa belim popunjavanjem i bez stoke. Pomerite ga u položaj i izaberite pin i krug. Na panelu Align na vrhu Properties kliknite na dugme Horizontal Center i Pin se kreira.

03 od 07

Napravite zamućenje pozadine u dizajnu Adobe Experience

Obično je imati tekst ili neki drugi sadržaj preko pozadinske slike. Problem ovde je slika, češće nego ne nadmaši sadržaj iznad njega. Jedan od načina rešavanja ovog problema je zamućenje pozadinske slike. Možete zamućiti sliku u Photoshop-u ili drugom softveru za uređivanje slika, ali to je donekle neefikasno, posebno zato što XD sada može da vam obradi ovaj zadatak. Evo kako:

1. Kreirajte novu ploču i dodajte svoju sliku u pozadini.
2. Izaberite alatku pravougaonika i nacrtajte pravougaonik preko slike. Kada je izabrano pravougaono, podesite Napuniti na belo i Stroke na nijedan.
3. Pomoću izabranog pravougaonika izaberite stavku Zamućenje pozadine na panelu svojstava. Tri klizača su Blum količina, osvetljenost i opacity. Evo šta rade:

• Blur Količina: Podešava zamućenost slike ispod oblika. Maksimalna vrednost je +50.
• Osvetljenost: Podešava osvetljenje i senke na slici. Minimalna vrijednost je -50, a maksimalna vrijednost je +50.
• Opacity: utiče na transparentnost oblika i vidljivost slike pod obliku. Vrednosti se kreću od 0% do 100%.

Ako stvarno želite da "prebacite stvari", promenite boju oblika i reprodukujte pomoću vrednosti Opacity da biste promenili "izgled" slike.

04 od 07

Kreirajte Skrimin u Adobe Experience Design

Uobičajeni problem dizajna su elementi interfejsa, elementi moraju biti uobičajene boje, ali su izgubljeni kada se postave preko pozadinske slike ili čvrste boje. Rešenje je skroman. Skrom je donekle nejasan gradijent postavljen između elementa interfejsa i pozadine. Ovo je lako postići u XD. Evo kako:

1. Kreirajte svoj artboard u XD, dodajte sliku i kopirajte i nalepite elemente interfejsa iz odgovarajućeg UI Kit-a> Datoteka> Otvori UI Kit ... - u artboard. Na gornjoj slici fotografija čini statusnu traku i traku aplikacija teško vidjeti.
2. Izaberite alatku pravougaonika i izvucite pravougaonik. U panelu svojstava izaberite Fill i izaberite Gradient iz padajuće u Color Picker. Podešavanje boja gradijenta na crno-belo. Postavite vrijednost A - opacity - na 60%, a vrijednost White A na 0%.
3. Sa izabranim pravougaonikom izaberite stavku Objekt> Uredi> Pošalji nazad . Elementi sučelja su sada vidljivi preko slike.

05 od 07

Kreirajte avatar u Adobe Experience Design

Uobičajeni obrazac dizajna nalazi se u aplikacijama za ćaskanje gde ljudi razgovaraju jedni sa drugima, a na ekranu se pojavljuje slika zvučnika. Ti avatari su obično slike koje su maskirane. Mrtvo je jednostavno to postići u XD-u. Evo kako:

1. Počnite sa slikama i krugom ili drugim oblikom na tabli. Krug možete ispuniti bilo kojom bojom. Ono što vam ne treba da uradite je dodati boju moždanog udara. Ona će nestati kada kreirate efekat, pa zašto se trudite. Ako vam je potrebno da kockate krug, kopirajte je u klipbord.
2. Pomerite krug na sliku i izaberite sliku i krug. Sa izabranim bot objektima, izaberite Object> Mask with Shape . Kada pustite miš, Avatar se kreira. Odatle možete promeniti veličinu.
3. Ako želite dodati udarac, zalepite krug koji se nalazi na vašoj klipbordu na artboard. Sa izabranom kopijom, isključite popunjavanje Properties i dodajte boju i širinu hoda. Da biste ih postavili, izaberite oba objekta i kliknite na dugme Centar poravnanje u opcijama Poravnanje na vrhu panela svojstava.
4. Ako želite da premestite fotografiju u masku, dvaput kliknite na masku. Ovo će prikazati sliku i oblik maske. Kliknite na sliku i prevucite je na položaj. Kada pustite miš, slika će biti u novoj poziciji unutar maske.

06 od 07

Igrajte sa Adobe Experience Design Artboards

Umjetničke ploče iskustva nisu samo tamo da postavite sadržaj. I oni se mogu manipulisati. Evo nekoliko stvari koje možete uraditi:

1. Ako vam trebaju verzije ploče Landscape i Portrait artboard-a, duplirajte artboard i, uz odabrani duplikat, kliknite na dugme za krajanje na panelu Properties. Artboard će se promeniti u orijentaciju Landscape. Ako Artboard ima sadržaj na njemu, kliknite na Artboardovo ime, a Artboardova svojstva će se pojaviti u panelu s osobinama.
2. Da biste dodali prilagođenu boju Artboardu i projektu u vezi s tim, izaberite Artboard i kliknite Chill colour chip u odjeljku Appearance na panelu Properties. Unesite heksadecimalnu vrijednost za boju i kliknite znak +. Boja će biti dodata kao prilagođena boja. Da biste primenili tu boju negdje drugdje, izaberite objekat i kliknite na Custom Color čip da biste primijenili boju.
3. Artbordi se mogu vertikalno pomerati. Da biste to uradili, izaberite artboard i promenite njegovu visinu ili na Properties Panel ili povlačenjem dna artboard-a nadole. U oblasti Scrollable na panelu svojstava iz padajućeg menija izaberite vertikalni i unesite visinu prikaza ekrana. Ta puna plava linija pokazuje vam dno okvira. Da biste je testirali, kliknite na dugme Play i pomerite se dalje. Da biste isključili skrolovanje, u padajućem meniju izaberite None.

07 od 07

Izmijenite Mobile UI Kit u Adobe Experience Design

Experience Design sadrži UI Kit za razvoj iOS-a, Android-a i Windows korisničkih interfejsa. Kada ih prvi put otvorite, možda mislite da su prilično dobro postavljeni. Nije baš - svaki od komada u kompleta je u potpunosti moguće editirati. Hajde da saznamo tako što ćemo napraviti Android wireframe.

1. Počnite tako što izaberete alat Artboard i izaberete Android Mobile u odeljku Google na panelu svojstava .
2. Izaberite File> Open UI Kit> Google materijal . Ovo otvara Kit za UI materijala. Izaberite lupu uvećanja i šablon za prikaz ekrana . Volim da počnem sa ovom, jer mi daje vodiče za pravilno postavljanje elemenata interfejsa na ekranu. Ako kliknete na jedan od Blue bara, videćete da je zaključan. Kliknite na bravu koja je pričvršćena za svaku od njih da biste je otključali . Obeležite artboard i kopirajte izbor u clipboard. Vratite se u svoj dokument i zalepite ekran u svoju tablu.
3. Kliknite jednom na traci sa aplikacijama da je vrh artboarda. Obratite pažnju na to kako možete da je izaberete. Izaberite objekat> Rasporedi> Brzi na napred. Vaš izbor je sada iznad Screen Guides. Ovo bi trebalo da vam kaže da svaki od elemenata na ekranu može biti uređen.
4. Dvaput kliknite na Status Bar na vrhu i na Properties Panel-u i na Boja ispunjenja do 455A64 . Dvaput kliknite na traku sa aplikacijama i postavite ga na 607D8B. Ovo bi trebalo da vam kaže da svaki element u UI kompletu može biti uređen da zadovolji specifikacije u boji projekta.
5. Šta je sa ikonama? Evo kako promijeniti njihovu boju. Dvaput kliknite na srce da biste je izabrali. Ako pogledate Properties Panel, možete pretpostaviti da ne možete uređivati ​​izbor. Ne baš. Dvaput kliknite na srce još jednom . Svojstva se otvaraju i promijenite boju ispunjenja na FF0000. Ponovite ovaj dvostruki klik za preostale ikone i tekst.