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

1. Axure 6.5
SENAC – abril 2014
Professor: Hélio Eduardo Lopes

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. Wireframes e Programas
de Prototipação
Parte I
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

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. 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. 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. Áreas & Guides
Parte II
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

8. Areas & Guides
> Sitemap

9. Sitemap
 Adicionar e remover páginas
 Mover
 Nomear e renomear
 Design
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

10. Areas & Guides
> Wireframe e Flow

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. 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. Areas & Guides
> Masters

14. Masters
 Adicionar e remover Folders
 Adicionar e remover Masters
 Mover
 Nomear e renomear
 Design
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

15. Areas & Guides
> Painel

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. Areas & Guides
> Área de
Textos
Descritivos

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. Areas & Guides
Footnotes & Labels <

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. Areas & Guides
Dynamic Panel Manager <

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. Interações
Parte III
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

24. Interações - Links

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. Interações – Dynamic Panels
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

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. Interações – Widgets and Variables
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

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. Interações – Miscellaneous and Others
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

31. Interações – Miscellaneous and Others
Wait Time (ms)
Other
Tempo de espera (ms)
outro
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

32. Dicas
Parte IV
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

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. 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. 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. Obrigado!
Hélio Eduardo Lopes
@helio1972
helio1972@gmail.com
(21) 98151.5727
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
foto