01 de 09
Como comezar mesmo con UXPin
A medida que nos movemos cara ao ámbito do deseño móbil, o deseño de aplicacións e o deseño sensible, aumentou o foco en UX (User Experience) e wireframing , prototipos interactivos e maquetas. Hai un monte de ferramentas alí destinadas a este nicho e executan toda a gama de follas complexas e cargadas de recursos para escasas e pouco útiles. Unha das ferramentas que máis me chamou a atención é UXPin simplemente porque foi deseñada polos deseñadores para os deseñadores.
Antes de avanzar ... unha advertencia. Se a túa é unha organización que prefire ter o software, entón UXPin non é para ti. Todo o traballo feito nesta aplicación faise no navegador e os proxectos que garda están gardados na túa conta.
Para comezar con UXPin vostede lanza un navegador e diríxese a UXPin. A partir de aquí pode rexistrarse para unha proba gratuíta ou organizar un plan mensual baseado na súa necesidade prevista. O proceso de inscrición é moi sinxelo e unha vez que configurou o seu nome de usuario e contrasinal, está listo para comezar.
02 de 09
Como iniciar un proxecto en UXPin
Cando inicia sesión chegará ao panel de control e, desde aquí pode optar por crear un novo cadro, un novo proxecto móbil ou un proxecto de Deseño Web Responsive. Tamén hai plugins para UXPin que che permitirán traer os teus proxectos de Photoshop ou Sketch. Para iso Como vou crear un pancarta con algún texto e engadir un botón de correo electrónico ao pancarta. Para lograr isto, seleccionei Crear unha fila nova.
03 de 09
Como usar a interface UXPin
A superficie de deseño divídese en catro áreas. Na área negra á esquerda hai unha serie de ferramentas que lle permiten volver ao panel de control, abra os Elementos que vai usar, abra o panel Smart Elements, busca elementos, engade notas á páxina e engade membros do equipo. Na parte inferior hai un botón que abre un pequeno tutorial, outro que lle permite acceder á súa conta e outra que accede ás preguntas frecuentes, faga preguntas e mesmo envíe comentarios.
Na zona azul ao longo da parte superior hai unha serie de ferramentas e propiedades. Os botóns máis escuros do lado dereito permítenlle iterar o deseño, axustar a configuración do proxecto, compartir a páxina e facer unha simulación dentro da páxina da páxina.
O panel de elementos é onde se agarran os bits e pezas para a superficie de deseño, nomee o seu proxecto e engada ou elimine páxinas.
A biblioteca Elements é unha grata sorpresa para os deseñadores de UX. Este pop down permíteche escoller entre 30 bibliotecas que van desde iOS ata Android Lolipop. Tamén ten acceso aos elementos Bootstrap e Foundation xunto coas iconas Font Awesome, íconos de xestos para móbil e unha colección de Social Widgets.
04 de 09
Como engadir un elemento a unha páxina de UXPin
Para comezar, arrastrou o elemento Caixa á superficie de deseño e, cando libero o rato, ábrese o panel Propiedades . O botón Propiedades permítelle nomear o elemento e establecer o alto do ancho do elemento e os valores de posición. Tamén pode engadir o acolchado ao elemento, completar as esquinas e axustar a súa opacidade. Ao facer clic no botón Cor de fondo ábrese un selector de cores RGBA.
Tamén pode asignar unha fonte, borde e patrón ao elemento seleccionado. O Lightning Bolt dálle a capacidade de engadir interactividade a un elemento seleccionado.
05 de 09
Como engadir e formatear texto en UXPin
Para engadir texto, arrastre o elemento de texto á superficie de deseño e insira o seu texto. Fai clic no botón Propiedades de texto para abrir as propiedades da fonte e formatear o texto. Se precisa un bloque de texto ficticio, engada un elemento de texto e faga clic no botón GENERATE LOREM IPSUM nas propiedades da fonte.
06 de 09
Como engadir unha imaxe a unha páxina UXPin
Existen algunhas formas de realizar esta tarefa. Podes usar a ferramenta de Imaxe na barra de ferramentas, engadir un elemento de imaxe da biblioteca ou simplemente arrastrar e soltar unha imaxe do seu escritorio sobre o elemento da superficie de deseño como se mostra arriba.
07 de 09
Como engadir un botón a unha páxina UXPin
Aínda que hai un elemento de Botón, ingresando " Botón " na área de Buscar , como se mostra arriba, ábrese todos os botóns atopados en todas as Bibliotecas. Arrastra o que traballa para ti na superficie de deseño e usa as Propiedades para cambiar a cor, a fonte e mesmo o radio do borde. Para cambiar o texto dentro do botón, prema unha vez no texto e introduza o novo texto.
08 de 09
Como engadir interactividade a unha páxina de UXPin
Isto non é tan complicado como pode aparecer por primeira vez. Para a entrada de correo electrónico, agreguei un elemento de entrada, cambie o tamaño, introduciu o texto e formatee o texto. Co elemento de entrada seleccionado prema no botón Propiedades e, cando aparezan as propiedades do elemento, faga clic no botón Visibilidade- o globo ocular-na esquina superior dereita do panel.
Seleccione o botón e faga clic no botón Interaccións - o Lightning Bolt- nas propiedades. Cando se abre o panel Interaccións, seleccione Nova interacción. Seleccione Prema desde o menú emerxente Trigger. Na área de Acción, seleccione Mostrar elemento. Agora preguntaráselle que elemento se mostrará. Fai clic unha vez sobre o GunSite e fai clic no elemento Entrada. Co elemento identificado, agora pode determinar se animar ou non o elemento. Neste caso, decidín mostrar a caixa de entrada con facilidade e foi co valor de duración predeterminado de 300ms.
Tamén quero que o botón mova uns 65 píxeles á dereita cando se faga clic. Seleccionei o botón, abriu o panel de Interaccións e seleccionei New Interaction . Eu usei estas opcións:
- Trigger : fai clic
- Acción: Mover por
- Movemento de dirección : 65 px no eixo x
- Animación : lineal
- Duración: 300 ms
Para eliminar unha interacción, seleccione o elemento e abra o panel Interaccións. Seleccione a interacción no panel e faga clic na papeleira para borralo.
09 de 09
Como probar a túa páxina en UXPin
Debido ao feito de que está a traballar no navegador, a proba é simple morto. Faga clic no botón Simular deseño . A páxina abrirase no navegador e poderás probar a forma. Tamén haberá un panel engadido ao lado esquerdo da páxina que permite comentarios, un Mapa do sitio se hai varias páxinas, probas de usabilidade, compartición en directo, edición e regreso ao taboleiro.
Na parte inferior da páxina hai outro pequeno panel que permite mostrar os elementos interactivos, amosar ou ocultar comentarios e compartir a ligazón do proxecto con outros.