Top Banner
1 1 Widgets e Masters 1 Componentes e Objetosmestre Crie um novo arquivo A. Adicione um botão (Button Shape) e aplique o estilo rollover (quando o mouse passa por cima) 1. Clique e arraste o botão (Button Shape) do painel Widgets (componentes) para a página no painel Wireframe. 2. Abra a janela de estilo do rollover. Clique com o botão direito próximo ao botão e selecione [Edit Button Shape > Edit Rollover Style]. 3. Marque Bold (negrito) e Fill Color (cor de preenchimento). Marque as caixas para Bold e Fill Color. Depois, selecione a cor cinza na paleta de cores e clique em OK. 1 Traduzido pela Profa. Daniela Carvalho Monteiro Ferreira, para a disciplina de Web Design, nos cursos de Publicidade e Relações Públicas Email: [email protected]. Nov 2013. Blog: http://colecaoaprender.blogspot.com.br
7

Axure widgets masters

Jul 08, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Axure widgets masters

1

1

 

Widgets  e  Masters1    

 Componentes  e  Objetos-­‐mestre  

   

 Crie  um  novo  arquivo  

 

A.  Adicione  um  botão  (Button  Shape)  e  aplique  o  estilo  rollover  (quando  o  mouse  passa  por  cima)    

   1.   Clique   e   arraste   o   botão   (Button  Shape)   do   painel   Widgets  (componentes)   para   a   página   no  painel  Wireframe.  

2.  Abra  a  janela  de  estilo  do  rollover.  Clique   com   o   botão   direito   próximo  ao   botão   e   selecione   [Edit   Button  Shape  >  Edit  Rollover  Style].  

3.  Marque  Bold   (negrito)  e   Fill   Color  (cor   de   preenchimento).   Marque   as  caixas   para   Bold   e   Fill   Color.   Depois,  selecione   a   cor   cinza   na   paleta   de  cores  e  clique  em  OK.  

   

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:  [email protected].  Nov  2013.  Blog:  http://colecaoaprender.blogspot.com.br  

Page 2: Axure widgets masters

2

2

   

 B.  Duplique  e  distribua  os  botões    

   1.   Arraste   (Drag)   para  copiar.   Pressione   a   tecla  [Ctrl]   e   arraste   o  componente   (widget)   de  botão.   Se   você   estiver  usando   um  Mac,   pressione  a   tecla   [Option].   Faça   a  mesma   ação   3   vezes   para  ter,  ao  final,  4  botões.  

2.   Selecione   os   botões  (widgets).   Selecione   todos  os   botões   clicando   com   o  botão   esquerdo   do   mouse  enquanto  arrasta  a  área  de  seleção   para   todos   os  botões.  

3.   Alinhe   e   distribua.   Com  todos   os   botões  selecionados,   clique   nos  botões  Alinhar  centralizado  (Align   Middle)   e   depois  Distribuir   horizontalmente  (Distribute  Horizontally),  na  barra   de   ferramentas  (Toolbar).  

4.  Edite  o  texto  dos  botões.  Selecione   e   depois   nomeie  cada   botão   conforme  mostrado   na   imagem.   Eles  devem   ter   o  mesmo   nome  correspondente   às   páginas  no   painel   Sitemap:   Home;  Page  1;  Page  2  e  Page  3.  

         

Page 3: Axure widgets masters

3

3

       

C.  Converta  os  botões  em  objeto-­‐mestre      

     1.Selecione   os   botões.  Clique   e   arraste   para  selecionar   os   quatro  botões.  

2.  Converta-­‐os  para  objeto-­‐mestre   (Master).   Clique  com   o   botão   direito   e  depois  selecione  [Convert  >  Convert  to  Master].  

3.   Nomeie   o   objeto-­‐mestre.   Nomeie   o   objeto-­‐mestre   para  “NavigationHeader”.  

4.   Clique   “Continue”  (continuar).   Clique   no  botão  “Continue”  para  criar  o  objeto-­‐mestre.  

           

Page 4: Axure widgets masters

4

4

 

D.  Mude  o  objeto-­‐mestre  (Master)  para  fundo  da  página  (background)    

   1.   Abra   o   objeto-­‐mestre.  Duplo   clique   no  “NavigationHeader”   para  abrir  o  painel  Wireframe.  

2.   Selecione   os   botões.  Clique   e   arraste   para  selecionar   todos   os   quatro  botões.  

3.   Mude   a   posição   dos  objetos   manualmente.  Coloque  25  para  o  valor  de  x  e  25  para  o  valor  de  y.  

4.   Configure   o   “Behavior”  (comportamento).   Clique  com   o   botão   direito   do  mouse   no   objeto-­‐mestre  (Master)  no  painel  Masters  e   selecione   [Behavior   >  Place  in  Background].  

         

Page 5: Axure widgets masters

5

5

 E.  Adicione  o  objeto-­‐mestre  em  todas  as  páginas    

   1.   Abra   a   página   Home.  Duplo   clique   na   página  “Home”   no   painel   SiteMap  para   abrí-­‐la   no   painel  Wireframe        

2.   Aplique   o  comportamento  no  objeto-­‐mestre.  Clique  com  o  botão  direito   no   objeto-­‐mestre   e  selecione  [Master  >  Place  in  Background].  

3.   Abra   a   página   Page   1.  Duplo   clique   na   página  “Page  1”  no  painel  SiteMap  para   abri-­‐la   no   painel  Wireframe.  

4.  Arraste   o   objeto-­‐mestre  para   a   página.   Arraste   o  objeto-­‐mestre   do   painel  Masters  e  solte-­‐o  no  painel  Wireframe   para   a   página  “Page  1”    5.   Repetir.   Abra   a   página  Page   2   e   Page   3.   Arraste   e  solte   o   objeto-­‐mestre   para  dentro  de  cada  uma  delas.  

         

Page 6: Axure widgets masters

6

6

 

F.  Adicionar  links  para  os  botões  no  objeto-­‐mestre  (Master)    

   1.   Selecione   o   botão  “Home”.   Abra   o   objeto-­‐mestre  “NavigationHeader”  e   selecione   o   botão  “Home”.  

2.   Clique   em   Quick   Link  (link   rápido).   Clique   no  Quick  Link  no  painel  Widget  Properties.  

3.   Selecione   a   página  Home.   Selecione   a   página  “Home”.    

4.   Clique   Ok.   Clique   no  botão   OK   para   adicionar   o  link.    5.  Repetir.  Repita  os  passos  1-­‐4   para   cada   botão   para  ligá-­‐los   às   suas   respectivas  páginas.  

       

Page 7: Axure widgets masters

7

7

   

 Gere  o  protótipo  

 Gere  o  protótipo.  Passe  o  mouse  por  cima  dos  botões  para  ver  o  efeito  “rollover”  e  clique  neles  para  navegar  entre  as  páginas.  Note  que  os  links  foram  adicionados  uma  vez  no  objeto-­‐mestre  e  foi  aplicado  para  todas  as  páginas.    Referência:    AXURE.  Axure  RP  Training.  Disponível  em  <http://www.axure.com/learn>.  Acesso  em  Out  2013.  AXURE.  Axure  Core  Training.  Disponível  em  <http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>.  Acesso  em  Out  2013.