01 din 09
Cum sa te incepe cu UXPin
Pe măsură ce ne mutăm în domeniul designului mobil, al designului aplicației și al designului receptiv, sa concentrat din ce în ce mai mult pe UX (Experiența utilizatorilor) și pe fireframing , prototipuri interactive și mockups. Există o grămadă de unelte care vizează această nișă și care rulează întreaga gamă de complexe, cu capcane încărcate, care sunt rare și abia utile. Unul dintre instrumentele care mi-a prins ochiul este UXPin pur și simplu pentru că a fost dezvoltat de designeri pentru designeri.
Înainte de a merge mai departe ... o avertizare. Dacă dvs. este o organizație care preferă să dețineți software-ul, atunci UXPin nu este pentru dvs. Toate lucrările efectuate în această aplicație se fac în browser și proiectele pe care le salvați sunt salvate în contul dvs.
Pentru a începe cu UXPin lansați un browser și mergeți la UXPin. De aici puteți să vă înscrieți pentru o încercare gratuită sau să organizați un plan lunar, bazat pe nevoia dvs. anticipată. Procesul de înscriere este destul de ușor și odată ce ați setat numele de utilizator și parola, sunteți gata să începeți.
02 din 09
Cum să începeți un proiect în UXPin
Când vă conectați, ajungeți la tabloul de bord și de aici puteți decide să creați o nouă rețea, un nou proiect mobil sau un proiect Responsiv Web Design. Există, de asemenea, plug-in-uri pentru UXPin, care vă vor permite să vă aduceți proiectele Photoshop sau Sketch. Pentru aceasta, cum am de gând să creez un banner cu un text și să adaug un buton de e-mail la banner. Pentru a realiza acest lucru am selectat Crearea unui nou cadru wireframe.
03 din 09
Cum se utilizează interfața UXPin
Suprafața de proiectare este împărțită în patru zone. În zona neagră din stânga există o serie de instrumente care vă permit să reveniți la tabloul de bord, să deschideți Elementele pe care le veți utiliza, să deschideți panoul Smart Elements, să căutați elemente, să adăugați note la pagină și să adăugați membri ai echipei. În partea de jos este un buton care deschide un scurt tutorial, altul care vă permite să accesați contul dvs. și un altul care accesează întrebările frecvente, să vă adresați întrebări și chiar să oferiți feedback.
În zona albastră din partea de sus sunt o serie de instrumente și proprietăți. Butoanele mai întunecate din partea dreaptă vă permit să repetați designul, să reglați setările proiectului, să împărțiți pagina și să efectuați o simulare în pagină a browserului.
Panoul Elemente este locul unde apucați biții și piesele pentru suprafața de proiectare, denumiți proiectul și adăugați sau eliminați pagini.
Biblioteca Elements reprezintă o surpriză plăcută pentru designerii UX. Acest pop-down vă permite să alegeți dintre 30 de biblioteci anon, de la iOS la Android Lolipop De asemenea, aveți acces la elementele Bootstrap și Foundation, împreună cu pictogramele Font Awesome, pictogramele Gesture pentru mobil și o colecție de Widgeturi sociale.
04 din 09
Cum să adăugați un element la o pagină UXPin
Pentru a începe, am tras elementul Box pe suprafața de proiectare și, când am eliberat mouse-ul, se deschide panoul Proprietăți . Butonul Proprietăți vă permite să denumiți elementul și să setați valorile înălțimii și poziției lățimii elementului. De asemenea, puteți adăuga elemente de umplutură la element, rotunjim colțurile și reglați opacitatea. Dând clic pe butonul Culoare fundal, se deschide un selector de culori RGBA.
De asemenea, puteți atribui elementului selectat un font, o margine și un model. Șurubul de fulger vă oferă posibilitatea de a adăuga interactivitate unui element selectat.
05 din 09
Cum se adaugă și format text în UXPin
Pentru a adăuga text, trageți elementul de text pe suprafața de proiectare și introduceți textul. Faceți clic pe butonul Proprietăți text pentru a deschide proprietățile fontului și pentru a formata textul. Dacă aveți nevoie de un bloc de text fals, adăugați un element de text și faceți clic pe butonul GENERATE LOREM IPSUM din proprietățile Font.
06 din 09
Cum se adaugă o imagine pe o pagină UXPin
Există câteva modalități de a îndeplini această sarcină. Puteți utiliza instrumentul Imagine din bara de instrumente, adăugați un element Imagine din Bibliotecă sau pur și simplu trageți și fixați o imagine de pe desktop pe elementul de pe suprafața de proiectare, așa cum se arată mai sus.
07 din 09
Cum se adaugă un buton la o pagină UXPin
Deși există un element Button, introducerea butonului " Button " în zona Căutare , după cum se arată mai sus, deschide toate butoanele găsite în toate Bibliotecile. Glisați pe cel care lucrează pentru dvs. pe suprafața de proiectare și utilizați proprietățile pentru a schimba culoarea, fontul și chiar raza Frontierei. Pentru a schimba textul din interiorul butonului, faceți clic o dată pe text și introduceți textul nou.
08 din 09
Cum să adăugați interactivitate unei pagini UXPin
Acest lucru nu este la fel de complicat cum ar putea să apară mai întâi. Pentru introducerea de e-mail, am adăugat un element de intrare, l-am redimensionat, am introdus textul și am formatat textul. Cu elementul de intrare selectat, faceți clic pe butonul Proprietăți și, atunci când apare proprietățile Element, faceți clic pe butonul Vizibilitate - pe glob - în colțul din dreapta sus al panoului.
Selectați butonul și faceți clic pe butonul Interacțiuni - bolțul de lumină - în proprietăți. Când se deschide panoul Interacțiuni, selectați Interacțiune nouă. Selectați Clic din meniul derulant. În zona Acțiune, selectați Afișați elementul. Veți fi întrebat acum ce element să arătați. Faceți clic o dată pe site-ul și faceți clic pe elementul Input. Cu elementul identificat, puteți afla acum dacă doriți sau nu să animați elementul. În acest caz, am decis să arăt căsuța de intrare cu o ușurință și a mers cu valoarea implicită de 300 ms.
Vreau, de asemenea, ca butonul să se deplaseze cu aproximativ 65 de pixeli spre dreapta atunci când este apăsat. Am selectat butonul, am deschis panoul Interacțiuni și am selectat Interacțiunea nouă . Am folosit aceste setări:
- Trigger : Faceți clic pe
- Acțiune: Deplasați-vă
- Direcție mișcare : 65 px pe axa x
- Animație : liniară
- Durată: 300 ms
Pentru a elimina o interacțiune, selectați elementul și deschideți panoul Interacțiuni. Selectați interacțiunea din panou și faceți clic pe Coșul de gunoi pentru ao șterge.
09 din 09
Cum să testați pagina dvs. în UXPin
Datorită faptului că lucrați în browser, testul este simplu simplu. Faceți clic pe butonul Simulate Design . Pagina se va deschide în browser și puteți încerca calea. Va exista, de asemenea, un panou adăugat în partea stângă a paginii, care permite comentarii, o hartă a site-ului dacă există mai multe pagini, testarea utilizării, partajarea live, editarea și revenirea la tabloul de bord.
În partea inferioară a paginii se află un alt panou mic care vă permite să afișați elementele interactive, să afișați sau să ascundeți comentariile și să împărtășiți link-ul proiectului cu alții.