Contente
- Configurando nosso protótipo
- Navegando pelas páginas
- Obtendo a entrada do usuário
- Interações e animações
- Temas
- Pensamentos finais
O trabalho de um web designer não é apenas tornar os sites bonitos. Eles também precisam pensar sobre o fluxo de informações e como tornar o aplicativo da web fácil de usar. Freqüentemente, eles acabam usando uma ferramenta como InVision ou Balsamiq para criar uma maquete que dá uma impressão de como o site se comportará.
Mesmo que esses aplicativos façam um bom trabalho, a saída ainda não é um site real. Isso torna difícil validar e experimentar as interações, verificar como o design "se sente" e comunicar às partes interessadas relevantes como a experiência final funcionará.
Neste artigo, estarei trabalhando com AngularJS, uma estrutura de código aberto para a construção de aplicativos da web, que pode ser usada para criar maquetes navegáveis ao vivo em um piscar de olhos. Exploraremos como navegar por diferentes páginas, como usar os dados inseridos pelo usuário nas entradas e dar uma olhada nas animações e interações, tematizando e adicionando comportamento a diferentes elementos HTML, como botões.
Configurando nosso protótipo
A primeira coisa que precisamos fazer é configurar um novo 'index.html', que será o ponto de entrada para nosso aplicativo.Além de vincular aos arquivos CSS e JavaScript específicos de que precisamos para nosso protótipo, sempre precisamos fazer referência a jQuery, angular.js, angular-animate e angular-ux - nessa ordem.
Também precisamos de alguma forma de servir o diretório onde o 'index.html' e os outros arquivos residirão. Para isso, podemos usar o comando npm serve ou python -M SimpleHTTPServer.
Agora precisamos configurar o aplicativo Angular. Este será o único JavaScript que precisaremos codificar para colocar nosso protótipo em execução. O bom é que é apenas um caso de copiar e colar.
body ng-app = "prototype" ng-ctrl = "MainCtrl"> / body> // app.js angular.module ('prototype', ['ngAnimate', 'ux']) .controller ('MainCtrl', function ($ scope) {$ scope.data = {};});
Nosso aplicativo protótipo está configurado. É hora de começar a aprender o que podemos fazer com isso agora.
Navegando pelas páginas
A primeira coisa que todos os protótipos precisam é ser capaz de navegar por diferentes páginas. É assim que aprenderemos e validaremos como as informações fluirão e como o usuário irá interagir com nosso aplicativo.
Para isso, podemos usar a diretiva ux-page da biblioteca angular-ux que adicionamos antes.
body> ux-page name = "Home" home> ng-include src = "'home.html'"> / ng-include> / ux-page> ux-page name = "Detalhes"> ng-include src = " 'detail.html' "> / ng-include> / ux-page> / body>! - home.html ->! -… -> a href =" "ux-go =" Detalhes "> Vá para a página Detalhes / a>
Nesse caso, estamos criando duas páginas diferentes. O conteúdo de cada uma dessas páginas está em arquivos separados que incluímos usando a diretiva ng-include. Observe que adicionamos o atributo home à ux-page que será a principal (exibida por padrão). Também podemos colocar o conteúdo HTML incorporado em index.html. Criar novos arquivos para cada página ajuda a manter as coisas legíveis e fáceis de manter.
Então, em 'home.html', temos um link que leva o usuário à página Detalhes. Para isso, estamos usando a diretiva ux-go com o nome da página que queremos navegar. É importante observar que você deve colocar href = "" no link para que seja clicável.
Obtendo a entrada do usuário
Outra parte importante da prototipagem é poder salvar algumas informações do usuário para exibir e usar posteriormente no aplicativo.
Para fazer isso, podemos adicionar a diretiva ng-model a qualquer elemento input> existente:
! - home.html -> input type = "text" ng-model = "data.message" name = "name" />
Isso significa que tudo o que o usuário digitar no nome de entrada será salvo na variável de mensagem de nossos dados. Lembre-se de sempre salvar os valores inseridos em alguma variável dentro dos dados.
Podemos simplesmente exibir essas informações em qualquer página de nosso protótipo usando {{}}:
! - details.html -> p> A mensagem inserida pelo usuário é {{data.message}} / p>
Interações e animações
Também queremos ser capazes de ver como as interações fluirão no site que estamos fazendo o protótipo. Isso significa que precisamos fazer nossa maquete mostrar e ocultar o conteúdo e adicionar animações para as transições entre os diferentes estados do aplicativo.
Para mostrar e ocultar parte do conteúdo da página, você pode usar as diretivas ng-show e ng-hide junto com alguns valores booleanos (sim / não), que indicarão se o conteúdo precisa ser exibido ou não.
button ng-click = "data.contentShown = true"> Mostrar conteúdo / botão> div ng-show = "data.contentShown"> p> Este é o conteúdo! / p> a href = "" ng-click = "dados .contentShown = false "> Ocultar conteúdo / a> / div>
Primeiro, estamos usando ng-click para lidar com o evento de clique no botão Mostrar conteúdo. Nesse caso, estamos definindo a variável contentShown como true. Então, usando ng-show, dizemos apenas que div.content será mostrado se contentShown for true. ng-hide funciona da mesma maneira que ng-show.
Agora queremos animar a forma como esse conteúdo é exibido ou oculto, para dar uma impressão mais completa de como o aplicativo se sentirá para o usuário. Para isso, usaremos o ngAnimate. As classes ng-hide-remove e ng-hide-add são adicionadas momentaneamente quando um elemento é mostrado ou escondido respectivamente.
Portanto, podemos escrever uma animação para nosso div.content da seguinte maneira:
// O conteúdo está sendo mostrado .content.ng-hide-remove {// os quadros-chave do bounceIn vêm da animação animate.css lib: bounceIn 1s; -webkit-animation: bounceIn 1s; } // O conteúdo está sendo oculto .content.ng-hide-add {animation: bounceOut 1s; -webkit-animation: bounceOut 1s; }
Você pode aprender mais sobre como adicionar animações na página de documentos do ngAnimate.
Se você deseja animar as mudanças de página, pode usar a mesma abordagem que usamos ao mostrar e ocultar páginas. Ainda queremos usar ng-show, mas aqui precisaremos usar a classe div principal de uma página específica.
Temas
Ao fazer o protótipo, você deseja experimentar diferentes temas (cores, tipografia, tamanhos e assim por diante) ao mesmo tempo, para ver o que funciona melhor.
Para isso, você pode usar o recurso de tema ux do angular-ux:
div ux-themeable> h1> Title / h1> p> Este é algum texto / p> / div>
Primeiro você precisa adicionar a diretiva ux-themeable ao elemento HTML pai que deseja definir como tema. Então, para alterar os temas, você precisa especificar o nome do tema como um parâmetro de consulta na URL do protótipo.
Por exemplo, se você acessar http: // localhost: 3000 / # /? Page = Details & uxTheme = option1, o div.content terá uma classe adicional option1, o que significa que podemos estilizá-lo da seguinte maneira:
div.content.option1 h1 {font-size: 38px; } div.content.option1 p {color: red}
Pensamentos finais
Com as técnicas que aprendemos hoje, estamos prontos para começar a criar nossos protótipos ao vivo e navegáveis. Assim que você começar a usá-lo, adoraria receber alguns comentários sobre o processo! Por favor, tweet suas idéias e sugestões para mim em @mgonto.
Palavras: Martin Gontovnikas
Martin Gontovnikas é um defensor do desenvolvedor no Auth0. Este artigo foi publicado originalmente na edição 269 da revista net.
Gostou disso? Leia isso!
- As 10 melhores ferramentas de maquete da web de 2015
- O melhor guia para design de logotipo
- Modelos de panfletos úteis e inspiradores
