Nesse artigo faremos um protótipo de um sistema com widgets, páginas, links e masters gerando, por fim, a documentação em Word e o protótipo HTML.

Veja o artigo Introdução a prototipação e apresentação do Axure RP 6.5 para qualquer dúvida ou dificuldade com os termos.

Para começar, iniciamos o Axure e criamos um novo documento RP.

Tela inicial do Axure 6.5 RP

Figura 1: Tela inicial do Axure 6.5 RP

Widgets

No próprio site do Axure existe uma lista de bibliotecas de Widgets (uns free, outros não) entre as quais se destacam: Yahoo UI, Metro UI, iOS Library, Android, etc.

Com o sistema aberto, vamos ao bloco Widgets e em seguida clicamos em Wireframe-> Download libraries... Uma página web será carregada contendo uma lista de bibliotecas. Ou simplesmente, abra a página http://www.axure.com/download-widget-libraries.

Passos para baixar uma Biblioteca (library). Deve descompactá-la antes de carregar no programa

Figura 2: Passos para baixar uma Biblioteca (library). Deve descompactá-la antes de carregar no programa

Faremos o download da biblioteca open source AxLib. Ela virá com 10 arquivos separados por tipos (Grids, Inputs, Navegation, etc.). Utilizaremos a biblioteca 10_Grids_AXLIB_02. Neste artigo, testaremos os Widgets que já vêm no próprio Axure.

Pages (páginas)

Neste exemplo, podemos aproveitar as páginas que vêm por padrão: Home, Page 1, Page 2 e Page 3. A página Home pode ser utilizada como a página de Login. A Page 1 como o formulário de um novo usuário, a Page 2 como Esqueceu sua senha e Page 3 como resultado de usuário logado. Logo, renomeamos as páginas da seguinte maneira:

  • Home = Acesso
  • Page 1 = Novo Usuário
  • Page 2 = Esqueceu sua Senha
  • Page 3 = Principal

No bloco Pages Properties Pane – Page Notes podemos descrever o objetivo da página e sua função.

Wireframe Pane (painel de wireframe)

Depois de fazer essas configurações, vamos começar a desenvolver as páginas desse nosso protótipo. Podemos incluir um grid a cada página para aproveitar o alinhamento dos Widgets que usaremos.

Grid na página Acesso. Ela deve estar posicionada nas coordenadas X=0 e Y=0

Figura 3: Grid na página Acesso. Ela deve estar posicionada nas coordenadas X=0 e Y=0

Note também que o Grid será um Master. Ou seja, apenas editando-o uma vez para ser alterado em todas as páginas.

Página de Login

Apesar de já existir um widget (Sign in Panel) com um login e senha prontos, contido na AxLib, construiremos um com os elementos da biblioteca.

Os Widgets são o rectangle, text field, text panel, uma line e button.

Tela Acesso e com a especificação dos seus componentes

Figura 4: Tela Acesso e com a especificação dos seus componentes

Cada elemento/componente/widget deve ser nomeado para que possamos ter facilidade em reconhecê-los diante da criação de eventos. Logo, ao selecionar um elemento, o bloco Widget Properties está habilitado e no campo label digitamos o seu nome (ex. btn_entrar, input do login, text esqueceu_senha, etc.).

Gerando um protótipo

No menu Generate>Prototype (ou apenas F5) podemos gerar um protótipo das nossas páginas. Existem algumas dezenas de configurações que podemos realizar neste ponto, mas por ora definimos o local de destino e o navegador que se abrirá automaticamente.

Caso queira abrir o protótipo em outro momento, vamos ao caminho escolhido anteriormente e abrimos o arquivo index. Às vezes, em um primeiro uso e dependendo do browser, é requerida a instalação de uma extensão. Por exemplo, no Chrome:

https://chrome.google.com/webstore/detail/axure-rp-extension-for-ch/dogkpdfcklifaemcdfbildhcofnopogp

Primeira página do arquivo HTML. Na esquerda, um frame com as páginas e com as notas de cada página (Page Notes)

