Como criar Prottipos Interativos com o Visio

Postado por: Pedro Rogrio em 23 de abril de 2008

23ABR

Se voc ir mostrar a um cliente o desenho do site em um papel, sabe o valor de apresent-lo em uma verso interativa com links. Os usurios do Visiosabem que muito simples criar prottipos interativos em HTML a partir de um set deWireframes (Arquivo > Salvar como pgina Web). Mas dessa forma ocorre uma desvantagem se voc precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, sero criados muitos arquivos HTML e vrias imagens. Os PDFs so ideais para serem enviados por email, mas leva-se tempo para criar prottipos interativos em PDF com o Visio. Abaixo voc ver um tutorial de como fazer isso:
1. Crie links nas pginas de primeiro plano, no nas de segundo plano utilize os stencils do documento para gerenciar suas modificaes.

 uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das pginas topo, contedo, navegao em uma pgina de fundo (background), assim os elementos se repetem em cada pgina de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio no cria links para as camadas de background. Para criar prottipos interativos em PDF eles devem estar na pgina em primeiro plano. Isso significa que para uma distribuio de pgina standard, todos os elementos de navegao devem estar em cada pgina do wireframe. Poderia-se copiar e colar os elementos de navegao em cada pgina, mas isso seria um trabalho duro. Ao invs disso, utilize os stencils do documento. Funciona assim:

1.1 Crie um painel de navegao, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da pgina, cosntrua cada aba em um bloco de texto separado. 1.2 Para adicionar links, aperte CTRL + K para abrir o quadro de dilogos de links. Depois de adicionar o Sub-link (no o link direto), clique em browse (examinar) e encontre a pgina que est seu wireframe, ao qual deseja linkar (ou introduza a URL). 1.3 Repita o primeiro e o segundo passo sempre que necessrio. Uma vez que estiver pronto o painel de navegao, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G). 1.4 Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento. 1.5 Arraste os elementos agrupados de navegao ao painel de Stencils. 1.6 Clique com o boto direito sobre o grupo de elementos e renomeios (por exemplo: NavBar). 1.7 Em cada pgina de seu wireframe, arraste oe elementos sobre a pgina de primeiro plano e os coloque em sua posio. 1.8 Se necessitar fazer modificaes no grupo de navegao, clique com o boto direito sobre o Stencil do documento, e selecione Edio Mestre > Edio de forma Mestre. Qualquer modificao feita ser atualizada automaticamente em qualquer pgina. 2. Utilize o menu PDF no Visio, ao invs de imprimir atravs do Adobe PDF no menu de impresso. Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razo, se utilizar Arquivo >

Imprimir e escolher Adobe PDF como impressora, os links do PDF no funcionam. O resultado final ser links funcionando em cada pgina. Para alterar os estados dos botes ou criar outros elementos interativos, necessrio editar os arquivos no Acrobat Leve-o ao nvel seguinte. Esse artigo de Boxes & Arrows uma fantstica reviso de como criar prottipos em PDF clicveis com camadas, multimdia e muito mais. Foi centrado no uso avanado das ferramentas de edio do Acrobat

Referncias

elclerigo! Cmo crear prototipos interactivos en PDFs desde Visio