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

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


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.


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


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!!!





http://iplotz.com/

http://iplotz.com/



http://www.lumzy.com/

http://www.lumzy.com/

Áreas & GuidesParte II


Areas & Guides

> Sitemap

Sitemap

Adicionar e remover páginas

Mover

Nomear e renomear

Design


Areas & Guides

> Wireframe e Flow

Widgets

Wireframe

Utilizar Default Library

Inserir itens

Criar novas Libraries

Fazer Download de outras Libraries

Fazer Flows


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/











Areas & Guides

> Masters

Masters

Adicionar e remover Folders

Adicionar e remover Masters

Mover

Nomear e renomear

Design


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


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


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


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


InteraçõesParte III


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


Interações – Dynamic Panels


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


Interações – Widgets and Variables


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


Interações – Miscellaneous and Others


Interações – Miscellaneous and Others

Wait Time (ms) Other

Tempo de espera (ms) outro


DicasParte IV


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/

http://www.axure.com/

http://www.axure.com/



http://www.axureland.com/

http://www.axureland.com/



http://axureland.com/axure-tutorials/

Vídeos interessantes!

Canal Axure no You Tube Tutoriais gerais:

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


foto

mailto:[email protected]

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

Internet

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