Figura 5: Primeira página do arquivo HTML. Na esquerda, um frame com as páginas e com as notas de cada página (Page Notes)

Editando os input’s e criando os links das páginas

Nessa página, os campos login e senha mostram os caracteres. E os botões (quando clicados) e o link Esqueceu sua senha? não leva a canto nenhum.

Para esconder os caracteres do campo senha, devemos clicar com o botão direito no input e selecionar a opção Edit Text Field> Mask Text (Password Field).

Podemos atribuir o Enter ao campo senha também. Ao invés de selecionar a opção Edit Text Field, selecionamos a opção Assign Submit Button. Encontramos o button Entrar com o nome que aviamos escolhido: neste caso, btn_entrar.

Ao escolher o btn_entrar(acima), o usuário que já estiver escrevendo no campos senha e pressionar o ENTER lá no protótipo, a página atribuída ao botão será chamada

Figura 6: Ao escolher o btn_entrar(acima), o usuário que já estiver escrevendo no campos senha e pressionar o ENTER lá no protótipo, a página atribuída ao botão será chamada

O próximo passo é atribuir um evento ao botão Entrar. Selecionamos o botão e no bloco Widget Properties, damos um duplo-clique em OnClick. Esta é a única opção para botões, enquanto que para outros tipos de Widgets existem outros tipos de eventos: OnMouseOut, OnKeyUp, OnFocus, etc.

Voltando ao botão Entrar, abrirá uma janela chamada Case Editor. Ela é dividida em quatro passos: Condition (condição), Add Actions(), Organize Actions() e Configure Actions().

Para este nosso exemplo, pulamos para o 2º passo (Add Actions) e escolhemos a opção Open Link in Current Window e no 4º passo (Configure Actions) selecionamos a página Principal. Resumindo: Clique em Entrar e a Página Principal será carregada.

Tela Case Editor

Figura 7: Tela Case Editor

Faremos o mesmo para o texto Esqueceu sua senha (abrirá a página Esqueceu Senha) e o botão Preencher o Cadastro (abrirá a página Novo Usuário).

Abaixo as outras páginas do Esqueceu sua Senha, Preencher Cadastro e Principal.

Tela Principal

Figura 8: Tela Principal

Tela Esqueceu Senha

Figura 9: Tela Esqueceu Senha

Tela Novo Usuário

Figura 10: Tela Novo Usuário

Gerando a especificação e o protótipo final

Finalizamos o nosso exemplo gerando a especificação e a prototipação final. Uma dica bastante útil nesse momento é gerar somente a página que está aberta no Axure. Por exemplo, o protótipo inteiro já foi gerado e caso precise editar a página Acesso, basta fazer a alteração na página, pressionar Ctrl+F5 ou no menu Generate>Regenerate Current Page For Prototype para atualizá-la.

Para gerar a especificação, pressione F6 ou o menu Generate>Specification, e será aberta uma janela com diversas opções (quais páginas, quais masters, notas, etc. ). Sem alterar nada, confirmamos tudo no botão Generate. Abrirá um arquivo .docx com as informações sobre as páginas e elementos utilizados nas páginas.

Lembrando que o atalho F5 gera um novo protótipo de todas as páginas.

Conclusão

Então, pessoal, chegamos ao fim do nosso artigo. Aqui podemos ter uma ideia de como trabalhar com páginas, eventos OnClick, Actions, etc. No início do artigo, fizemos o download de uma library (AxLib) para demonstrar o quanto é simples baixar e carregar esses Widgets. Utilizamos a master 12-column grid, atribuímos o evento aos botões (Entrar, Preencher Cadastro, Enviar Senha pelo Email, Cadastrar Usuário) e por fim geramos o protótipo e o documento com as especificações. O arquivo fonte utilizado nesse artigo estará disponível.

É isso. Caso tenham dúvidas, sugestões ou críticas, não hesitem e comentem. Até a próxima.

Leia também