Hogyan kezdjünk el magunkkal az UXPin használatával?
Ahogy a mobil design, az alkalmazástervezés és a gyors kialakítás terén áttérünk, egyre nagyobb hangsúlyt fektetünk az UX (User Experience) és a wireframing, az interaktív prototípusok és a makettek felé. Rengeteg eszköz létezik ezen a niche-en, és a teljes játékteret a komplex, funkciós, töltött gömbölyűektől a ritkán és alig hasznosul. Az egyik olyan eszköz, amely elkapta a szemem az UXPin egyszerűen azért, mert a tervezők fejlesztették ki a tervezők számára.
Mielőtt továbblépünk … egy figyelmeztetés. Ha a tiéd olyan szervezet, amely inkább a szoftver tulajdonjogát részesíti előnyben, akkor az UXPin nem az Ön számára. Az alkalmazásban végzett összes munkát a böngésző végzi, és az Ön által mentett projektek a fiókjába kerülnek.
Az UXPin használatához elindít egy böngészőt, és elindul az UXPin-hez. Innen felvehetsz egy ingyenes próbaverzióra, vagy gondoskodhatsz egy havi tervről a várható szükségleted alapján. A regisztrációs folyamat meglehetősen könnyű, és miután beállította a felhasználónevét és a jelszavát, készen áll az induláshoz.
Hogyan kezdjen el egy projektet az UXPin-ben
Amikor bejelentkezik, érkezik az Irányítópultra, és innen eldöntheti, hogy létrehoz egy új drótkeretet, egy új mobilprojektet vagy egy Responsive Web Design projektet. Vannak plug-inek az UXPin számára, amelyek lehetővé teszik a Photoshop vagy a Sketch projektek bevitelét. Ehhez hogyan fogok létrehozni egy szalagot egy szöveggel és egy e-mail gombot hozzáadni a bannerhez. Ehhez választottam Új drótváz létrehozását.
Az UXPin interfész használata
A Tervezési felület négy részre oszlik. A bal oldalon lévő fekete területen egy sor eszköz található, amely lehetővé teszi, hogy visszatérjen a műszerfalhoz, nyissa meg a használni kívánt Elemeket, nyissa meg az Intelligens Elemek panelt, keressen elemeket, feljegyezzen az oldalra és vegyen fel tagokat. Az alján egy olyan gomb jelenik meg, amely megnyitja a rövid bemutatót, másikat, amely lehetővé teszi a hozzáférést fiókjához, és egy másikhoz, amely hozzáfér a GYIK-hoz, kérdéseket tegyenek fel, sőt visszajelzéseket is adjanak.
A kék területen a tetején egy sor eszköz és tulajdonság. A jobb oldalon lévő sötétebb gombok lehetővé teszik, hogy újratervezze a terveket, módosítsa a projektbeállításokat, ossza meg az oldalt, és végezze el az oldal böngészős szimulációját.
Az Elemek panelen ahol megragadod a tervfelületek bitjeit és darabjait, nevezd el a projektedet, és adjon hozzá vagy távolítson el oldalakat.
Az Elements könyvtár kellemes meglepetés az UX tervezőknek. Ez a lefutás lehetővé teszi, hogy válasszon a 30 könyvtárból az iOS-tól az Android Lolipopig. A Bootstrap és az Alapítvány elemeihez is hozzáférhet a Font Awesome ikonokkal, a Gesztus ikonokkal a mobilhoz és a Social Widgets gyűjteményéhez.
04/09Hogyan lehet elemet hozzáadni egy UXPin oldalhoz
Kezdethez húztam a doboz elemet a tervezési felületre, és amikor elengedem az egeret, a Tulajdonságok panel megnyílik. A Tulajdonságok gomb segítségével megnevezheti az elemet, és beállíthatja az elem szélességmagasságát és helyzetértékét. Ezenkívül hozzáadhatja az elemhez a kitöltést, lekerekítheti a sarkokat és beállíthatja annak homályosságát. A Háttérszín gombra kattintva megnyílik egy RGBA színválasztó.
Bármely betűtípust, szegélyt és mintát is rendelhet a kiválasztott elemhez. A Lightning Bolt lehetővé teszi, hogy interaktivitást adjunk egy kiválasztott elemhez.
05/09Hogyan adhat és formázhat szöveget UXPin-ben
Szöveg hozzáadásához húzza a szöveges elemet a tervezési felületre, és írja be a szöveget. Kattintson a Szöveges tulajdonság elemre gombra a Betűtípus tulajdonságainak megnyitásához és a szöveg formázásához. Ha szükséged lesz egy tömböt tartalmazó szövegre, adj hozzá egy szöveges elemet, és kattints a LOREM IPSUM GENERÁCIÓJA gombot a Betűtípus tulajdonságaiban.
06/09Hogyan lehet hozzáadni egy képet egy UXPin oldalhoz
Ennek a feladatnak több módja van. Használhatja a Képszerszám az eszköztáron adjon hozzá egy Image elemet a könyvtárból, vagy egyszerűen húzza át a képet az asztalról a tervezési felületen levő elemre a fentiek szerint.
07, 09Hogyan adhat hozzá egy gombot egy UXPin oldalhoz
Bár van egy gombelem, belépve a " Gomb " ba,-be Keresés a fent látható módon, megnyitja a könyvtárak összes gombját. Húzza a kívánt felületet a tervezési felületre, és használja a Tulajdonságokat a szín, a betűtípus és a Border sugar változtatásához. A gombon belüli szöveg megváltoztatásához kattintson egyszer a szövegre, és írja be az új szöveget.
08, 09Hogyan lehet interaktivitást hozzáadni egy UXPin oldalhoz?
Ez nem olyan bonyolult, mint először. Az e-mail bemenethez hozzáadtam egy bemeneti elemet, átméreteztem, beírtam a szöveget és formáztam a szöveget. Az Input elem kiválasztva kattintson a Tulajdonságok gombra és amikor a Elem tulajdonságai kattintson a gombra Láthatóság gomb - a szemgolyó - a panel jobb felső sarkában.
Válassza ki a gombot és kattintson a Interakciók gomb - a Villámcsavar - a tulajdonságokban. Amikor megjelenik a Interakciók panel, válassza az Új interakció lehetőséget. Válassza a Kattintás lehetőséget a Megjelenítő párbeszédablakban. A Művelet területen válassza az Elem megjelenítése lehetőséget. Most megkérdezed, hogy melyik elem jelenjen meg. Kattintson egyszer a fegyvertáron, és kattintson a Beviteli elemre. Az azonosított elem segítségével most meghatározhatja, hogy animálta-e az elemet. Ebben az esetben úgy döntöttem, hogy a Beviteli mezőt könnyedén jelenítem meg és 300 ms alapértelmezett időtartammal.
Azt is szeretném, ha a gomb körülbelül 65 képpontot mozgatna jobbra, amikor rákattint. Kiválasztottam a gombot, megnyitottam a Interakciók panelt, és kiválasztottam Új interakció. A következő beállításokat használtam:
- ravaszKattintson a gombra
- Akció: Mozgás
- Mozgásirány: Az x tengelyen 65 px
- ÉlénkségLineáris
- Időtartam: 300 ms
Az interakció eltávolításához válassza ki az elemet, és nyissa meg a Interakciók panelt. Válassza ki az interakciót a panelen, és kattintson a Kukába gombra a törléshez.
09. 09. szHogyan tesztelje az oldalát az UXPin-ben
Mivel a böngészőben dolgozik, a tesztelés egyszerű. Kattints a Szimulálja a tervezést gomb. Az oldal megnyílik a böngészőben, és tesztelheti az utat. A lap bal oldalán megjelenik egy panel is, amely lehetővé teszi a Megjegyzéseket, a webhelytérképet, ha több oldal van, használhatósági tesztelést, élő megosztást, szerkesztést és visszatérést a műszerfalhoz.
Az oldal alján egy másik kis panel, amely lehetővé teszi az interaktív elemek megjelenítését, a megjegyzések megmutatását vagy elrejtését és a projekt linkjének megosztását másokkal.
