axure 6.5 prototipação - pós-graduação senac - turma 2013-2014
DESCRIPTION
Apostila para apresentação do software de prototipaçãqo Axure 6.5 para turma de pós-graduação do Senac-2013.TRANSCRIPT
Axure 6.5SENAC – abril 2014
Professor: Hélio Eduardo Lopes
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
Wireframes e Programas de Prototipação
Parte I
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
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
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
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 & GuidesParte II
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
Areas & Guides
> Sitemap
Sitemap
Adicionar e remover páginas
Mover
Nomear e renomear
Design
SENAC – abril 2014 - Professor: Hélio 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: Hélio 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: Hélio Eduardo Lopes
Areas & Guides
> Masters
Masters
Adicionar e remover Folders
Adicionar e remover Masters
Mover
Nomear e renomear
Design
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
Areas & Guides
> Painel
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
Areas & Guides
> Área de Textos Descritivos
Á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
Areas & Guides
Footnotes & Labels <
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
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 páginas e masters
Inserir guias
Movimentar barras de rolagem
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
InteraçõesParte III
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
Interações - Links
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
Interações – Dynamic Panels
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
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
Interações – Widgets and Variables
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
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
Interações – Miscellaneous and Others
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
Interações – Miscellaneous and Others
Wait Time (ms) Other
Tempo de espera (ms) outro
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
DicasParte IV
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
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!!!
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/
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
Obrigado!
Hélio Eduardo Lopes@[email protected](21) 98151.5727
SENAC – abril 2014 - Professor: Hélio Eduardo Lopes
foto