1
1
	
  
Meu	
  primeiro	
  protótipo	
  no	
  Axure	
  7.01
	
  
	
  
	
  
Etapa	
  inicial	
  
	
  
	
  
	
  
Crie	
  um...
2
2
	
  
	
  
B.	
  Adicione	
  um	
  link	
  
	
  
	
  
	
  
1.	
   Clique	
   no	
   “Quick	
   Link”.	
   Com	
   o	
  ...
3
3
	
  
	
  
C.	
  Publique	
  o	
  protótipo	
  no	
  serviço	
  de	
  hospedagem	
  na	
  nuvem,	
  Axure	
  Share	
  
...
4
4
D.	
  Gere	
  os	
  arquivos	
  HTML	
  localmente	
  
	
  
	
  
	
  
	
  
	
  
1.	
   Clique	
   no	
   ícone	
   “Pu...
5
5
	
  
Trabalhando	
  com	
  Páginas	
  
	
  
	
  
	
  
Crie	
  um	
  novo	
  arquivo	
  
	
  
A.	
  Organize	
  as	
  p...
6
6
	
  
B.	
  Mostrar	
  a	
  grade	
  (Grid)	
  e	
  criar	
  guias	
  (Guides)	
  
	
  
	
  
	
  
1.	
   Abra	
   a	
  ...
7
7
	
  
C.	
  Adicionando	
  uma	
  página	
  guia	
  única	
  
	
  
	
  
	
  
1.	
   Arraste	
   a	
   guia	
   da	
   r...
8
8
	
  
D.	
  Centralize	
  a	
  página	
  
	
  
	
  
	
  
1.	
   Selecione	
   a	
   aba	
   de	
   formatação	
   da	
 ...
9
9
	
  
	
  
E.	
  Mudar	
  a	
  cor	
  de	
  fundo	
  de	
  todas	
  as	
  páginas	
  
	
  
	
  
	
  
1.	
  Abra	
  o	
 ...
Próximos SlideShares
Carregando em…5
×

Meu primeiro protótipo no Axure 7.0

1.631 visualizações

Publicada em

Referência:

