01 of 09
Kuidas saada end UXPiniga alustada
Kui me liigume mobiilse disaini, rakenduse disaini ja tundliku disaini valdkonda, on üha enam tähelepanu pööratud UX-le (kasutajate kogemus) ja juhtraami , interaktiivsele prototüüpimisele ja piltidele. Sellel nišil on siinkohal palju tööriistu, mis kasutavad täismahtu komplekssetest, täispandud beebittidest, mis on hõre ja vaevalt kasulikud. Üks näpunäiteid on UXPin lihtsalt sellepärast, et seda arendasid disainerite disainerid.
Enne kui me liigume edasi ... hoiatus. Kui teie on organisatsioon, mis eelistab tarkvara omamist, siis pole UXPin teie jaoks sobiv. Kõik selles rakenduses tehtud töö tehakse brauseris ja teie salvestatud projektid salvestatakse teie kontole.
UXPin käivitamiseks käivitage brauser ja pea UXPinile. Siit saate registreerida tasuta prooviversiooni või korraldada igakuise plaani, mis põhineb teie eeldataval vajadusel. Registreerumise protsess on üsna lihtne ning kui olete oma kasutajanimi ja parool seadnud, on teie valmis alustama.
02 09
Kuidas UXPinis projekti käivitada
Kui logite sisse, jõuate juhtpaneelile ja siit saate otsustada uue raamistiku, uue mobiili projekti või vastutustundliku veebi disaini projekti loomise. UXPinile on olemas ka pistikprogrammid, mis võimaldavad teil oma Photoshop'i või Sketchi projekte tuua. Selleks, kuidas ma panen mõne tekstiga bänneri ja lisan bännerile e-posti nuppu. Selle saavutamiseks valisin luua uue juhtraami.
03 alates 09
Kuidas kasutada UXPin-liidest
Disaini pind on jagatud neljaks alaks. Vasakpoolsel mustal alal on rea tööriistu, mis võimaldavad teil naasta juhtpaneelile, avage elemendid, mida te kasutate, avage Smart Elementide paneel, otsige elemente, lisage lehele märkusi ja lisage meeskonna liikmeid. Allosas on nupp, mis avab lühikese juhendaja, teine, mis võimaldab teil pääseda juurde oma kontole, ja teine, mis pääseb juurde KKK-le, laseme teil esitada küsimusi ja isegi anda tagasisidet.
Ülaosas asuvas sinises piirkonnas on tööriistade ja omaduste seeria. Parempoolsel küljel olevad tumedamad nupud võimaldavad teil oma disaini järjestada, kohandada projekti seadeid, jagada lehte ja teha brauseri brauseri simulatsiooni lehel.
Elementide paneel on koht, kus te haarate disaini pinnale bitte ja tükke, nimetage oma projekti ja lisate või eemaldage lehti.
Elementsi raamatukogu on UX disaineritele meeldiv üllatus. See hüpikmenüü abil saate valida 30-st raamatukogust, mis ulatuvad iOS-ist Android-i Lolipopini. Samuti on teil juurdepääs Bootstrap'i ja sihtasutuse elementidele koos Fontide ahvidega ikoonidega, liikuva ikooniga Gesture ja sotsiaalsete vidinate kogumiga.
04 09
Kuidas lisada element UXPin lehele
Et alustada, tõmbasin kasti elemendi projekteerimispinnale ja kui ma hiire vabastan, avaneb atribuutide paneel . Omaduste nupp võimaldab teil elementi nimetada ja määrata elemendi laiuse kõrguse ja positsiooni väärtused. Elementi saab lisada ka täidise, nurkade ümardada ja selle suitsususe reguleerimiseks. Klõps nupul Taustavärv avab RGBA värvivalija.
Samuti saate määrata valitud elemendi fondi, piiri ja mustri. Lightning Bolt annab teile võime lisada valitud elemendile interaktiivsuse.
05 09
Kuidas lisada ja vormindada teksti UXPin-is
Teksti lisamiseks lohistage tekstielement disainipinnale ja sisestage tekst. Klõpsake nupul Tekstiomand , et avada Fondi atribuudid ja vormindada oma tekst. Kui teil on vaja mannekeeni teksti plokki, lisage tekstielement ja klõpsake FONDA atribuutide nupul GENERATE LOREM IPSUM .
06 alates 09
Kuidas lisada UXPin-lehele pilti
Selle ülesande täitmiseks on paar võimalust. Saate kasutada tööriistariba pilditööriista, lisada pildi elementi raamatukogust või lihtsalt lohistada pilt töölaualt disainpinna elemendi külge, nagu eespool näidatud.
07 09
Kuidas lisada nuppu UXPin-lehele
Kuigi on olemas nuppude element, siseneb otsingupiirkonna " Button ", nagu ülalpool näidatud, kõikidele kõigis raamatukogudes leiduvatele nuppudele. Lohistage see, mis töötab teie jaoks disainipinnal, ja kasutage omadusi värvi, fondi ja isegi piiride raadiuse muutmiseks. Nupu teksti muutmiseks klõpsake tekstis üks kord ja sisestage uus tekst.
08, 09
Kuidas lisada interaktiivsust UXPin lehele
See pole nii keeruline, kui see esmakordselt ilmub. E-kirja sisestuse jaoks lisasin sisendielemendi, muutnud selle suurust, sisestasin teksti ja vormindasin teksti. Valides Input element, klõpsake nuppu Properties (Atribuudid) ja kui elemendi omadused ilmuvad, klõpsake paneeli paremas ülanurgas nähtavusnuppu - silmapiiri.
Valige nupp ja klõpsake omaduste nupul Interaktsioonid - Lightning Bolt. Kui vahekaart Koostööd avaneb, valige Uus suhtlemine. Hüpikakna käivitamiseks valige käsk Kliki. Valige Action area valige Show Element. Teile küsitakse nüüd, milline Element näidata. Klikkige ükshaaval käsitsi ja klõpsake sisendi elementi. Elemendi identifitseerimisega saate nüüd määrata, kas elementi animeerida või mitte. Sellisel juhul otsustasin sisendkasti näidata kergesti ja läks, mille vaikimisi kestus oli 300 ms.
Tahaksin, et nupp liiguks umbes 65 pikslit paremale, kui seda klõpsata. Valisin nupu, avasin Interaktsioonide paneeli ja valisite uue suhtluse . Ma kasutasin neid seadeid:
- Käivitus : klõpsake
- Tegevus: liikuda edasi
- Liiguta suund : x x teljega 65 px
- Animatsioon : Lineaarne
- Kestus: 300 ms
Koostöö eemaldamiseks valige element ja avage paneel Interactions. Valige paneelil suhtlus ja klõpsake prügikast, et seda kustutada.
09 09
Kuidas testida oma lehte UXPinis
Kuna te töötate brauseris, on testimine surnud lihtne. Klõpsake nuppu Simulate Design ( Simuleeri disain) . Leht avaneb brauseris ja te saate seda proovida. Samuti on lehe vasakul küljel lisatud paneel, mis võimaldab märkusi, saidi kaarti, kui on mitu lehte, kasutatavuse testimine, otseülekanne, redigeerimine ja juhtpaneeli naasmine.
Lehe alaosas on veel üks väike paneel, mis võimaldab näidata interaktiivseid elemente, näidata või varjata kommentaare ja jagada projekti linki teistega.