01/09
Miten pääset itse aloittamaan UXPin
Kun siirrymme mobiilisuunnittelun, sovellusten suunnitteluun ja reagoivaan muotoiluun, on keskitytty yhä enemmän UX: ään (User Experience) ja wireframingiin , vuorovaikutteisiin prototyyppeihin ja mockup-muotoihin. Täällä on useita työkaluja, jotka tähtäävät tähän kapeaan alueeseen ja ne käyttävät koko gammaa monimutkaisilta ominaisuuksilta, jotka ovat kuormitettuja pöllöjä harvoin ja tuskin hyödyllisiksi. Yksi työkaluista, joka on saanut silmäni, on UXPin yksinkertaisesti siksi, että sen suunnittelivat suunnittelijat.
Ennen kuin siirrymme eteenpäin ... varoitukseksi. Jos sinun on organisaatio, joka haluaa omistaa ohjelmiston, UXPin ei ole sinua varten. Kaikki tässä sovelluksessa tehdyt työt tehdään selaimessa ja tallentamasi projektit tallennetaan tilillesi.
Käynnistä UXPin avulla käynnistät selaimen ja pääset UXPin-palveluun. Tästä voit tilata ilmaisen kokeiluversion tai järjestää kuukausittaisen suunnitelman, joka perustuu odotettuun tarpeeseen. Rekisteröityminen on melko helppoa, ja kun olet määrittänyt käyttäjänimesi ja salasanasi, olet valmis aloittamaan.
02/09
Kuinka aloittaa projekti UXPinissa
Kun kirjaudut sisään, saapuu Dashboardiin ja tästä voit päättää luoda uuden raidan, uuden mobiilihankkeen tai Responsive Web Design -hankkeen. Mukana on myös UXPin-laajennuksia, joiden avulla voit tuoda Photoshop- tai Sketch-projekteja. Tätä varten luen banneri, jossa on teksti ja lisätään sähköposti-painike banneriin. Tämän saavuttamiseksi valitsin Luo uusi rautalanka.
03/09
Kuinka käyttää UXPin-liitäntää
Suunnittelupinta on jaettu neljään alueeseen. Vasemmanpuoleisessa musta-alueessa on sarja työkaluja, joiden avulla voit palata hallintapaneeliin, avata käytettävät elementit, avata Smart Elements -paneelin, etsiä elementtejä, lisätä muistiinpanoja sivulle ja lisätä ryhmän jäseniä. Alareunassa on painike, joka avaa lyhyen oppitunnin, toinen, jonka avulla voit käyttää tiliäsi ja toinen, joka käyttää usein kysyttyjä kysymyksiä, anna kysymyksiä ja jopa antaa palautetta.
Sinisellä alueella ylhäällä on sarja työkaluja ja ominaisuuksia. Oikeanpuoleisempien tummien painikkeiden avulla voit muokata muotoilua, säätää projektin asetuksia, jakaa sivun ja tehdä selaimen selaimen simulaation sivulta.
Elementit-paneeli on, kun tarttat suunnittelupintaan bittiä ja kappaletta, nimeä projektisi ja lisää sivuja tai poista niitä.
Elements-kirjasto on miellyttävä yllätys UX-suunnittelijoille. Tämän ponnahdusikkunan avulla voit valita anon 30 kirjastosta, jotka vaihtelevat iOS: stä Android Lolipop -ohjelmaan. Lisäksi sinulla on pääsy Bootstrap- ja Foundation-elementteihin sekä Font Awesome -kuvakkeet, elefainikuvakkeet mobiililaitteille ja kokoelma sosiaalisia widgettejä.
04/09
Kuinka lisätä elementti UXPin-sivulle
Aloittaminen vetäin laatikkoelementin muotoiluun ja hiirtä vapautettaessa Ominaisuudet-paneeli avautuu. Ominaisuudet-painikkeella voit nimetä elementin ja asettaa elementin leveyden korkeuden ja aseman arvot. Voit myös lisätä pehmusteita elementtiin, pyöristää kulmat ja säätää sen peittävyyttä. Taustaväri-painikkeen napsauttaminen avaa RGBA-värivalitsimen.
Voit myös määrittää fontin, rajan ja kuvion valittuun elementtiin. Lightning Bolt antaa sinulle mahdollisuuden lisätä vuorovaikutteisuutta valitulle elementille.
05/09
Kuinka lisätä ja muotoilla tekstiä UXPinissa
Jos haluat lisätä tekstiä, vedä tekstin osa suunnittelupintaan ja anna teksti. Napsauta Teksti-ominaisuus -painiketta avataksesi Fonttiominaisuudet ja muotoile tekstisi. Jos tarvitset lohkotonta tekstiä, lisää tekstin elementti ja napsauta Fonttiominaisuudet- kohdassa GENERATE LOREM IPSUM -painiketta.
06/09
Kuinka lisätä kuva UXPin-sivulle
On olemassa muutamia tapoja tämän tehtävän suorittamiseen. Voit käyttää työkalupalkissa Image Tool -työkalua, lisätä kuvan elementin kirjastoon tai vetää ja pudottaa kuva työpöydältäsi elementin päälle suunnittelupinnalla edellä esitetyllä tavalla.
07/09
Kuinka lisätä painikkeen UXPin-sivulle
Vaikka Button-elementti avautuu " Button " hakualueeseen, kuten yllä on osoitettu, avaat kaikki painikkeet, jotka löytyvät kaikista kirjastoista. Vedä se, joka toimii sinulle suunnittelupinnalla ja käytä Ominaisuudet-painiketta vaihtaaksesi väriä, fonttia ja jopa raja-arvoa. Jos haluat muuttaa tekstiä painikkeessa, napsauta tekstiä kerran ja kirjoita uusi teksti.
08/09
Kuinka lisätä interaktiivisuutta UXPin-sivulle
Tämä ei ole niin monimutkainen kuin se saattaa ensimmäiseksi näkyä. Sisällön syöttöä varten lisäsin syöttöelementin, koon muutoksen, kirjoitin tekstin ja alustettiin tekstin. Kun syöttö-elementti on valittu, napsauta Ominaisuudet-painiketta ja, kun Elementin ominaisuudet näkyvät, napsauta paneelin oikeassa yläkulmassa näkyvyys- painiketta - silmämunua.
Valitse painike ja napsauta välilehdet -näppäintä - Lightning Bolt - ominaisuuksissa. Kun Yhteistyöt-paneeli avautuu, valitse Uusi vuorovaikutus. Valitse Trigger -painiketta klikkaamalla. Valitse Toiminto-alueella Näytä elementti. Sinulta kysytään, mitkä elementti näytetään. Klikkaa kerran pistoolilla ja napsauta syöttöelementtiä. Kun elementti tunnistetaan, voit nyt määrittää, haluatko animoida elementin. Tässä tapauksessa päätin näyttää Input-ruutun helposti ja menemällä 300 ms: n oletusarvoon.
Haluan myös, että painike liikkuu noin 65 pikseliä oikealle, kun sitä napsautetaan. Valitsin painikkeen, avasin Interaktiot-paneelin ja valitsin Uusi vuorovaikutus . Käytin näitä asetuksia:
- Trigger : Napsauta
- Toimi: Siirrä
- Siirrä suuntaa : 65 px x-akselilla
- Animaatio : lineaarinen
- Kesto: 300 ms
Voit poistaa vuorovaikutuksen valitsemalla elementin ja avaamalla Interaktiot-paneelin. Valitse vuorovaikutus paneelista ja napsauta Roskakori poistaaksesi sen.
09/09
Miten testaa sivuasi UXPinissa
Koska selaimessa työskentelet, testaus on yksinkertainen. Napsauta Simuloi suunnittelu -painiketta. Sivu avautuu selaimessa ja voit testata tapaa. Lisäksi sivun vasemmalle puolelle lisätään paneeli, joka mahdollistaa kommentit, sivustokartan, jos on useita sivuja, käyttökelpoisuuden testaus, live-jakaminen, muokkaus ja palautus hallintapaneeliin.
Sivun alalaidassa on toinen pieni paneeli, jonka avulla voit näyttää interaktiiviset elementit, näyttää tai piilottaa kommentteja ja jakaa projektiyhteyden muiden kanssa.