AXURE. CORE TRAINING #1: Getting Started. Disponível em <http: />. Acesso em Abr 2014.

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.631
No SlideShare
0
A partir de incorporações
0
Número de incorporações
109
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Meu primeiro protótipo no Axure 7.0

  1. 1. 1 1   Meu  primeiro  protótipo  no  Axure  7.01       Etapa  inicial         Crie  um  novo  arquivo     A.  Crie  um  botão  azul         1.   Clique   e   arraste   o   botão   forma   (Button   Shape)   do   painel   Widgets   (componentes)   para   a   página   no   painel  Wireframe.   2.   Edite   o   texto   para   “Next   Page”   (Nova   Página).   Com   o   botão   selecionado,   digite   “Próxima   página”   para  editar  o  texto  do  widget.   3.  Mude  a  cor  para  azul.  Selecione  a   cor   azul   usando   o   botão   de   preenchimento,   na   barra   de   ferramentas.         1   Traduzido   pela   Profa.   Daniela   Carvalho   Monteiro   Ferreira,   para   a   disciplina   de   Web   Design,   nos   cursos   de   Publicidade   e   Relações   Públicas   E-­‐mail:   daniela.carvalho@esamc.br.  Abr  2014.  Blog:  http://colecaoaprender.blogspot.com.br  
  2. 2. 2 2     B.  Adicione  um  link         1.   Clique   no   “Quick   Link”.   Com   o   botão   selecionado,   clique   na   opção   “Quick  Link”  (link  rápido)  do  painel  de   propriedades   do   widget   (componente).   2.  Selecione  a  página  1.  Na  caixa  de   diálogo   “Link   Properties”,   selecione   Page  1.   3.   Clique   em   Preview.   Clique   no   botão  “Preview”                                
  3. 3. 3 3     C.  Publique  o  protótipo  no  serviço  de  hospedagem  na  nuvem,  Axure  Share             1.  Clique  no  ícone  “AxShare”.  Clique   no   ícone   “AxShare”   na   barra   de   ferramentas.   2.  Crie  uma  conta.  Com  a  aba  “Create   Account”  selecionada,  entre  com  seu   e-­‐mail  e  senha  e  depois  marque  para   concordar   com   os   termos   de   utilização.   3.   Clique   em   publicar.   Clique   no   botão   “Publish”   para   obter   o   link   (URL)  para  compartilhar.          
  4. 4. 4 4 D.  Gere  os  arquivos  HTML  localmente             1.   Clique   no   ícone   “Publish”.   Clique   no   ícone   “Publish”   na   barra   de   ferramentas.   2.   Crie   em   “Generate   HTML   Files”   (Gerar   arquivos   HTML).   Selecione   “Generate  HTML  Files.   3.   Clique   em   “Generate”   (Gerar).   Clique  no  botão  “Generate”.     Nota:  Para  visualizar  os  arquivos  locais  no   Chrome  é  necessário  uma  Extensão.                 Referência:     AXURE.   CORE   TRAINING   #1:   Getting   Started.   Disponível   em   <http://www.axure.com/learn/core/getting-­‐started>.   Acesso  em  Abr  2014.        
  5. 5. 5 5   Trabalhando  com  Páginas         Crie  um  novo  arquivo     A.  Organize  as  páginas  no  mapa  do  site  (painel  Sitemap)         1.   Arraste   a   Page   3   para   cima.   Clique   e   arraste   a   Page  3  um  pouco  acima  e  à   direita  da  Page  2.   2.   Clique   com   o   botão   direito  para  deletar  a  Page   2.   Selecione   a   Page   2   no   painel  Sitemap,  clique  bom   o  botão  direito  e  selecione   Delete  no  menu  contextual.   3.   Adicione   uma   nova   página   (New   Page).   Selecione  a  Page  3  e  clique   com   o   botão   direito.   Selecione  Add  >  Child  Page   no  menu  contextual.   4.   Renomeie   as   páginas.   Clique   uma   vez   com   o   botão   esquerdo   para   renomear   a   nova   página.   Coloque   o   nome   de   “Last   Page”   (Última   Página).   Renomeie   a   “Page   3”   para   “Page  2”.            
  6. 6. 6 6   B.  Mostrar  a  grade  (Grid)  e  criar  guias  (Guides)         1.   Abra   a   Última   Página.   Duplo  clique  na  “Last  Page”   (Última   Página),   no   painel   SiteMap.       Isto   abrirá   uma   nova   aba   no  painel  Wireframe.   2.   Ative   a   grade.   Clique   com   o   botão   direito   no   Wireframe  e  selecione  Grid   and   Guides   >   Show   Grid   (Mostrar  grade).   3.   Crie   guias.   Clique,   novamente,   com   o   botão   direito   no   Wireframe   e   selecione  Grid  and  Guides  >   Create  Guides.   4.   Selecione   Preset.   Selecione   a   opção   “960   Grid:  12  Column  option”.     5.   Clique   Ok.   Clique   no   botão   Ok   para   criar   as   guias.            
  7. 7. 7 7   C.  Adicionando  uma  página  guia  única         1.   Arraste   a   guia   da   régua.   Clique   e   arraste  do  topo  da  régua  para  dentro   do   Wireframe,   para   criar   a   página   guia  em  Y:35.     Pressionando   a   tecla   Ctrl   (tecla   Cmd   nos   Macs)   enquanto   a   ação   de   arrastar   cria   uma   guia   global   (Global   Guide).   2.   Arraste   e   solte   um   widget   de   imagem.   Arraste   um   widget   de   imagem   do   painel   Widgets   e   o   solte   quando   o   contorno   da   esquerda   encostar   na   guia   em   X:90   e   o   contorno   do   topo   encostar   na   guia   em  Y:35.   3.   Redimensione   o   widget.   Clique   e   arraste  a  alça  de  seleção  da  imagem   até  encostar  na  guia  em  X:230.            
  8. 8. 8 8   D.  Centralize  a  página         1.   Selecione   a   aba   de   formatação   da   página   (Page   Formatting).   Selecione   a   aba   Page   Formatting   no   painel   Page  Properties  (propriedade  da  página).   2.  Centralize  a  página.  Selecione  o  botão  de  alinhamento   centralizado   para   que   a   página   seja   centralizada   no   protótipo  gerado.            
  9. 9. 9 9     E.  Mudar  a  cor  de  fundo  de  todas  as  páginas         1.  Abra  o  editor  de  estilos  da  página.   Clique  no  botão  do  campo  Page  Style   para   fazer   as   mudanças   de   formatação  para  todas  as  páginas.   2.   Selecione   a   cor.   Na   janela   Page   Style   Editor,   selecione   uma   cor   de   fundo.   3.  Clique  OK.  Clique  no  botão  OK  para   mudar  a  cor  de  fundo.         Gere  o  protótipo     Visualize  o  protótipo,  clique  em  “Preview”.  As  mudanças  realizadas  no  painel  Sitemap  são  refletidas  no  mapa  do  site   (sitemap)  do  protótipo.  Note  que  a  cor  de  fundo  de  todas  as  páginas  foi  alterada  porque  foi  mudado  o  estilo  padrão  no   editor  de  estilos  (Page  Style  Editor).  O  widget  (componente)  da  imagem  está  na  Última  Página  (Last  Page).       Referência:     AXURE.  CORE  TRAINING  #2:  Working  with  Pages.  Disponível  em  < http://www.axure.com/learn/core/pages  >.  Acesso   em  Abr  2014.    

×