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.
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.
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 09Jak přidat element na stránku UXPin
Začátek jsem přetáhl prvek Box na plochu designu a při uvolnění myši Panel vlastností se otevře. 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 09Jak 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. Klepněte na vlastnost Text pro otevření vlastností písma a formátování textu. Pokud potřebujete blok fiktivního textu, přidejte textový prvek a klikněte na tlačítko GENERUJTE LOREM IPSUM ve vlastnostech písma.
06 z 09Jak přidat obrázek na stránku UXPin
Existuje několik způsobů, jak tento úkol splnit. Můžete použít Image Tool v panelu nástrojů přidejte prvek obrázku z knihovny nebo jednoduše přetáhněte obrázek z pracovní plochy na prvek na konstrukčním povrchu, jak je znázorněno výše.
07 ze dne 09Jak přidat tlačítko na stránku UXPin
I když je prvek "Button", zadání " Tlačítko " do Vyhledávání oblast, jak je uvedeno výše, otevře všechna tlačítka nalezená 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 09Jak 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 klikněte na tlačítko Vlastnosti a, když Vlastnosti prvku klikněte na tlačítko Viditelnost tlačítko oka - v pravém horním rohu panelu.
Vyberte tlačítko a klepněte na tlačítko Tlačítko interakcí - Lightning 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. Vybral jsem tlačítko, otevřel panel Interakce a vybral Nová interakce. Tyto nastavení jsem použil:
- Spoušť: Klikněte na
- Akce: Přesunout
- Přesunout směr: 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 09Jak 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 Simulace návrhu tlačítko. 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.
