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@helio1972helio1972@gmail.com(21) 98151.5727

SENAC – abril 2014 - Professor: Hélio Eduardo Lopes

foto