01 ze dne 09
Jak začít s UXPinem
Jak se dostáváme do oblasti mobilního designu, designu aplikace a citlivého designu se stále více zaměřuje na UX (uživatelské zkušenosti) a wireframing , interaktivní prototypy a mockups. Existuje spousta nástrojů, které jsou zaměřeny na tuto výklenku a provozují celý rozsah od složitých, představují naložené behemoths k řídké a sotva užitečné. Jedním z nástrojů, které mě zaujalo, je UXPin, protože byl vyvinut návrháři návrhářů.
Než půjdeme dopředu ... upozornění. Pokud vaše je organizace, která preferuje vlastní software, pak UXPin není pro vás. Veškerá práce provedená v této aplikaci se provádí v prohlížeči a uložené projekty jsou uloženy do vašeho účtu.
Chcete-li začít s aplikací UXPin, spusťte prohlížeč a přejděte na adresu UXPin. Odtud se můžete zaregistrovat na bezplatnou zkušební verzi nebo si zařídit měsíční plán na základě vaší předpokládané potřeby. Proces registrace je poměrně snadný a po nastavení uživatelského jména a hesla jste připraveni začít.
02 ze dne 09
Jak spustit projekt v UXPin
Při přihlášení se dostanete na Dashboard a odtud se můžete rozhodnout vytvořit nový wireframe, nový mobilní projekt nebo projekt Responsive Web Design. K dispozici jsou také plug-iny pro UXPin, které vám umožní přivést vaše projekty Photoshop nebo Sketch. Za tímto účelem vytvořím banner s nějakým textem a na banner přidáme tlačítko e-mailu. Chcete-li to provést, jsem vybral Vytvořit nový drátový rámeček.
03 ze dne 09
Jak používat rozhraní UXPin
Návrhový povrch je rozdělen na čtyři oblasti. V černé oblasti vlevo najdete řadu nástrojů, které vám umožňují návrat k palubní desce, otevření prvků, které použijete, otevření panelu Smart Elements, hledání prvků, přidání poznámek k stránce a přidání členů týmu. V dolní části je tlačítko, které otevírá krátký tutoriál, další, který umožňuje přístup k vašemu účtu a jinému, který přistupuje k častým dotazům, položíte otázky a dokonce poskytnete zpětnou vazbu.
V modré oblasti podél horní části je řada nástrojů a vlastností. Tmavší tlačítka na pravé straně umožňují opakovat návrh, upravovat nastavení projektu, sdílet stránku a provádět simulaci stránky v prohlížeči.
Na panelu Prvky se nachází místo, ve kterém uchopíte kusy pro konstrukční plochu, pojmenujete svůj projekt a přidáte nebo odstraníte stránky.
Knihovna Elements je příjemným překvapením pro návrháře UX. Tento pop-up vám umožní vybrat si z 30 knihoven od anony od iOS až po Android Lolipop Stejně tak máte přístup k prvkům Bootstrap a Foundation spolu s ikonami Font Awesome, ikonami Gesture pro mobily a sbírkou sociálních widgetů.
04 ze dne 09
Jak přidat element na stránku UXPin
Chcete-li začít, přetáhl jsem prvek Box na návrhovou plochu a při uvolnění myši se otevře panel Vlastnosti . Tlačítko Vlastnosti umožňuje pojmenovat prvek a nastavit jeho výšku a polohu. K prvku můžete také přidat polstrování, zaokrouhlit rohy a upravit jeho opacitu. Klepnutím na tlačítko Barva pozadí otevřete výběr barvy RGBA.
K vybranému prvku můžete také přiřadit písmo, okraj a vzor. Lightning Bolt vám dává možnost přidat interaktivitu k vybranému prvku.
05 ze dne 09
Jak přidat a formátovat text v UXPin
Chcete-li přidat text, přetáhněte textový prvek na povrch návrhu a zadejte text. Klepnutím na tlačítko Vlastnosti textu otevřete vlastnosti písma a formátujete text. Pokud potřebujete blok fiktivního textu, přidejte textový prvek a klikněte na tlačítko GENERATE LOREM IPSUM ve vlastnostech písma.
06 z 09
Jak přidat obrázek na stránku UXPin
Existuje několik způsobů, jak tento úkol splnit. Na nástrojovém panelu můžete použít Image Tool , přidat obrázek z knihovny nebo jednoduše přetáhnout obrázek z pracovní plochy na prvek na konstrukčním povrchu, jak je znázorněno výše.
07 ze dne 09
Jak přidat tlačítko na stránku UXPin
I když je prvek Button, zadáním tlačítka " Button " do oblasti Search , jak je znázorněno výše, se otevře všechna tlačítka, která se nacházejí ve všech knihovnách. Přetáhněte ten, který pro vás pracuje, na plochu designu a pomocí vlastností změňte barvu, písmo a dokonce poloměr okraje. Chcete-li změnit text uvnitř tlačítka, klikněte jednou na text a zadejte nový text.
08 z 09
Jak přidat interaktivitu na stránku UXPin
Není to tak složité, jako by se mohlo poprvé objevit. Pro e-mailový vstup jsem přidal vstupní prvek, upravil jeho velikost, zadal text a formátoval text. S vybraným prvkem Vstup klepněte na tlačítko Vlastnosti a při zobrazení vlastností prvku klikněte na tlačítko Viditelnost - oční buldor - v pravém horním rohu panelu.
Vyberte tlačítko a klikněte na tlačítko Interakce - blesk Bolt - ve vlastnostech. Po otevření panelu Interakce vyberte možnost Nová interakce. Zvolte možnost Klepněte na tlačítko Spouštění. V oblasti Akce vyberte Zobrazit prvek. Nyní se vás zeptáte, který prvek se zobrazí. Jednou klikněte na guličku a klikněte na vstupní prvek. S tímto identifikovaným prvkem můžete nyní určit, zda chcete prvek animovat. V tomto případě jsem se rozhodl ukázat vstupní pole s lehkostí a šel s výchozí hodnotou trvání 300 ms.
Také chci, aby se tlačítko po kliknutí pohybovalo kolem 65 pixelů doprava. Vybrala jsem tlačítko, otevřela panel Interakce a vybraná nová interakce . Tyto nastavení jsem použil:
- Trigger : Klikněte na
- Akce: Přesunout
- Směr pohybu : 65 px na ose x
- Animace : Lineární
- Doba trvání: 300 ms
Chcete-li odebrat interakci, vyberte prvek a otevřete panel Interakce. Vyberte interakci na panelu a klepnutím na koš se smazat.
09 z 09
Jak testovat vaši stránku v UXPin
Vzhledem k tomu, že pracujete v prohlížeči, testování je mrtvé jednoduché. Klepněte na tlačítko Simulate Design . Stránka se otevře v prohlížeči a můžete testovat. K dispozici bude také panel přidaný do levé strany stránky, který umožňuje komentáře, Mapa stránek, pokud existuje více stránek, testování použitelnosti, sdílení v reálném čase, editace a návrat na řídicí panel.
V dolní části stránky je další malý panel, který vám umožní zobrazit interaktivní prvky, zobrazit nebo skrýt komentáře a sdílet projektové spojení s ostatními.