1
	
  
Meu	
  primeiro	
  protótipo	
  no	
  Axure1	
  
	
  
	
  
Etapa	
  inicial	
  
	
  
	
  

	
  

	
  

Crie	
  um	
...
2

	
  
B.	
  Adicione	
  um	
  link	
  
	
  

	
  
1.	
   Clique	
   no	
   “Quick	
   Link”.	
   Com	
   o	
   2.	
   Se...
3
	
  
	
  

C.	
  Gere	
  o	
  protótipo	
  
	
  
	
  

	
  
	
  
1.	
   Clique	
   no	
   botão	
   “Prototype”.	
   2.	...
4
	
  
	
  
Construindo	
  um	
  framework	
  	
  
(arcabouço	
  /	
  estrutura)	
  

	
  
	
  

	
  

	
  

Crie	
  um	
 ...
5

	
  
B.	
  Mostrar	
  a	
  grade	
  (Grid)	
  e	
  criar	
  guias	
  (Guides)	
  
	
  

	
  
1.	
   Abra	
   a	
   Últi...
6
	
  

C.	
  Adicionando	
  uma	
  página	
  guia	
  única	
  
	
  

	
  
1.	
   Arraste	
   a	
   página	
   guia	
   da...
7
	
  

D.	
  Centralize	
  a	
  página	
  
	
  

	
  
	
  
1.	
   Selecione	
   a	
   aba	
   de	
   formatação	
   da	
 ...
8
	
  
	
  

E.	
  Mudar	
  a	
  cor	
  de	
  fundo	
  de	
  todas	
  as	
  páginas	
  
	
  

	
  
	
  
1.	
  Abra	
  o	
 ...
Próximos SlideShares
Carregando em…5
×

Meu primeiro prototipo_axure

870 visualizações

Publicada em

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
870
No SlideShare
0
A partir de incorporações
0
Número de incorporações
269
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Meu primeiro prototipo_axure

  1. 1. 1   Meu  primeiro  protótipo  no  Axure1       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   “Próxima   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.  Out  2013.  Blog:  http://colecaoaprender.blogspot.com.br   1
  2. 2. 2   B.  Adicione  um  link       1.   Clique   no   “Quick   Link”.   Com   o   2.   Selecione   a   página   1.   Na   janela   3.  Clique  OK.  Clique  no  botão  Ok.   botão   selecionado,   clique   na   opção   “Link  Properties”,  selecione  Page  1.   “Quick  Link”  (link  rápido)  do  painel  de   propriedades   do   widget   (componente).                                 2
  3. 3. 3     C.  Gere  o  protótipo           1.   Clique   no   botão   “Prototype”.   2.   Clique   em   gerar   protótipo.   Clique   Clique  no  botão  “Prototype”  na  barra   no  botão  “Generate”.   de   ferramentas   para   chamar   a   tela   de   gerar  protótipo  (Generate  Prototype).     3.  Crie  uma  pasta.  Quando  aparecer  a   janela   de   alerta,   clique   no   botão   Yes   (Sim).   O  protótipo  será  aberto  no  navegador   padrão.  Clique  no  botão  para  acessar   a  Nova  Página  (Page  1).           Referências:     AXURE.  Axure  RP  Training.  Disponível  em  <http://www.axure.com/learn>.  Acesso  em  Out  2013.   AXURE.  My  First  Prototype.  Disponível  em  <http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>.   Acesso  em  Out  2013.     3
  4. 4. 4     Construindo  um  framework     (arcabouço  /  estrutura)           Crie  um  novo  arquivo   A.  Organização  das  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   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  “Última   Página.   Renomeie   a   “Page   3”  para  “Page  2”.     4
  5. 5. 5   B.  Mostrar  a  grade  (Grid)  e  criar  guias  (Guides)       1.   Abra   a   Última   Página.   Duplo   clique   na   “Ú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   >   Hide   Grid   (Ocultar  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.     5
  6. 6. 6   C.  Adicionando  uma  página  guia  única       1.   Arraste   a   página   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   3.   Redimensione   o   widget.   Clique   e   imagem.   Arraste   um   widget   de   arraste   a   alça   de   seleção   da   imagem   imagem   do   painel   Widgets   e   o   solte   até  encostar  na  guia  em  X:230.     quando   o   contorno   da   esquerda   encostar   na   guia   em   X:90   e   o   contorno   do   topo   encostar   na   guia   em  Y:35.   6
  7. 7. 7   D.  Centralize  a  página         1.   Selecione   a   aba   de   formatação   da   página   (Page   2.  Centralize  a  página.  Selecione  o  botão  de  alinhamento   Formatting).   Selecione   a   aba   Page   Formatting   no   painel   centralizado   para   que   a   página   seja   centralizada   no   Page  Properties  (propriedade  da  página).   protótipo  gerado.             7
  8. 8. 8     E.  Mudar  a  cor  de  fundo  de  todas  as  páginas         1.  Abra  o  editor  de  estilos  da  página.   2.   Selecione   a   cor.   Na   janela   Page   3.  Clique  OK.  Clique  no  botão  OK  para   Clique  no  botão  do  campo  Page  Style   Style   Editor,   selecione   uma   cor   de   mudar  a  cor  de  fundo.   para   fazer   as   mudanças   de   fundo.   formatação  para  todas  as  páginas.         Gere  o  protótipo     Gere   o   protótipo.   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.     Referência:     AXURE.  Axure  RP  Training.  Disponível  em  <http://www.axure.com/learn>.  Acesso  em  Out  2013.   AXURE.  My  First  Prototype.  Disponível  em  <http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>.   Acesso  em  Out  2013.   8

×