Você está na página 1de 36

Axure 6.

5
SENAC abril 2014
Professor: Hlio Eduardo Lopes
Estrutura de Aulas
Wireframes e programas de prototipao
Axure
Estrutura do Axure
Interaes
Exemplos
Dicas
Anlise dos Trabalhos alunos



SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Wireframes e Programas
de Prototipao
Parte I
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
O Wireframe
Wireframe um desenho bsico de uma interface, que deve retratar
toda a arquitetura de informao do sistema desejada, retratando
tambm a usabilidade do sistema, a ser feito antes da montagem do
layout, com cores e imagens.

a mais importante entrega para o usurio, que pode ser usada
como base para os desenvolvedores, passando a ser o primeiro
contato entre o ambiente digital e o usurio.
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
O Axure RP
Ferramenta de prototipagem rpida e especificao, voltado para aplicaes
web, desktop e mobile. Oferece recursos para inserir elementos, formatar widgets
e definir interaes, alm de gerar prottipos HTML e especificaes do Microsoft
Word a partir dos diagramas. Verses:
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: Hlio Eduardo Lopes
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!!!
reas & Guides
Parte II
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Areas & Guides
> Sitemap
Sitemap
Adicionar e remover pginas
Mover
Nomear e renomear
Design
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Areas & Guides
> Wireframe e Flow
Widgets
Wireframe
Utilizar Default Library
Inserir itens
Criar novas Libraries
Fazer Download de outras Libraries

Fazer Flows

SENAC abril 2014 - Professor: Hlio Eduardo Lopes
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: Hlio Eduardo Lopes
Areas & Guides
> Masters
Masters
Adicionar e remover Folders
Adicionar e remover Masters
Mover
Nomear e renomear
Design
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Areas & Guides
> Painel
Painel
Adicionar e remover itens
Ver pgina e Masters em desenvolvimento
Abrir e fechar pginas e masters
Inserir guias
Movimentar barras de rolagem
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Areas & Guides
> rea de
Textos
Descritivos
rea de Textos Descritivos
Notas
Explicar dados e informaes necessrias
Interaes
Descrever alteraes
Formatao da pgina
Alterar formatao
Preparar sketches
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Areas & Guides
Footnotes & Labels <
Footnotes & Labels
Notas
Explicar dados e informaes necessrias
Dar o status do item em relao aprovao
Definir o benefcio do item para o projeto
Interaes
Adicionar, editar e remover Cases
Adicionar, editar e remover aes do mouse
Formatao da pgina
Verificar, posicionar e editar itens
Fazer alteraes, fixar e movimentar itens
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Areas & Guides
Dynamic Panel Manager <
Dynamic Panel Manager
Ver status do DP (Dynamic Panel)
Design DP
Adicionar e remover
Mover, habilitar e desabilitar DP
Abrir e fechar pginas e masters
Inserir guias
Movimentar barras de rolagem
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Interaes
Parte III
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Interaes - Links
Interaes
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: Hlio Eduardo Lopes
Interaes Dynamic Panels
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Interaes 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 trs

SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Interaes Widgets and Variables
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Interaes 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 variveis dos Widgets
V at a Regio 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: Hlio Eduardo Lopes
Interaes Miscellaneous and Others
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Interaes Miscellaneous and Others
Wait Time (ms)
Other
Tempo de espera (ms)
outro

SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Dicas
Parte IV
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
Dicas importantes:
Organizao quase tudo: para grandes projetos, trabalhe SEMPRE com
os Masters.
Nomeie os painis dinmicos, seus estados, as imagens... Isso vai te ajudar
MUITO na hora de fazer as interaes!
Verifique sempre se colocou as interaes que voc determinou como
default para as linhas gerais nos itens que tem mais de uma interao.
Coloque sempre em destaque (preferncia:azul) os itens de texto do
prottipo que voc vai clicar. Facilita na apresentao!

E a mais importante: PENSE SEMPRE! Como UX Designer, como cliente e como
usurio. Dessa reunio vir o melhor resultado!!!





Pginas interessantes!
Site oficial
http://www.axure.com/ (acesse e consiga o trial por 30 dias DIGRTIS!!!)
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/



Vdeos 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
Animao com Axure
https://www.youtube.com/watch?v=cgTnd65k8xM




Obrigado!

Hlio Eduardo Lopes
@helio1972
helio1972@gmail.com
(21) 98151.5727
SENAC abril 2014 - Professor: Hlio Eduardo Lopes
foto

Você também pode gostar