Axure 6.5 Prototipação - Pós-Graduação Senac - Turma 2013-2014

970 visualizações

Publicada em

Apostila para apresentação do software de prototipaçãqo Axure 6.5 para turma de pós-graduação do Senac-2013.

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
970
No SlideShare
0
A partir de incorporações
0
Número de incorporações
24
Ações
Compartilhamentos
0
Downloads
32
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Axure 6.5 Prototipação - Pós-Graduação Senac - Turma 2013-2014

  1. 1. Axure 6.5 SENAC – abril 2014 Professor: Hélio Eduardo Lopes
  2. 2. Estrutura de Aulas  Wireframes e programas de prototipação  Axure  Estrutura do Axure  Interações  Exemplos  Dicas  Análise dos Trabalhos alunos SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  3. 3. Wireframes e Programas de Prototipação Parte I SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  4. 4. O Wireframe Wireframe é um desenho básico de uma interface, que deve retratar toda a arquitetura de informação do sistema desejada, retratando também a usabilidade do sistema, a ser feito antes da montagem do layout, com cores e imagens. É a mais importante entrega para o usuário, que pode ser usada como base para os desenvolvedores, passando a ser o primeiro contato entre o ambiente digital e o usuário. SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  5. 5. O Axure RP Ferramenta de prototipagem rápida e especificação, voltado para aplicações web, desktop e mobile. Oferece recursos para inserir elementos, formatar widgets e definir interações, além de gerar protótipos HTML e especificações do Microsoft Word a partir dos diagramas. Versões:  March, 2006, Axure RP Pro 4  July, 2007, Axure RP Pro 4.6  April, 2008, Axure RP Pro 5  October, 2008, Axure RP Pro 5.1  February, 2009, Axure RP Pro 5.5 , August, 2009, Axure RP Pro 5.6 (for Windows)  April, 2010, Axure RP 5.6 (for Mac)  June, 2011, Axure RP 6.0 (for Mac)  April, 2012, Axure RP 6.5  January, 2014 Axure RP 7 SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  6. 6. Outros programas:  Balsamiq:  http://balsamiq.com/products/mockups/  Pencil (open source)  http://pencil.evolus.vn/  iPlotz  http://iplotz.com/  Mockflow  http://www.mockflow.com/  Lumzy  http://www.lumzy.com/ Entre outros!!!
  7. 7. Áreas & Guides Parte II SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  8. 8. Areas & Guides > Sitemap
  9. 9. Sitemap  Adicionar e remover páginas  Mover  Nomear e renomear  Design SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  10. 10. Areas & Guides > Wireframe e Flow
  11. 11. Widgets  Wireframe  Utilizar Default Library  Inserir itens  Criar novas Libraries  Fazer Download de outras Libraries  Fazer Flows SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  12. 12. Widgets – onde encontrar  Onde conseguir icons and libraries  http://www.axure.com/community/widget-libraries  http://www.acleandesign.com/2009/09/social-widget-library-for-axure/  http://www.vectorstock.com/royalty-free-vectors/icons-vectors  http://axureland.com/ SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  13. 13. Areas & Guides > Masters
  14. 14. Masters  Adicionar e remover Folders  Adicionar e remover Masters  Mover  Nomear e renomear  Design SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  15. 15. Areas & Guides > Painel
  16. 16. Painel  Adicionar e remover itens  Ver página e Masters em desenvolvimento  Abrir e fechar páginas e masters  Inserir guias  Movimentar barras de rolagem SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  17. 17. Areas & Guides > Área de Textos Descritivos
  18. 18. Área de Textos Descritivos  Notas  Explicar dados e informações necessárias  Interações  Descrever alterações  Formatação da página  Alterar formatação  Preparar sketches SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  19. 19. Areas & Guides Footnotes & Labels <
  20. 20. Footnotes & Labels  Notas  Explicar dados e informações necessárias  Dar o status do item em relação à aprovação  Definir o benefício do item para o projeto  Interações  Adicionar, editar e remover Cases  Adicionar, editar e remover ações do mouse  Formatação da página  Verificar, posicionar e editar itens  Fazer alterações, fixar e movimentar itens SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  21. 21. Areas & Guides Dynamic Panel Manager <
  22. 22. Dynamic Panel Manager  Ver status do DP (Dynamic Panel)  Design DP  Adicionar e remover  Mover, habilitar e desabilitar DP  Abrir e fechar páginas e masters  Inserir guias  Movimentar barras de rolagem SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  23. 23. Interações Parte III SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  24. 24. Interações - Links
  25. 25. Interações Open link in Current Window Open link in New Window/Tab Open link in Pop Up Window Open link in Parent window Open link(s) in Frame(s) Open link in Parent Frame Abrir link na janela atual Abrir link em uma nova janela / aba Abrir link em Pop Up Abrir link na janela de origem Abrir link(s) no(s) Frame(s) Abrir link no Frame de origem SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  26. 26. Interações – Dynamic Panels SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  27. 27. Interações – Dynamic Panels Set Panel State(s) to State(s) Show Panel Hide Panel Toggle Visibility for Panel Move Panel Bring Panel to front Send Panel to back Definir Estado Panel(s) a Panel(s) Mostrar painel Esconder Painel Alternar visibilidade para Painel Mover Painel Trazer Painel para frente Enviar Painel para trás SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  28. 28. Interações – Widgets and Variables SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  29. 29. Interações – Widgets and Variables Set variable/ Widget Values Scroll to Image Map Region Enable Widget Disable Widget Set Widget to Selected State Set Focus on Widget Expand Tree Note Collapse Tree Note Definir valores das variáveis dos Widgets Vá até a Região da Imagem Mapa Ativar Widget desativar Widget Definir Widget para o State Selecionado Definir Foco no Widget Expandir Tree Note Fechar Tree Note SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  30. 30. Interações – Miscellaneous and Others SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  31. 31. Interações – Miscellaneous and Others Wait Time (ms) Other Tempo de espera (ms) outro SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  32. 32. Dicas Parte IV SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
  33. 33. Dicas importantes:  Organização é quase tudo: para grandes projetos, trabalhe SEMPRE com os Masters.  Nomeie os painéis dinâmicos, seus estados, as imagens... Isso vai te ajudar MUITO na hora de fazer as interações!  Verifique sempre se colocou as interações que você determinou como default para as linhas gerais nos itens que tem mais de uma interação.  Coloque sempre em destaque (preferência:azul) os itens de texto do protótipo que você vai clicar. Facilita na apresentação! E a mais importante: PENSE SEMPRE! Como UX Designer, como cliente e como usuário. Dessa reunião virá o melhor resultado!!!
  34. 34. Páginas interessantes!  Site oficial  http://www.axure.com/ (acesse e consiga o trial por 30 dias DIGRÁTIS!!!)  http://www.axure.com/community  Outras:  http://www.axureland.com  http://colecaoaprender.blogspot.com.br/2013/10/o-que-e-o-axure.html  Colocando som no Axure  http://axureland.com/axure-tutorials/
  35. 35. Vídeos interessantes! Canal Axure no You Tube  Tutoriais gerais:  https://www.youtube.com/watch?v=J2BDVM6Qw5s  https://www.youtube.com/watch?v=J2BDVM6Qw5s  Para mover Dynamic Panels  https://www.youtube.com/watch?v=J4H-X9fxaSU  Animação com Axure  https://www.youtube.com/watch?v=cgTnd65k8xM
  36. 36. Obrigado! Hélio Eduardo Lopes @helio1972 helio1972@gmail.com (21) 98151.5727 SENAC – abril 2014 - Professor: Hélio Eduardo Lopes foto

×