01 iš 09
Kaip pradėti dirbti su UXPin
Kai mes pereiname į mobiliojo dizaino, programų kūrimo ir jautrios konstrukcijos sritį, vis daugiau dėmesio skiriama UX (vartotojo patirtis) ir wireframing , interaktyviam prototipų kūrimui ir maketavimui. Yra šimtas įrankių, skirtų šiai nišai, ir jie paleidžia visą spektrą iš sudėtingų, įkrautų behemotų, kurie yra reti ir vos naudingi. Viena iš priemonių, kurios sugavo akis, yra "UXPin", nes ji buvo sukurta projektuotojų dizainerių.
Prieš mes einame pirmyn ... įspėjime. Jei jūsų yra organizacija, kuri pageidauja turėti programinę įrangą, tada UXPin nėra jums. Visas šioje programoje atliktas darbas atliekamas naršyklėje, o išsaugoti projektai išsaugomi jūsų paskyroje.
Norėdami pradėti dirbti su UXPin, paleiskite naršyklę ir eikite į UXPin. Čia galite užsiprenumeruoti nemokamą bandomąją versiją arba organizuoti mėnesinį planą pagal jūsų numatomą poreikį. Registracijos procesas yra gana lengvas, o kai jūs nustatote savo Vartotojo vardą ir slaptažodį, jūsų yra pasiruošę pradėti.
02 iš 09
Kaip pradėti UXPin projektą
Kai prisijungiate, atvykstate į prietaisų skydelį ir iš čia galėsite nuspręsti sukurti naują "wireframe", naują mobilųjį projektą arba "Responsive Web Design" projektą. Taip pat yra UXPin papildinių, kurie leis jums įtraukti "Photoshop" ar "Sketch" projektus. Šiam "Kaip aš ketinu sukurti reklamjuostę su tam tikru tekstu ir pridėti elektroninį mygtuką prie reklamjuostės. Norėdami tai padaryti, aš pasirinku Sukurti naują karkasą.
03 iš 09
Kaip naudotis UXPin sąsaja
Projektavimo paviršius suskirstytas į keturias sritis. Juodoje srityje kairėje yra įrankių serija, leidžianti grįžti į prietaisų skydelį, atidaryti elementus, kuriuos naudosite, atidarykite "Smart Elements" skydą, ieškokite elementų, pridėkite pastabų prie puslapio ir pridėkite komandos narių. Apatinėje dalyje yra mygtukas, kuris atidaro trumpą pamokėlę, kita - leidžianti pasiekti paskyrą, o kita - prieiga prie DUK, tegul užduoti klausimus ir net pateikti atsiliepimus.
Mėlynoje zonoje viršuje yra įrankių ir savybių serija. Tamsesni mygtukai dešinėje pusėje leidžia jums pakartoti savo dizainą, koreguoti projekto nuostatas, dalintis puslapiu ir atlikti naršyklės puslapio modeliavimą.
Elementų skydas - tai vieta, kur patraukite bitus ir gabalus, skirtus dizaino paviršiui, pavadinkite savo projektą ir pridėkite arba pašalinkite puslapius.
Elementų biblioteka yra malonus siurprizas UX dizaineriams. Šis iššokantis langas leidžia pasirinkti iš 30 anon bibliotekų, pradedant nuo "iOS" iki "Android Lolipop". Taip pat galite naudotis "Bootstrap" ir "Foundation" elementais kartu su "Font Awesome" piktogramomis, "Gesture" piktogramomis mobiliesiems ir socialinių įrankių rinkiniu.
04 iš 09
Kaip pridėti elementą prie "UXPin" puslapio
Norėdami pradėti, aš nuvilkou "Box" elementą į dizaino paviršių, o kai paleisdamas pelę, atidaromas " Properties" skydas . Mygtukas "Savybės" leidžia pavadinti elementą ir nustatyti elemento pločio aukštį ir pozicijos reikšmes. Elementui taip pat galite pridėti padengimą, apvalinti kampus ir sureguliuoti jo neskaidrumą. Spustelėjus mygtuką Fono spalva, atidaromas RGBA spalvų rinkiklis.
Taip pat galite priskirti pasirinktą elementą šriftą, sieną ir piešinį. "Lightning Bolt" suteikia jums galimybę pridėti interaktyvumo prie pasirinkto elemento.
05 iš 09
Kaip pridėti ir formuoti tekstą UXPin
Norėdami pridėti tekstą, vilkite teksto elementą į dizaino paviršių ir įveskite tekstą. Spustelėkite mygtuką "Teksto nuosavybė ", kad atidarytumėte šriftų savybes ir suformatuotumėte tekstą. Jei jums reikia manekeno teksto bloko, pridėkite teksto elementą ir spustelėkite " GENERATE LOREM IPSUM" mygtuką savybių šriftas.
06 iš 09
Kaip pridėti vaizdą prie UXPin puslapio
Yra keletas būdų, kaip atlikti šią užduotį. Vaizdų įrankį galite naudoti įrankių juostoje, bibliotekoje pridėkite elementą "Vaizdas" arba tiesiog vilkite ir numeskite paveikslėlį iš darbalaukio į elementą ant dizaino paviršiaus, kaip parodyta aukščiau.
07 iš 09
Kaip pridėti mygtuką prie UXPin puslapio
Nors yra mygtuko elementas, įvesdami " mygtuką " į paieškos sritį, kaip parodyta aukščiau, atidaromi visi visi bibliotekose esantys mygtukai. Vilkite tą, kuris jums tinka, ant dizaino paviršiaus ir naudokite ypatybes, kad pakeistumėte spalvą, šriftą ir net sienos spindulį. Norėdami pakeisti tekstą mygtuko viduje, spustelėkite vieną kartą ant teksto ir įveskite naują tekstą.
08 iš 09
Kaip pridėti interaktyvumo į UXPin puslapį
Tai nėra tokia sudėtinga, kaip pirmą kartą gali pasirodyti. El. Pašto sąskaita pridėjau įvesties elementą, pakeitė jo dydį, įvedė tekstą ir suformatuotą tekstą. Pasirinkus elementą "Įvestis", spustelėkite mygtuką "Ypatybės", o kai rodomas elemento savybės, spustelėkite mygtuką " Matomumas", o akies obuolys - viršutiniame dešiniajame skydo kampe.
Pasirinkite mygtuką ir spustelėkite sąveikos mygtuką - "Lightning Bolt" - savybes. Kai atidaromas sąveikos skydas, pasirinkite Naujoji sąveika. Paspauskite "Paspauskite" iš Triggero nusileidimo. Veiksmų srityje pasirinkite Rodyti elementą. Dabar jums reikės paklausti, kuris elementas rodomas. Paspauskite vieną kartą ant gunsite ir spustelėkite elementą "Input". Nustačius elementą, dabar galite nustatyti, ar elementą animuoti ar ne. Šiuo atveju nusprendžiau parodyti įvesties dėžutę lengvai ir nuėjome su numatytu 300ms trukmės verte.
Aš taip pat noriu, kad mygtukas perkelia apie 65 pikselius į dešinę, kai jis spustelėtas. Pasirinkiau mygtuką, atidariau sąveikų skydą ir pasirinkote Naujoji sąveika . Aš naudoju šiuos nustatymus:
- Trigger : spustelėkite
- Veiksmas: Perkelti
- Perkelti kryptis : 65 x pikseliu x ašyje
- Animacija : linijinė
- Trukmė: 300 ms
Jei norite pašalinti sąveiką, pasirinkite elementą ir atidarykite sąveikos skydelį. Pasirinkite sąveiką skydelyje ir spustelėkite šiukšliadėžę, kad ją ištrintumėte.
09 iš 09
Kaip patikrinti savo puslapį UXPin
Dėl to, kad dirbate naršyklėje, testavimas yra negyvas paprastas. Spustelėkite simuliatoriaus dizaino mygtuką. Puslapis bus atidarytas naršyklėje ir galėsite išbandyti kelią. Į kairę puslapio pusę taip pat bus pridėta skiltis, kuri leis komentuoti, svetainės žemėlapį, jei yra keli puslapiai, naudojimosi testavimas, tiesioginis bendrinimas, redagavimas ir grįžimas į informacijos suvestinę.
Puslapio apačioje yra dar vienas mažas skydelis, kuris leidžia parodyti interaktyvius elementus, parodyti ar paslėpti komentarus ir dalintis projekto nuorodomis su kitais.