01/09
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.
02/09
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.
03/09
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/09
Hogyan lehet elemet hozzáadni egy UXPin oldalhoz
Kezdéshez húztam a doboz elemet a tervezési felületre, és amikor felengedem az egeret, megnyílik a Tulajdonságok panel . 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/09
Hogyan 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 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ömbtöredékre , adj hozzá egy szöveges elemet, és kattints a GENERATION LOREM IPSUM gombra a Betűtípus tulajdonságaiban.
06/09
Hogyan lehet hozzáadni egy képet egy UXPin oldalhoz
Ennek a feladatnak több módja van. Használhatja az Image Tool eszköztárat, hozzáadhat egy képelemet a könyvtárból, vagy egyszerűen húzza át a képet az asztalról a tervezési felületen levő elemre, ahogy fent látható.
07, 09
Hogyan adhat hozzá egy gombot egy UXPin oldalhoz
Bár van egy Button elem, a " Button " beírása a Keresés területre, ahogy fent látható, megnyitja az összes könyvtárban található összes gombot. 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, 09
Hogyan 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álasztásával kattintson a Properties (Tulajdonságok) gombra, és amikor az Elem tulajdonságai megjelennek, kattintson a panel jobb felső sarkában lévő láthatóság gombra - a szemgolyóra.
Válassza ki a gombot, és kattintson a Tulajdonságok gombra - a Villámcsavar - a tulajdonságok között. 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 az Új interakciót . A következő beállításokat használtam:
- Trigger : Kattintson a gombra
- Művelet: Mozgás
- Mozgásirány : 65x az x tengelyen
- Animáció : lineá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. sz
Hogyan tesztelje az oldalát az UXPin-ben
Mivel a böngészőben dolgozik, a tesztelés egyszerű. Kattintson a Szimuláció tervezés gombra. 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.